Add password-visibility toggle to login page (TypeScript)
- web/ts/login.ts: small vanilla TS module toggling the password input's type between 'password'/'text' via a 'Show/Hide' button, so users can rule out typos before submitting. Compiled to web/static/login.js (ES module) via tsc (web/tsconfig.json, new 'make web-ts'/'web-assets' Makefile targets) and loaded via <script type="module">. Compiled JS is committed/embedded the same way as the compiled CSS — no Node.js needed at runtime. - Verified end-to-end against the live proxied server (https://local.unqr.dev/web/login): POST /web/login correctly returns 303 + Set-Cookie, and the session then authorizes GET /web/ — the server-side login flow is confirmed working correctly. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
// Login page behavior: adds a "show password" toggle so users can rule
|
||||
// out typos before submitting. Compiled to web/static/login.js via
|
||||
// `make web-js` (see web/tsconfig.json).
|
||||
(function initPasswordToggle(): void {
|
||||
const passwordInput = document.getElementById("password") as HTMLInputElement | null;
|
||||
const toggleButton = document.getElementById("toggle-password") as HTMLButtonElement | null;
|
||||
if (!passwordInput || !toggleButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
toggleButton.addEventListener("click", () => {
|
||||
const showing = passwordInput.type === "text";
|
||||
passwordInput.type = showing ? "password" : "text";
|
||||
toggleButton.textContent = showing ? "Show" : "Hide";
|
||||
toggleButton.setAttribute("aria-pressed", showing ? "false" : "true");
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user