Skip to content

Commit 0fdf239

Browse files
futa-ikedacslzchen
futa-ikeda
authored and
cslzchen
committed
[ENG-8788][ENG-8786] Institutions page and TOS page redesign (#99)
* Update institution login page * Update institution unsupported page * Update ToS page
1 parent 826aa2a commit 0fdf239

File tree

7 files changed

+33
-59
lines changed

7 files changed

+33
-59
lines changed

‎src/main/java/io/cos/cas/osf/web/flow/login/OsfInstitutionLoginPreparationAction.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ protected Event doExecute(RequestContext context) {
9494
if (institutionId != null) {
9595
institutionLoginUrlMapSorted = institutionLoginUrlMap;
9696
} else {
97-
institutionLoginUrlMap.put("", " -- select an institution -- ");
97+
institutionLoginUrlMap.put("", " Select institution ");
9898
institutionLoginUrlMapSorted = OsfInstitutionUtils.sortByValue(institutionLoginUrlMap);
9999
}
100100
context.getFlowScope().put("institutions", institutionLoginUrlMapSorted);

‎src/main/resources/messages.properties‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -608,12 +608,12 @@ screen.institutionlogin.title=Institution SSO
608608
screen.institutionlogin.heading=Sign in through your institution
609609
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.
610610
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.
611-
screen.institutionlogin.heading.select=Select your institution
611+
screen.institutionlogin.heading.select=Your institution
612612
screen.institutionlogin.heading.auto=Your institution
613613
screen.institutionlogin.link.select=Not your institution?
614614
screen.institutionlogin.link.unsupported=I can't find my institution
615615
screen.institutionlogin.button.submit=Sign in
616-
screen.institutionlogin.osf=Sign in with your OSF account
616+
screen.institutionlogin.osf=Sign in with email
617617
#
618618
# Unsupported Institution
619619
#

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -453,7 +453,7 @@ button.close {
453453
color: var(--cas-theme-primary, #153e50);
454454
}
455455

456-
.mdc-button--raised:not(:disabled) {
456+
.mdc-button--raised {
457457
background-color: transparent;
458458
font-weight: bold;
459459
}
@@ -819,6 +819,12 @@ body {
819819
&:hover {
820820
background-color: var(--cas-theme-osf-blue-hover, #0089ff);
821821
}
822+
823+
&:disabled {
824+
opacity: 0.6;
825+
background-color: var(--cas-theme-osf-blue, #337ab7) !important; /* override mdc styles */
826+
color: white;
827+
}
822828
}
823829

824830
.form-button .button-osf-red,

‎src/main/resources/static/images/email.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/main/resources/templates/casInstitutionLoginView.html‎

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,7 @@
1414
<div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
1515
<section class="login-section login-form login-instn-card">
1616

17-
<section class="mb-4 service-ui text-center">
18-
<table class="osf-shield-with-name">
19-
<tbody>
20-
<tr>
21-
<td>
22-
<img class="service-ui-logo" src="/images/osf-logo.png" alt="OSF logo">
23-
</td>
24-
<td>
25-
<span class="service-ui-name hidden-narrow">OSF </span>
26-
<span class="service-ui-name">INSTITUTIONS</span>
27-
</td>
28-
</tr>
29-
</tbody>
30-
</table>
31-
</section>
32-
33-
<section class="card-message">
17+
<section class="card-message full-width center-align-text">
3418
<h1 th:utext="#{screen.institutionlogin.heading}"></h1>
3519
<p th:unless=${osfCasLoginContext.institutionId} th:utext="#{screen.institutionlogin.message.select}"></p>
3620
<p th:if=${osfCasLoginContext.institutionId} th:utext="#{screen.institutionlogin.message.auto}"></p>
@@ -51,31 +35,35 @@ <h1 th:utext="#{screen.institutionlogin.heading}"></h1>
5135
<span th:if="${osfCasLoginContext.institutionId}">
5236
<a th:href="@{/login(campaign=institution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.link.select}"></a>
5337
</span>
54-
<span th:unless="${osfCasLoginContext.institutionId}">
38+
<span class="full-width center-align-text text-bold" th:unless="${osfCasLoginContext.institutionId}">
5539
<a th:href="@{/login(campaign=unsupportedinstitution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.link.unsupported}"></a>
5640
</span>
5741
</section>
5842

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

67-
<hr class="my-4" />
68-
6950
<section class="text-with-mdi">
70-
<span>
51+
<span class="full-width center-align-text text-bold">
7152
<a href="https://help.osf.io/article/272-sign-in-to-osf" th:utext="#{screen.generic.link.support}"></a>
7253
</span>
7354
</section>
7455

75-
<section class="text-with-mdi">
76-
<span>
77-
<a th:href="@{/login(service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.osf}"></a>
78-
</span>
56+
<hr class="my-4" />
57+
58+
<section class="form-button" th:if="${osfCasLoginContext.orcidLoginUrl}">
59+
<a class="mdc-button mdc-button--raised button-osf-grey" id="orcidlogin" th:href="@{${osfCasLoginContext.orcidLoginUrl}}">
60+
<img class="delegation-button-logo" src="/images/orcid-logo.png" alt="ORCiD logo">
61+
<span class="delegation-button-label" th:utext="#{screen.welcome.button.orcidlogin}"></span>
62+
</a>
63+
<a class="mdc-button mdc-button--raised button-osf-grey margin-large-vertical" id="emailLogin" th:href="@{/login(service=${service?.originalUrl ?: ''})}">
64+
<img class="delegation-button-logo" src="/images/email.svg" alt="Email icon">
65+
<span class="delegation-button-label" th:utext="#{screen.institutionlogin.osf}"></span>
66+
</a>
7967
</section>
8068

8169
</section>
@@ -118,10 +106,8 @@ <h1 th:utext="#{screen.institutionlogin.heading}"></h1>
118106
let institutionLoginUrl = selectDropdownList.options[selectDropdownList.selectedIndex].value;
119107
if (institutionLoginUrl == null || institutionLoginUrl === "") {
120108
submitButton.disabled = true;
121-
submitButton.style.backgroundColor = "#efefef";
122109
} else {
123110
submitButton.disabled = false;
124-
submitButton.style.backgroundColor = "#1b6d85";
125111
}
126112
}
127113
</script>

‎src/main/resources/templates/casUnsupportedInstitutionLoginView.html‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,6 @@
1414
<div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
1515
<section class="login-section login-form login-instn-card">
1616

17-
<section class="mb-4 service-ui text-center">
18-
<table class="osf-shield-with-name">
19-
<tbody>
20-
<tr>
21-
<td>
22-
<img class="service-ui-logo" src="/images/osf-logo.png" alt="OSF logo">
23-
</td>
24-
<td>
25-
<span class="service-ui-name hidden-narrow">OSF </span>
26-
<span class="service-ui-name">INSTITUTIONS</span>
27-
</td>
28-
</tr>
29-
</tbody>
30-
</table>
31-
</section>
32-
3317
<section class="card-message">
3418
<h1 th:utext="#{screen.unsupp-instn.heading}"></h1>
3519
<p th:utext="#{screen.unsupp-instn.message(${osfUrl.institutionsHome})}"></p>
@@ -77,7 +61,7 @@ <h2 th:utext="#{screen.unsupp-instn.existing.heading}"></h2>
7761

7862
<hr class="my-4" />
7963
<section class="text-with-mdi">
80-
<span>
64+
<span class="full-width center-align-text text-bold">
8165
<a href="https://help.osf.io/article/272-sign-in-to-osf" th:utext="#{screen.generic.link.support}"></a>
8266
</span>
8367
</section>

‎src/main/resources/templates/fragments/tosloginform.html‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,6 @@
1616
<!-- Terms of service consent check login form template begins here -->
1717
<div th:fragment="tosloginform" class="d-flex flex-column justify-content-between m-auto">
1818

19-
<section>
20-
<div class="service-ui" th:replace="fragments/osfbannerui :: osfBannerUI">
21-
<a href="fragments/osfbannerui.html"></a>
22-
</div>
23-
</section>
24-
2519
<section class="text-without-mdi text-center text-bold text-large margin-large-vertical">
2620
<span th:utext="#{screen.tosconsent.tips}"></span>
2721
</section>
@@ -80,22 +74,23 @@
8074
</section>
8175

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

8680
</form>
8781

8882
<hr class="my-4" />
8983

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

9490
<script type="text/javascript">
9591
function checkTosConsent(checkbox) {
9692
let submitButton = document.getElementById("primarySubmitButton");
9793
submitButton.disabled = !checkbox.checked;
98-
submitButton.style.backgroundColor = checkbox.checked ? "#1b6d85": "#efefef";
9994
}
10095
</script>
10196

0 commit comments

Comments
 (0)