Skip to content

[ENG-8788][ENG-8786] Institutions page and TOS page redesign #99

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 3 commits into from
Sep 19, 2025
Merged

[ENG-8788][ENG-8786] Institutions page and TOS page redesign #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bd9cb90
Update institution login page
futa-ikeda Sep 16, 2025
2436b4a
Update institutionUnsuppoprted page
futa-ikeda Sep 16, 2025
823df21
Update ToS page
futa-ikeda 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
2 changes: 1 addition & 1 deletion src/main/java/io/cos/cas/osf/web/flow/login/OsfInstitutionLoginPreparationAction.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ protected Event doExecute(RequestContext context) {
if (institutionId != null) {
institutionLoginUrlMapSorted = institutionLoginUrlMap;
} else {
institutionLoginUrlMap.put("", " -- select an institution -- ");
institutionLoginUrlMap.put("", " Select institution ");
institutionLoginUrlMapSorted = OsfInstitutionUtils.sortByValue(institutionLoginUrlMap);
}
context.getFlowScope().put("institutions", institutionLoginUrlMapSorted);
Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/messages.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,12 +608,12 @@ screen.institutionlogin.title=Institution SSO
screen.institutionlogin.heading=Sign in through your institution
screen.institutionlogin.message.select=If your institution has partnered with OSF, please select its name below and sign in with your institutional credentials. If you do not currently have an OSF account, this will create one for you.
screen.institutionlogin.message.auto=Your institution has partnered with OSF. Please continue to sign in with your institutional credentials. If you do not currently have an OSF account, this will create one for you.
screen.institutionlogin.heading.select=Select your institution
screen.institutionlogin.heading.select=Your institution
screen.institutionlogin.heading.auto=Your institution
screen.institutionlogin.link.select=Not your institution?
screen.institutionlogin.link.unsupported=I can't find my institution
screen.institutionlogin.button.submit=Sign in
screen.institutionlogin.osf=Sign in with your OSF account
screen.institutionlogin.osf=Sign in with email
#
# Unsupported Institution
#
Expand Down
8 changes: 7 additions & 1 deletion src/main/resources/static/css/cas.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,7 +453,7 @@ button.close {
color: var(--cas-theme-primary, #153e50);
}

.mdc-button--raised:not(:disabled) {
.mdc-button--raised {
background-color: transparent;
font-weight: bold;
}
Expand Down Expand Up @@ -819,6 +819,12 @@ body {
&:hover {
background-color: var(--cas-theme-osf-blue-hover, #0089ff);
}

&:disabled {
opacity: 0.6;
background-color: var(--cas-theme-osf-blue, #337ab7) !important; /* override mdc styles */
color: white;
}
}

.form-button .button-osf-red,
Expand Down
3 changes: 3 additions & 0 deletions src/main/resources/static/images/email.svg
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.
44 changes: 15 additions & 29 deletions src/main/resources/templates/casInstitutionLoginView.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,7 @@
<div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
<section class="login-section login-form login-instn-card">

<section class="mb-4 service-ui text-center">
<table class="osf-shield-with-name">
<tbody>
<tr>
<td>
<img class="service-ui-logo" src="/images/osf-logo.png" alt="OSF logo">
</td>
<td>
<span class="service-ui-name hidden-narrow">OSF </span>
<span class="service-ui-name">INSTITUTIONS</span>
</td>
</tr>
</tbody>
</table>
</section>

<section class="card-message">
<section class="card-message full-width center-align-text">
<h1 th:utext="#{screen.institutionlogin.heading}"></h1>
<p th:unless=${osfCasLoginContext.institutionId} th:utext="#{screen.institutionlogin.message.select}"></p>
<p th:if=${osfCasLoginContext.institutionId} th:utext="#{screen.institutionlogin.message.auto}"></p>
Expand All @@ -51,31 +35,35 @@ <h1 th:utext="#{screen.institutionlogin.heading}"></h1>
<span th:if="${osfCasLoginContext.institutionId}">
<a th:href="@{/login(campaign=institution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.link.select}"></a>
</span>
<span th:unless="${osfCasLoginContext.institutionId}">
<span class="full-width center-align-text text-bold" th:unless="${osfCasLoginContext.institutionId}">
<a th:href="@{/login(campaign=unsupportedinstitution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.link.unsupported}"></a>
</span>
</section>

<section class="form-button">
<button type="button" id="institutionSubmit" class="mdc-button mdc-button--raised" name="submit" onclick="institutionLogin()"
th:classappend="${osfCasLoginContext.institutionId == null ? 'button-osf-disabled' : 'button-osf-blue'}"
<button type="button" id="institutionSubmit" class="mdc-button mdc-button--raised button-osf-blue" name="submit" onclick="institutionLogin()"
th:disabled="${osfCasLoginContext.institutionId == null}" >
<span class="mdc-button__label" th:text="#{screen.institutionlogin.button.submit}"></span>
</button>
</section>

<hr class="my-4" />

<section class="text-with-mdi">
<span>
<span class="full-width center-align-text text-bold">
<a href="https://help.osf.io/article/272-sign-in-to-osf" th:utext="#{screen.generic.link.support}"></a>
</span>
</section>

<section class="text-with-mdi">
<span>
<a th:href="@{/login(service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.osf}"></a>
</span>
<hr class="my-4" />

<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 margin-large-vertical" id="emailLogin" th:href="@{/login(service=${service?.originalUrl ?: ''})}">
<img class="delegation-button-logo" src="/images/email.svg" alt="Email icon">
<span class="delegation-button-label" th:utext="#{screen.institutionlogin.osf}"></span>
</a>
</section>

</section>
Expand Down Expand Up @@ -118,10 +106,8 @@ <h1 th:utext="#{screen.institutionlogin.heading}"></h1>
let institutionLoginUrl = selectDropdownList.options[selectDropdownList.selectedIndex].value;
if (institutionLoginUrl == null || institutionLoginUrl === "") {
submitButton.disabled = true;
submitButton.style.backgroundColor = "#efefef";
} else {
submitButton.disabled = false;
submitButton.style.backgroundColor = "#1b6d85";
}
}
</script>
Expand Down
18 changes: 1 addition & 17 deletions src/main/resources/templates/casUnsupportedInstitutionLoginView.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,6 @@
<div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
<section class="login-section login-form login-instn-card">

<section class="mb-4 service-ui text-center">
<table class="osf-shield-with-name">
<tbody>
<tr>
<td>
<img class="service-ui-logo" src="/images/osf-logo.png" alt="OSF logo">
</td>
<td>
<span class="service-ui-name hidden-narrow">OSF </span>
<span class="service-ui-name">INSTITUTIONS</span>
</td>
</tr>
</tbody>
</table>
</section>

<section class="card-message">
<h1 th:utext="#{screen.unsupp-instn.heading}"></h1>
<p th:utext="#{screen.unsupp-instn.message(${osfUrl.institutionsHome})}"></p>
Expand Down Expand Up @@ -77,7 +61,7 @@ <h2 th:utext="#{screen.unsupp-instn.existing.heading}"></h2>

<hr class="my-4" />
<section class="text-with-mdi">
<span>
<span class="full-width center-align-text 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
13 changes: 4 additions & 9 deletions src/main/resources/templates/fragments/tosloginform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,6 @@
<!-- Terms of service consent check login form template begins here -->
<div th:fragment="tosloginform" class="d-flex flex-column justify-content-between m-auto">

<section>
<div class="service-ui" th:replace="fragments/osfbannerui :: osfBannerUI">
<a href="fragments/osfbannerui.html"></a>
</div>
</section>

<section class="text-without-mdi text-center text-bold text-large margin-large-vertical">
<span th:utext="#{screen.tosconsent.tips}"></span>
</section>
Expand Down Expand Up @@ -80,22 +74,23 @@
</section>

<section>
<div th:replace="fragments/submitbutton :: submitButton (buttonDisabled=true, buttonCustomization='button-osf-disabled', messageKey='screen.tosconsent.button.agree')" />
<div th:replace="fragments/submitbutton :: submitButton (buttonDisabled=true, buttonCustomization='button-osf-blue', messageKey='screen.tosconsent.button.agree')" />
</section>

</form>

<hr class="my-4" />

<section class="text-with-mdi">
<span><a th:href="@{/logout(service=${osfUrl.logout})}" th:utext="#{screen.tosconsent.link.cancel}"></a></span>
<span class="full-width center-align-text text-bold">
<a th:href="@{/logout(service=${osfUrl.logout})}" th:utext="#{screen.tosconsent.link.cancel}"></a>
</span>
</section>

<script type="text/javascript">
function checkTosConsent(checkbox) {
let submitButton = document.getElementById("primarySubmitButton");
submitButton.disabled = !checkbox.checked;
submitButton.style.backgroundColor = checkbox.checked ? "#1b6d85": "#efefef";
}
</script>

Expand Down
Loading