From a57fa574eb361a719e209d37581fad1c3fe7b06d Mon Sep 17 00:00:00 2001
From: julien <julien.deb@netig.net>
Date: Tue, 3 Nov 2026 14:34:14 +0100
Subject: [PATCH] Imrpove style

---
 config/rodauth.rb               | 148 ++++++++++++++++++++++++++++++++
 netig.rb                        | 130 +++-------------------------
 public/css/style.css            |  79 +++++++++++++++++
 views/layout.erb                |   2 +-
 views/login.erb                 |  22 +++++
 views/verify-account-resend.erb |  34 ++++++++
 6 files changed, 298 insertions(+), 117 deletions(-)
 create mode 100644 config/rodauth.rb
 create mode 100644 views/login.erb
 create mode 100644 views/verify-account-resend.erb

diff --git a/config/rodauth.rb b/config/rodauth.rb
new file mode 100644
index 0000000..3a33e70
--- /dev/null
+++ b/config/rodauth.rb
@@ -0,0 +1,148 @@
+class Netig
+  plugin :rodauth do
+    db DB
+
+    enable :login, :logout, :create_account, :verify_account
+
+    domain ENV.fetch("RODAUTH_DOMAIN")
+    base_url ENV.fetch("BASE_URL")
+    hmac_secret ENV.fetch("RODAUTH_HMAC_SECRET")
+
+    account_unverified_status_value 1
+    account_open_status_value 2
+
+    email_from "NETig <noreply@netig.net>"
+
+    title_instance_variable :@page_title
+
+    # Connexion
+    login_page_title "Connexion — NETig"
+    login_label "Adresse électronique"
+    password_label "Mot de passe"
+    login_button "Se connecter"
+
+    login_notice_flash "Vous êtes maintenant connecté."
+    login_error_flash "La connexion a échoué."
+
+    login_redirect "/temporary_page"
+    login_return_to_requested_location? true
+
+    # 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"
+    create_account_button "Créer mon compte"
+    create_account_link_text "Créer un compte"
+
+    before_create_account do
+      case param("kind")
+      when "individual"
+        throw_error_status(
+          422, "first_name", "doit être renseigné"
+        ) if param("first_name").to_s.strip.empty?
+
+        throw_error_status(
+          422, "last_name", "doit être renseigné"
+        ) if param("last_name").to_s.strip.empty?
+
+      when "organization"
+        throw_error_status(
+          422, "organization_name", "doit être renseignée"
+        ) if param("organization_name").to_s.strip.empty?
+
+      else
+        throw_error_status(
+          422, "kind", "choisissez un type de compte"
+        )
+      end
+    end
+
+    after_create_account do
+      member = if param("kind") == "individual"
+        {
+          kind: "individual",
+          first_name: param("first_name").to_s.strip,
+          last_name: param("last_name").to_s.strip,
+          organization_name: nil
+        }
+      else
+        {
+          kind: "organization",
+          first_name: nil,
+          last_name: nil,
+          organization_name: param("organization_name").to_s.strip
+        }
+      end
+
+      db[:members].insert(
+        member.merge(
+          account_id: account[:id],
+          core_member: false
+        )
+      )
+    end
+
+    # Vérification de l'adresse électronique
+    verify_account_page_title(
+      "Vérifier votre adresse électronique — NETig"
+    )
+    verify_account_button "Confirmer mon adresse électronique"
+    verify_account_set_password? true
+
+    verify_account_email_subject(
+      "Confirmez votre adresse électronique — NETig"
+    )
+
+    verify_account_email_body do
+      <<~EMAIL
+        Bonjour,
+
+        Pour vérifier votre adresse électronique et activer votre compte
+        NETig, ouvrez le lien suivant :
+
+        #{verify_account_email_link}
+
+        Si vous n'êtes pas à l'origine de cette demande, ignorez ce message.
+
+        L'équipe NETig
+      EMAIL
+    end
+
+    verify_account_email_sent_notice_flash(
+      "Un courriel de vérification vient de vous être envoyé."
+    )
+
+    verify_account_notice_flash(
+      "Votre adresse électronique est maintenant vérifiée."
+    )
+
+    # Renvoi du courriel de vérification
+    resend_verify_account_page_title(
+      "Renvoyer le courriel de vérification — NETig"
+    )
+
+    verify_account_resend_explanatory_text(
+      "Si vous n'avez pas reçu le courriel de vérification, indiquez " \
+      "l'adresse électronique associée à votre compte pour demander " \
+      "un nouvel envoi."
+    )
+
+    verify_account_resend_button "Renvoyer le courriel"
+
+    verify_account_resend_link_text(
+      "Renvoyer le courriel de vérification"
+    )
+
+    verify_account_resend_error_flash(
+      "Impossible de renvoyer le courriel de vérification. " \
+      "Vérifiez l'adresse saisie ou réessayez plus tard."
+    )
+
+    # Sessions
+    already_logged_in do
+      request.redirect("/")
+    end
+  end
+end
diff --git a/netig.rb b/netig.rb
index f703975..a6a3f38 100644
--- a/netig.rb
+++ b/netig.rb
@@ -7,6 +7,7 @@ require_relative "lib/contact_form"
 require_relative "lib/contact_mailer"
 require_relative "lib/document_renderer"
 
