34 lines
2.0 KiB
HTML
34 lines
2.0 KiB
HTML
{{define "content"}}
|
|
<div class="mx-auto max-w-md">
|
|
<h1 class="text-2xl font-bold">Create your account</h1>
|
|
<p class="mt-1 text-sm text-stone-600">Register to claim your Where Woof tag.</p>
|
|
|
|
{{if .Error}}<p class="mt-4 rounded bg-red-50 px-4 py-2 text-sm text-red-700 border border-red-200">{{.Error}}</p>{{end}}
|
|
|
|
<form method="post" action="/register" class="mt-6 space-y-4 rounded-xl border border-stone-200 bg-white p-6 shadow-sm">
|
|
<div>
|
|
<label class="block text-sm font-medium" for="name">Name</label>
|
|
<input id="name" name="name" type="text" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium" for="email">Email (your username)</label>
|
|
<input id="email" name="email" type="email" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium" for="confirm_email">Confirm email</label>
|
|
<input id="confirm_email" name="confirm_email" type="email" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" required>
|
|
</div>
|
|
<div x-data="{ show: false }">
|
|
<label class="block text-sm font-medium" for="password">Password</label>
|
|
<div class="relative mt-1">
|
|
<input id="password" name="password" type="password" :type="show ? 'text' : 'password'" class="w-full rounded border border-stone-300 px-3 py-2 pr-10" minlength="8" required>
|
|
<button type="button" @click="show = !show" class="absolute inset-y-0 right-0 flex items-center px-3 text-stone-500 hover:text-stone-700" aria-label="Toggle password visibility" x-text="show ? '👁️' : '🙈'"></button>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="w-full rounded bg-stone-900 px-4 py-2 font-semibold text-white hover:bg-stone-700">Create account</button>
|
|
</form>
|
|
|
|
<p class="mt-4 text-center text-sm text-stone-600">Already have an account? <a href="/login" class="text-amber-600 hover:underline">Log in</a></p>
|
|
</div>
|
|
{{end}}
|