Ori
GitHub

AuthUpdatePassword - Définition d’un nouveau mot de passe

Spécification design de l’écran login-update-password.ftl Keycloak.

Contexte d’usage

Affiché dans deux cas :

  1. L’usager a cliqué sur le lien reçu par email après une demande de mot de passe oublié (cf. AuthResetPassword)
  2. Keycloak force le changement de mot de passe (mot de passe expiré, politique de rotation, premier login après création par un admin)

Rendu visuel

Définir un nouveau mot de passe

Choisissez un mot de passe robuste que vous n’utilisez nulle part ailleurs.

12 caractères minimum, dont une majuscule, un chiffre et un caractère spécial.

Code HTML pour login-update-password.ftl

<div class="pf-auth-page">
  <div class="ori-card ori-card--elevated pf-auth-card">
    <div class="ori-card__body pf-auth-body">
      <div class="pf-auth-brand">
        <span class="ori-logo">
          <img src="${url.resourcesPath}/img/logo-pf.svg" alt="" class="ori-logo__crest" />
          <span class="ori-logo__text">
            <span class="ori-logo__title">Polynésie française</span>
            <span class="ori-logo__subtitle">${realm.displayName!''}</span>
          </span>
        </span>
      </div>

      <div class="pf-auth-intro">
        <h1 class="pf-auth-title">${msg("updatePasswordTitle")}</h1>
        <p class="pf-auth-description">${msg("updatePasswordInstruction")}</p>
      </div>

      <#if message?has_content>
        <div class="ori-alert ori-alert--danger" role="alert">
          <div class="ori-alert__content">${kcSanitize(message.summary)?no_esc}</div>
        </div>
      </#if>

      <form id="kc-passwd-update-form" action="${url.loginAction}" method="post" class="pf-auth-form">
        <div class="ori-field">
          <label for="password-new" class="ori-field__label ori-field__label--required">${msg("passwordNew")}</label>
          <input id="password-new" name="password-new" type="password" autocomplete="new-password" required class="ori-input"
                 aria-invalid="<#if messagesPerField.existsError('password')>true</#if>" />
          <span class="ori-field__hint">${msg("passwordPolicyHint")}</span>
        </div>
        <div class="ori-field">
          <label for="password-confirm" class="ori-field__label ori-field__label--required">${msg("passwordConfirm")}</label>
          <input id="password-confirm" name="password-confirm" type="password" autocomplete="new-password" required class="ori-input"
                 aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>" />
        </div>
        <button type="submit" class="ori-btn ori-btn--primary ori-btn--block">${msg("doSubmit")}</button>
      </form>
    </div>
  </div>
</div>

Spécification fonctionnelle

Libellés

updatePasswordTitle=Définir un nouveau mot de passe
updatePasswordInstruction=Choisissez un mot de passe robuste que vous n'utilisez nulle part ailleurs.
passwordNew=Nouveau mot de passe
passwordConfirm=Confirmer le nouveau mot de passe
passwordPolicyHint=12 caractères minimum, dont une majuscule, un chiffre et un caractère spécial.
doSubmit=Mettre à jour

Politique de mot de passe

Le hint “12 caractères, majuscule, chiffre, caractère spécial” doit correspondre exactement à la politique configurée côté realm Keycloak. Si la politique change, mettre à jour le libellé passwordPolicyHint (côté traduction) et la spec ici.

Accessibilité

  • autocomplete="new-password" sur les deux champs (signal aux gestionnaires de mots de passe)
  • Hint des règles toujours visible, pas uniquement au focus
  • Focus initial : password-new

Sécurité

  • Champs type="password" : pas de “voir le mot de passe” par défaut (à spécifier ultérieurement avec mécanisme sécurisé si demandé)
  • Pas d’autocomplétion du mot de passe précédent dans le formulaire