+# Application et plugins Roda
 class Netig < Roda
   plugin :render, escape: true
   plugin :public
@@ -15,125 +16,18 @@ class Netig < Roda
   plugin :route_csrf, csrf_failure: :empty_403
   plugin :hash_branches
   plugin :flash
+end
 
-  plugin :rodauth do
-    db DB
+# Authentification
+require_relative "config/rodauth"
 
-    enable :login, :logout, :create_account, :verify_account
-
-    domain ENV.fetch("RODAUTH_DOMAIN")
-
-    account_unverified_status_value 1
-    account_open_status_value 2
-
-    base_url ENV.fetch("BASE_URL")
-    hmac_secret ENV.fetch("RODAUTH_HMAC_SECRET")
-
-    email_from "NETig <noreply@netig.net>"
-
-    login_label "Adresse électronique"
-    password_label "Mot de passe"
-    login_button "Se connecter"
-
-    login_notice_flash "Vous êtes maintenant connecté."
-    login_error_flash "La connexion a échoué."
-    logout_notice_flash "Vous êtes maintenant déconnecté."
-
-    login_redirect "/temporary_page"
-    login_return_to_requested_location? true
-
-    create_account_page_title "Créer un compte — NETig"
-    create_account_button "Créer mon compte"
-    create_account_link_text "Créer un compte"
-
-    verify_account_page_title "Vérifier votre adresse électronique — NETig"
-    verify_account_button "Confirmer mon adresse électronique"
-    verify_account_set_password? true
-
-    verify_account_email_subject "Confirmez votre adresse électronique — NETig"
-
-    verify_account_email_body do
-      <<~EMAIL
-        Bonjour,
-
-        Pour vérifier votre adresse électronique et activer votre compte
-        NETig, ouvrez le lien suivant :
-
-        #{verify_account_email_link}
-
-        Si vous n'êtes pas à l'origine de cette demande, ignorez ce message.
-
-        L'équipe NETig
-      EMAIL
-    end
-
-    verify_account_email_sent_notice_flash(
-      "Un courriel de vérification vient de vous être envoyé."
-    )
-
-    verify_account_notice_flash(
-      "Votre adresse électronique est maintenant vérifiée."
-    )
-
-    before_create_account do
-      case param("kind")
-      when "individual"
-        throw_error_status(
-          422, "first_name", "doit être renseigné"
-        ) if param("first_name").to_s.strip.empty?
-
-        throw_error_status(
-          422, "last_name", "doit être renseigné"
-        ) if param("last_name").to_s.strip.empty?
-
-      when "organization"
-        throw_error_status(
-          422, "organization_name", "doit être renseignée"
-        ) if param("organization_name").to_s.strip.empty?
-
-      else
-        throw_error_status(
-          422, "kind", "choisissez un type de compte"
-        )
-      end
-    end
-
-    after_create_account do
-      member = if param("kind") == "individual"
-        {
-          kind: "individual",
-          first_name: param("first_name").to_s.strip,
-          last_name: param("last_name").to_s.strip,
-          organization_name: nil
-        }
-      else
-        {
-          kind: "organization",
-          first_name: nil,
-          last_name: nil,
-          organization_name: param("organization_name").to_s.strip
-        }
-      end
-
-      db[:members].insert(
-        member.merge(
-          account_id: account[:id],
-          core_member: false
-        )
-      )
-    end
-
-    already_logged_in do
-      request.redirect("/")
-    end
-
-    logout_redirect "/"
-  end
-
-  require_relative "lib/authorization"
-  require_relative "routes/noyau"
-  require_relative "routes/contact"
+# Autorisations et routes secondaires
+require_relative "lib/authorization"
+require_relative "routes/noyau"
+require_relative "routes/contact"
 
+# Routes principales
+class Netig
   route do |r|
     r.rodauth
 
@@ -141,11 +35,13 @@ class Netig < Roda
     check_csrf!
     r.hash_branches
 
+    # Accueil
     r.root do
       @canonical_url = "https://netig.net/"
       view "index"
     end
 
