Improve flash messages

config/rodauth.rb

@@ -31,7 +31,6 @@ class Netig
 
     # Déconnexion
     logout_notice_flash "Vous êtes maintenant déconnecté."
-    logout_redirect "/"
 
     # Création de compte
     create_account_page_title "Créer un compte — NETig"
@@ -39,34 +38,39 @@ class Netig
     create_account_link_text "Créer un compte"
 
     before_create_account do
-      case param("kind")
+      first_name = param("first_name").to_s.strip
-      when "individual"
+      last_name = param("last_name").to_s.strip
-        throw_error_status(
+      organization_name = param("organization_name").to_s.strip
-          422, "first_name", "doit être renseigné"
-        ) if param("first_name").to_s.strip.empty?
 
-        throw_error_status(
+      individual =
-          422, "last_name", "doit être renseigné"
+        !first_name.empty? &&
-        ) if param("last_name").to_s.strip.empty?
+        !last_name.empty? &&
+        organization_name.empty?
 
-      when "organization"
+      organization =
-        throw_error_status(
+        first_name.empty? &&
-          422, "organization_name", "doit être renseignée"
+        last_name.empty? &&
-        ) if param("organization_name").to_s.strip.empty?
+        !organization_name.empty?
 
-      else
+      unless individual || organization
         throw_error_status(
-          422, "kind", "choisissez un type de compte"
+          422,
+          "first_name",
+          "Renseignez soit le prénom et le nom, soit la dénomination."
         )
       end
     end
 
     after_create_account do
-      member = if param("kind") == "individual"
+      first_name = param("first_name").to_s.strip
+      last_name = param("last_name").to_s.strip
+      organization_name = param("organization_name").to_s.strip
+
+      member = if organization_name.empty?
         {
           kind: "individual",
-          first_name: param("first_name").to_s.strip,
+          first_name: first_name,
-          last_name: param("last_name").to_s.strip,
+          last_name: last_name,
           organization_name: nil
         }
       else
@@ -74,7 +78,7 @@ class Netig
           kind: "organization",
           first_name: nil,
           last_name: nil,
-          organization_name: param("organization_name").to_s.strip
+          organization_name: organization_name
         }
       end
 

public/css/style.css

@@ -37,7 +37,6 @@
   --color-flash-notice-background: #294e43;
   --color-flash-error-background: #2c4647;
   --color-flash-error-border: #e6afa2;
-  --flash-space: 6rem;
 
   /* Ombres */
   --color-shadow-light: rgb(202 210 197 / 20%);
