<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Авторизация - ModularApp</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-icons.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" onerror="console.log('Custom CSS не загружен')">
    <style>
        body {
            background-color: #f5f8fa;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-card {
            max-width: 450px;
            width: 100%;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 2.5rem;
        }
        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        .app-logo {
            width: 80px;
            height: 80px;
            margin-bottom: 1.5rem;
            background-color: #4a6cf7;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 2rem;
            margin-left: auto;
            margin-right: auto;
        }
        .login-title {
            font-size: 1.75rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 0.5rem;
        }
        .login-subtitle {
            color: #64748b;
            font-size: 0.95rem;
        }
        .form-control {
            padding: 0.8rem 1rem;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            background-color: #f8fafc;
            font-size: 1rem;
            margin-bottom: 1.25rem;
        }
        .form-control:focus {
            border-color: #4a6cf7;
            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
        }
        .form-floating label {
            padding: 0.8rem 1rem;
        }
        .form-floating>.form-control:focus~label, 
        .form-floating>.form-control:not(:placeholder-shown)~label {
            transform: scale(.85) translateY(-0.75rem) translateX(.15rem);
            color: #4a6cf7;
        }
        .btn-login {
            width: 100%;
            padding: 0.8rem;
            border-radius: 8px;
            background-color: #4a6cf7;
            border: none;
            font-weight: 500;
            font-size: 1rem;
            transition: all 0.2s ease;
        }
        .btn-login:hover {
            background-color: #3b5de7;
            transform: translateY(-2px);
        }
        .alert {
            border-radius: 8px;
            margin-bottom: 1.5rem;
            padding: 1rem;
        }
        .alert-error {
            background-color: #fee2e2;
            border: 1px solid #fecaca;
            color: #b91c1c;
        }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="login-header">
            <div class="app-logo">
                <i class="bi bi-layers"></i>
            </div>
            <h1 class="login-title">Вход в ModularApp</h1>
            <p class="login-subtitle">Введите учетные данные для доступа</p>
        </div>
        
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <form method="POST" action="{{ url_for('auth.login') }}">
            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="username" name="username" placeholder="Имя пользователя" value="{{ username or '' }}" required>
                <label for="username"><i class="bi bi-person me-2"></i>Имя пользователя</label>
            </div>
            
            <div class="form-floating mb-3">
                <input type="password" class="form-control" id="password" name="password" placeholder="Пароль" required>
                <label for="password"><i class="bi bi-lock me-2"></i>Пароль</label>
            </div>
            
            {% if mfa_required %}
            <div class="form-floating mb-4">
                <input type="text" class="form-control" id="mfa_code" name="mfa_code" placeholder="Код MFA" pattern="[0-9]{6}" maxlength="6" required autofocus>
                <label for="mfa_code"><i class="bi bi-shield-lock me-2"></i>Код MFA (6 цифр)</label>
                <small class="text-muted">Введите код из приложения-аутентификатора</small>
            </div>
            {% else %}
            <div class="mb-4"></div>
            {% endif %}
            
            <button type="submit" class="btn btn-login btn-primary mb-3" id="loginBtn">
                <i class="bi bi-box-arrow-in-right me-2"></i>Войти
            </button>
            
            <div class="text-center mt-3">
                <p class="text-muted small">© 2023 ModularApp. Все права защищены.</p>
            </div>
        </form>
    </div>
    
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            const loginBtn = document.getElementById('loginBtn');
            
            form.addEventListener('submit', function(e) {
                console.log('Форма отправляется...');
                loginBtn.disabled = true;
                loginBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Вход...';
                
                // Показываем индикатор загрузки
                const spinner = document.createElement('div');
                spinner.className = 'spinner-border spinner-border-sm me-2';
                spinner.setAttribute('role', 'status');
                loginBtn.insertBefore(spinner, loginBtn.firstChild);
                
                // Добавляем таймаут для предотвращения бесконечного ожидания
                setTimeout(function() {
                    if (loginBtn.disabled) {
                        console.log('Таймаут - форма не отправилась');
                        loginBtn.disabled = false;
                        loginBtn.innerHTML = '<i class="bi bi-box-arrow-in-right me-2"></i>Войти';
                    }
                }, 10000); // 10 секунд таймаут
            });
        });
    </script>
</body>
</html> 