Christian Krakau-Louis
71 lines
3.2 KiB
HTML
71 lines
3.2 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Register{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-md mx-auto my-8 p-6 bg-white rounded-lg shadow-md">
|
|
<h2 class="text-2xl font-bold mb-6 text-navy-800">Create an Account</h2>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="mb-4 p-3 {% if category == 'danger' %}bg-red-100 text-red-700{% elif category == 'success' %}bg-green-100 text-green-700{% else %}bg-blue-100 text-blue-700{% endif %} rounded">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST" action="{{ url_for('users.register') }}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
|
|
Username
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="username" name="username" type="text" placeholder="Choose a username">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="email">
|
|
Email
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="email" name="email" type="email" placeholder="Enter your email">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
|
|
Password
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="password" name="password" type="password" placeholder="Enter your password">
|
|
<p class="text-xs text-gray-500 mt-1">Must be at least 8 characters long.</p>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="confirm_password">
|
|
Confirm Password
|
|
</label>
|
|
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id="confirm_password" name="confirm_password" type="password" placeholder="Confirm your password">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<button class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
|
|
Register
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-4 text-center">
|
|
<p class="text-gray-700">
|
|
Already have an account?
|
|
<a href="{{ url_for('users.login') }}" class="font-bold text-teal-500 hover:text-teal-800">
|
|
Login
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |