Merge pull request #2492 from aignatov-bio/ai-sci-4339-refactor-login-screen

Update css for login screen [SCI-4339]

app/assets/stylesheets/forgot_password.scss

@@ -0,0 +1,33 @@
+// scss-lint:disable SelectorDepth NestingDepth IdSelector
+
+.forgot-password-layout {
+  #content-wrapper {
+    margin-left: 0;
+
+    .container:first-child {
+      padding: 0;
+    }
+  }
+
+  .forgot-password-container {
+    display: flex;
+
+    .forgot-password-form-wrapper {
+      flex-basis: 50%;
+      flex-grow: 1;
+
+      .center-block-narrow {
+        margin-top: 72px;
+        padding: 0 50px;
+      }
+
+      .forgot-password-title {
+        margin-bottom: 24px;
+      }
+
+      .sci-input-container {
+        margin-bottom: 24px;
+      }
+    }
+  }
+}

app/assets/stylesheets/shared_styles/constants.scss

@@ -0,0 +1 @@
+@import "constants/*";

app/assets/stylesheets/shared_styles/elements/input_fields.scss

@@ -3,6 +3,7 @@
 .sci-input-container {
   display: inline-block;
   position: relative;
+  width: 100%;
 
   label {
     @include font-small;
@@ -14,8 +15,8 @@
   .sci-input-field {
     @include font-button;
     animation-timing-function: $timing-function-sharp;
-    border: $border-default;
-    border-radius: $border-radius-default;
+    border: $border-secondary;
+    border-radius: $border-radius-default !important;
     box-shadow: none;
     height: 36px;
     outline: 0;

app/assets/stylesheets/sign_up.scss

@@ -0,0 +1,61 @@
+// scss-lint:disable SelectorDepth NestingDepth IdSelector
+
+.sign-up-layout {
+  #content-wrapper {
+    margin-left: 0;
+
+    .container:first-child {
+      padding: 0;
+    }
+  }
+
+  .sign-up-container {
+    display: flex;
+
+    .sign-up-form-wrapper {
+      flex-basis: 50%;
+      flex-grow: 1;
+
+      .center-block-narrow {
+        margin-top: 72px;
+        padding: 0 50px;
+      }
+
+      .sign-up-title {
+        margin-bottom: 24px;
+      }
+
+      .sci-input-container {
+        margin-bottom: 24px;
+
+        .minimum-password-length {
+          @include font-small;
+        }
+      }
+
+      .sign-up-button {
+        padding: 7px 32px;
+      }
+
+      .linkedin-container {
+        margin-bottom: 24px;
+
+        .linkedin-link {
+          margin-right: 15px;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+
+        .linkedin-signin-button {
+          margin: 0;
+        }
+
+        span {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/sing_in.scss

@@ -0,0 +1,73 @@
+// scss-lint:disable SelectorDepth NestingDepth IdSelector
+
+.sign-in-layout {
+  #content-wrapper {
+    margin-left: 0;
+
+    .container:first-child {
+      padding: 0;
+    }
+  }
+
+  .sign-in-container {
+    display: flex;
+
+    .sign-in-form-wrapper {
+      flex-basis: 50%;
+      flex-grow: 1;
+
+      .center-block-narrow {
+        margin-top: 72px;
+        padding: 0 50px;
+      }
+
+      .log-in-title {
+        margin-bottom: 24px;
+      }
+
+      .remember-me {
+        align-items: center;
+        display: flex;
+        margin-bottom: 24px;
+
+        label {
+          margin-left: 8px;
+          margin-bottom: 0;
+        }
+      }
+
+      .sci-input-container {
+        margin-bottom: 24px;
+      }
+
+      .linkedin-container {
+        margin-bottom: 24px;
+
+        .linkedin-link {
+          margin-right: 15px;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+
+        .linkedin-signin-button {
+          margin: 0;
+        }
+
+        span {
+          font-weight: bold;
+        }
+      }
+
+      .log-in-button {
+        padding: 7px 32px;
+      }
+
+      .forgot-password-link {
+        display: inline-block;
+        margin-bottom: 16px;
+      }
+    }
+  }
+}

app/helpers/form_tag_helper.rb

@@ -1,9 +1,10 @@
 module FormTagHelper
   def recaptcha_input_tag
     if Rails.configuration.x.enable_recaptcha
-      res = "<div class='form-group "
+      res = "<div class='form-group sci-input-container"
       res << 'has-error' if flash[:recaptcha_error]
       res << "'>"
+      res << label_tag(:recaptcha_label, I18n.t('users.registrations.new.captcha_description'))
       res << recaptcha_tags
       if flash[:recaptcha_error]
         res << "<span class='help-block'>"

app/views/users/passwords/new.html.erb

@@ -1,25 +1,29 @@
 <% provide(:head_title, t("devise.passwords.new.head_title")) %>
+<% content_for(:body_class, 'forgot-password-layout') %>
+<div class="forgot-password-container">
+  <div class="forgot-password-form-wrapper">
+    <div class="center-block center-block-narrow">
+      <h1 class="forgot-password-title"><%=t "devise.passwords.new.title" %></h1>
 
-<div class="center-block center-block-narrow">
-  <h2><%=t "devise.passwords.new.title" %></h2>
+      <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
 
-  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
+        <% if not resource.errors.empty? %>
+        <div class="alert alert-danger" id="alert-flash">
+        <%= devise_error_messages! %>
+        </div>
+        <% end %>
 
-    <% if not resource.errors.empty? %>
-    <div class="alert alert-danger" id="alert-flash">
-    <%= devise_error_messages! %>
+        <div class="form-group sci-input-container">
+          <%= f.label :email %><br /actions>
+          <%= f.email_field :email, autofocus: true, class: "form-control sci-input-field" %>
+        </div>
+
+        <div class="form-group">
+          <%= f.submit t("devise.passwords.new.submit"), class: "btn btn-primary" %>
+        </div>
+      <% end %>
+
+      <%= render partial: 'users/shared/links', locals: {linkedin_skip: true} %>
     </div>
-    <% end %>
-
-    <div class="form-group">
-      <%= f.label :email %><br /actions>
-      <%= f.email_field :email, autofocus: true, class: "form-control" %>
-    </div>
-
-    <div class="form-group">
-      <%= f.submit t("devise.passwords.new.submit"), class: "btn btn-primary" %>
-    </div>
-  <% end %>
-
-  <%= render "users/shared/links" %>
+  </div>
 </div>

app/views/users/registrations/new.html.erb

@@ -1,53 +1,64 @@
 <% provide(:head_title, t('users.registrations.new.head_title')) %>
+<% content_for(:body_class, 'sign-up-layout') %>
+<div class="sign-up-container">
+  <div class="sign-up-form-wrapper">
+    <div class="center-block center-block-narrow">
+      <h1 class="sign-up-title"><%= t 'users.registrations.new.head_title' %></h1>
 
-<div class="center-block center-block-narrow">
-  <h1><%= t 'users.registrations.new.head_title' %></h1>
-  <div data-hook="sign-up-form-hook">
-  <%= form_for(:user, as: resource_name, url: registration_path(resource_name), html: { id: "sign-up-form" } ) do |f| %>
+      <%- if Rails.configuration.x.enable_user_registration && Rails.configuration.x.linkedin_signin_enabled && @oauth_authorize != true %>
+        <div class="linkedin-container">
+          <%= render partial: "users/shared/linkedin_sign_in_links", locals: { resource_name: resource_name } %>
+          <span><%= t("devise.sessions.new.or") %></span>
+        </div>
+      <% end -%>
 
-    <div class="form-group">
-      <%= f.label :full_name %>
-      <%= f.text_field :full_name, autofocus: true, class: 'form-control' %>
-    </div>
+      <div data-hook="sign-up-form-hook">
+      <%= form_for(:user, as: resource_name, url: registration_path(resource_name), html: { id: "sign-up-form" } ) do |f| %>
 
-    <div class="form-group">
-      <%= f.label :email %>
-      <%= f.email_field :email, class: 'form-control' %>
-    </div>
+        <div class="form-group sci-input-container">
+          <%= f.label :full_name, t('users.registrations.new.full_name_label') %>
+          <%= f.text_field :full_name, autofocus: true, class: 'form-control sci-input-field' %>
+        </div>
 
-    <div class="form-group">
-      <%= f.label :password %>
-      <% if @minimum_password_length %>
-      <em>(<%= @minimum_password_length %> characters minimum)</em>
+        <div class="form-group sci-input-container">
+          <%= f.label :email, t('users.registrations.new.email_label') %>
+          <%= f.email_field :email, class: 'form-control sci-input-field' %>
+        </div>
+
+        <div class="form-group sci-input-container">
+          <%= f.label :password, t('users.registrations.new.password_label') %>
+          <% if @minimum_password_length %>
+          <em class="minimum-password-length"><%= t('users.registrations.new.minimum_password_length', password_length: @minimum_password_length) %></em>
+          <% end %>
+          <%= f.password_field :password, autocomplete: 'off', class: 'form-control sci-input-field' %>
+        </div>
+
+        <div class="form-group sci-input-container" id="password_confirmation_form">
+          <%= f.label :password_confirmation, t('users.registrations.new.password_confirmation_label') %>
+          <%= f.password_field :password_confirmation, autocomplete: 'off', class: 'form-control sci-input-field' %>
+        </div>
+        <% if Rails.configuration.x.new_team_on_signup %>
+          <div class="form-group sci-input-container" id="team_name_form">
+            <%= label :team, :name, t('users.registrations.new.team_name_label') %>
+            <% if @team %>
+            <%= text_field :team, :name, class: 'form-control sci-input-field', value: @team.name,
+                placeholder: t('users.registrations.new.team_name_placeholder') %>
+            <% else %>
+            <%= text_field :team, :name, class: 'form-control sci-input-field',
+                placeholder: t('users.registrations.new.team_name_placeholder') %>
+            <% end %>
+          </div>
+        <% end %>
+        <%= recaptcha_input_tag %>
+
+        <div class="form-group" data-hook="sign-up-form-submit">
+          <%= f.submit 'Sign up', class: 'btn btn-primary sign-up-button' %>
+        </div>
       <% end %>
-      <%= f.password_field :password, autocomplete: 'off', class: 'form-control' %>
+      </div>
+      <%= render partial: 'users/shared/links', locals: {linkedin_skip: true} %>
     </div>
-
-    <div class="form-group" id="password_confirmation_form">
-      <%= f.label :password_confirmation %>
-      <%= f.password_field :password_confirmation, autocomplete: 'off', class: 'form-control' %>
-    </div>
-    <% if Rails.configuration.x.new_team_on_signup %>
-    <div class="form-group" id="team_name_form">
-      <%= label :team, :name, t('users.registrations.new.team_name_label') %>
-      <% if @team %>
-      <%= text_field :team, :name, class: 'form-control', value: @team.name,
-          placeholder: t('users.registrations.new.team_name_placeholder') %>
-      <% else %>
-      <%= text_field :team, :name, class: 'form-control',
-          placeholder: t('users.registrations.new.team_name_placeholder') %>
-      <% end %>
-      <span><small><%= t 'users.registrations.new.team_name_help' %></small></span>
-    </div>
-    <% end %>
-    <%= recaptcha_input_tag %>
-
-    <div class="form-group" data-hook="sign-up-form-submit">
-      <%= f.submit 'Sign up', class: 'btn btn-primary' %>
-    </div>
-  <% end %>
   </div>
-  <%= render 'users/shared/links' %>
 </div>
 
 <% if resource and not resource.errors.empty? %>

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

@@ -1,36 +1,46 @@
 <% provide(:head_title, t("devise.sessions.new.head_title")) %>
+<% content_for(:body_class, 'sign-in-layout') %>
+<div class="sign-in-container">
+  <div class="sign-in-form-wrapper">
+    <div class="center-block center-block-narrow">
+      <h1 class="log-in-title"><%=t "devise.sessions.new.title" %></h1>
 
-<div class="center-block center-block-narrow">
-  <h1><%=t "devise.sessions.new.title" %></h1>
+      <%- if Rails.configuration.x.enable_user_registration && Rails.configuration.x.linkedin_signin_enabled && @oauth_authorize != true %>
+        <div class="linkedin-container">
+          <%= render partial: "users/shared/linkedin_sign_in_links", locals: { resource_name: resource_name } %>
+          <span><%= t("devise.sessions.new.or") %></span>
+        </div>
+      <% end -%>
 
-  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-    <div class="input-group">
-      <span class="input-group-addon" style="text-transform: capitalize;">
-        <%= :email %>
-      </span>
-      <%= f.email_field :email, autofocus: true, class: "form-control", placeholder: t("devise.sessions.new.email_placeholder") %>
+      <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+        <div class="input-group sci-input-container">
+          <%= f.label :email, t("devise.sessions.new.email_field") %>
+          <%= f.email_field :email, autofocus: true, class: "form-control sci-input-field", placeholder: t("devise.sessions.new.email_placeholder") %>
+        </div>
+
+        <div class="input-group sci-input-container">
+          <%= f.label :password, t("devise.sessions.new.password_field") %>
+          <%= f.password_field :password, autocomplete: "off", class: "form-control sci-input-field", placeholder: t("devise.sessions.new.password_placeholder") %>
+        </div>
+
+        <% if devise_mapping.rememberable? && !@simple_sign_in %>
+          <div class="field remember-me">
+            <div class="sci-checkbox-container">
+              <%= f.check_box :remember_me, class: "sci-checkbox" %>
+              <span class="sci-checkbox-label"></span>
+            </div>
+            <%= f.label :remember_me, t("devise.sessions.new.remember_me") %>
+          </div>
+        <% end %>
+
+        <%= hidden_field_tag(:simple_sign_in, @simple_sign_in) %>
+
+        <div class="actions" style="margin-top: 10px; margin-bottom: 10px;">
+          <%= f.submit t("devise.sessions.new.submit"), class: "btn btn-primary log-in-button" %>
+        </div>
+      <% end %>
+
+      <%= render partial: "users/shared/links", locals: {linkedin_skip: true} unless @simple_sign_in %>
     </div>
-
-    <div class="input-group" style="margin-top: 10px;">
-      <span class="input-group-addon" style="text-transform: capitalize;">
-        <%= :password %>
-      </span>
-      <%= f.password_field :password, autocomplete: "off", class: "form-control", placeholder: t("devise.sessions.new.password_placeholder") %>
-    </div>
-
-    <% if devise_mapping.rememberable? && !@simple_sign_in %>
-      <div class="field" style="margin-top: 10px;">
-        <%= f.check_box :remember_me %>
-        <%= f.label :remember_me %>
-      </div>
-    <% end %>
-
-    <%= hidden_field_tag(:simple_sign_in, @simple_sign_in) %>
-
-    <div class="actions" style="margin-top: 10px; margin-bottom: 10px;">
-      <%= f.submit t("devise.sessions.new.submit"), class: "btn btn-primary" %>
-    </div>
-  <% end %>
-
-  <%= render "users/shared/links" unless @simple_sign_in %>
-</div>
+  </div>
+</div>

app/views/users/shared/_linkedin_sign_in_links.html.erb

@@ -0,0 +1,10 @@
+<%- if devise_mapping.omniauthable? && resource_class.omniauth_providers.any? %>
+  <%= link_to omniauth_authorize_path(resource_name, :linkedin), method: :post, title: "Sign in with LinkedIn", class: 'linkedin-link' do %>
+        <%= image_tag('linkedin/Sign-in-Large---Default.png',
+                      class: 'linkedin-signin-button',
+                      alt: "Sign in with LinkedIn",
+                      onmouseover: "src='#{image_path('linkedin/Sign-in-Large---Hover.png')}'",
+                      onmouseout: "src='#{image_path('linkedin/Sign-in-Large---Default.png')}'",
+                      onclick: "src='#{image_path('linkedin/Sign-in-Large---Active.png')}'") %>
+  <% end -%>
+<% end -%>

app/views/users/shared/_links.html.erb

@@ -5,12 +5,12 @@
     <%= link_to login, new_session_path(resource_name) %><br />
   <% end -%>
 
-  <%- if devise_mapping.registerable? && Rails.configuration.x.enable_user_registration && controller_name != 'registrations' %>
-    <%= link_to t("devise.links.signup"), new_registration_path(resource_name) %><br />
+  <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+    <%= link_to t("devise.links.forgot"), new_password_path(resource_name), class: 'forgot-password-link' %><br />
   <% end -%>
 
-  <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
-    <%= link_to t("devise.links.forgot"), new_password_path(resource_name) %><br />
+  <%- if devise_mapping.registerable? && Rails.configuration.x.enable_user_registration && controller_name != 'registrations' %>
+    <%= link_to t("devise.links.signup"), new_registration_path(resource_name), class: 'signup-link' %><br />
   <% end -%>
 
   <%- if Rails.configuration.x.enable_email_confirmations && devise_mapping.confirmable? && controller_name != 'confirmations' %>
@@ -25,16 +25,9 @@
     <div data-hook="omniauth-sign-in-links"></div>
   <% end -%>
 
-  <%- if Rails.configuration.x.enable_user_registration && Rails.configuration.x.linkedin_signin_enabled && @oauth_authorize != true %>
-    <%- if devise_mapping.omniauthable? && resource_class.omniauth_providers.any? && controller_name != 'registrations' %>
-      <%= link_to omniauth_authorize_path(resource_name, :linkedin), method: :post, :title => "Sign in with LinkedIn" do %>
-        <%= image_tag('linkedin/Sign-in-Large---Default.png',
-                      class: 'linkedin-signin-button',
-                      alt: "Sign in with LinkedIn",
-                      onmouseover: "src='#{image_path('linkedin/Sign-in-Large---Hover.png')}'",
-                      onmouseout: "src='#{image_path('linkedin/Sign-in-Large---Default.png')}'",
-                      onclick: "src='#{image_path('linkedin/Sign-in-Large---Active.png')}'") %>
-      <% end -%>
+  <%- unless defined?(linkedin_skip) %>
+    <%- if Rails.configuration.x.enable_user_registration && Rails.configuration.x.linkedin_signin_enabled && @oauth_authorize != true %>
+      <%= render partial: "users/shared/linkedin_sign_in_links", locals: { resource_name: resource_name } %>
     <% end -%>
   <% end -%>
 

config/locales/en.yml

@@ -19,15 +19,19 @@ en:
       new:
         head_title: "Forgot password"
         title: "Forgot your password?"
-        submit: "Send me reset password instructions"
+        submit: "Reset password"
     registrations:
       password_changed: "Password successfully updated."
     sessions:
       new:
         head_title: "Log in"
         title: "Log in"
-        email_placeholder: "username@email.com"
-        password_placeholder: "pass****"
+        or: "OR"
+        email_field: "E-mail"
+        email_placeholder: "john.doe@email.com"
+        password_field: "Password"
+        password_placeholder: "Enter password"
+        remember_me: "Remember me"
         submit: "Log in"
       create:
         team_name: "%{user}'s projects"
@@ -1535,7 +1539,12 @@ en:
         head_title: "Sign up"
         team_name_label: "Team name"
         team_name_placeholder: "e.g. John's lab"
-        team_name_help: "This is the name of your lab or your group. You can invite other members to your team if needed."
+        email_label: "E-mail"
+        full_name_label: "Full name"
+        password_label: "Password"
+        minimum_password_length: "(%{password_length} characters minimum)"
+        password_confirmation_label: "Password confirmation"
+        captcha_description: "Let us know you’re human. Enter the captcha below."
       new_with_provider:
         head_title: "Complete the Sign up"
     statistics:

features/sessions/forgot_password.feature

@@ -14,14 +14,14 @@ Background:
 Scenario: User forgot their password and requests for new password
   Given I am on reset password page
   Then I fill in "nonadmin@myorg.com" in "#user_email" field
-  And I click "Send me reset password instruction" button
+  And I click "Reset password" button
   Then I should see "You will receive an email with instructions on how to reset your password in a few minutes." flash message
 
 @javascript
 Scenario: User forgot their password and enters non valid email
   Given I am on reset password page
   Then I fill in "nonuser@myorg.com" in "#user_email" field
-  And I click "Send me reset password instruction" button
+  And I click "Reset password" button
   Then I should see "Email not found"
 
 @javascript

features/sessions/sign_up.feature

@@ -14,7 +14,7 @@ Feature: Sign up
   Scenario: Sign up for an existing user
     Given I visit the sign up page
     Then I fill the sign up form with
-    | Full name | Email          | Password | Password confirmation | Team name   |
+    | Full name | E-mail          | Password | Password confirmation | Team name   |
     | Magnus    | tusk@gmail.com | asdf1234 | asdf1234              | SpliceGirls |
     And I click on "Sign up"
     Then I should see "has already been taken"
@@ -23,7 +23,7 @@ Feature: Sign up
   Scenario: Sign up for an non-existent user
     Given I visit the sign up page
     Then I fill the sign up form with
-    | Full name | Email          | Password | Password confirmation | Team name   |
+    | Full name | E-mail          | Password | Password confirmation | Team name   |
     | Magnus    | magnus@gmail.com | asdf1234 | asdf1234            | SpliceGirls |
     And I click on "Sign up"
     Then I should be on homepage
@@ -32,7 +32,7 @@ Feature: Sign up
   Scenario: Unsuccessful sign up, password confirmation does not match
     Given I visit the sign up page
     Then I fill the sign up form with
-    | Full name | Email          | Password | Password confirmation | Team name   |
+    | Full name | E-mail          | Password | Password confirmation | Team name   |
     | Magnus    | magnus@gmail.com | asdf1234 | asdf1234567         | SpliceGirls |
     And I click on "Sign up"
     Then I should see "doesn't match Password"
@@ -41,7 +41,7 @@ Feature: Sign up
   Scenario: Unsuccessful sign up, team name is missing
     Given I visit the sign up page
     Then I fill the sign up form with
-    | Full name | Email          | Password | Password confirmation |
+    | Full name | E-mail          | Password | Password confirmation |
     | Magnus    | magnus@gmail.com | asdf1234 | asdf1234            |
     And I click on "Sign up"
     Then I should see "is too short (minimum is 2 characters)"

features/step_definitions/users_steps.rb

@@ -36,7 +36,7 @@ end
 Given("I click on Reset Password link in the reset password email for user {string}") do |email|
   visit new_user_password_path
   fill_in 'user_email', with: email
-  click_button 'Send me reset password instruction'
+  click_button 'Reset password'
 
   Delayed::Worker.new.work_off
   sleep 1