Improve flash messages
This commit is contained in:
julien committed
1 parent
2d72b20cad
commit
189ad45eea
6 files changed
+144
-182
No files matched your search
+23
-19
@@ -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")
|
||||
when "individual"
|
||||
throw_error_status(
|
||||
422, "first_name", "doit être renseigné"
|
||||
) if param("first_name").to_s.strip.empty?
|
||||
first_name = param("first_name").to_s.strip
|
||||
last_name = param("last_name").to_s.strip
|
||||
organization_name = param("organization_name").to_s.strip
|
||||
|
||||
throw_error_status(
|
||||
422, "last_name", "doit être renseigné"
|
||||
) if param("last_name").to_s.strip.empty?
|
||||
individual =
|
||||
!first_name.empty? &&
|
||||
!last_name.empty? &&
|
||||
organization_name.empty?
|
||||
|
||||
when "organization"
|
||||
throw_error_status(
|
||||
422, "organization_name", "doit être renseignée"
|
||||
) if param("organization_name").to_s.strip.empty?
|
||||
organization =
|
||||
first_name.empty? &&
|
||||
last_name.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,
|
||||
last_name: param("last_name").to_s.strip,
|
||||
first_name: first_name,
|
||||
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
|
||||
|
||||
|
||||
+1
-22
@@ -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;
|
||||
|
||||
+92
-121
@@ -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"] %>
|
||||
<p class="flash flash--error" role="alert"><%= error %></p>
|
||||
<% end %>
|
||||
|
||||
<% unless valid_kind %>
|
||||
<p>Quel type de compte souhaitez-vous créer ?</p>
|
||||
|
||||
<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>
|
||||
<form
|
||||
action="<%= rodauth.create_account_path %>"
|
||||
method="post"
|
||||
class="contact-form"
|
||||
accept-charset="UTF-8"
|
||||
>
|
||||
<%== rodauth.csrf_tag %>
|
||||
|
||||
<p>
|
||||
<a href="<%= rodauth.create_account_path %>">
|
||||
Changer de type de compte
|
||||
</a>
|
||||
Renseignez soit le prénom et le nom d'une personne physique,
|
||||
soit la dénomination d'une personne morale.
|
||||
</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 ?
|
||||
|
||||
+4
-20
@@ -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"] %>
|
||||
<% 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 %>
|
||||
|
||||
<main id="main-content">
|
||||
<%== 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>
|
||||
|
||||
@@ -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") %>
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in new issue
Block a user