@@ -558,17 +557,10 @@ summary:focus-visible {
 /* Notifications
 ------------------------------------------------------------------------ */
 
-main.main--with-flash {
-  position: relative;
-}
-
 .flash-container {
-  position: absolute;
-  z-index: 1;
-  inset: 0 0 auto;
   display: grid;
   gap: 10px;
-  padding: 20px;
+  margin-block: 1.5rem;
 }
 
 .flash {
@@ -591,15 +583,6 @@ main.main--with-flash {
   color: var(--color-text);
 }
 
-main.main--with-flash > section:first-of-type {
-  padding-top: var(--flash-space);
-}
-
-main.main--with-flash > section.page-section:first-of-type {
-  padding-top:
-    calc(var(--flash-space) + clamp(24px, 5vw, 72px));
-}
-
 /* Tableaux
 ------------------------------------------------------------------------ */
 
@@ -685,10 +668,6 @@ footer {
 ------------------------------------------------------------------------ */
 
 @media screen and (max-width: 600px) {
-  :root {
-    --flash-space: 8rem;
-  }
-
   .box {
     margin-top: 60px;
     padding: 20px;

views/create-account.erb

@@ -1,136 +1,107 @@
-<% kind = request.params["kind"] %>
-<% valid_kind = %w[individual organization].include?(kind) %>
-
 <section class="page-section">
   <div class="content page-panel">
     <h1>Créer un compte</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>
       Créez un compte pour accéder à votre espace personnel
       et, si vous le souhaitez, demander à rejoindre NETig.
     </p>
 
-    <% if error = flash["error"] %>
+    <form
-      <p class="flash flash--error" role="alert"><%= error %></p>
+      action="<%= rodauth.create_account_path %>"
-    <% end %>
+      method="post"
-
+      class="contact-form"
-    <% unless valid_kind %>
+      accept-charset="UTF-8"
-      <p>Quel type de compte souhaitez-vous créer ?</p>
+    >
-
+      <%== rodauth.csrf_tag %>
-      <div class="hero__actions">
-        <a
-          class="button button--secondary"
-          href="<%= rodauth.create_account_path %>?kind=individual"
-        >
-          Personne physique
-        </a>
-
-        <a
-          class="button button--secondary"
-          href="<%= rodauth.create_account_path %>?kind=organization"
-        >
-          Personne morale
-        </a>
-      </div>
-
-    <% else %>
-      <form
-        action="<%= rodauth.create_account_path %>"
-        method="post"
-        class="contact-form"
-        accept-charset="UTF-8"
-      >
-        <%== rodauth.csrf_tag %>
-
-        <input type="hidden" name="kind" value="<%= kind %>">
-
-        <% if kind == "individual" %>
-          <h2>Personne physique</h2>
-
-          <label for="first_name">Prénom</label>
-          <input
-            id="first_name"
-            name="first_name"
-            type="text"
-            maxlength="128"
-            autocomplete="given-name"
-            value="<%= request.params["first_name"] %>"
-            required
-          >
-
-          <% if error = rodauth.field_error("first_name") %>
-            <p class="flash flash--error"><%= error %></p>
-          <% end %>
-
-          <label for="last_name">Nom</label>
-          <input
-            id="last_name"
-            name="last_name"
-            type="text"
-            maxlength="128"
-            autocomplete="family-name"
-            value="<%= request.params["last_name"] %>"
-            required
-          >
-
-          <% if error = rodauth.field_error("last_name") %>
-            <p class="flash flash--error"><%= error %></p>
-          <% end %>
-
-        <% else %>
-          <h2>Personne morale</h2>
-
-          <label for="organization_name">Dénomination</label>
-          <input
-            id="organization_name"
-            name="organization_name"
-            type="text"
-            maxlength="255"
-            autocomplete="organization"
-            value="<%= request.params["organization_name"] %>"
-            required
-          >
-
-          <% if error = rodauth.field_error("organization_name") %>
-            <p class="flash flash--error"><%= error %></p>
-          <% end %>
-        <% end %>
-
-        <label for="<%= rodauth.login_param %>">
-          Adresse électronique
-        </label>
-        <input
-          id="<%= rodauth.login_param %>"
-          name="<%= rodauth.login_param %>"
-          type="<%= rodauth.login_input_type %>"
-          maxlength="254"
-          autocomplete="email"
-          value="<%= request.params[rodauth.login_param] %>"
-          required
-        >
-
-        <% if error = rodauth.field_error(rodauth.login_param) %>
-          <p class="flash flash--error"><%= error %></p>
-        <% end %>
-
-        <p>
-          Nous vous enverrons un courriel pour vérifier votre adresse
-          électronique. Vous choisirez votre mot de passe à cette étape.
-        </p>
-
-        <input
-          type="submit"
-          value="<%= rodauth.create_account_button %>"
-          class="submit"
-        >
-      </form>
 
       <p>
-        <a href="<%= rodauth.create_account_path %>">
+        Renseignez soit le prénom et le nom d'une personne physique,
-          Changer de type de compte
+        soit la dénomination d'une personne morale.
-        </a>
       </p>
-    <% end %>
+
+      <label for="first_name">Prénom</label>
+      <input
+        id="first_name"
+        name="first_name"
+        type="text"
+        maxlength="128"
+        autocomplete="given-name"
+        value="<%= request.params["first_name"] %>"
+      >
+
+      <% if error = rodauth.field_error("first_name") %>
+        <p class="flash flash--error"><%= error %></p>
+      <% end %>
+
+      <label for="last_name">Nom</label>
+      <input
+        id="last_name"
+        name="last_name"
+        type="text"
+        maxlength="128"
+        autocomplete="family-name"
+        value="<%= request.params["last_name"] %>"
+      >
+
+      <% if error = rodauth.field_error("last_name") %>
+        <p class="flash flash--error"><%= error %></p>
+      <% end %>
+
+      <label for="organization_name">Dénomination</label>
+      <input
+        id="organization_name"
+        name="organization_name"
+        type="text"
+        maxlength="255"
+        autocomplete="organization"
+        value="<%= request.params["organization_name"] %>"
+      >
+
+      <% if error = rodauth.field_error("organization_name") %>
+        <p class="flash flash--error"><%= error %></p>
+      <% end %>
+
+      <label for="<%= rodauth.login_param %>">
+        Adresse électronique
+      </label>
+      <input
+        id="<%= rodauth.login_param %>"
+        name="<%= rodauth.login_param %>"
+        type="<%= rodauth.login_input_type %>"
+        maxlength="254"
+        autocomplete="email"
+        value="<%= request.params[rodauth.login_param] %>"
+        required
+      >
+
+      <% if error = rodauth.field_error(rodauth.login_param) %>
+        <p class="flash flash--error"><%= error %></p>
+      <% end %>
+
+      <p>
+        Nous vous enverrons un courriel pour vérifier votre adresse
+        électronique. Vous choisirez votre mot de passe à cette étape.
+      </p>
+
+      <input
+        type="submit"
+        value="<%= rodauth.create_account_button %>"
+        class="submit"
+      >
+    </form>
 
     <p>
       Vous avez déjà un compte ?

views/layout.erb

@@ -36,9 +36,11 @@
           <img src="/images/favicon.svg" alt="Accueil NETig">
         </a>
       <% end %>
+
       <a href="https://webmail.netig.net" target="_blank" rel="noopener noreferrer">NETmail ↗</a>
       <a href="https://cloud.netig.net" target="_blank" rel="noopener noreferrer">NETcloud ↗</a>
       <a href="https://git.netig.net" target="_blank" rel="noopener noreferrer">NETgit ↗</a>
+
       <% if rodauth.logged_in? %>
         <form method="post" action="<%= rodauth.logout_path %>">
           <%== rodauth.csrf_tag(rodauth.logout_path) %>
@@ -54,25 +56,7 @@
     </nav>
   </header>
 
-  <% notice = flash["notice"] %>
+  <main id="main-content">
-  <% error = flash["error"] %>
-
-  <main
-    id="main-content"
-    class="<%= 'main--with-flash' if notice || error %>"
-  >
-    <% if notice || error %>
-      <div class="flash-container">
-        <% if notice %>
-          <p class="flash flash--notice" role="status"><%= notice %></p>
-        <% end %>
-
-        <% if error %>
-          <p class="flash flash--error" role="alert"><%= error %></p>
-        <% end %>
-      </div>
-    <% end %>
-
     <%== yield %>
   </main>
 
@@ -83,6 +67,7 @@
       <p><a href="/legal">Mentions légales</a></p>
       <p>Fait avec ❤️ et <a href="https://roda.jeremyevans.net/" target="_blank" rel="noopener noreferrer">Roda</a> !</p>
     </div>
+
     <div class="botbar">
       <p>* L'association NETig est en cours de constitution et n'est pas encore déclarée.</p>
     </div>
@@ -91,4 +76,3 @@
 </body>
 
 </html>
-

views/login.erb

@@ -2,6 +2,18 @@
   <div class="content page-panel auth-panel">
     <h1>Connexion</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 %>
+
     <%== rodauth.login_form_header %>
     <%== rodauth.render("login-form") %>
 

views/verify-account-resend.erb

@@ -2,6 +2,18 @@
   <div class="content page-panel auth-panel">
     <h1>Renvoyer le courriel de vérification</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 %>
+
     <form
       action="<%= rodauth.verify_account_resend_path %>"
       method="post"