Merge pull request #3221 from betagouv/logged-out-improvements

Sign-in screen visual improvements

app/assets/stylesheets/new_design/auth.scss

@@ -65,13 +65,15 @@ $auth-breakpoint: $two-columns-breakpoint;
 }
 
 .auth-form {
-  .reset-password {
+  .auth-options {
-    margin-top: - 3 * $default-spacer;
+    display: flex;
-    margin-bottom: $default-spacer;
+    justify-content: space-between;
+    margin-bottom: 4 * $default-spacer;
   }
 
   .remember-me {
     display: inline-block;
+    margin-bottom: 0;
   }
 
   .separation {
@@ -127,3 +129,13 @@ $auth-breakpoint: $two-columns-breakpoint;
     }
   }
 }
+
+.sign-in-form .form {
+  input[type="password"] {
+    margin-bottom: $default-spacer;
+  }
+
+  input[type="checkbox"] {
+    margin-bottom: 0;
+  }
+}

app/views/layouts/_new_header.haml

@@ -85,7 +85,9 @@
                 = link_to destroy_user_session_path, method: :delete, class: "menu-item menu-link" do
                   = image_tag "icons/sign-out.svg"
                   Se déconnecter
-
       - elsif request.path != new_user_session_path
+        - if request.path == new_user_registration_path
+          %li
+            Vous avez déjà un compte ?
         %li
           = link_to "Connexion", new_user_session_path, class: "button secondary"

app/views/users/sessions/new.html.haml

@@ -22,7 +22,7 @@
         .procedure-description
           = h simple_format(@dossier.procedure.description)
 
-    .column.auth-form
+    .column.auth-form.sign-in-form
       - if resource_name == :user
         %p.register
           %span
@@ -40,14 +40,16 @@
         = f.label :password, "Mot de passe"
         = f.password_field :password, value: @user.password, placeholder: "8 caractères minimum"
 
-        - if [:user, :gestionnaire].include?(resource_name)
+        .auth-options
-          .reset-password.text-right
-            = link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "link"
-
           - if devise_mapping.rememberable?
+            %div
               = f.check_box :remember_me, as: :boolean
               = f.label :remember_me, "Se souvenir de moi", class: 'remember-me'
 
+          - if [:user, :gestionnaire].include?(resource_name)
+            .text-right
+              = link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "link"
+
         = f.submit "Se connecter", class: "button large primary expand"
 
       .separation.center
@@ -58,4 +60,4 @@
         = link_to "", france_connect_particulier_path, class: "login-with-fc"
 
       .center
-        = link_to "Qu’est-ce que FranceConnect ?", "https://app.franceconnect.gouv.fr/en-savoir-plus", target: "_blank", class: "link"
+        = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", class: "link"