haikal/templates/appointment/set_password.html
2025-05-15 19:29:22 +03:00

104 lines
2.5 KiB
HTML

{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}
{% block customCSS %}
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.messages {
list-style: none;
padding: 0;
margin-bottom: 20px;
}
.messages li {
background-color: #f8d7da;
color: #721c24;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
}
form {
display: flex;
flex-direction: column;
}
form p {
margin-bottom: 10px;
}
input[type="password"] {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
</style>
{% endblock %}
{% block title %}
{% trans 'Reset Your Password' %}
{% endblock %}
{% block description %}
{% trans 'Reset Your Password' %}
{% endblock %}
{% block body %}
<div class="container">
<h2>{% trans 'Reset Your Password' %}</h2>
<!-- Display messages -->
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<!-- Password Reset Form -->
<form method="post">
{% csrf_token %}
{{ form.as_p }} <!-- Renders the form fields -->
<button type="submit">{% trans 'Reset Password' %}</button>
</form>
{% endblock %}
{% block customJS %}
<script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}