Style

config/rodauth.rb

@@ -26,6 +26,12 @@ class Netig
     login_notice_flash nil
     login_error_flash "La connexion a échoué."
 
+    # Messages d'erreur affichés sous les champs. Le message « no matching
+    # login » est aussi utilisé par le formulaire de renvoi de l'email de
+    # vérification : il doit donc rester neutre.
+    no_matching_login_message "Vérifiez l'adresse email saisie."
+    invalid_password_message "Mot de passe incorrect."
+
     attempt_to_login_to_unverified_account_error_flash(
       "Votre adresse électronique n'a pas encore été vérifiée."
     )
@@ -47,6 +53,12 @@ class Netig
       "Impossible de créer votre compte. Vérifiez les informations saisies."
     )
 
+    login_does_not_meet_requirements_message { "Adresse email invalide." }
+
+    already_an_account_with_this_login_message(
+      "Un compte existe déjà avec cet email."
+    )
+
     before_create_account do
       first_name = param("first_name").to_s.strip
       last_name = param("last_name").to_s.strip
@@ -104,6 +116,15 @@ class Netig
     verify_account_page_title "Vérifier votre email — NETig"
     verify_account_button "Confirmer mon email"
     verify_account_set_password? true
+    password_confirm_label "Confirmer le mot de passe"
+    passwords_do_not_match_message "Les mots de passe ne correspondent pas."
+
+    # Seule la longueur minimale est exigée : à mettre à jour si d'autres
+    # règles sont ajoutées.
+    password_does_not_meet_requirements_message do
+      "Le mot de passe doit contenir au moins " \
+      "#{password_minimum_length} caractères."
+    end
 
     verify_account_redirect "/account"
 

public/css/style.css

@@ -578,7 +578,8 @@ summary:focus-visible {
   margin-block: 1.5rem;
 }
 
-.flash {
+.flash,
+.rodauth .error_message {
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
@@ -592,7 +593,8 @@ summary:focus-visible {
   color: var(--color-text);
 }
 
-.flash--error {
+.flash--error,
+.rodauth .error_message {
   border-color: var(--color-flash-error-border);
   background: var(--color-flash-error-background);
   color: var(--color-text);

views/create-account.erb

@@ -1,5 +1,5 @@
 <section class="page-section">
-  <div class="content page-panel">
+  <div class="content page-panel auth-panel">
     <h1>Créer un compte</h1>
 
     <% if flash["error"] || flash["notice"] %>
@@ -92,10 +92,7 @@
         <% end %>
       </fieldset>
 
-      <p>
-        <strong>Email</strong>
-      </p>
-
+      <label for="<%= rodauth.login_param %>">Email</label>
       <input
         id="<%= rodauth.login_param %>"
         name="<%= rodauth.login_param %>"
@@ -122,9 +119,12 @@
       >
     </form>
 
-    <p>
-      Vous avez déjà un compte ?
-      <a href="<%= rodauth.login_path %>">Se connecter</a>.
-    </p>
+    <nav class="auth-links" aria-label="Autres possibilités">
+      <h2>Autres possibilités</h2>
+
+      <ul>
+        <li><a href="<%= rodauth.login_path %>">Se connecter</a></li>
+      </ul>
+    </nav>
   </div>
 </section>

views/verify-account-resend.erb

@@ -1,6 +1,6 @@
 <section class="page-section">
   <div class="content page-panel auth-panel">
-    <h1>Renvoyer le courriel de vérification</h1>
+    <h1>Email de vérification</h1>
 
     <% if flash["error"] || flash["notice"] %>
       <div class="flash-container">
@@ -34,6 +34,8 @@
     </form>
 
     <nav class="auth-links" aria-label="Autres possibilités">
+      <h2>Autres possibilités</h2>
+
       <ul>
         <li>
           <a href="<%= rodauth.login_path %>">

views/verify-account.erb

@@ -2,6 +2,18 @@
   <div class="content page-panel auth-panel">
     <h1>Vérifier votre email</h1>
 
+    <% if flash["error"] || flash["notice"] %>
+      <div class="flash-container">
+        <% if error = flash["error"] %>
+          <p class="flash flash--error" role="alert"><%= error %></p>
+        <% end %>
+
+        <% if notice = flash["notice"] %>
+          <p class="flash flash--notice" role="status"><%= notice %></p>
+        <% end %>
+      </div>
+    <% end %>
+
     <p>
       Pour confirmer votre email et activer
       votre compte, choisissez un mot de passe.
@@ -27,6 +39,8 @@
     </form>
 
     <nav class="auth-links" aria-label="Autres possibilités">
+      <h2>Autres possibilités</h2>
+
       <ul>
         <li>
           <a href="<%= rodauth.verify_account_resend_path %>">