80 lines
3.1 KiB
HTML
80 lines
3.1 KiB
HTML
{{define "content"}}
|
|
<div id="auth-form">
|
|
<h2 class="text-xl font-semibold text-white mb-6">Sign in to your account</h2>
|
|
|
|
{{if .Error}}
|
|
<div class="bg-red-500/10 border border-red-500/30 text-red-400 rounded-lg px-4 py-3 mb-6 text-sm animate-fade-in" role="alert">
|
|
{{.Error}}
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .Success}}
|
|
<div class="bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 rounded-lg px-4 py-3 mb-6 text-sm animate-fade-in" role="alert">
|
|
{{.Success}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<form
|
|
hx-post="/login"
|
|
hx-target="#auth-form"
|
|
hx-swap="outerHTML"
|
|
hx-disabled-elt="button[type=submit], input"
|
|
class="space-y-5"
|
|
>
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-slate-300 mb-1.5">Email address</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value="{{.Email}}"
|
|
required
|
|
autofocus
|
|
autocomplete="email"
|
|
class="w-full px-4 py-2.5 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors"
|
|
placeholder="you@example.com"
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-slate-300 mb-1.5">Password</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
autocomplete="current-password"
|
|
class="w-full px-4 py-2.5 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors"
|
|
placeholder="••••••••"
|
|
>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-sm">
|
|
<label class="flex items-center text-slate-400">
|
|
<input
|
|
type="checkbox"
|
|
name="remember"
|
|
class="rounded border-slate-600 bg-slate-700 text-indigo-500 focus:ring-indigo-500 mr-2"
|
|
>
|
|
Remember me
|
|
</label>
|
|
<a href="/forgot-password" class="text-indigo-400 hover:text-indigo-300 transition-colors">Forgot password?</a>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full py-2.5 px-4 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-slate-800 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span class="htmx-indicator">Sign in</span>
|
|
<span class="htmx-request hidden">Signing in...</span>
|
|
</button>
|
|
</form>
|
|
|
|
<p class="text-center text-slate-400 text-sm mt-6">
|
|
Don't have an account?
|
|
<a href="/signup" class="text-indigo-400 hover:text-indigo-300 font-medium transition-colors">Create one</a>
|
|
</p>
|
|
</div>
|
|
{{end}}
|
|
|