From a679486572e05848c7d317847fc031ae6cd51377 Mon Sep 17 00:00:00 2001 From: Rajat Talesra Date: Wed, 13 Sep 2023 21:46:57 +0530 Subject: [PATCH] Redesign sign-up and login pages (#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/images/apple-icon.svg | 3 + app/assets/images/facebook-icon.svg | 4 ++ app/assets/images/forem-icon.svg | 6 ++ app/assets/images/github-icon.svg | 3 + app/assets/images/google_oauth2-icon.svg | 6 ++ app/assets/images/twitter-icon.svg | 3 + app/assets/stylesheets/views/footer.scss | 8 +++ app/assets/stylesheets/views/signin.scss | 66 +++++++++++++------ .../registrations/_registration_form.html.erb | 57 ++++++++++++---- app/views/layouts/_top_bar.html.erb | 2 +- .../authentication/_email_login_form.html.erb | 18 ++--- .../_providers_registration_form.html.erb | 20 ++++-- config/locales/views/auth/en.yml | 3 +- config/locales/views/auth/fr.yml | 3 +- .../loginFlows/userChangePassword.spec.js | 2 +- .../seededFlows/loginFlows/userLogin.spec.js | 4 +- spec/requests/notifications_spec.rb | 8 ++- spec/requests/registrations_spec.rb | 10 ++- .../conditional_registration_spec.rb | 6 -- .../omniauth_redirect_uri_spec.rb | 4 +- .../user_logs_in_with_email_spec.rb | 8 ++- .../user_completes_onboarding_spec.rb | 4 +- .../system/user_logs_in_with_password_spec.rb | 2 +- 23 files changed, 178 insertions(+), 72 deletions(-) create mode 100644 app/assets/images/apple-icon.svg create mode 100644 app/assets/images/facebook-icon.svg create mode 100644 app/assets/images/forem-icon.svg create mode 100644 app/assets/images/github-icon.svg create mode 100644 app/assets/images/google_oauth2-icon.svg create mode 100644 app/assets/images/twitter-icon.svg diff --git a/app/assets/images/apple-icon.svg b/app/assets/images/apple-icon.svg new file mode 100644 index 000000000..24c74ec2c --- /dev/null +++ b/app/assets/images/apple-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/facebook-icon.svg b/app/assets/images/facebook-icon.svg new file mode 100644 index 000000000..961292c5a --- /dev/null +++ b/app/assets/images/facebook-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/forem-icon.svg b/app/assets/images/forem-icon.svg new file mode 100644 index 000000000..62aa11fce --- /dev/null +++ b/app/assets/images/forem-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/assets/images/github-icon.svg b/app/assets/images/github-icon.svg new file mode 100644 index 000000000..654a0ed86 --- /dev/null +++ b/app/assets/images/github-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/google_oauth2-icon.svg b/app/assets/images/google_oauth2-icon.svg new file mode 100644 index 000000000..76aef5952 --- /dev/null +++ b/app/assets/images/google_oauth2-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/assets/images/twitter-icon.svg b/app/assets/images/twitter-icon.svg new file mode 100644 index 000000000..886cdf543 --- /dev/null +++ b/app/assets/images/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/stylesheets/views/footer.scss b/app/assets/stylesheets/views/footer.scss index 982107bc8..cc089b187 100644 --- a/app/assets/stylesheets/views/footer.scss +++ b/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); diff --git a/app/assets/stylesheets/views/signin.scss b/app/assets/stylesheets/views/signin.scss index 4c6ea49c1..c42bcb3c8 100644 --- a/app/assets/stylesheets/views/signin.scss +++ b/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%; } diff --git a/app/views/devise/registrations/_registration_form.html.erb b/app/views/devise/registrations/_registration_form.html.erb index 34320ba17..27335a001 100644 --- a/app/views/devise/registrations/_registration_form.html.erb +++ b/app/views/devise/registrations/_registration_form.html.erb @@ -1,11 +1,19 @@ -
-
+
+
+ <% if Settings::General.resized_logo.present? %> + + <% end %> +

<% 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 %>

@@ -22,23 +30,50 @@ <%= render partial: "shared/authentication/providers_registration_form" %> <% if params[:state] == "new-user" %> -

- - Already have an account? Log in. - + +
+ By signing up, you are agreeing to our privacy policy, terms of use and code of conduct.
+ +
+ +
+ Already have an account? Log in. +
+ <% else %>
<% if Settings::Authentication.allow_email_password_login %> -
- - Have a password? Continue with your email address - +
+
+
OR
<%= render partial: "shared/authentication/email_login_form" %> + +
+ By signing in, you are agreeing to our privacy policy, terms of use and code of conduct. +
+ +
+ +
+ New to <%= community_name %>? Create account. +
<% end %>
<% end %>
+ + diff --git a/app/views/layouts/_top_bar.html.erb b/app/views/layouts/_top_bar.html.erb index fc65de144..a1029d0a5 100644 --- a/app/views/layouts/_top_bar.html.erb +++ b/app/views/layouts/_top_bar.html.erb @@ -1,5 +1,5 @@ -
+