comunatec/controles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: melhorias na interface e estrutura do frontend

Browse Source
This commit is contained in:
andersonid
2025-04-02 14:14:37 -03:00
parent 9d17c66c46
commit 54261e455c
9 changed files with 1009 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
templates/login.html
View File

@@ -1,43 +1,57 @@
{% extends 'base.html' %}
{% extends "base.html" %}
{% block title %}Login{% endblock %}
{% block content %}
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Login</h3>
</div>
<div class="card-body">
<div class="row justify-content-center align-items-center min-vh-100">
<div class="col-md-6 col-lg-4">
<div class="card shadow-lg">
<div class="card-body p-5">
<div class="text-center mb-4">
<h1 class="h3">Login</h1>
<p class="text-muted">Entre com suas credenciais</p>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">{{ message }}</div>
<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') }}">
<div class="mb-3">
<label for="username" class="form-label">Usuário</label>
<input type="text" class="form-control" id="username" name="username" required>
<label for="email" class="form-label">Email</label>
<div class="input-group">
<span class="input-group-text">
<i class="fas fa-envelope"></i>
</span>
<input type="email" class="form-control" id="email" name="email" required autofocus>
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Senha</label>
<input type="password" class="form-control" id="password" name="password" required>
<div class="mb-4">
<label for="senha" class="form-label">Senha</label>
<div class="input-group">
<span class="input-group-text">
<i class="fas fa-lock"></i>
</span>
<input type="password" class="form-control" id="senha" name="senha" required>
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
<i class="fas fa-eye"></i>
</button>
</div>
</div>
<div class="mb-3">
<label for="otp_code" class="form-label">Código OTP</label>
<input type="text" class="form-control" id="otp_code" name="otp_code" required>
<small class="text-muted">Digite o código gerado pelo seu aplicativo autenticador</small>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Entrar</button>
<button type="submit" class="btn btn-primary">
<i class="fas fa-sign-in-alt me-2"></i>Entrar
</button>
</div>
</form>
</div>
@@ -45,4 +59,30 @@
</div>
</div>
</div>
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// 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>
{% endblock %}
{% endblock %}