maria_uslugi/nouveau_mdp.php

<?php
    require_once __DIR__ . '/../includes/bootstrap_global.php';

    // Sécurité : accès autorisé uniquement après vérification du code
    if (! isset($_SESSION['reset_email'], $_SESSION['code_valide']) || ! $_SESSION['code_valide']) {
    header("Location: mdp_oublie.php");
    exit;
    }

    $erreur  = '';
    $success = '';

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $mdp1 = $_POST['mot_de_passe'] ?? '';
    $mdp2 = $_POST['confirm_mot_de_passe'] ?? '';

    if (strlen($mdp1) < 8 || $mdp1 !== $mdp2) {
        $erreur = $translations['erreur_mdp_invalides'];
    } else {
        $hash = password_hash($mdp1, PASSWORD_DEFAULT);
        $stmt = $pdo->prepare("UPDATE compte SET mot_de_passe = :hash WHERE email = :email");
        $stmt->execute([
            'hash'  => $hash,
            'email' => $_SESSION['reset_email'],
        ]);

        // Nettoyage session
        $lang = $_SESSION['lang'] ?? 'ru';
        session_unset();
        session_destroy();
        session_start();
        $_SESSION['lang'] = $lang;

        $success = $translations['success_mdp_mis_a_jour'];

    }
    }
?>

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title><?php echo $translations['nouveau_mdp_title'] ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="<?php echo asset('/includes/site_style.css') ?>">
  <link rel="stylesheet" href="<?php echo asset('/includes/custom_style.css') ?>">  <!-- ta home -->
  <link rel="stylesheet" href="<?php echo asset('/includes/mobil_style.css') ?>">

  <style>
    .strength-bar {
      height: 8px;
      display: flex;
      margin-bottom: 10px;
      border-radius: 5px;
      overflow: hidden;
    }
    .strength-fill {
      flex: 1;
      background: #ccc;
      transition: background-color 0.3s ease;
    }
    .toggle-password {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      font-size: 18px;
    }
    .field-wrapper {
      position: relative;
    }
  </style>
  <?php include_once __DIR__ . '/includes/tracking.php'; ?>
</head>
<body>
 <header class="site-header">
    <div class="container">
      <div class="header-left">
      <div class="brand">
        <a href="/index.php"><img src="/public/uploads/img/logo_u.png"
            alt="uslugi.fr"
            class="logo-mobile"></a>

        <a href="/index.php"><img src="/public/uploads/img/logo.png"
            alt="uslugi.fr"
            class="logo-desktop"></a>
      </div>
      <div class="lang-switch">
          <?php require __DIR__ . '/includes/menu_langue.php'; ?>
        </div>
      </div>
      <nav class="header-actions">

      </nav>
    </div>
  </header>

<div class="main">

<div class="card shadow-sm p-4" style="min-width: 380px; max-width: 480px; width: 100%;">
  <h3 class="mb-4 text-center"><?php echo $translations['nouveau_mdp_h3'] ?></h3>

  <?php if (! empty($erreur)): ?>
    <div class="alert alert-danger py-2"><?php echo htmlspecialchars($erreur); ?></div>
  <?php endif; ?>

  <?php if (! empty($success)): ?>
    <div class="alert alert-primary py-2 text-center">
    <div><?php echo htmlspecialchars($success) ?></div>
  </div>
  <a href="connexion.php" class="btn btn-danger fw-bold"><?php echo $translations['btn_se_connecter'] ?></a>
  <?php endif; ?>

  <?php if (empty($success)): ?>
  <form method="POST">

    <!-- Nouveau mot de passe -->
    <div class="mb-3 field-wrapper">
      <input type="password" name="mot_de_passe" id="mot_de_passe" class="form-control" placeholder="<?php echo $translations['nouveau_mdp_placeholder'] ?>" required>
      <span class="toggle-password" onclick="toggle('mot_de_passe')">👁️</span>
    </div>

    <div id="niveau-securite" class="mb-2 text-muted"><?php echo $translations['mdp_regle_min'] ?></div>

    <div class="strength-bar mb-3">
      <div class="strength-fill"></div>
      <div class="strength-fill"></div>
      <div class="strength-fill"></div>
    </div>

    <!-- Confirmation mot de passe -->
    <div class="mb-4 field-wrapper">
      <input type="password" name="confirm_mot_de_passe" id="confirm_mot_de_passe" class="form-control" placeholder="<?php echo $translations['confirm_mdp_placeholder'] ?>" required>
      <span class="toggle-password" onclick="toggle('confirm_mot_de_passe')">👁️</span>
    </div>

    <button type="submit" class="btn btn-primary w-100"><?php echo $translations['btn_valider'] ?></button>
  </form>
  <?php endif; ?>
</div>

<script>
const T = {
  rule: '<?php echo addslashes($translations['mdp_regle_min']) ?>',
  weak: '<?php echo addslashes($translations['securite_faible']) ?>',
  medium: '<?php echo addslashes($translations['securite_moyen']) ?>',
  strong: '<?php echo addslashes($translations['securite_fort']) ?>'
};

function toggle(id) {
  const el = document.getElementById(id);
  el.type = el.type === 'password' ? 'text' : 'password';
}

document.getElementById('mot_de_passe').addEventListener('input', function () {
  const val = this.value;
  const segments = document.querySelectorAll('.strength-fill');
  const niveauText = document.getElementById('niveau-securite');

  segments.forEach(seg => seg.style.backgroundColor = '#ccc');
  niveauText.textContent = T.rule;
  niveauText.style.color = '#666';

  const longOk = val.length >= 8;
  const lettre = /[A-Za-z]/.test(val);
  const chiffre = /\d/.test(val);
  const maj = /[A-Z]/.test(val);
  const special = /[^A-Za-z0-9]/.test(val);

  let force = 0;
  if (longOk && lettre && chiffre) force++;
  if (maj) force++;
  if (special) force++;

  if (force === 1) {
    segments[0].style.backgroundColor = 'red';
    niveauText.textContent = T.weak;
    niveauText.style.color = 'red';
  } else if (force === 2) {
    segments[0].style.backgroundColor = 'orange';
    segments[1].style.backgroundColor = 'orange';
    niveauText.textContent = T.medium;
    niveauText.style.color = 'orange';
  } else if (force >= 3) {
    segments.forEach(seg => seg.style.backgroundColor = 'green');
    niveauText.textContent = T.strong;
    niveauText.style.color = 'green';
  }
});
</script>

</div>
  <footer class="site-footer">
    <div class="container">
      <p><?php echo $translations['copyr'] ?></p>
    </div>
  </footer>
</body>
</html>