76 lines
2.7 KiB
Django/Jinja
76 lines
2.7 KiB
Django/Jinja
{% extends "base.html.jinja" %}
|
|
|
|
{% block content %}
|
|
<section class="max-w-md mx-auto px-4 pt-24">
|
|
<h1 class="text-2xl font-bold text-center mb-8">Create your account</h1>
|
|
|
|
{% if error %}
|
|
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-md text-sm text-red-700">
|
|
{{ error }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="POST" action="/signup" class="space-y-4">
|
|
<div>
|
|
<label for="username" class="block text-sm font-medium mb-1">Username</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
value="{{ username }}"
|
|
required
|
|
minlength="3"
|
|
maxlength="64"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-gray-900"
|
|
placeholder="alice">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium mb-1">Email</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value="{{ email }}"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-gray-900"
|
|
placeholder="alice@example.com">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium mb-1">Password</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
minlength="12"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-gray-900"
|
|
placeholder="At least 12 characters">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password_confirm" class="block text-sm font-medium mb-1">Confirm password</label>
|
|
<input
|
|
type="password"
|
|
id="password_confirm"
|
|
name="password_confirm"
|
|
required
|
|
minlength="12"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-gray-900"
|
|
placeholder="Repeat your password">
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full py-2 bg-gray-900 text-white rounded-md font-medium hover:bg-gray-800">
|
|
Create account
|
|
</button>
|
|
</form>
|
|
|
|
<p class="mt-6 text-center text-sm text-gray-600">
|
|
Already have an account? <a href="/login" class="font-medium text-gray-900 hover:underline">Sign in</a>
|
|
</p>
|
|
</section>
|
|
{% endblock %}
|