controles/templates/login.html

{% extends "base.html" %}

{% block title %}Login{% endblock %}

{% block content %}
<div class="row justify-content-center align-items-center min-vh-100 m-0">
    <div class="col-md-6 col-lg-4 px-3">
        <div class="card shadow-lg animate__animated animate__fadeIn">
            <div class="card-body p-4 p-sm-5">
                <div class="text-center mb-4">
                    <img src="{{ url_for('static', filename='img/logo002-alpha.png') }}" alt="Logo OCI" class="login-logo">
                    <h2 class="card-title mb-4 text-light">Controles OCI</h2>
                </div>

                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

                <form method="POST" action="{{ url_for('login') }}" class="needs-validation" novalidate>
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control bg-dark text-light" id="email" name="email" placeholder="Email" required autofocus>
                        <label for="email" class="text-light-50">Email</label>
                        <div class="invalid-feedback text-light">
                            Por favor, informe seu email.
                        </div>
                    </div>

                    <div class="form-floating mb-4">
                        <input type="password" class="form-control bg-dark text-light" id="senha" name="senha" placeholder="Senha" required>
                        <label for="senha" class="text-light-50">Senha</label>
                        <div class="invalid-feedback text-light">
                            Por favor, informe sua senha.
                        </div>
                        <button class="btn btn-link text-light position-absolute end-0 top-50 translate-middle-y me-2" type="button" id="togglePassword">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-danger btn-lg">
                            <i class="fas fa-sign-in-alt me-2"></i>Entrar
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="text-center mt-4">
            <small class="text-light">
                Precisa de ajuda? Entre em contato com o administrador.
            </small>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form validation
    const form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
        }
        form.classList.add('was-validated');
    });

    // Toggle password visibility
    const togglePassword = document.getElementById('togglePassword');
    const password = document.getElementById('senha');

    togglePassword.addEventListener('click', function() {
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
        this.querySelector('i').classList.toggle('fa-eye');
        this.querySelector('i').classList.toggle('fa-eye-slash');
    });

    // Auto-hide alerts after 5 seconds
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            const bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        }, 5000);
    });
});
</script>

<style>
body {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    min-height: 100vh;
}

.card {
    background-color: rgba(45, 45, 45, 0.95);
    border: none;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.login-logo {
    height: 100px;
    width: auto;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.1));
}

.form-control {
    border: 1px solid rgba(255,255,255,0.1);
}

.form-control:focus {
    background-color: var(--secondary-dark) !important;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(232, 0, 12, 0.25);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--primary-light);
    opacity: 0.8;
}

.btn-danger {
    background: var(--primary-color);
    border: none;
    padding: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.btn-danger:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(232, 0, 12, 0.25);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .card {
        margin: 1rem;
    }
    
    .card-body {
        padding: 1.5rem;
    }
    
    .login-logo {
        height: 80px;
    }
}

/* Alert adjustments */
.alert {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    min-width: 300px;
    max-width: 90%;
    text-align: center;
    backdrop-filter: blur(5px);
}

.alert-info {
    background-color: rgba(255,255,255,0.9);
    border: none;
    color: var(--secondary-color);
}

.alert-danger {
    background-color: var(--primary-color);
    color: white;
    border: none;
}
</style>
{% endblock %}
{% endblock %}