Finally rework the extremely outdated login/signup page

Use more recent branding for MS/Google/FB/Yahoo
EHRI · Mar 7, 2024 · cedf58e · cedf58e
1 parent c8a2ef5
commit cedf58e
Show file tree

Hide file tree

Showing 16 changed files with 423 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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")
+    )
 
     <div class="form-field">
-        <input type="submit" class="login-button btn btn-warning" value="@Messages("login.password.change.submit")" />
+        <input type="submit" class="login-button btn btn btn-warning" value="@Messages("login.password.change.submit")" />
         <a class="btn btn-cancel" href="@controllers.portal.users.routes.UserProfiles.updateProfile()">@Messages("cancel")</a>
     </div>
 }
diff --git 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"
+        )
 
         <div class="form-field">
-            <input type="submit" class="login-button btn btn-post" value="@Messages("login.password.reset.submit")" />
+            <input type="submit" class="login-button btn btn-lg btn-post" value="@Messages("login.password.reset.submit")" />
         </div>
     }
 }

diff --git a/modules/portal/app/views/account/login.scala.html b/modules/portal/app/views/account/login.scala.html
@@ -20,13 +20,16 @@
         Html(s"<a href='${controllers.portal.account.routes.Accounts.signup()}'>${Messages("login.signup.prompt.text")}</a>")))</p>
 
     <div id="login">
+        @views.html.account.loginForm(pwForm)
+
+        <h4 class="or-oauth"><span>Or</span></h4>
+
         @views.html.account.oauth2Form(
             openIdForm,
             oauthConfig,
             isLogin = true,
             oauth2Call = name => controllers.portal.account.routes.Accounts.oauth2Login(name)
         )
-        @views.html.account.loginForm(pwForm)
     </div>
 }
 
diff --git 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"<a target='_blank' tabindex='-1' href='${controllers.portal.routes.Portal.terms()}'>${Messages("termsAndConditions").toLowerCase(messages.lang.toLocale)}</a>")
         ))</p>
 
-        <input type="submit" class="login-button btn btn-post" value="@Messages("login.password.submit")" />
+        <input type="submit" class="login-button btn btn-lg btn-post" value="@Messages("login.password.submit")" />
     </div>
 }
diff --git 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 =>
             <div class="oauth-providers form-field">
                 @oauth2Config.providers.filter(p => enabledProviders.contains(p.name)).map { provider =>
-                    <a href="@oauth2Call(provider.name)" class="btn [email protected]"
+                    <a href="@oauth2Call(provider.name)" class="btn btn-lg btn-signin-@provider.name"
                         title="@Html(Messages(messagePrefix, provider.name.capitalize))">
-                        @Html(Messages(messagePrefix, Html(s"<i class='fa fa-fw fa-${provider.name.replace("microsoft", "windows")}'></i>")))
+                        @Messages(messagePrefix, provider.name.capitalize)
+                    </a>
+                }
+                @if(isLogin) {
+                    @* OpenID no longer available for sign up *@
+                    <a href="#" class="btn btn-lg btn-signin-openid show-more" title="@Messages(messagePrefix, "OpenID")">
+                        @Html(Messages(messagePrefix, "OpenID"))
                     </a>
                 }
-                <a href="#" class="btn btn-openid show-more" title="@Messages(messagePrefix, "OpenID")">
-                    @Html(Messages(messagePrefix, Html("<i class='fa fa-fw fa-openid'></i>")))
-                </a>
             </div>
 
-            <div class="more-login-options @(if(openIdForm.hasErrors) "errors")">
-                <div class="form-field">
-                @helper.inputText(
-                    openIdForm("openid_identifier"),
-                    'id -> s"${if(isLogin) "login" else "signup"}_openid_identifier",
-                    'placeholder -> Messages("login.openid.urlPlaceholder"),
-                    'type -> "url"
-                )
-                </div>
+            @if(isLogin) {
+                <div class="more-login-options @(if(openIdForm.hasErrors) "errors")">
+                    <div class="form-field">
+                    @helper.inputText(
+                        openIdForm("openid_identifier"),
+                        'id -> s"${if(isLogin) "login" else "signup"}_openid_identifier",
+                        'placeholder -> Messages("login.openid.urlPlaceholder"),
+                        'type -> "url"
+                    )
+                    </div>
 
-                <div class="form-field">
-                    <input type="submit" class="btn btn-post login-button openid" value="@Messages(messagePrefix, "OpenID")" />
+                    <div class="form-field">
+                        <input type="submit" class="btn btn-lg btn-post login-button openid" value="@Messages(messagePrefix, "OpenID")" />
+                    </div>
                 </div>
-            </div>
+            }
         }
     }
 }
diff --git a/modules/portal/app/views/account/register.scala.html b/modules/portal/app/views/account/register.scala.html
@@ -28,13 +28,16 @@
         Html(s"<a href='${controllers.portal.account.routes.Accounts.login()}'>${Messages("login.login.prompt.text")}</a>")))</p>
 
     <div id="register">
+        @views.html.account.signupForm(registerForm, registerAction, recaptchaKey)
+
+        <h4 class="or-oauth"><span>Or</span></h4>
+
         @views.html.account.oauth2Form(
             openIdForm,
             oauthConfig,
             isLogin = false,
             oauth2Call = name => controllers.portal.account.routes.Accounts.oauth2Register(name)
         )
-        @views.html.account.signupForm(registerForm, registerAction, recaptchaKey)
     </div>
 }
 
diff --git 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"
+        )
 
         <div class="form-field">
-            <input type="submit" class="login-button btn btn-post" value="@Messages("login.password.change.submit")" />
+            <input type="submit" class="login-button btn btn-lg btn-post" value="@Messages("login.password.change.submit")" />
         </div>
     }
 }

diff --git a/modules/portal/app/views/account/signupForm.scala.html b/modules/portal/app/views/account/signupForm.scala.html
@@ -12,13 +12,15 @@
         form(NAME),
         'autocomplete -> "name",
         'required -> "required",
+        'class -> "form-control form-control-lg",
         'placeholder -> Messages("profile.name"),
         '_label -> Messages("profile.name")
     )
     @helper.inputText(
         form(EMAIL),
         'id -> "login_email",
         'autocomplete -> "email",
+        'class -> "form-control form-control-lg",
         'placeholder -> Messages("login.email"),
         '_label -> Messages("login.email"),
         'type -> "email",
@@ -27,13 +29,15 @@
     @helper.inputPassword(
         form(PASSWORD),
         'id -> "signup_password",
+        'class -> "form-control form-control-lg",
         'autocomplete -> "new-password",
         'placeholder -> Messages("login.password"),
         '_label -> Messages("login.password")
     )
     @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 @@
     </div>
 
     <div class="form-field">
-        <input type="submit" class="btn btn-post" value="@Messages("login.signup.submit")" />
+        <input type="submit" class="login-button btn btn-lg btn-post" value="@Messages("login.signup.submit")" />
     </div>
 }
diff --git a/modules/portal/public/img/facebook-signin-icon.svg b/modules/portal/public/img/facebook-signin-icon.svg