arnefandCopilot
3dc49b6b22
- 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>
45 lines
1.8 KiB
Templ
45 lines
1.8 KiB
Templ
package templates
|
|
|
|
templ Login(errorMsg string) {
|
|
<!DOCTYPE html>
|
|
<html lang="en" class="h-full bg-gray-50">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Login · nidus</title>
|
|
<link rel="stylesheet" href="/web/static/app.css"/>
|
|
</head>
|
|
<body class="h-full flex items-center justify-center">
|
|
<div class="w-full max-w-sm bg-white p-8 rounded-lg shadow-sm border border-gray-200">
|
|
<h1 class="text-xl font-semibold mb-6 text-center">nidus</h1>
|
|
if errorMsg != "" {
|
|
<p class="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">{ errorMsg }</p>
|
|
}
|
|
<form method="POST" action="/web/login" class="space-y-4">
|
|
<div>
|
|
<label for="username" class="block text-sm font-medium text-gray-700">Username</label>
|
|
<input id="username" name="username" type="text" required autofocus
|
|
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>
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
|
|
<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">
|
|
Sign in
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<script type="module" src="/web/static/login.js"></script>
|
|
</body>
|
|
</html>
|
|
}
|