From 54c071856e7a33a625cfa0efdb042b03016242f2 Mon Sep 17 00:00:00 2001 From: Lisa Sy Date: Mon, 31 Aug 2020 15:12:22 -0700 Subject: [PATCH] [deploy] Update top-header for logged-out user (#9874) * Create first start at desktop top header updates * Update mobile styling of top header * Stylize sign in widget card * Update nav menu and top bar * Changes based on user being logged-in or not * Uses user_signed_in? on top nav bar * Fix lingering old cloudinary helper method * Trigger CI * Fixes specs * Adds redirect_using_referer_spec, fixes other specs & cleanup * Adds nav-menu.scss to layouts/_styles.html.erb for inline & small edit in referer check * Remove logged-out styles to make it more uniform with logged in * Remove nav-menu.scss file * cleanup markup and JS a little * Fixes FB auth specs to new login links * Makes sure unauthenticated /new redirects back to editor * CI fix Sing in with -> Continue with * Update db/schema.rb * Update db/schema.rb * Update db/schema.rb Co-authored-by: Fernando Valverde Co-authored-by: ludwiczakpawel Co-authored-by: Ben Halpern --- .../initializers/initNotifications.js | 13 +- ...nitializeSpecialNavigationFunctionality.js | 39 +++-- app/assets/stylesheets/signin.scss | 160 ++++++++++++++++++ app/assets/stylesheets/top-bar.scss | 46 +++++ app/assets/stylesheets/views/signin.scss | 46 +++++ app/assets/stylesheets/widgets.scss | 29 ---- app/controllers/application_controller.rb | 2 +- app/controllers/articles_controller.rb | 7 +- app/controllers/registrations_controller.rb | 5 +- .../articles/_sidebar_additional.html.erb | 30 +++- app/views/layouts/_nav_menu.html.erb | 50 ++++-- app/views/layouts/_top_bar.html.erb | 36 ++-- spec/requests/registrations_spec.rb | 4 +- .../redirects_using_referer_spec.rb | 58 +++++++ .../user_logs_in_with_facebook_spec.rb | 38 ++--- .../user_logs_in_with_github_spec.rb | 34 ++-- .../user_logs_in_with_twitter_spec.rb | 36 ++-- .../homepage/user_visits_homepage_spec.rb | 4 +- .../system/user_logs_in_with_password_spec.rb | 6 +- 19 files changed, 492 insertions(+), 151 deletions(-) create mode 100644 app/assets/stylesheets/signin.scss create mode 100644 spec/system/authentication/redirects_using_referer_spec.rb diff --git a/app/assets/javascripts/initializers/initNotifications.js b/app/assets/javascripts/initializers/initNotifications.js index 20a1118e0..1879f0b89 100644 --- a/app/assets/javascripts/initializers/initNotifications.js +++ b/app/assets/javascripts/initializers/initNotifications.js @@ -125,11 +125,14 @@ function initReactions() { } function listenForNotificationsBellClick() { - setTimeout(function () { - document.getElementById('notifications-link').onclick = function () { - document.getElementById('notifications-number').classList.add('hidden'); - }; - }, 180); + var notificationsLink = document.getElementById('notifications-link'); + if (notificationsLink) { + setTimeout(function () { + notificationsLink.onclick = function () { + document.getElementById('notifications-number').classList.add('hidden'); + }; + }, 180); + } } function initFilter() { diff --git a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js index 7218446d4..2266861c0 100644 --- a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js +++ b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js @@ -1,23 +1,26 @@ function initializeSpecialNavigationFunctionality() { var connectLink = document.getElementById('connect-link'); var notificationsLink = document.getElementById('notifications-link'); - var moderationLink = document.getElementById('moderation-link') - if (document.getElementById('notifications-container')) { - notificationsLink.blur(); - notificationsLink.classList.add('top-bar__link--current'); - } else { - notificationsLink.classList.remove('top-bar__link--current'); - } - if (document.getElementById('chat')) { - connectLink.blur(); - connectLink.classList.add('top-bar__link--current'); - } else { - connectLink.classList.remove('top-bar__link--current'); - } - if (document.getElementById('moderation-page')) { - moderationLink.blur(); - moderationLink.classList.add('top-bar__link--current'); - } else { - moderationLink.classList.remove('top-bar__link--current'); + var moderationLink = document.getElementById('moderation-link'); + + if (connectLink) { + if (document.getElementById('notifications-container')) { + notificationsLink.blur(); + notificationsLink.classList.add('top-bar__link--current'); + } else { + notificationsLink.classList.remove('top-bar__link--current'); + } + if (document.getElementById('chat')) { + connectLink.blur(); + connectLink.classList.add('top-bar__link--current'); + } else { + connectLink.classList.remove('top-bar__link--current'); + } + if (document.getElementById('moderation-page')) { + moderationLink.blur(); + moderationLink.classList.add('top-bar__link--current'); + } else { + moderationLink.classList.remove('top-bar__link--current'); + } } } diff --git a/app/assets/stylesheets/signin.scss b/app/assets/stylesheets/signin.scss new file mode 100644 index 000000000..e6d08e96f --- /dev/null +++ b/app/assets/stylesheets/signin.scss @@ -0,0 +1,160 @@ +@import 'variables'; +@import 'config/import'; + +.authentication-feed { + &__card { + display: grid; + grid-gap: var(--su-6); + padding: var(--su-6); + margin: var(--su-3); + + @include generate-box( + $level: 1, + $bg: #f5f6fe, + $border: var(--accent-brand), + $color: var(--card-color) + ); + + @media (min-width: $breakpoint-s) { + padding: var(--su-7); + margin: 0 0 var(--su-3) 0; + } + } + + &__container { + @media (min-width: $breakpoint-s) { + display: flex; + grid-gap: var(--su-7); + flex-direction: row; + align-items: center; + } + } + + &__image-container { + width: var(--su-8); + height: var(--su-8); + margin-bottom: var(--su-2); + + @media (min-width: $breakpoint-s) { + height: 80px; + width: 80px; + } + } + + &__image { + border-radius: var(--radius); + transform: rotate(-10deg); + height: auto; + width: 100%; + } + + &__title { + color: var(--card-color); + font-size: var(--fs-2xl); + line-height: var(--lh-tight); + + @media (min-width: $breakpoint-s) { + font-size: var(--fs-3xl); + } + } + + &__description { + color: var(--card-color-secondary); + } + + &__actions { + display: grid; + grid-gap: var(--su-1); + + @media (min-width: $breakpoint-s) { + display: flex; + flex-direction: column; + width: max-content; + justify-self: center; + } + } +} + +.authentication-widget { + &__container { + padding: var(--su-4); + } + + &__image-container { + width: var(--su-8); + height: var(--su-8); + margin-bottom: var(--su-2); + } + + &__image { + border-radius: var(--radius); + transform: rotate(-10deg); + height: auto; + width: 100%; + } + + &__title { + color: var(--card-color); + font-size: var(--fs-xl); + line-height: var(--lh-tight); + + @media (min-width: $breakpoint-s) { + font-size: var(--fs-2xl); + } + } + + &__description { + color: var(--card-color-secondary); + margin-bottom: var(--su-4); + } + + &__actions { + display: grid; + grid-gap: var(--su-1); + width: 100%; + + @media (min-width: $breakpoint-s) { + display: flex; + flex-direction: column; + justify-self: center; + } + } +} +#page-content.registrations { + .devise-container { + min-height: 480px; + padding-top: calc(10vw + 35px); + h1 { + font-weight: 300; + text-align: center; + font-family: var(--ff-sans-serif); + font-size: 30px; + @media screen and (min-width: 520px) { + font-size: 50px; + } + } + a.sign-up-link { + display: block; + margin: 50px auto; + width: 280px; + max-width: 92%; + text-align: center; + padding: 20px 0px; + border: 1px solid rgb(245, 245, 245); + font-family: var(--ff-sans-serif); + color: rgb(86, 98, 103); + border-radius: 3px; + font-size: 22px; + img { + opacity: 0.7; + width: 24px; + height: 24px; + margin-right: 3px; + vertical-align: -3px; + } + &:hover { + border: 1px solid rgb(0, 231, 255); + } + } + } +} diff --git a/app/assets/stylesheets/top-bar.scss b/app/assets/stylesheets/top-bar.scss index 6e71b53ad..327d99390 100644 --- a/app/assets/stylesheets/top-bar.scss +++ b/app/assets/stylesheets/top-bar.scss @@ -179,3 +179,49 @@ } } } + +.authentication-header { + &__container { + padding: var(--su-6); + } + + &__image-container { + width: var(--su-8); + height: var(--su-8); + margin-bottom: var(--su-2); + } + + &__image { + border-radius: var(--radius); + transform: rotate(-10deg); + height: auto; + width: 100%; + } + + &__title { + color: var(--card-color); + font-size: var(--fs-2xl); + line-height: var(--lh-tight); + + @media (min-width: $breakpoint-s) { + font-size: var(--fs-3xl); + } + } + + &__description { + color: var(--card-color-secondary); + margin-bottom: var(--su-4); + } + + &__actions { + display: grid; + grid-gap: var(--su-1); + + @media (min-width: $breakpoint-s) { + display: flex; + flex-direction: column; + width: max-content; + justify-self: center; + } + } +} diff --git a/app/assets/stylesheets/views/signin.scss b/app/assets/stylesheets/views/signin.scss index 07f6f4f75..d8a4e6681 100644 --- a/app/assets/stylesheets/views/signin.scss +++ b/app/assets/stylesheets/views/signin.scss @@ -76,6 +76,52 @@ } } +.authentication-widget { + &__container { + padding: var(--su-4); + } + + &__image-container { + width: var(--su-8); + height: var(--su-8); + margin-bottom: var(--su-2); + } + + &__image { + border-radius: var(--radius); + transform: rotate(-10deg); + height: auto; + width: 100%; + } + + &__title { + color: var(--card-color); + font-size: var(--fs-xl); + line-height: var(--lh-tight); + + @media (min-width: $breakpoint-s) { + font-size: var(--fs-2xl); + } + } + + &__description { + color: var(--card-color-secondary); + margin-bottom: var(--su-4); + } + + &__actions { + display: grid; + grid-gap: var(--su-1); + width: 100%; + + @media (min-width: $breakpoint-s) { + display: flex; + flex-direction: column; + justify-self: center; + } + } +} + // Registration View .registration { border-radius: unset; diff --git a/app/assets/stylesheets/widgets.scss b/app/assets/stylesheets/widgets.scss index 629b2e710..6972bbd3a 100644 --- a/app/assets/stylesheets/widgets.scss +++ b/app/assets/stylesheets/widgets.scss @@ -66,36 +66,7 @@ h4 { margin: 0; } - &.signin-cta-widget { - border: 1px solid darken($bold-blue, 5%); - box-shadow: 5px 6px 0px darken($bold-blue, 15%); - padding: 0px 0px; - border-radius: 3px; - header { - background: darken($bold-blue, 5%); - color: white; - padding: 16px 0px; - text-align: center; - font-weight: bold; - } - - .widget-body { - display: flex; - flex-flow: column; - padding: 8px 0; - - .login-cta-button { - margin: 8px; - background-color: $bold-blue; - padding: 16px 0; - border-radius: 50px; - color: $white; - text-align: center; - font-size: 1.1em; - } - } - } &.showing { display: block; } diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 586f5fc2f..6875b7121 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -81,7 +81,7 @@ class ApplicationController < ActionController::Base # the user to after a successful log in def after_sign_in_path_for(resource) if current_user.saw_onboarding - path = request.env["omniauth.origin"] || stored_location_for(resource) || dashboard_path + path = stored_location_for(resource) || request.env["omniauth.origin"] || root_path(signin: "true") signin_param = { "signin" => "true" } # the "signin" param is used by the service worker uri = Addressable::URI.parse(path) diff --git a/app/controllers/articles_controller.rb b/app/controllers/articles_controller.rb index 0e8146937..b59089686 100644 --- a/app/controllers/articles_controller.rb +++ b/app/controllers/articles_controller.rb @@ -56,7 +56,12 @@ class ArticlesController < ApplicationController @article, needs_authorization = Articles::Builder.call(@user, @tag, @prefill) - needs_authorization ? authorize(Article) : skip_authorization + if needs_authorization + authorize(Article) + else + skip_authorization + store_location_for(:user, request.path) + end end def edit diff --git a/app/controllers/registrations_controller.rb b/app/controllers/registrations_controller.rb index b9bfa22f9..086211c5a 100644 --- a/app/controllers/registrations_controller.rb +++ b/app/controllers/registrations_controller.rb @@ -5,8 +5,11 @@ class RegistrationsController < Devise::RegistrationsController @registered_users_count = User.registered.estimated_count if user_signed_in? - redirect_to dashboard_path + redirect_to root_path(signin: "true") else + if URI(request.referer || "").host == URI(request.base_url).host + store_location_for(:user, request.referer) + end super end end diff --git a/app/views/articles/_sidebar_additional.html.erb b/app/views/articles/_sidebar_additional.html.erb index 25d4c85e6..289f4929d 100644 --- a/app/views/articles/_sidebar_additional.html.erb +++ b/app/views/articles/_sidebar_additional.html.erb @@ -3,11 +3,31 @@