97 lines
4.3 KiB
HTML
97 lines
4.3 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static django_bootstrap5 %}
|
|
|
|
{% block title %}Авторизация{% endblock %}
|
|
|
|
{# ВАЖНО: применяем тему ещё в <head>, чтобы не было «мигания» #}
|
|
{% block extra_css %}
|
|
<script src="{% static 'js/utils/themeInitializer.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-6">
|
|
<div class="card shadow">
|
|
<div class="card-header bg-primary text-white">
|
|
<h3 class="mb-0">Вход в систему</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" action="{% url 'auth_front:login' %}">
|
|
{% csrf_token %}
|
|
|
|
{% if form.non_field_errors %}
|
|
<div class="alert alert-danger alert-dismissible fade show mb-4">
|
|
{% for error in form.non_field_errors %}
|
|
<i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
|
|
{% endfor %}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-4 form-floating">
|
|
<input type="text"
|
|
name="username"
|
|
class="form-control {% if form.username.errors %}is-invalid{% endif %}"
|
|
id="id_username"
|
|
placeholder="Номер телефона или email"
|
|
value="{{ form.username.value|default:'' }}"
|
|
autocomplete="username"
|
|
required autofocus>
|
|
<label for="id_username">Номер телефона или email</label>
|
|
{% if form.username.errors %}
|
|
<div class="invalid-feedback">
|
|
{{ form.username.errors|striptags }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-4 position-relative">
|
|
<div class="form-floating">
|
|
<input type="password"
|
|
name="password"
|
|
class="form-control {% if form.password.errors %}is-invalid{% endif %} pe-5"
|
|
id="id_password"
|
|
placeholder="Пароль"
|
|
autocomplete="current-password"
|
|
required>
|
|
<label for="id_password">Пароль</label>
|
|
{% if form.password.errors %}
|
|
<div class="invalid-feedback">
|
|
{{ form.password.errors|striptags }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<span class="password-toggle position-absolute top-50 end-0 translate-middle-y me-3"
|
|
data-target="#id_password"
|
|
style="cursor: pointer; z-index: 10; margin-top: -0.25rem;">
|
|
<i class="bi bi-eye-slash"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-box-arrow-in-right me-2"></i>Войти
|
|
</button>
|
|
<a href="{% url 'auth_front:password_reset' %}" class="btn btn-link mt-2">Забыли пароль?</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script type="module">
|
|
import { initPasswordToggle } from "{% static 'js/components/passwordToggleHandler.js' %}";
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Переключение видимости пароля
|
|
initPasswordToggle();
|
|
|
|
// Фокус на поле ввода
|
|
document.getElementById('id_username')?.focus();
|
|
});
|
|
</script>
|
|
{% endblock %}
|