Redesign sign-up and login pages (forem#20065)

* Signin Signup screen update

* Design for signin signup finished

* On hover effect

* Fixed few tests

* Fixed rSpec tests

* Minor design fixes

* Design changes suggested by Anuj

* Test fixes

* Updated test

* Nit fixes

* Path changes and footer and topbar hidden

* A bit simplified css

* Removed custom css

* Updated tests

* Nit css fixes

* Updates as per Ridhwana's review

* CSS fixes

* Used js-registration

app/assets/stylesheets/views/footer.scss

@@ -13,6 +13,14 @@
   display: none;
 }
 
+.registrations + #footer {
+  display: none;
+}
+
+.notifications + #footer {
+  display: none;
+}
+
 .crayons-footer {
   --footer-padding: var(--su-5);
   background: var(--footer-bg);

app/assets/stylesheets/views/signin.scss

@@ -65,21 +65,48 @@
 // Registration View
 .registration {
   border-radius: unset;
-  padding: var(--su-6);
+  padding: var(--su-4);
 
   @media (min-width: $breakpoint-s) {
     border-radius: var(--radius);
     padding: var(--su-8);
+    padding-top: var(--su-6);
     margin: 0 auto;
     width: $breakpoint-s;
   }
 
+  &__button-container {
+    border: 1px solid var(--form-border);
+
+    a {
+      color: var(--label-primary);
+    }
+
+    .js-focus-visible &.focus-visible:focus,
+    &:is(label):focus-within {
+      box-shadow: var(--focus-ring);
+      outline: 0;
+      z-index: var(--z-elevate);
+    }
+
+    &:hover {
+      border: 1px solid var(--form-border);
+      background: var(--card-tertiary-bg);
+    }
+  }
+
+  &__logo {
+    width: 48px;
+    height: 48px;
+  }
+
   &__content {
     margin-bottom: var(--su-6);
     text-align: center;
   }
 
   &__title {
+    margin-top: var(--su-4);
     color: var(--card-color);
     font-size: var(--fs-2xl);
     line-height: var(--lh-tight);
@@ -90,41 +117,40 @@
   }
 
   &__description {
+    margin-top: var(--su-1);
     color: var(--card-color-secondary);
     font-size: var(--fs-base);
   }
 
-  &__hr {
-    margin-bottom: var(--su-4);
+  &__hr-container {
     position: relative;
     text-align: center;
+    margin: var(--su-7) 0px;
+  }
 
-    &:after {
-      border: 1px solid var(--base-20);
-      content: '';
-      display: block;
-      position: absolute;
-      top: 50%;
-      width: 100%;
-      border-radius: var(--radius);
-    }
+  &__hr {
+    height: 1px;
+    margin: var(--su-6) 0px;
+    background-color: var(--divider);
+    border: none;
   }
 
   &__hr-label {
-    position: relative;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 0 var(--su-4);
+    color: var(--grey-700);
+    text-align: center;
     font-size: var(--fs-s);
-    color: var(--card-color-secondary);
-    background: var(--card-bg);
-    padding: 0 var(--su-2);
-    z-index: var(--z-elevate);
-    display: inline-block;
-    max-width: 75%;
   }
 
   &__actions-providers {
     margin-bottom: var(--su-4);
     display: grid;
-    grid-gap: var(--su-2);
+    grid-gap: var(--su-3);
     width: 100%;
   }
 

app/views/devise/registrations/_registration_form.html.erb

@@ -1,11 +1,19 @@
-<section class="crayons-layout">
-  <div class="registration crayons-card">
+<section class="crayons-layout bg-base-inverted max-w-100">
+  <div class="registration js-registration">
     <div class="registration__content">
+      <% if Settings::General.resized_logo.present? %>
+        <img class="registration__logo" src="<%= Settings::General.original_logo %>" alt="<%= community_name %>">
+      <% end %>
+
       <h1 class="registration__title">
         <% if params[:state] == "new-user" && ForemInstance.invitation_only? %>
           <%= community_name %> is invite only.
         <% else %>
-          Welcome to <%= community_name %>
+          <% if params[:state] == "new-user" %>
+            Join the <%= community_name %>
+          <% else %>
+            Welcome back to <%= community_name %>
+          <% end %>
         <% end %>
       </h1>
       <p class="registration__description">
@@ -22,23 +30,50 @@
       <%= render partial: "shared/authentication/providers_registration_form" %>
 
       <% if params[:state] == "new-user" %>
-        <div class="registration__hr">
-          <span class="registration__hr-label">
-            Already have an account? <a href="<%= sign_up_path %>">Log in</a>.
-          </span>
+
+        <div class="mt-6 align-center fs-s fw-normal fs-italic px-0 s:px-9 color-secondary">
+          By signing up, you are agreeing to our <a href="<%= privacy_path %>">privacy policy</a>, <a href="<%= terms_path %>">terms of use</a> and <a href="<%= code_of_conduct_path %>">code of conduct</a>.
+        </div>
+
+        <hr class="registration__hr" />
+
+        <div class="crayons-subtitle-3 color-grey-700 fw-normal align-center">
+          Already have an account? <a href="<%= sign_up_path %>">Log in</a>.
         </div>
+
       <% else %>
         <div class="registration__actions-email" id="sign-in-password-form">
           <% if Settings::Authentication.allow_email_password_login %>
-            <div class="registration__hr">
-              <span class="registration__hr-label">
-                Have a password? Continue with your email address
-              </span>
+            <div class="registration__hr-container">
+              <hr class="registration__hr" />
+              <div class="registration__hr-label">OR</div>
             </div>
             <%= render partial: "shared/authentication/email_login_form" %>
+
+            <div class="mt-6 align-center fs-s fw-normal fs-italic px-0 s:px-9 color-secondary">
+              By signing in, you are agreeing to our <a href="<%= privacy_path %>">privacy policy</a>, <a href="<%= terms_path %>">terms of use</a> and <a href="<%= code_of_conduct_path %>">code of conduct</a>.
+            </div>
+
+            <hr class="registration__hr" />
+
+            <div class="rcrayons-subtitle-3 color-grey-700 fw-normal align-center">
+              New to <%= community_name %>? <a href="/enter?state=new-user">Create account</a>.
+            </div>
           <% end %>
         </div>
       <% end %>
     </div>
   </div>
 </section>
+
+<script>
+  const registrationsPage = document.querySelector('.js-registration');
+  const topbarElement = document.querySelector('#topbar');
+  // Check if the registrations or notifications element exists and the topbar element exists.
+  if ((registrationsPage && topbarElement) || (notificationsPage && topbarElement)) {
+      topbarElement.style.display = 'none';
+      document.body.style.paddingTop = '0';
+      // This is needed to make sure that the bottom part of page is white when screen is zoomed-out.
+      document.body.style.backgroundColor = 'white';
+  }
+</script>

app/views/layouts/_top_bar.html.erb

@@ -1,5 +1,5 @@
 <div class="navigation-progress" id="navigation-progress"></div>
-<header class="crayons-header print-hidden">
+<header id="topbar" class="crayons-header topbar print-hidden">
   <span id="route-change-target" tabindex="-1"></span>
   <a href="#main-content" class="skip-content-link"><%= t("views.main.header.skip") %></a>
   <div class="crayons-header__container">

app/views/shared/authentication/_email_login_form.html.erb

@@ -9,17 +9,17 @@
     <%= f.password_field :password, autocomplete: "current-password", class: "crayons-textfield" %>
   </div>
 
-  <div class="crayons-field crayons-field--checkbox inline-flex flex-row items-center">
-    <%= f.check_box :remember_me, class: "crayons-checkbox" %>
-    <%= f.label :remember_me, class: "crayons-field__label fw-normal" %>
+  <div class="crayons-field flex flex-row items-center justify-between mb-3">
+    <div>
+      <%= f.check_box :remember_me, class: "crayons-checkbox" %>
+      <%= f.label :remember_me, class: "crayons-field__label fw-normal" %>
+    </div>
+    <a class="m-0" href="<%= new_password_path(:user) %>">
+       <%= t("views.auth.login.forgot") %>
+    </a>
   </div>
 
   <div class="actions pt-3">
-    <%= f.submit t("views.auth.login.continue"), class: "crayons-btn crayons-btn--l w-100" %>
+    <%= f.submit t("views.auth.login.text"), class: "crayons-btn crayons-btn--l w-100" %>
   </div>
 <% end %>
-<p class="pt-6 fs-s align-center">
-  <a href="<%= new_password_path(:user) %>">
-    <%= t("views.auth.login.forgot") %>
-  </a>
-</p>

app/views/shared/authentication/_providers_registration_form.html.erb

@@ -2,16 +2,22 @@
   <% authentication_enabled_providers.each do |provider| %>
     <% next unless display_social_login?(provider.provider_name) %>
     <%= form_with url: provider.sign_in_path(state: "navbar_basic"), class: "flex w-100", local: true do |f| %>
-      <%= f.button type: :submit, class: "crayons-btn crayons-btn--l crayons-btn--brand-#{provider.provider_name} crayons-btn--icon-left grow-1 whitespace-nowrap" do %>
-        <%= crayons_icon_tag(provider.provider_name, aria_hidden: true, title: provider.provider_name) %>
-        <%= t("views.auth.provider.text", action: params[:state] == "new-user" ? t("views.auth.provider.signup") : t("views.auth.provider.login"), provider: provider.official_name) %>
+      <%= f.button type: :submit, class: "flex w-100 p-3 radius-default items-center bg-base-inverted registration__button-container brand-#{provider.provider_name}" do %>
+        <%= crayons_icon_tag("#{provider.provider_name}-icon", class: "crayons-icon--default", aria_hidden: true, width: 24, height: 24) %>
+        <span class="w-100 flex fw-medium fs-s justify-center items-center self-center color-primary">
+          <%= t("views.auth.provider.text", action: params[:state] == "new-user" ? t("views.auth.provider.signup") : t("views.auth.provider.login"), provider: provider.official_name) %>
+        </span>
       <% end %>
     <% end %>
   <% end %>
   <% if params[:state] == "new-user" && Settings::Authentication.allow_email_password_registration && !ForemInstance.invitation_only? %>
-    <%= link_to "#{crayons_icon_tag(:email, aria_hidden: true, title: t('views.auth.provider.email.icon'))}#{t('views.auth.provider.email.text')}".html_safe,
-                request.params.merge(state: "email_signup").except("i"),
-                class: "crayons-btn crayons-btn--l crayons-btn--brand-email crayons-btn--icon-left whitespace-nowrap",
-                data: { no_instant: "" } %>
+    <a href="<%= url_for(request.params.merge(state: "email_signup").except("i")) %>"
+      class="flex w-100 p-3 radius-default items-center bg-base-inverted registration__button-container"
+      data-no_instant="">
+      <%= crayons_icon_tag(:email, class: "crayons-icon--default", aria_hidden: true, width: 24, height: 24) %>
+      <span class="w-100 flex fw-medium fs-s justify-center items-center self-center color-primary">
+        <%= t("views.auth.provider.email.text") %>
+      </span>
+    </a>
   <% end %>
 </div>

config/locales/views/auth/en.yml

@@ -20,8 +20,7 @@ en:
       login:
         aria_label: Log in
         text: Log in
-        continue: Continue
-        forgot: I forgot my password
+        forgot: Forgot password?
       provider:
         text: "%{action} with %{provider}"
         login: Continue

config/locales/views/auth/fr.yml

@@ -20,8 +20,7 @@ fr:
       login:
         aria_label: Log in
         text: Se connecter
-        continue: Continue
-        forgot: I forgot my password
+        forgot: Forgot password?
       provider:
         text: "%{action} with %{provider}"
         login: Continue

cypress/e2e/seededFlows/loginFlows/userChangePassword.spec.js

@@ -49,7 +49,7 @@ describe('User Change Password', () => {
     );
 
     // Submit the form
-    cy.get('@loginForm').findByText('Continue').click();
+    cy.get('@loginForm').findByText('Log in').click();
     cy.wait(loginNetworkRequests);
 
     const { baseUrl } = Cypress.config();

cypress/e2e/seededFlows/loginFlows/userLogin.spec.js

@@ -27,7 +27,7 @@ describe('User Login', () => {
     });
 
     // Submit the form
-    cy.get('@loginForm').findByText('Continue').click();
+    cy.get('@loginForm').findByText('Log in').click();
 
     // User should be redirected to onboarding
     const { baseUrl } = Cypress.config();
@@ -56,7 +56,7 @@ describe('User Login', () => {
     });
 
     // Submit the form
-    cy.get('@loginForm').findByText('Continue').click();
+    cy.get('@loginForm').findByText('Log in').click();
 
     cy.url().should('contains', '/new?prefill=');
 

spec/requests/notifications_spec.rb

@@ -9,8 +9,10 @@
   let(:organization) { create(:organization) }
 
   before do
+    # rubocop:disable RSpec/ReceiveMessages
     allow(User).to receive(:staff_account).and_return(staff_account)
     allow(User).to receive(:mascot_account).and_return(mascot_account)
+    # rubocop:enable RSpec/ReceiveMessages
   end
 
   def has_both_names(response_body)
@@ -41,10 +43,10 @@ def renders_comments_html(comment)
     end
 
     context "when signed out" do
-      it "renders the signup page" do
+      it "renders the signin page" do
         get "/notifications"
 
-        expect(response.body).to include("Continue with")
+        expect(response.body).to include("By signing in")
       end
     end
 
@@ -53,7 +55,7 @@ def renders_comments_html(comment)
         sign_in user
 
         get "/notifications"
-        expect(response.body).not_to include("Continue with")
+        expect(response.body).not_to include("By signing in")
       end
     end