Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cslzchen merged 4 commits into from
Sep 16, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51db5ec
Add background image
futa-ikeda Sep 15, 2025
46ec732
Update email + password login page
futa-ikeda Sep 15, 2025
b9e5e6b
Update 2fa login page
futa-ikeda Sep 15, 2025
2a750ef
Adjust position of the reveal-password icon slightly
cslzchen Sep 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 44 additions & 17 deletions src/main/resources/static/css/cas.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down
Binary file added src/main/resources/static/images/dark-blue-gradient.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 18 additions & 13 deletions src/main/resources/templates/fragments/loginform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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('*')}">
Expand All @@ -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">

Expand All @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions src/main/resources/templates/fragments/totploginform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('*')}">
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/main/resources/templates/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
2 changes: 1 addition & 1 deletion src/main/resources/templates/layoutosf.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading