Merge pull request #6986 from betagouv/fc-agent-2

Relooking agent connect v2

app/assets/stylesheets/agentconnect.scss

@@ -0,0 +1,27 @@
+@import "colors";
+@import "constants";
+
+#agentconnect {
+  .agent {
+    color: $blue-france-500;
+    text-align: center;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .box {
+    background-color: #F2F2F9;
+    padding: $default-padding;
+
+    ul {
+      list-style: disc;
+      padding-left: inherit;
+    }
+  }
+
+  .citizen {
+    font-size: 16px;
+    color: $blue-france-500;
+    font-weight: bold;
+  }
+}

app/assets/stylesheets/auth.scss

@@ -3,17 +3,23 @@
 @import "placeholders";
 @import "mixins";
 
-#auth {
+#auth,
+#agentconnect {
   // On small screens, hide the procedure description text on auth pages.
   // It avoids pushing the sign-in/sign-up form out of the viewport.
   //
   // The procedure description can still be read from the /commencer
   // pages.
   @media (max-width: $two-columns-breakpoint) {
-    .procedure-preview {
+    .procedure-preview,
+    .agent-intro {
       display: none;
     }
   }
+
+  .column {
+    padding-top: 2 * $default-spacer;
+  }
 }
 
 .auth-form {
@@ -53,6 +59,10 @@
 }
 
 .sign-in-form .form {
+  input[type="email"] {
+    margin-bottom: $default-padding;
+  }
+
   input[type="password"] {
     margin-bottom: $default-spacer;
   }

app/views/agent_connect/agent/index.html.haml

@@ -1,8 +1,45 @@
 - content_for(:title, t('.cta'))
 
-.container
+#agentconnect
-  %h1.mt-2.mb-2= t('.connect')
+  .two-columns
+    .columns-container
+      .column.agent-intro
+        %h1.mt-2.mb-2.agent= t('.you_are_an_agent')
+        .box= t('.in_progress_html')
 
-  %p= t('.intro_html', app_name: APPLICATION_NAME)
+        .center.mt-2
+          %span.citizen= t('.you_are_a_citizen')
+          %br
+          %br
+          = link_to t('.citizen_page'), new_user_session_path, class: "button expend secondary"
 
-  = link_to t('.cta'), agent_connect_login_path, class: "france-connect-agent-login-button"
+      .column
+        = t('.connect_html')
+
+        = link_to t('.cta'), agent_connect_login_path, class: "france-connect-agent-login-button"
+        .france-connect-help-link
+          = link_to t('.whats_agentconnect'), 'https://agentconnect.gouv.fr/', class: 'link', target: '_blank', target: "_blank", rel: "noopener", class: "link"
+
+        .france-connect-login-separator
+          = t('views.shared.france_connect_login.separator')
+
+        #session-new.auth-form.sign-in-form
+          = form_for User.new, url: user_session_path, html: { class: "form" } do |f|
+            = f.label :email, t('.pro_email')
+            = f.text_field :email, type: :email, autocomplete: 'username', autofocus: true
+
+            = f.label :password, t('views.users.sessions.new.password', min_length: PASSWORD_MIN_LENGTH)
+            = f.password_field :password, autocomplete: 'current-password'
+
+            .auth-options
+              .flex-no-shrink
+                = f.check_box :remember_me
+                = f.label :remember_me, t('views.users.sessions.new.remember_me'), class: 'remember-me'
+
+              .text-right
+                = link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "link"
+
+            = f.submit t('views.users.sessions.new.connection'), class: "button large primary expand"
+
+- content_for :footer do
+  = render partial: 'users/dossiers/index_footer'

app/views/layouts/_header.haml

@@ -62,7 +62,7 @@
         %li
           = render partial: 'layouts/account_dropdown', locals: { nav_bar_profile: nav_bar_profile }
 
-      - elsif request.path != new_user_session_path
+      - elsif (request.path != new_user_session_path && request.path != agent_connect_path)
         - if request.path == new_user_registration_path
           %li
             = t('views.shared.account.already_user_question')

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

@@ -23,11 +23,10 @@
 
     = f.submit t('views.users.sessions.new.connection'), class: "button large primary expand"
 
-  .france-connect-login-separator
-    = t('views.shared.france_connect_login.separator')
   - if AgentConnectService.enabled?
+    .france-connect-login-separator
+      = t('views.shared.france_connect_login.separator')
     .center
       %h2.important-header= t('views.users.sessions.new.state_civil_servant')
       %br
-      %br
       = link_to t('views.users.sessions.new.connect_with_agent_connect'), agent_connect_path, class: "button expend secondary"

config/locales/views/agent_connect/agent/en.yml

@@ -2,10 +2,21 @@ en:
   agent_connect:
     agent:
       index:
-        connect: Connect with AgentConnect
-        intro_html: |
-          AgentConnect allows <b class='bold'>instructors et administrators</b> to use their usual login credentials to connect to %{app_name}.
-          <br />
-          <br />
-          Only agents of <b class='bold'>the Ministry of Ecological Transition</b> can currently benefit from it.
         cta: Connect with AgentConnect
+        you_are_an_agent: Are you an employee of the state civil service or of a state operator?
+        in_progress_html: |
+          <p>
+            <b class="bold">AgentConnect is currently being deployed.</b>
+            <br>
+            The ministries and operators that can currently benefit from it are&nbsp;:
+          </p>
+          <ul>
+            <li>the Ministry of Ecological Transition</li>
+          </ul>
+        you_are_a_citizen: You are an individual ?
+        citizen_page: Go to our dedicated page
+        connect_html: |
+          <h1 class="mt-2 mb-2">Connect</h1>
+          <p><b class="bold">With AgentConnect</b></p>
+        whats_agentconnect: 'What is AgentConnect?'
+        pro_email: Professional email (nom@site.com)

config/locales/views/agent_connect/agent/fr.yml

@@ -2,10 +2,21 @@ fr:
   agent_connect:
     agent:
       index:
-        connect: Connectez-vous avec AgentConnect
-        intro_html: |
-          AgentConnect permet aux <b class='bold'>instructeurs et administrateurs</b> d’utiliser leurs identifiants habituels pour se connecter à %{app_name}.
-          <br />
-          <br />
-          Seul les agents du <b class='bold'>ministère de la Transition écologique</b> peuvent actuellement en bénéficier.
         cta: S’identifier avec AgentConnect
+        you_are_an_agent: Vous êtes agent de la fonction publique dʼÉtat ou dʼun opérateur de lʼÉtat ?
+        in_progress_html: |
+          <p>
+            <b class="bold">AgentConnect est en cours de déploiement.</b>
+            <br>
+            Les ministères et opérateurs qui peuvent l'utiliser à ce jour sont&nbsp;:
+          </p>
+          <ul>
+            <li>le ministère de la Transition écologique</li>
+          </ul>
+        you_are_a_citizen: Vous êtes un particulier ?
+        citizen_page: Accéder à notre page dédiée
+        connect_html: |
+          <h1 class="mt-2 mb-2">Connectez-vous</h1>
+          <p><b class="bold">Avec AgentConnect</b></p>
+        whats_agentconnect: 'Quʼest ce quʼAgentConnect ?'
+        pro_email: Email professionnel (nom@site.com)