323 lines
12 KiB
PHP
Executable File
323 lines
12 KiB
PHP
Executable File
<?php
|
|
// $this->titre = "INTER-SANTÉ - ". _("Changement de mot de passe");
|
|
?>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12">
|
|
<div class="password-change-container">
|
|
<div class="password-change-header">
|
|
<div class="alert alert-warning" role="alert">
|
|
<small>
|
|
<i class="bi bi-shield-exclamation me-2"></i>
|
|
<?= _("Veuillez changer votre mot de passe. Pour des raisons de sécurité, vous devez le mettre à jour.") ?>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="password-change-card">
|
|
<form class="password-change-form" action="Changermotpass/changerpass" method="post">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-group">
|
|
<label for="ancmdp" class="form-label"><?= _("Ancien mot de passe") ?> <span class="required">*</span></label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="ancmdp" name="ancmdp" required autofocus>
|
|
<button type="button" class="btn btn-outline-secondary toggle-password" data-target="ancmdp">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="form-group">
|
|
<label for="nvmdp" class="form-label"><?= _("Nouveau mot de passe") ?> <span class="required">*</span></label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="nvmdp" name="nvmdp" onBlur="controle_longeur_passe(this);" required>
|
|
<button type="button" class="btn btn-outline-secondary toggle-password" data-target="nvmdp">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
</div>
|
|
<div class="password-strength mt-2">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
<small class="password-strength-text"></small>
|
|
</div>
|
|
<div class="password-requirements mt-2 alert alert-info mt-3">
|
|
<small>
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<?= _("Un mot de passe fort doit contenir au moins 8 caractères, incluant des majuscules, minuscules, chiffres et caractères spéciaux.") ?>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="form-group">
|
|
<label for="cfnvmdp" class="form-label"><?= _("Confirmer nouveau mot de passe") ?> <span class="required">*</span></label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="cfnvmdp" name="cfnvmdp" onBlur="ChangerPass();" required>
|
|
<button type="button" class="btn btn-outline-secondary toggle-password" data-target="cfnvmdp">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
</div>
|
|
<div class="password-match mt-2">
|
|
<small class="text-danger" id="password-match-error" style="display: none;">
|
|
<i class="bi bi-exclamation-circle"></i> <?= _("Les mots de passe ne correspondent pas") ?>
|
|
</small>
|
|
<small class="text-success" id="password-match-success" style="display: none;">
|
|
<i class="bi bi-check-circle"></i> <?= _("Les mots de passe correspondent") ?>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary btn-lg" style="font-size:1.8rem !important;">
|
|
<i class="bi bi-check-lg me-2"></i> <?= _("Enregistrer") ?>
|
|
</button>
|
|
<a href="Accueilassure/" class="btn btn-outline-secondary btn-lg" style="font-size:1.8rem !important;">
|
|
<i class="bi bi-x-lg me-2"></i> <?= _("Annuler") ?>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<?php if (isset($msgErreur)): ?>
|
|
<div class="col-12">
|
|
<div class="alert alert-danger mt-4" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
|
<h5 class="mb-0"><?= _("Erreur") ?></h5>
|
|
</div>
|
|
<p class="mb-0 mt-2"><?= $msgErreur ?></p>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.password-change-container {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.password-change-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
padding: 30px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.password-change-header .alert {
|
|
border-radius: 10px;
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
|
|
.password-change-form .form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.password-change-form .form-label {
|
|
font-weight: 400;
|
|
margin-bottom: 0.5rem;
|
|
color: #333;
|
|
font-size:1.8rem !important;
|
|
}
|
|
|
|
.password-change-form .required {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.input-group .toggle-password {
|
|
border-left: 0;
|
|
}
|
|
|
|
.password-strength .progress {
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.password-requirements {
|
|
color: #6c757d;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.form-actions .btn {
|
|
flex: 1;
|
|
padding: 12px;
|
|
}
|
|
|
|
/* Large screens optimization */
|
|
@media (min-width: 1200px) {
|
|
.password-change-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.password-change-card {
|
|
padding: 40px;
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.password-change-container {
|
|
padding: 15px;
|
|
}
|
|
|
|
.password-change-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.form-actions {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.password-change-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.password-change-card {
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.password-change-header .alert h4 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.form-actions .btn {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
/* Very small screens */
|
|
@media (max-width: 375px) {
|
|
.password-change-container {
|
|
padding: 5px;
|
|
}
|
|
|
|
.password-change-card {
|
|
padding: 12px;
|
|
}
|
|
|
|
.password-change-header .alert {
|
|
padding: 12px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Toggle password visibility
|
|
document.querySelectorAll('.toggle-password').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const targetId = this.getAttribute('data-target');
|
|
const passwordInput = document.getElementById(targetId);
|
|
const icon = this.querySelector('i');
|
|
|
|
if (passwordInput.type === 'password') {
|
|
passwordInput.type = 'text';
|
|
icon.classList.remove('bi-eye');
|
|
icon.classList.add('bi-eye-slash');
|
|
} else {
|
|
passwordInput.type = 'password';
|
|
icon.classList.remove('bi-eye-slash');
|
|
icon.classList.add('bi-eye');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Password strength indicator
|
|
document.getElementById('nvmdp').addEventListener('input', function() {
|
|
const password = this.value;
|
|
const strengthBar = document.querySelector('.password-strength .progress-bar');
|
|
const strengthText = document.querySelector('.password-strength-text');
|
|
|
|
let strength = 0;
|
|
let text = '';
|
|
let color = '';
|
|
|
|
if (password.length >= 8) strength += 25;
|
|
if (/[A-Z]/.test(password)) strength += 25;
|
|
if (/[0-9]/.test(password)) strength += 25;
|
|
if (/[^A-Za-z0-9]/.test(password)) strength += 25;
|
|
|
|
strengthBar.style.width = strength + '%';
|
|
|
|
if (strength < 50) {
|
|
color = 'danger';
|
|
text = '<?= _("Faible") ?>';
|
|
} else if (strength < 75) {
|
|
color = 'warning';
|
|
text = '<?= _("Moyen") ?>';
|
|
} else {
|
|
color = 'success';
|
|
text = '<?= _("Fort") ?>';
|
|
}
|
|
|
|
strengthBar.className = 'progress-bar bg-' + color;
|
|
strengthText.textContent = text;
|
|
strengthText.className = 'password-strength-text text-' + color;
|
|
});
|
|
|
|
// Password confirmation check
|
|
document.getElementById('cfnvmdp').addEventListener('input', function() {
|
|
const password = document.getElementById('nvmdp').value;
|
|
const confirmPassword = this.value;
|
|
const errorElement = document.getElementById('password-match-error');
|
|
const successElement = document.getElementById('password-match-success');
|
|
|
|
if (confirmPassword === '') {
|
|
errorElement.style.display = 'none';
|
|
successElement.style.display = 'none';
|
|
} else if (password !== confirmPassword) {
|
|
errorElement.style.display = 'block';
|
|
successElement.style.display = 'none';
|
|
} else {
|
|
errorElement.style.display = 'none';
|
|
successElement.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
// Vos fonctions existantes
|
|
function controle_longeur_passe(input) {
|
|
// Votre logique existante pour contrôler la longueur du mot de passe
|
|
if (input.value.length < 8) {
|
|
input.setCustomValidity("<?= _('Le mot de passe doit contenir au moins 8 caractères') ?>");
|
|
} else {
|
|
input.setCustomValidity("");
|
|
}
|
|
}
|
|
|
|
function ChangerPass() {
|
|
// Votre logique existante pour changer le mot de passe
|
|
const nouveauPass = document.getElementById('nvmdp').value;
|
|
const confirmationPass = document.getElementById('cfnvmdp').value;
|
|
|
|
if (nouveauPass !== confirmationPass) {
|
|
document.getElementById('cfnvmdp').setCustomValidity("<?= _('Les mots de passe ne correspondent pas') ?>");
|
|
} else {
|
|
document.getElementById('cfnvmdp').setCustomValidity("");
|
|
}
|
|
}
|
|
</script>
|