From cedf58e2205cc7c952a737a5fae4cd1dc26ef61b Mon Sep 17 00:00:00 2001 From: Mike Bryant Date: Wed, 6 Mar 2024 17:57:41 +0000 Subject: [PATCH] Finally rework the extremely outdated login/signup page Use more recent branding for MS/Google/FB/Yahoo --- .../portal/app/assets/css/portal/_layout.scss | 4 +- .../portal/app/assets/css/portal/_style.scss | 69 +++++++++-- .../account/changePasswordForm.scala.html | 20 +++- .../views/account/forgotPassword.scala.html | 10 +- .../portal/app/views/account/login.scala.html | 5 +- .../app/views/account/loginForm.scala.html | 6 +- .../app/views/account/oauth2Form.scala.html | 39 +++--- .../app/views/account/register.scala.html | 5 +- .../views/account/resetPassword.scala.html | 15 ++- .../app/views/account/signupForm.scala.html | 6 +- .../public/img/facebook-signin-icon.svg | 56 +++++++++ .../portal/public/img/google-signin-icon.svg | 65 ++++++++++ .../public/img/microsoft-signin-icon.svg | 1 + .../portal/public/img/openid-signin-icon.svg | 113 ++++++++++++++++++ .../portal/public/img/yahoo-signin-icon.svg | 52 ++++++++ project/plugins.sbt | 2 +- 16 files changed, 423 insertions(+), 45 deletions(-) create mode 100644 modules/portal/public/img/facebook-signin-icon.svg create mode 100644 modules/portal/public/img/google-signin-icon.svg create mode 100644 modules/portal/public/img/microsoft-signin-icon.svg create mode 100644 modules/portal/public/img/openid-signin-icon.svg create mode 100644 modules/portal/public/img/yahoo-signin-icon.svg diff --git a/modules/portal/app/assets/css/portal/_layout.scss b/modules/portal/app/assets/css/portal/_layout.scss index 8bb488f6be..0b9526ddf5 100644 --- a/modules/portal/app/assets/css/portal/_layout.scss +++ b/modules/portal/app/assets/css/portal/_layout.scss @@ -126,8 +126,8 @@ ul.dropdown-menu { .login-or-signup { @include make-col-ready(); - @include make-col(8); - @include make-col-offset(2); + @include make-col(6); + @include make-col-offset(3); } } } diff --git a/modules/portal/app/assets/css/portal/_style.scss b/modules/portal/app/assets/css/portal/_style.scss index 3af1ca469b..4128e5cf7e 100644 --- a/modules/portal/app/assets/css/portal/_style.scss +++ b/modules/portal/app/assets/css/portal/_style.scss @@ -953,25 +953,70 @@ lock.errors, @extend .fa-spin; } +%button-signin { + text-align: start; + background-position: 1rem center; + background-repeat: no-repeat; + padding-inline-start: 3.5rem; +} + // Login / Register social buttons -.btn-facebook { - @include button-variant(#354E84, #354E84); +.btn-signin-facebook { + //@include button-variant(#1877F2, #1877F2); + @include button-variant(#FFF, #DDD); + @extend %button-signin; + background-image: url(/v/img/facebook-signin-icon.svg); + background-size: 1.5rem; +} + +.btn-signin-google { + @include button-variant(#FFF, #DDD); + @extend %button-signin; + background-image: url(/v/img/google-signin-icon.svg); + background-position: 0.4rem center; +} + +.btn-signin-microsoft { + @include button-variant(#FFF, #DDD); + @extend %button-signin; + background-image: url(/v/img/microsoft-signin-icon.svg); } -.btn-google { - @include button-variant(#DD4B39, #DD4B39); +.btn-signin-yahoo { + @include button-variant(#FFF, #DDD); + @extend %button-signin; + background-image: url(/v/img/yahoo-signin-icon.svg); + background-position: 0.5rem center; } -.btn-microsoft { - @include button-variant(#00A4EF, #00A4EF); +.btn-signin-openid { + @include button-variant(#FFF, #DDD); + @extend %button-signin; + background-image: url(/v/img/openid-signin-icon.svg); + background-size: 1.7rem; + background-position: 1rem 0.5rem; } -.btn-yahoo { - @include button-variant(#7B0099, #7B0099); +.oauth-providers { + display: flex; + flex-direction: column; + row-gap: $margin-sm; } -.btn-openid { - @include button-variant(#949494, #949494); +.or-oauth { + color: $text-muted; + font-style: italic; + font-weight: normal; + width: 100%; + text-align: center; + border-bottom: 1px solid lighten($text-muted, 20%); + line-height: 0.1em; + margin: $margin-lg 0; + + span { + background:#fff; + padding: 0 $margin-sm; + } } .more-login-options { @@ -982,6 +1027,10 @@ lock.errors, } } +.login-button { + width: 100%; +} + .login-disclaimer { font-size: $font-size-sm; color: $text-darkened; diff --git a/modules/portal/app/views/account/changePasswordForm.scala.html b/modules/portal/app/views/account/changePasswordForm.scala.html index 78815acc59..305ddc6a83 100644 --- a/modules/portal/app/views/account/changePasswordForm.scala.html +++ b/modules/portal/app/views/account/changePasswordForm.scala.html @@ -4,12 +4,24 @@ @formHelpers.csrfToken() @formHelpers.globalErrors(form) - @helper.inputPassword(form("current"), 'type -> "password", 'placeholder -> Messages("login.password.current")) - @helper.inputPassword(form("password"), 'type -> "password", 'placeholder -> Messages("login.password.new")) - @helper.inputPassword(form("confirm"), 'type -> "password", 'placeholder -> Messages("login.password.new.confirm")) + @helper.inputPassword( + form("current"), + 'type -> "password", + 'placeholder -> Messages("login.password.current") + ) + @helper.inputPassword( + form("password"), + 'type -> "password", + 'placeholder -> Messages("login.password.new") + ) + @helper.inputPassword( + form("confirm"), + 'type -> "password", + 'placeholder -> Messages("login.password.new.confirm") + )
- + @Messages("cancel")
} diff --git a/modules/portal/app/views/account/forgotPassword.scala.html b/modules/portal/app/views/account/forgotPassword.scala.html index be9939e696..577c2093b9 100644 --- a/modules/portal/app/views/account/forgotPassword.scala.html +++ b/modules/portal/app/views/account/forgotPassword.scala.html @@ -9,10 +9,16 @@ @formHelpers.csrfToken() @formHelpers.globalErrors(form) @common.recaptcha(recaptchaKey) - @helper.inputText(form("email"), 'autofocus -> "autofocus", 'placeholder -> Messages("login.email"), 'type -> "email") + @helper.inputText( + form("email"), + 'autofocus -> "autofocus", + 'placeholder -> Messages("login.email"), + 'type -> "email", + 'class -> "form-control form-control-lg" + )
- +
} } diff --git a/modules/portal/app/views/account/login.scala.html b/modules/portal/app/views/account/login.scala.html index 5aa27a8ac5..37cea60f26 100644 --- a/modules/portal/app/views/account/login.scala.html +++ b/modules/portal/app/views/account/login.scala.html @@ -20,13 +20,16 @@ Html(s"${Messages("login.signup.prompt.text")}")))

