Forge-Engine/templates/auth/profile.html

{% extends "base.html" %}
{% block title %}Mon profil — Forge Engine{% endblock %}
{% block content %}
<section class="section">
  <div class="container" style="max-width:560px;">
    <h1 class="title">Mon profil</h1>

    {% if error %}
    <div class="notification is-danger">{{ error }}</div>
    {% endif %}
    {% if success %}
    <div class="notification is-success">{{ success }}</div>
    {% endif %}

    <div class="box">
      <h2 class="title is-5">Adresse email</h2>
      <p class="hint mb-4">
        {{ 'Compte administrateur' if user.role == 'admin' else 'Compte utilisateur' }}.
        {% if user.role != 'admin' %}Le dossier de ton jeu ({{ user.project_slug }}) est renommé automatiquement si tu changes d'adresse.{% endif %}
      </p>
      <form method="post" action="{{ url_for('profile_update_email') }}" autocomplete="off">
        <div class="field">
          <label class="label">Nouvelle adresse email</label>
          <div class="control"><input class="input" type="email" name="email" value="{{ user.email }}" required></div>
        </div>
        <div class="field">
          <label class="label">Mot de passe actuel</label>
          <div class="control"><input class="input" type="password" name="current_password" required autocomplete="current-password"></div>
        </div>
        <div class="field mt-4">
          <button type="submit" class="button primary">Changer d'adresse email</button>
        </div>
      </form>
    </div>

    <div class="box">
      <h2 class="title is-5">Informations</h2>
      <form method="post" action="{{ url_for('profile_update_name') }}">
        <div class="field">
          <label class="label">Prénom</label>
          <div class="control"><input class="input" type="text" name="prenom" value="{{ user.prenom }}" required></div>
        </div>
        <div class="field">
          <label class="label">Nom</label>
          <div class="control"><input class="input" type="text" name="nom" value="{{ user.nom }}" required></div>
        </div>
        <div class="field mt-4">
          <button type="submit" class="button primary">Enregistrer</button>
        </div>
      </form>
    </div>

    <div class="box">
      <h2 class="title is-5">Changer de mot de passe</h2>
      <form method="post" action="{{ url_for('profile_change_password') }}" autocomplete="off">
        <div class="field">
          <label class="label">Mot de passe actuel</label>
          <div class="control"><input class="input" type="password" name="current_password" required autocomplete="current-password"></div>
        </div>
        <div class="field">
          <label class="label">Nouveau mot de passe</label>
          <div class="control"><input class="input" type="password" id="password" name="new_password" required autocomplete="new-password"></div>
        </div>
        <div class="field">
          <div class="passwordStrengthBar"><div class="passwordStrengthFill" id="pwFill"></div></div>
          <ul class="passwordChecklist" id="pwChecklist">
            <li data-check="longueur">Au moins 8 caractères</li>
            <li data-check="majuscule">Une majuscule</li>
            <li data-check="minuscule">Une minuscule</li>
            <li data-check="chiffre">Un chiffre</li>
            <li data-check="special">Un caractère spécial (ex. ! ? # -)</li>
          </ul>
        </div>
        <div class="field">
          <label class="label">Confirmer le nouveau mot de passe</label>
          <div class="control"><input class="input" type="password" name="new_password_confirm" required autocomplete="new-password"></div>
        </div>
        <div class="field mt-4">
          <button type="submit" class="button primary">Changer le mot de passe</button>
        </div>
      </form>
    </div>

    <div class="box">
      <h2 class="title is-5">Codes de récupération 2FA</h2>
      <p class="hint mb-4">Régénérer tes codes remplace immédiatement les 10 précédents par 10 nouveaux — les anciens ne fonctionneront plus. Les nouveaux codes ne sont affichés qu'une seule fois, juste après.</p>
      <form method="post" action="{{ url_for('profile_regenerate_recovery_codes') }}" autocomplete="off">
        <div class="field">
          <label class="label">Mot de passe actuel</label>
          <div class="control"><input class="input" type="password" name="current_password" required autocomplete="current-password"></div>
        </div>
        <div class="field mt-4">
          <button type="submit" class="button primary">Régénérer mes 10 codes de récupération</button>
        </div>
      </form>
    </div>

    <div class="box" style="border:1px solid #b33;">
      <h2 class="title is-5">Supprimer mon compte</h2>
      <p class="hint mb-4">
        {% if user.role != 'admin' %}
        Action définitive et irréversible : ton compte ET ton jeu ({{ user.project_slug }}) seront supprimés, sans possibilité de récupération.
        {% else %}
        Action définitive et irréversible : ton compte sera supprimé (tes jeux existants ne sont pas touchés).
        {% endif %}
      </p>
      <form method="post" action="{{ url_for('profile_delete') }}" autocomplete="off">
        <div class="field">
          <label class="label">Mot de passe actuel</label>
          <div class="control"><input class="input" type="password" name="current_password" required autocomplete="current-password"></div>
        </div>
        <div class="field">
          <label class="label">Tape "SUPPRIMER" pour confirmer</label>
          <div class="control"><input class="input" type="text" name="confirm_text" required></div>
        </div>
        <div class="field mt-4">
          <button type="submit" class="button is-danger">Supprimer définitivement mon compte</button>
        </div>
      </form>
    </div>
  </div>
</section>

<script>
var MIN_SCORE_REQUIRED = {{ min_score_required }};
var PW_CHECKS = {
  longueur: function (p) { return p.length >= 8; },
  majuscule: function (p) { return /[A-Z]/.test(p); },
  minuscule: function (p) { return /[a-z]/.test(p); },
  chiffre: function (p) { return /\d/.test(p); },
  special: function (p) { return /[^A-Za-z0-9]/.test(p); },
};
(function () {
  var input = document.getElementById('password');
  var fill = document.getElementById('pwFill');
  var items = document.querySelectorAll('#pwChecklist li');
  if (!input) return;
  function update() {
    var value = input.value || '';
    var score = 0;
    items.forEach(function (li) {
      var ok = PW_CHECKS[li.dataset.check](value);
      li.classList.toggle('ok', ok);
      if (ok) score++;
    });
    var pct = (score / items.length) * 100;
    fill.style.width = pct + '%';
    fill.className = 'passwordStrengthFill' +
      (score >= items.length ? ' strong' : score >= MIN_SCORE_REQUIRED ? ' good' : score >= 2 ? ' medium' : ' weak');
  }
  input.addEventListener('input', update);
  update();
})();
</script>
{% endblock %}