From 73958697bef9f4960d986d84ef95e901f4d169ed Mon Sep 17 00:00:00 2001
From: KANE LAZENI <lkane@ebene.info>
Date: Thu, 8 Jan 2026 19:39:45 +0000
Subject: [PATCH] a

---
 Vue/Changermotpass/Changermotpass/index.php   | 347 ++++++++++++++++++
 .../Changermotpass/index_2026_01_08.php       | 323 ++++++++++++++++
 2 files changed, 670 insertions(+)
 create mode 100755 Vue/Changermotpass/Changermotpass/index.php
 create mode 100755 Vue/Changermotpass/Changermotpass/index_2026_01_08.php

diff --git a/Vue/Changermotpass/Changermotpass/index.php b/Vue/Changermotpass/Changermotpass/index.php
new file mode 100755
index 0000000..43d67e8
--- /dev/null
+++ b/Vue/Changermotpass/Changermotpass/index.php
@@ -0,0 +1,347 @@
+<?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>
+                                    <!-- KANE 08/01/2026
+                                    <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;*/
+    padding: 0px;
+}
+
+.password-change-card {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    /*
+    padding: 30px;
+    margin-top: 20px;
+    */
+    padding: 0px;
+    margin-top: 0px;
+
+}
+
+.password-change-header .alert {
+    border-radius: 10px;
+    border-left: 4px solid #ffc107;
+}
+
+.password-change-form .form-group {
+    /*margin-bottom: 1.5rem;*/
+    margin-bottom: 0rem;
+}
+
+.password-change-form .form-label {
+    font-weight: 400;
+    /*margin-bottom: 0.5rem;*/
+    margin-bottom: 0rem;
+    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;
+    */
+    gap: 0px;
+    margin-top: 0rem;
+}
+
+.form-actions .btn {
+    flex: 1;
+    /*padding: 12px;*/
+    padding: 0px;
+}
+
+/* Large screens optimization */
+@media (min-width: 1200px) {
+    .password-change-container {
+        max-width: 800px;
+        margin: 0 auto;
+    }
+    
+    .password-change-card {
+        /*padding: 40px;*/
+        padding: 0px;
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .password-change-container {
+        /*padding: 15px;*/
+        padding: 0px;
+    }
+    
+    .password-change-card {
+        /*padding: 20px;*/
+        padding: 0px;
+    }
+    
+    .form-actions {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 576px) {
+    .password-change-container {
+        /*padding: 10px;*/
+        padding: 0px;
+    }
+    
+    .password-change-card {
+        /*padding: 15px;*/
+        padding: 0px;
+        border-radius: 8px;
+    }
+    
+    .password-change-header .alert h4 {
+        font-size: 1.1rem;
+    }
+    
+    .form-actions .btn {
+        /*padding: 10px;*/
+        padding: 0px;
+    }
+}
+
+/* Very small screens */
+@media (max-width: 375px) {
+    .password-change-container {
+        /*padding: 5px;*/
+        padding: 0px;
+    }
+    
+    .password-change-card {
+        /*padding: 12px;*/
+        padding: 0px;
+    }
+    
+    .password-change-header .alert {
+        /*padding: 12px;*/
+        padding: 0px;
+    }
+}
+</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>
\ No newline at end of file
diff --git a/Vue/Changermotpass/Changermotpass/index_2026_01_08.php b/Vue/Changermotpass/Changermotpass/index_2026_01_08.php
new file mode 100755
index 0000000..84cd684
--- /dev/null
+++ b/Vue/Changermotpass/Changermotpass/index_2026_01_08.php
@@ -0,0 +1,323 @@
+<?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>
\ No newline at end of file