Improve style

views/create-account.erb

@@ -27,56 +27,75 @@
     >
       <%== rodauth.csrf_tag %>
 
-      <p>
-        Renseignez soit le prénom et le nom d'une personne physique,
-        soit la dénomination d'une personne morale.
+      <p class="form-description">
+        Choisissez l'une des deux possibilités suivantes.
       </p>
 
-      <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"] %>"
-      >
+      <fieldset>
+        <legend>Compte personnel</legend>
 
-      <% if error = rodauth.field_error("first_name") %>
-        <p class="flash flash--error"><%= error %></p>
-      <% end %>
+        <p class="form-description">
+          Pour créer un compte en votre nom (personne physique).
+        </p>
 
-      <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"] %>"
-      >
+        <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("last_name") %>
-        <p class="flash flash--error"><%= error %></p>
-      <% end %>
+        <% if error = rodauth.field_error("first_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"] %>"
-      >
+        <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("organization_name") %>
-        <p class="flash flash--error"><%= error %></p>
-      <% end %>
+        <% if error = rodauth.field_error("last_name") %>
+          <p class="flash flash--error"><%= error %></p>
+        <% end %>
+      </fieldset>
+
+      <p class="form-choice-separator">ou</p>
+
+      <fieldset>
+        <legend>Compte au nom d'une organisation</legend>
+
+        <p class="form-description">
+          Pour créer un compte au nom d'une association,
+          d'une entreprise ou d'une autre personne morale.
+        </p>
+
+        <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 %>
+      </fieldset>
+
+      <p>
+        <strong>Adresse électronique</strong>
+      </p>
 
-      <label for="<%= rodauth.login_param %>">
-        Adresse électronique
-      </label>
       <input
         id="<%= rodauth.login_param %>"
         name="<%= rodauth.login_param %>"
@@ -91,7 +110,7 @@
         <p class="flash flash--error"><%= error %></p>
       <% end %>
 
-      <p>
+      <p class="form-description">
         Nous vous enverrons un courriel pour vérifier votre adresse
         électronique. Vous choisirez votre mot de passe à cette étape.
       </p>