50 lines
1.7 KiB
HTML
Executable File
50 lines
1.7 KiB
HTML
Executable File
{% extends 'public_base.html' %}
|
||
{% load static %}
|
||
{% block title %}Verify OTP{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="flex items-center justify-center min-h-screen bg-gray-100 px-4">
|
||
<div class="w-full max-w-md bg-white rounded-xl shadow-md p-6">
|
||
<h4 class="text-2xl font-semibold text-center text-gray-800 mb-6">Verify OTP</h4>
|
||
|
||
{% if messages %}
|
||
{% for message in messages %}
|
||
<div class="mb-4 px-4 py-3 rounded text-sm
|
||
{% if message.tags == 'error' %}
|
||
bg-red-100 text-red-700
|
||
{% elif message.tags == 'success' %}
|
||
bg-green-100 text-green-700
|
||
{% else %}
|
||
bg-blue-100 text-blue-700
|
||
{% endif %}
|
||
">
|
||
{{ message }}
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
|
||
<form method="post" novalidate>
|
||
{% csrf_token %}
|
||
<div class="mb-4">
|
||
<label for="otpInput" class="block text-sm font-medium text-gray-700 mb-1">Enter OTP sent to your email</label>
|
||
<input type="text" name="otp" id="otpInput" maxlength="6" pattern="\d{6}"
|
||
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="Enter 6-digit OTP" required>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<button type="submit"
|
||
class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-lg font-medium transition">
|
||
<i class="fas fa-check-circle mr-2"></i>Verify OTP
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="text-center text-sm text-gray-600">
|
||
Didn’t receive the OTP?
|
||
<a href="{% url 'request_otp' %}" class="text-blue-600 hover:underline">Resend</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|