ku-polls/templates/registration/signup.html

46 lines
2.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="min-h-screen flex items-center justify-center">
<div class="bg-white p-8 shadow-md rounded-md w-96 border-solid border-neutral-500 border-2">
<h2 class="text-2xl font-semibold mb-6">Sign Up</h2>
<form method="post">
{% csrf_token %}
<div class="mb-4">
<p class="block text-gray-700 font-medium">Username</p>
{{ form.username }}
</div>
<div class="mb-4">
<p class="block text-gray-700 font-medium">Password</p>
{{ form.password1 }}
<div class="mb-4">
<p class="block text-gray-700 font-medium">Password Confirmation</p>
{{ form.password2 }}
</div>
<button type="submit" class="w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600 focus:ring-2 focus:ring-green-300 focus:outline-none">Sign Up</button>
<!-- text form -->
<p class="mt-2 text-gray-600 text-sm">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</p>
<p class="mt-2 text-gray-600 text-sm">Your password cant be too similar to your other personal information. , must contain at least 8 characters, cant be entirely numeric.</p>
</form>
<div class="mt-2 text-gray-600 text-sm">
{% if form.errors %}
{% for field in form %}
{% if field.errors %}
{% for error in field.errors %}
<p class="text-red-500">{{ error }}</p>
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
</div>
<p class="mt-4 text-gray-600 text-sm">Already have an account? <a href="{% url 'login' %}" class="text-blue-500 hover:underline">Sign in here</a></p>
<a href="{% url 'polls:index' %}" class="mt-4 block text-center text-blue-500 hover:underline">Back to Poll</a>
</div>
</div>
</body>
</html>