+ @views.html.account.loginForm(pwForm) + +

Or

+ @views.html.account.oauth2Form( openIdForm, oauthConfig, isLogin = true, oauth2Call = name => controllers.portal.account.routes.Accounts.oauth2Login(name) ) - @views.html.account.loginForm(pwForm)
} diff --git a/modules/portal/app/views/account/loginForm.scala.html b/modules/portal/app/views/account/loginForm.scala.html index f717031b7b..9da549edc7 100644 --- a/modules/portal/app/views/account/loginForm.scala.html +++ b/modules/portal/app/views/account/loginForm.scala.html @@ -7,7 +7,7 @@ @helper.inputText( pwForm("email"), 'id -> "login_email", - 'class -> "form-control", + 'class -> "form-control form-control-lg", 'autocomplete -> "email", 'autofocus -> "autofocus", 'placeholder -> Messages("login.email"), @@ -18,7 +18,7 @@ @helper.inputPassword( pwForm("password"), 'id -> "login_password", - 'class -> "form-control", + 'class -> "form-control form-control-lg", 'autocomplete -> "current-password", 'placeholder -> Messages("login.password"), '_label -> Messages("login.password"), @@ -36,6 +36,6 @@ Html(s"${Messages("termsAndConditions").toLowerCase(messages.lang.toLocale)}") ))

- + } diff --git a/modules/portal/app/views/account/oauth2Form.scala.html b/modules/portal/app/views/account/oauth2Form.scala.html index 1bfb44dfcb..915f22def3 100644 --- a/modules/portal/app/views/account/oauth2Form.scala.html +++ b/modules/portal/app/views/account/oauth2Form.scala.html @@ -8,30 +8,35 @@ @defining(if (isLogin) conf.oauth2LoginProviders else conf.oauth2RegistrationProviders) { enabledProviders =>
@oauth2Config.providers.filter(p => enabledProviders.contains(p.name)).map { provider => - - @Html(Messages(messagePrefix, Html(s""))) + @Messages(messagePrefix, provider.name.capitalize) + + } + @if(isLogin) { + @* OpenID no longer available for sign up *@ + } - - @Html(Messages(messagePrefix, Html(""))) -
-
-
- @helper.inputText( - openIdForm("openid_identifier"), - 'id -> s"${if(isLogin) "login" else "signup"}_openid_identifier", - 'placeholder -> Messages("login.openid.urlPlaceholder"), - 'type -> "url" - ) -
+ @if(isLogin) { + + } } } } diff --git a/modules/portal/app/views/account/register.scala.html b/modules/portal/app/views/account/register.scala.html index 2f9afa5974..fb102e702b 100644 --- a/modules/portal/app/views/account/register.scala.html +++ b/modules/portal/app/views/account/register.scala.html @@ -28,13 +28,16 @@ Html(s"${Messages("login.login.prompt.text")}")))

+ @views.html.account.signupForm(registerForm, registerAction, recaptchaKey) + +

