197 lines
7.7 KiB
HTML
197 lines
7.7 KiB
HTML
{% load static %}
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Connexion SI-RH</title>
|
||
<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
|
||
<link rel="stylesheet" href="{% static 'styles.css' %}">
|
||
</head>
|
||
|
||
|
||
<body class="d-flex justify-content-center align-items-center min-vh-100 ">
|
||
|
||
<style>
|
||
.bg-orange-dark {
|
||
background: linear-gradient(90deg, #b35400, #cc6600);
|
||
color: white;
|
||
}
|
||
</style>
|
||
<!-- Formulaire de connexion -->
|
||
<div class="p-4 shadow-sm rounded bg-white" style="max-width: 400px; margin: auto;">
|
||
<img src="{% static 'CERFIF.jpg' %}" alt="Logo" class="logo mb-3"
|
||
style="display: block; margin-left: auto; margin-right: auto; width: 60%; max-width: 500px; height: auto;">
|
||
|
||
|
||
|
||
{% if messages %}
|
||
<!-- Modal message -->
|
||
<div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header bg-orange-dark
|
||
{% if messages.0.tags == 'error' %}bg-orange-dark text-white
|
||
{% elif messages.0.tags == 'success' %}bg-orange-dark text-white
|
||
{% else %}bg-orange-dark text-white{% endif %}">
|
||
<h5 class="modal-title" id="messageModalLabel">
|
||
{% if messages.0.tags == 'error' %}Erreur
|
||
{% elif messages.0.tags == 'success' %}Succès
|
||
{% else %}Information{% endif %}
|
||
</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
{% for message in messages %}
|
||
<p>{{ message }}</p>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
var messageModal = new bootstrap.Modal(document.getElementById('messageModal'));
|
||
messageModal.show();
|
||
});
|
||
</script>
|
||
{% endif %}
|
||
<form method="POST" action="{% url 'login' %}">
|
||
{% csrf_token %}
|
||
<div class="mb-3">
|
||
<label for="username">Nom d’utilisateur</label>
|
||
<input type="text" name="username" class="form-control" placeholder="Entrez votre nom d’utilisateur" required>
|
||
</div>
|
||
<div class="mb-3 position-relative">
|
||
<label for="password">Mot de passe</label>
|
||
<input type="password" name="password" class="form-control" placeholder="Entrez votre mot de passe" required>
|
||
<i class="bi bi-eye toggle-password" onclick="togglePassword()"
|
||
style="position:absolute; right:10px; top:38px; cursor:pointer;"></i>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary w-100">Se connecter</button>
|
||
</form>
|
||
|
||
<p class="mt-3 text-center">
|
||
<a href="#" data-bs-toggle="modal" data-bs-target="#resetPasswordModal">Mot de passe oublié ?</a>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Modale de réinitialisation -->
|
||
<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content p-4">
|
||
<h5 class="modal-title mb-3" id="resetPasswordModalLabel">Réinitialisation du mot de passe</h5>
|
||
<form id="resetPasswordForm">
|
||
{% csrf_token %}
|
||
<div class="mb-3">
|
||
<label for="email">Entrez votre email</label>
|
||
<input type="email" name="email" class="form-control" placeholder="Email" required>
|
||
</div>
|
||
<div id="resetMessage" class="mb-3"></div>
|
||
<button type="submit" class="btn btn-warning w-100">Envoyer le lien</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% if show_politique_modal %}
|
||
<!-- Modal Politique d'utilisation -->
|
||
<div class="modal fade" id="politiqueModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
|
||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||
<div class="modal-content">
|
||
<div class="modal-header bg-orange-dark text-white">
|
||
<h5 class="modal-title">Politique d'utilisation de SI-RH</h5>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Veuillez lire et accepter notre politique d'utilisation avant d'accéder à votre compte.</p>
|
||
<h6>Confidentialité des données</h6>
|
||
<p>Vos informations personnelles et professionnelles sont protégées. Toute divulgation non autorisée est strictement interdite.</p>
|
||
<h6>Utilisation autorisée</h6>
|
||
<p>L’application est réservée à un usage professionnel. Toute utilisation à des fins personnelles ou non autorisées est prohibée.</p>
|
||
<h6>Sécurité des comptes</h6>
|
||
<p>Ne partagez jamais vos identifiants. Changez votre mot de passe régulièrement et en cas de suspicion d’intrusion.</p>
|
||
<h6>Responsabilités de l’utilisateur</h6>
|
||
<p>Vous êtes responsable des actions effectuées via votre compte. Signalez toute anomalie ou problème à l’équipe RH ou à l’administrateur.</p>
|
||
<h6>Acceptation et conformité</h6>
|
||
<p>En cliquant sur <strong>“J’accepte”</strong>, vous confirmez avoir lu et accepté cette politique. Le non-respect peut entraîner une suspension ou une révocation de l’accès.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<form method="POST" action="{% url 'accepter-politique' %}" style="display:inline;">
|
||
{% csrf_token %}
|
||
<button type="submit" class="btn btn-success">J'accepte</button>
|
||
</form>
|
||
<form method="POST" action="{% url 'refuser-politique' %}" style="display:inline;">
|
||
{% csrf_token %}
|
||
<button type="submit" class="btn btn-danger">Refuser</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
var politiqueModal = new bootstrap.Modal(document.getElementById('politiqueModal'));
|
||
politiqueModal.show();
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
var politiqueModal = new bootstrap.Modal(document.getElementById('politiqueModal'));
|
||
politiqueModal.show();
|
||
});
|
||
</script>
|
||
>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
var modal = new bootstrap.Modal(document.getElementById('politiqueModal'));
|
||
modal.show();
|
||
});
|
||
</script>
|
||
{% endif %}
|
||
|
||
|
||
<!-- Scripts -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||
<script>
|
||
// Afficher / masquer le mot de passe
|
||
function togglePassword() {
|
||
const input = document.querySelector('input[name="password"]');
|
||
input.type = input.type === 'password' ? 'text' : 'password';
|
||
}
|
||
|
||
// AJAX pour réinitialisation
|
||
$('#resetPasswordForm').on('submit', function(e) {
|
||
e.preventDefault();
|
||
const email = $('input[name="email"]').val();
|
||
const csrfToken = $('[name=csrfmiddlewaretoken]').val();
|
||
|
||
$.ajax({
|
||
url: "{% url 'password_reset' %}",
|
||
type: 'POST',
|
||
data: {
|
||
'email': email,
|
||
'csrfmiddlewaretoken': csrfToken
|
||
},
|
||
success: function(response) {
|
||
$('#resetMessage').html('<div class="alert alert-success">Email envoyé ! Vérifiez votre boîte de réception.</div>');
|
||
},
|
||
error: function() {
|
||
$('#resetMessage').html('<div class="alert alert-danger">Erreur lors de l’envoi. Vérifiez l’email.</div>');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|
||
|