Игорь Надеин
8159c6f472
### Custom Button System Implementation Created modern button system to replace Bootstrap buttons: - ✅ Created core/_buttons-custom.scss (550+ lines) - ✅ CSS Custom Properties for easy customization - ✅ 8 color variants (primary, secondary, success, danger, warning, info, light, dark) - ✅ Outline and Ghost variants - ✅ 4 sizes (sm, md, lg, xl) - ✅ Special variants (block, icon, circle, link) - ✅ Loading state with spinner animation - ✅ Button groups support - ✅ Modern animations (hover, active, focus) ### Template Migration Migrated 65 HTML templates using automated Python script: - Replaced .btn → .button - Replaced .btn-primary → .button--primary - Replaced .btn-outline-* → .button--outline button--* - Replaced size classes .btn-sm → .button--sm - Total changes: 354 → 347 button usages ### Results - app.css: 137 KB → 148 KB (+11 KB for custom buttons) - Templates changed: 65 files - Remaining .btn classes: 133 (mostly btn-close for modals) - New .button classes: 347 ### Backward Compatibility Kept @extend rules in _buttons-custom.scss for gradual migration. Can be removed after complete migration. Next step: Remove Bootstrap button imports from custom-bootstrap.scss
103 lines
3.7 KiB
HTML
103 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
||
{% load static %}
|
||
|
||
{% block title %}Подтверждение email — HiRo{% endblock %}
|
||
|
||
{# ВАЖНО: применяем тему ещё в <head>, до рендера страницы #}
|
||
{% block extra_css %}
|
||
<script src="{% static 'js/utils/themeInitializer.js' %}"></script>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container" style="max-width: 520px;">
|
||
{% if messages %}
|
||
<div class="mb-3">
|
||
{% for message in messages %}
|
||
<div class="alert alert-{{ message.tags|default:'info' }} mb-2" role="alert">{{ message }}</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body p-4">
|
||
<h1 class="h4 fw-bold mb-2">Верификация email</h1>
|
||
<p class="text-secondary mb-4">
|
||
{% if form.email.value %}
|
||
Мы отправили код на адрес
|
||
<strong>{{ form.email.value }}</strong>.
|
||
Введите его ниже для подтверждения.
|
||
{% else %}
|
||
Введите ваш email и код подтверждения.
|
||
{% endif %}
|
||
</p>
|
||
|
||
{# Основная форма подтверждения #}
|
||
<form method="post" class="mb-3">
|
||
{% csrf_token %}
|
||
|
||
{% if not form.email.value %}
|
||
<div class="mb-3">
|
||
<label for="id_email" class="form-label">Email</label>
|
||
<input type="email"
|
||
name="email"
|
||
id="id_email"
|
||
class="form-control {% if form.email.errors %}is-invalid{% endif %}"
|
||
placeholder="your@email.com"
|
||
required>
|
||
{% if form.email.errors %}
|
||
<div class="invalid-feedback">
|
||
{% for e in form.email.errors %}{{ e }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% else %}
|
||
<input type="hidden" name="email" value="{{ form.email.value }}">
|
||
{% endif %}
|
||
|
||
{% if form.non_field_errors %}
|
||
<div class="alert alert-warning" role="alert">
|
||
{% for e in form.non_field_errors %}{{ e }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="mb-3">
|
||
<label for="id_code" class="form-label">Код из письма</label>
|
||
<input type="text"
|
||
name="code"
|
||
id="id_code"
|
||
class="form-control {% if form.code.errors %}is-invalid{% endif %}"
|
||
maxlength="6"
|
||
inputmode="numeric"
|
||
pattern="[0-9]{6}"
|
||
placeholder="Введите 6-значный код"
|
||
required>
|
||
{% if form.code.errors %}
|
||
<div class="invalid-feedback">
|
||
{% for e in form.code.errors %}{{ e }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<button type="submit" class="button button--primary w-100">Подтвердить</button>
|
||
</form>
|
||
|
||
{# Повторная отправка — строго POST #}
|
||
{% if form.email.value %}
|
||
<form method="post" action="{% url 'auth_front:resend_email' %}">
|
||
{% csrf_token %}
|
||
<input type="hidden" name="email" value="{{ form.email.value }}">
|
||
<button type="submit" class="button button--link p-0">Отправить код заново</button>
|
||
</form>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script type="module">
|
||
import { focusField } from "{% static 'js/utils/focusFieldHandler.js' %}";
|
||
focusField('id_code');
|
||
</script>
|
||
{% endblock %}
|