Or

+ @views.html.account.oauth2Form( openIdForm, oauthConfig, isLogin = false, oauth2Call = name => controllers.portal.account.routes.Accounts.oauth2Register(name) ) - @views.html.account.signupForm(registerForm, registerAction, recaptchaKey)
} diff --git a/modules/portal/app/views/account/resetPassword.scala.html b/modules/portal/app/views/account/resetPassword.scala.html index 415d540857..eeaa9c177a 100644 --- a/modules/portal/app/views/account/resetPassword.scala.html +++ b/modules/portal/app/views/account/resetPassword.scala.html @@ -9,11 +9,20 @@ @formHelpers.csrfToken() @formHelpers.globalErrors(form) - @helper.inputPassword(form("password"), 'autofocus -> "autofocus", 'placeholder -> Messages("login.password.new")) - @helper.inputPassword(form("confirm"), 'placeholder -> Messages("login.password.new.confirm")) + @helper.inputPassword( + form("password"), + 'autofocus -> "autofocus", + 'placeholder -> Messages("login.password.new"), + 'class -> "form-control form-control-lg" + ) + @helper.inputPassword( + form("confirm"), + 'placeholder -> Messages("login.password.new.confirm"), + 'class -> "form-control form-control-lg" + )
- +
} } diff --git a/modules/portal/app/views/account/signupForm.scala.html b/modules/portal/app/views/account/signupForm.scala.html index 5497365305..8f8a7e837d 100644 --- a/modules/portal/app/views/account/signupForm.scala.html +++ b/modules/portal/app/views/account/signupForm.scala.html @@ -12,6 +12,7 @@ form(NAME), 'autocomplete -> "name", 'required -> "required", + 'class -> "form-control form-control-lg", 'placeholder -> Messages("profile.name"), '_label -> Messages("profile.name") ) @@ -19,6 +20,7 @@ form(EMAIL), 'id -> "login_email", 'autocomplete -> "email", + 'class -> "form-control form-control-lg", 'placeholder -> Messages("login.email"), '_label -> Messages("login.email"), 'type -> "email", @@ -27,6 +29,7 @@ @helper.inputPassword( form(PASSWORD), 'id -> "signup_password", + 'class -> "form-control form-control-lg", 'autocomplete -> "new-password", 'placeholder -> Messages("login.password"), '_label -> Messages("login.password") @@ -34,6 +37,7 @@ @helper.inputPassword( form(CONFIRM), 'autocomplete -> "new-password", + 'class -> "form-control form-control-lg", 'placeholder -> Messages("login.password.confirm"), '_label -> Messages("login.password.confirm") ) @@ -51,6 +55,6 @@
- +
} diff --git a/modules/portal/public/img/facebook-signin-icon.svg b/modules/portal/public/img/facebook-signin-icon.svg new file mode 100644 index 0000000000..bc2d2257bf --- /dev/null +++ b/modules/portal/public/img/facebook-signin-icon.svg @@ -0,0 +1,56 @@ + + + + + + + + + diff --git a/modules/portal/public/img/google-signin-icon.svg b/modules/portal/public/img/google-signin-icon.svg new file mode 100644 index 0000000000..8f87efa8da --- /dev/null +++ b/modules/portal/public/img/google-signin-icon.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + diff --git a/modules/portal/public/img/microsoft-signin-icon.svg b/modules/portal/public/img/microsoft-signin-icon.svg new file mode 100644 index 0000000000..1f73976483 --- /dev/null +++ b/modules/portal/public/img/microsoft-signin-icon.svg @@ -0,0 +1 @@ +MS-SymbolLockup \ No newline at end of file diff --git a/modules/portal/public/img/openid-signin-icon.svg b/modules/portal/public/img/openid-signin-icon.svg new file mode 100644 index 0000000000..827c3e61e6 --- /dev/null +++ b/modules/portal/public/img/openid-signin-icon.svg @@ -0,0 +1,113 @@ + + + + + facebook web + + + + + + + + image/svg+xml + + facebook web + + + User:ZyMOS + + + + + + + + + + + + + + + Open Icon Library + + + + + + + + + + + + + + + + diff --git a/modules/portal/public/img/yahoo-signin-icon.svg b/modules/portal/public/img/yahoo-signin-icon.svg new file mode 100644 index 0000000000..db3ed5ceae --- /dev/null +++ b/modules/portal/public/img/yahoo-signin-icon.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + diff --git a/project/plugins.sbt b/project/plugins.sbt index 98c04264a3..446caf07b7 100644 --- a/project/plugins.sbt +++ b/project/plugins.sbt @@ -9,7 +9,7 @@ resolvers += "Typesafe repository" at "https://repo.typesafe.com/typesafe/releas // Use the Play sbt plugin for Play projects addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.8.20") -addSbtPlugin("org.irundaia.sbt" % "sbt-sassify" % "1.5.1") +addSbtPlugin("io.github.irundaia" % "sbt-sassify" % "1.5.2") addSbtPlugin("com.typesafe.sbt" % "sbt-uglify" % "2.0.0")