+    # Statuts
     r.get "statutes" do
       @page_title = "Statuts — NETig"
       @page_description = "Statuts de l'association NETig."
@@ -156,6 +52,7 @@ class Netig < Roda
       view "document"
     end
 
+    # Mentions légales
     r.get "legal" do
       @page_title = "Mentions légales — NETig"
       @page_description = "Mentions légales de l'association NETig."
@@ -166,6 +63,7 @@ class Netig < Roda
       view "document"
     end
 
+    # Page temporaire
     r.get "temporary_page" do
       @page_title = "Page temporaire — NETig"
       @page_description = "Cette page n'existe pas encore."
diff --git a/public/css/style.css b/public/css/style.css
index 999b0cb..02e2c5d 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -428,6 +428,85 @@ summary:focus-visible {
   flex: 0 0 20px;
 }
 
+/* Authentification
+------------------------------------------------------------------------ */
+
+.auth-panel {
+  max-width: 520px;
+}
+
+.auth-panel h1 {
+  margin-top: 0;
+}
+
+.rodauth {
+  display: grid;
+  gap: 20px;
+}
+
+.rodauth > p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.rodauth .form-group {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+}
+
+.rodauth .form-label {
+  font-weight: 700;
+}
+
+.rodauth .form-control {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--color-text);
+  border-radius: 0;
+  background: var(--color-text);
+  color: var(--color-background);
+  font: inherit;
+}
+
+.rodauth .btn-primary {
+  width: 100%;
+  padding: 10px 16px;
+  border: 2px solid var(--color-accent);
+  border-radius: 0;
+  background: var(--color-accent);
+  color: var(--color-background);
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.rodauth .btn-primary:hover {
+  filter: brightness(1.12);
+}
+
+.auth-links {
+  margin-top: 28px;
+  padding-top: 20px;
+  border-top: 1px solid var(--color-shadow-light);
+}
+
+.auth-links h2 {
+  margin: 0 0 14px;
+  padding: 0;
+  border: 0;
+  color: var(--color-highlight);
+  font-size: 1.4rem;
+}
+
+.auth-links ul {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 /* Formulaires
 ------------------------------------------------------------------------ */
 
diff --git a/views/layout.erb b/views/layout.erb
index 23ad670..1bea404 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -46,7 +46,7 @@
             Déconnexion
           </button>
         </form>
-      <% else %>
+      <% elsif request.path != rodauth.login_path %>
         <a class="topbar__account" href="<%= rodauth.login_path %>">
           Connexion ➜
         </a>
diff --git a/views/login.erb b/views/login.erb
new file mode 100644
index 0000000..1a8c46c
--- /dev/null
+++ b/views/login.erb
@@ -0,0 +1,22 @@
+<section class="page-section">
+  <div class="content page-panel auth-panel">
+    <h1>Connexion</h1>
+
+    <%== rodauth.login_form_header %>
+    <%== rodauth.render("login-form") %>
+
+    <% links = rodauth.login_form_footer_links %>
+
+    <% unless links.empty? %>
+      <nav class="auth-links" aria-label="Autres possibilités">
+        <h2>Autres possibilités</h2>
+
+        <ul>
+          <% links.each do |_, url, text| %>
+            <li><a href="<%= url %>"><%= text %></a></li>
+          <% end %>
+        </ul>
+      </nav>
+    <% end %>
+  </div>
+</section>
diff --git a/views/verify-account-resend.erb b/views/verify-account-resend.erb
new file mode 100644
index 0000000..abd213e
--- /dev/null
+++ b/views/verify-account-resend.erb
@@ -0,0 +1,34 @@
+<section class="page-section">
+  <div class="content page-panel auth-panel">
+    <h1>Renvoyer le courriel de vérification</h1>
+
+    <form
+      action="<%= rodauth.verify_account_resend_path %>"
+      method="post"
+      class="rodauth"
+      role="form"
+      id="verify-account-resend-form"
+    >
+      <%== rodauth.verify_account_resend_additional_form_tags %>
+      <%== rodauth.csrf_tag(rodauth.verify_account_resend_path) %>
+
+      <p><%= rodauth.verify_account_resend_explanatory_text %></p>
+
+      <%== rodauth.param_or_nil(rodauth.login_param) ?
+        rodauth.login_hidden_field :
+        rodauth.render("login-field") %>
+
+      <%== rodauth.button(rodauth.verify_account_resend_button) %>
+    </form>
+
+    <nav class="auth-links" aria-label="Autres possibilités">
+      <ul>
+        <li>
+          <a href="<%= rodauth.login_path %>">
+            Retour à la connexion
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</section>