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:
@@ -23,8 +23,14 @@ templ Login(errorMsg string) {
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
|
||||
<input id="password" name="password" type="password" required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 border px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"/>
|
||||
<div class="mt-1 flex gap-2">
|
||||
<input id="password" name="password" type="password" required
|
||||
class="block w-full rounded-md border-gray-300 border px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"/>
|
||||
<button type="button" id="toggle-password" aria-pressed="false"
|
||||
class="shrink-0 rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50">
|
||||
Show
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-full bg-indigo-600 text-white rounded-md py-2 font-medium hover:bg-indigo-700">
|
||||
@@ -32,6 +38,7 @@ templ Login(errorMsg string) {
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<script type="module" src="/web/static/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user