octopus/myproject/templates/index.html

{% extends 'base.html' %}

{% block title %}Регистрация / Вход{% endblock %}

{% block content %}
<!-- Контейнер для сообщений об ошибках - фиксированное место -->
<!-- ВАЖНО: На главной странице (регистрация/вход) показываем только ошибки -->
<div id="messages-container" style="min-height: 60px;">
    {% if messages %}
        {% for message in messages %}
            {% if 'danger' in message.tags or 'error' in message.tags %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}
</div>

<h2 class="text-center mb-4">Добро пожаловать</h2>

<!-- Вкладки для переключения между регистрацией и входом -->
<ul class="nav nav-tabs mb-4">
    <li class="nav-item">
        <a class="nav-link {% if not request.GET.tab or request.GET.tab == 'register' %}active{% endif %}" data-bs-toggle="tab" href="#register">Регистрация</a>
    </li>
    <li class="nav-item">
        <a class="nav-link {% if request.GET.tab == 'login' %}active{% endif %}" data-bs-toggle="tab" href="#login">Вход</a>
    </li>
</ul>

<!-- Содержимое вкладок -->
<div class="tab-content">
    <!-- Вкладка регистрации -->
    <div class="tab-pane fade {% if not request.GET.tab or request.GET.tab == 'register' %}show active{% endif %}" id="register">
        <form method="post" action="{% url 'accounts:register' %}">
            {% csrf_token %}
            <div class="mb-3">
                <label for="{{ form.name.id_for_label }}" class="form-label">Имя</label>
                {{ form.name }}
                {% if form.name.errors %}
                    <div class="text-danger">{{ form.name.errors }}</div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label for="{{ form.email.id_for_label }}" class="form-label">Email</label>
                {{ form.email }}
                {% if form.email.errors %}
                    <div class="text-danger">{{ form.email.errors }}</div>
                {% endif %}
            </div>
            {% include 'accounts/password_input.html' with field_name=form.password1.id_for_label field_label='Пароль' required=True field_errors=form.password1.errors %}
            {% include 'accounts/password_input.html' with field_name=form.password2.id_for_label field_label='Подтверждение пароля' required=True field_errors=form.password2.errors %}
            <button type="submit" class="btn btn-primary w-100">Зарегистрироваться</button>
        </form>
    </div>

    <!-- Вкладка входа -->
    <div class="tab-pane fade {% if request.GET.tab == 'login' %}show active{% endif %}" id="login">
        <form method="post">
            {% csrf_token %}
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>
            {% include 'accounts/password_input.html' with field_name='password' field_label='Пароль' required=True %}
            <button type="submit" class="btn btn-primary w-100">Войти</button>
            
            <!-- Ссылка "Забыли пароль?" -->
            <div class="text-center mt-3">
                <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#passwordResetModal">Забыли пароль?</a>
            </div>
        </form>
    </div>
</div>

<!-- Модальное окно для восстановления пароля -->
<div class="modal fade" id="passwordResetModal" tabindex="-1" aria-labelledby="passwordResetModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="passwordResetModalLabel">Восстановление пароля</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <form id="passwordResetForm" method="post" action="{% url 'accounts:password_reset' %}">
                    {% csrf_token %}
                    <p>Пожалуйста, введите ваш email, и мы отправим вам инструкции по восстановлению пароля.</p>
                    <div class="mb-3">
                        <label for="resetEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="resetEmail" name="email" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="submit" class="btn btn-primary" form="passwordResetForm">Отправить</button>
            </div>
        </div>
    </div>
</div>

<script>
// Управление вкладками
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const tab = urlParams.get('tab');
    
    if (tab === 'login') {
        // Переключаемся на вкладку входа
        const loginTab = document.querySelector('a[href="#login"]');
        if(loginTab) {
            bootstrap.Tab.getOrCreateInstance(loginTab).show();
        }
    }
    
    // Добавляем обработчик для показа/скрытия пароля
    document.querySelectorAll('.show-password-btn').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const targetInput = document.getElementById(targetId);
            const icon = this.querySelector('i');
            
            if (targetInput.type === 'password') {
                targetInput.type = 'text';
                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');
            } else {
                targetInput.type = 'password';
                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');
            }
        });
    });
});
</script>
{% endblock %}