diff --git a/public/css/style.css b/public/css/style.css index f68569b..6ce203e 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -427,25 +427,21 @@ summary:focus-visible { flex: 0 0 20px; } -/* Authentification +/* Formulaires ------------------------------------------------------------------------ */ -.auth-panel { - max-width: 520px; -} - -.auth-panel h1 { - margin-top: 0; -} - -.rodauth { +.rodauth, +.contact-form { display: grid; - gap: 20px; + gap: 12px; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; } -.rodauth > p { +.rodauth > p, +.contact-form > p { margin: 0; - line-height: 1.5; } .rodauth .form-group { @@ -454,36 +450,90 @@ summary:focus-visible { margin: 0; } -.rodauth .form-label { +.rodauth .form-label, +.contact-form label, +.contact-form legend { font-weight: 700; } -.rodauth .form-control { +.rodauth .form-control, +.contact-form input:not([type="submit"]), +.contact-form textarea { + display: block; width: 100%; + margin: 0; padding: 10px; border: 1px solid var(--color-text); border-radius: 0; background: var(--color-text); color: var(--color-background); - font: inherit; + font-family: inherit; + font-size: 1.2rem; + font-weight: 400; + line-height: 1.4; } -.rodauth .btn-primary { +.contact-form textarea { + min-height: 150px; + resize: vertical; + box-shadow: 0 0 10px var(--color-surface-dark); +} + +.rodauth .btn-primary, +.contact-form .submit { + display: block; width: 100%; + margin: 0; padding: 10px 16px; border: 2px solid var(--color-accent); border-radius: 0; background: var(--color-accent); color: var(--color-background); - font: inherit; + font-family: inherit; + font-size: 1.2rem; font-weight: 700; + line-height: 1.4; cursor: pointer; } -.rodauth .btn-primary:hover { +.rodauth .btn-primary:hover, +.contact-form .submit:hover { filter: brightness(1.12); } +.contact-form fieldset { + display: grid; + min-width: 0; + gap: 10px; + margin: 0; + padding: 16px; + border: 1px solid var(--color-shadow-light); +} + +.contact-form legend { + padding-inline: 8px; + color: var(--color-highlight); +} + +.contact-form .form-description { + margin: 0; + font-weight: 400; + line-height: 1.5; +} + +.contact-form .form-choice-separator { + margin: 0; + text-align: center; +} + +.auth-panel { + max-width: 520px; +} + +.auth-panel h1 { + margin-top: 0; +} + .auth-links { margin-top: 28px; padding-top: 20px; @@ -506,46 +556,6 @@ summary:focus-visible { list-style: none; } -/* Formulaires ------------------------------------------------------------------------- */ - -.contact-form { - display: grid; - gap: 10px; - font-size: 1rem; - font-weight: 700; -} - -.contact-form input, -.contact-form textarea { - width: 100%; - margin: 0; - padding: 10px; - border: 0; - font-family: inherit; - font-size: 1.2rem; -} - -.contact-form input:not([type="submit"]), -.contact-form textarea { - background: var(--color-text); - color: var(--color-background); -} - -.contact-form textarea { - min-height: 150px; - resize: vertical; - box-shadow: 0 0 10px var(--color-surface-dark); -} - -.submit { - width: 100%; - background: var(--color-accent); - color: var(--color-background); - font-weight: 700; - cursor: pointer; -} - .honeypot { position: absolute; left: -10000px; diff --git a/views/create-account.erb b/views/create-account.erb index 017d322..4809a1d 100644 --- a/views/create-account.erb +++ b/views/create-account.erb @@ -27,56 +27,75 @@ > <%== rodauth.csrf_tag %> -

- Renseignez soit le prénom et le nom d'une personne physique, - soit la dénomination d'une personne morale. +

+ Choisissez l'une des deux possibilités suivantes.

- - " - > +
+ Compte personnel - <% if error = rodauth.field_error("first_name") %> -

<%= error %>

- <% end %> +

+ Pour créer un compte en votre nom (personne physique). +

- - " - > + + " + > - <% if error = rodauth.field_error("last_name") %> -

<%= error %>

- <% end %> + <% if error = rodauth.field_error("first_name") %> +

<%= error %>

+ <% end %> - - " - > + + " + > - <% if error = rodauth.field_error("organization_name") %> -

<%= error %>

- <% end %> + <% if error = rodauth.field_error("last_name") %> +

<%= error %>

+ <% end %> +
+ +

ou

+ +
+ Compte au nom d'une organisation + +

+ Pour créer un compte au nom d'une association, + d'une entreprise ou d'une autre personne morale. +

+ + + " + > + + <% if error = rodauth.field_error("organization_name") %> +

<%= error %>

+ <% end %> +
+ +

+ Adresse électronique +

- <%= error %>

<% end %> -

+

Nous vous enverrons un courriel pour vérifier votre adresse électronique. Vous choisirez votre mot de passe à cette étape.