[ENG-8787] Username/password and 2FA login page (#97)

* Add background image
* Update email + password login page
* Update 2fa login page
* Adjust position of the reveal-password icon slightly

---------

Co-authored-by: Longze Chen <[email protected]>

Author: futa-ikeda

src/main/resources/static/css/cas.css

@@ -102,12 +102,17 @@ aside, section, main {
     top: 56px;
 }
 
-.mdc-drawer-app-content {
-    /* flex: auto; */
-    /* overflow: auto; */
-    /* position: relative; */
+.flex-column {
     flex-direction: column;
+}
 
+.full-width {
+    width: 100%;
+}
+
+.center-align-text {
+    display: inline-block;
+    text-align: center;
 }
 
 .main-content {
@@ -164,6 +169,7 @@ header>nav .cas-brand .cas-logo {
     border-right: var(--cas-theme-border-light, 1px solid rgba(0, 0, 0, .2));
     padding: 2rem 2.5rem;
     flex: 1;
+    background: #fff;
 }
 
 .login-section:last-child {
@@ -448,7 +454,8 @@ button.close {
 }
 
 .mdc-button--raised:not(:disabled) {
-    background-color: var(--mdc-theme-primary, #153E50);
+    background-color: transparent;
+    font-weight: bold;
 }
 
 .mdc-button--raised.mdc-button-twitter:not(:disabled) {
@@ -668,7 +675,9 @@ button.close {
     --cas-theme-osf-footer: #efefef;
     --cas-theme-osf-grey: #eeeeee;
     --cas-theme-osf-green: #357935;
-    --cas-theme-osf-blue: ##337ab7;
+    --cas-theme-osf-blue: #337ab7;
+    --cas-theme-osf-blue-hover: #0089ff;
+    --cas-theme-grey-hover: #f5f8fb;
     --cas-theme-osf-red: #b52b27;
     --cas-theme-osf-disabled: #eeeeee;
     --cas-theme-osf-disabled-dark: #cccccc;
@@ -747,8 +756,20 @@ body {
     margin: 0.25rem 0;
 }
 
+.form-button-column {
+    display: flex;
+    flex-direction: column;
+    margin: 0.25rem 0;
+
+    .mdc-button {
+        margin: 0.25rem 0;
+        padding: 0 8px;
+    }
+}
+
 .form-button .mdc-button,
-.form-button-inline .mdc-button {
+.form-button-inline .mdc-button,
+.form-button-column .mdc-button {
     width: 100%;
     min-width: fit-content;
     text-transform: none;
@@ -777,8 +798,13 @@ body {
 
 .form-button .button-osf-grey,
 .form-button-inline .button-osf-grey {
-    background-color: var(--cas-theme-osf-grey, #eeeeee);
-    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.2), 0px 4px 4px 0px rgba(0, 0, 0, 0.14), 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
+    background-color: transparent;
+    box-shadow: 0 0 4px 0 #00000029;
+    display: inline-flex;
+
+    &:hover {
+        background: var(--cas-theme-grey-hover, #f5f8fb);
+    }
 }
 
 .form-button .button-osf-green,
@@ -789,6 +815,10 @@ body {
 .form-button .button-osf-blue,
 .form-button-inline .button-osf-blue {
     background-color: var(--cas-theme-osf-blue, #337ab7);
+
+    &:hover {
+        background-color: var(--cas-theme-osf-blue-hover, #0089ff);
+    }
 }
 
 .form-button .button-osf-red,
@@ -935,25 +965,20 @@ body {
 }
 
 .form-button-inline .delegation-button-logo {
-    position: absolute;
-    left: 4px;
-    top: 12px;
     padding: 6px;
     height: 36px;
 }
 
 .form-button-inline .delegation-button-label {
     font-size: 0.875rem;
-    color: black;
+    font-weight: 700;
+    color: var(--cas-theme-osf-blue, #337ab7);
     white-space: nowrap;
     padding-left: 28px;
     letter-spacing: normal;
 }
 
 .form-button .delegation-button-logo {
-    position: absolute;
-    left: 20px;
-    top: 11px;
     padding: 2px;
     height: 36px;
 }
@@ -986,7 +1011,9 @@ body {
 }
 
 .login-section .reveal-password {
-    background-color: var(--cas-theme-osf-blue, #337ab7);
+    color: #94a3b8;
+    inset-inline-end: 0rem;
+    position: absolute;
 }
 
 .login-section .login-error-list {

src/main/resources/static/images/dark-blue-gradient.png

@@ -26,12 +26,12 @@
                 <span th:utext="#{screen.welcome.tips}"></span>
             </section>
 
-            <section class="form-button-inline" th:if="${osfCasLoginContext.orcidLoginUrl}">
+            <section class="form-button" th:if="${osfCasLoginContext.orcidLoginUrl}">
                 <a class="mdc-button mdc-button--raised button-osf-grey" id="orcidlogin" th:href="@{${osfCasLoginContext.orcidLoginUrl}}">
                     <img class="delegation-button-logo" src="/images/orcid-logo.png" alt="ORCiD logo">
                     <span class="delegation-button-label" th:utext="#{screen.welcome.button.orcidlogin}"></span>
                 </a>
-                <a class="mdc-button mdc-button--raised button-osf-grey" id="instnLogin" th:href="@{/login(campaign=institution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}">
+                <a class="mdc-button mdc-button--raised button-osf-grey margin-large-vertical" id="instnLogin" th:href="@{/login(campaign=institution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}">
                     <img class="delegation-button-logo" src="/images/institution-logo.png" alt="Institution logo">
                     <span class="delegation-button-label" th:utext="#{screen.welcome.button.institutionlogin}"></span>
                 </a>
@@ -103,17 +103,17 @@
                                     th:field="*{password}"
                                     autocomplete="current-password" />
                                 <label for="password" class="mdc-floating-label" th:utext="#{screen.welcome.label.password}"></label>
+                                <button class="reveal-password mdc-button mdc-input-group-append" type="button">
+                                    <i class="mdi mdi-eye reveal-password-icon"></i>
+                                    <span class="sr-only">Toggle Password</span>
+                                </button>
                             </div>
                             <div class="mdc-text-field-helper-line caps-warn">
                                 <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg text-danger">
                                     <span th:utext="#{screen.capslock.on}" />
                                 </p>
                             </div>
                         </div>
-                        <button class="reveal-password mdc-button mdc-button--raised mdc-input-group-append" type="button">
-                            <i class="mdi mdi-eye reveal-password-icon"></i>
-                            <span class="sr-only">Toggle Password</span>
-                        </button>
                     </section>
 
                     <section id="loginformerrorlist" class="login-error-list" th:if="${#fields.hasErrors('*')}">
@@ -123,6 +123,11 @@
                             </div>
                         </div>
                     </section>
+                    <section class="cas-field cas-field-primary cas-field-col-2 my-3">
+                        <span class="cas-field-float-right text-bold">
+                            <a th:href="@{${osfUrl.forgotPassword}}" th:utext="#{screen.welcome.link.resetpassword}"></a>
+                        </span>
+                    </section>
 
                     <section class="cas-field">
 
@@ -138,19 +143,19 @@
                             </span>
                         </p>
                     </section>
+                    <section>
+                        <span class="cas-field-float-left margin-large-vertical" th:if="${rememberMeAuthenticationEnabled}">
+                            <input type="checkbox" name="rememberMe" id="rememberMe" value="true"/>&nbsp;
+                            <label for="rememberMe" th:text="#{screen.welcome.checkbox.rememberme}"></label>
+                        </span>
+                    </section>
 
                     <section>
                         <div th:replace="fragments/submitbutton :: submitButton (buttonDisabled=false, buttonCustomization='button-osf-blue', messageKey='screen.welcome.button.login')" />
                     </section>
 
                     <section class="cas-field cas-field-primary cas-field-col-2">
-                        <span class="cas-field-float-left" th:if="${rememberMeAuthenticationEnabled}">
-                            <input type="checkbox" name="rememberMe" id="rememberMe" value="true"/>&nbsp;
-                            <label for="rememberMe" th:text="#{screen.welcome.checkbox.rememberme}"></label>
-                        </span>
-                        <span class="cas-field-float-right">
-                            <a th:href="@{${osfUrl.forgotPassword}}" th:utext="#{screen.welcome.link.resetpassword}"></a>
-                            <br>
+                        <span class="center-align-text full-width text-bold">
                             <a href="https://help.osf.io/article/272-sign-in-to-osf" th:utext="#{screen.generic.link.support}"></a>
                         </span>
                     </section>

src/main/resources/templates/fragments/loginform.html

@@ -83,12 +83,12 @@
                                     autocomplete="one-time-code"
                                     autofocus />
                                 <label for="oneTimePassword" class="mdc-floating-label" th:utext="#{screen.twofactor.label.onetimepassword}"></label>
+                                <button class="reveal-password mdc-button mdc-input-group-append" type="button">
+                                    <i class="mdi mdi-eye reveal-password-icon"></i>
+                                    <span class="sr-only">Toggle One-time Password</span>
+                                </button>
                             </div>
                         </div>
-                        <button class="reveal-password mdc-button mdc-button--raised mdc-input-group-append" type="button">
-                            <i class="mdi mdi-eye reveal-password-icon"></i>
-                            <span class="sr-only">Toggle One-time Password</span>
-                        </button>
                     </section>
 
                     <section id="loginformerrorlist" class="login-error-list" th:if="${#fields.hasErrors('*')}">
@@ -125,10 +125,10 @@
                 </section>
 
                 <section class="cas-field-col-2">
-                    <span class="text-with-mdi cas-field-float-left">
+                    <span class="text-with-mdi cas-field-float-left text-bold">
                         <span><a th:href="@{/logout(service=${osfUrl.logout})}" th:utext="#{screen.twofactor.link.cancel}"></a></span>
                     </span>
-                    <span class="text-without-mdi cas-field-float-right">
+                    <span class="text-without-mdi cas-field-float-right text-bold">
                         <a href="https://help.osf.io/article/239-enable-or-disable-two-factor-authentication" th:utext="#{screen.generic.link.support}"></a>
                     </span>
                 </section>

src/main/resources/templates/fragments/totploginform.html

@@ -29,7 +29,7 @@
         <a href="fragments/leftpane.html"></a>
     </div>
 
-    <div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust d-flex justify-content-center main-background-gradient flex-grow-1">
+    <div class="flex-column mdc-top-app-bar--fixed-adjust d-flex justify-content-center main-background-gradient flex-grow-1">
 
         <!-- Note: Sign-up button only shows up in osf layout -->
 

src/main/resources/templates/layout.html

@@ -29,7 +29,7 @@
         <a href="fragments/leftpaneosf.html"></a>
     </div>
 
-    <div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust d-flex justify-content-center main-background-gradient flex-grow-1">
+    <div class="flex-column mdc-top-app-bar--fixed-adjust d-flex justify-content-center main-background-gradient flex-grow-1">
 
         <!-- Sign-up botton for Desktop (wide screen) view -->
         <div class="form-button desktop-only">