Skip to content

Commit efd6891

Browse files
committed
Unsupported institution rework
* Added previously removed OSF institution URL to OsfUrlProperties * Removed legacy oldCAS button styles * Rewrote the page with the FE new design * Added scripts for pre- and pro- processing the submission button * Syncec styles between all three institution pages * Renamed variables in messages.properties
1 parent 5d0bfbf commit efd6891

7 files changed

Lines changed: 115 additions & 104 deletions

File tree

etc/cas/config/cas.properties

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ cas.authn.osf-url.resend-confirmation=https://{{ .Values.osfDomain }}/resend/
7171
cas.authn.osf-url.forgot-password=https://{{ .Values.osfDomain }}/forgotpassword/
7272
cas.authn.osf-url.forgot-password-institution=https://{{ .Values.osfDomain }}/forgotpassword-institution/
7373
cas.authn.osf-url.register=https://{{ .Values.osfDomain }}/register/
74+
cas.authn.osf-url.institutions-home=https://{{ .Values.osfDomain }}/institutions/
7475
########################################################################################################################
7576

7677
########################################################################################################################

etc/cas/config/local/cas-local.properties

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@ cas.authn.osf-url.login-with-next=http://localhost:5000/login?next=
7676
cas.authn.osf-url.logout=http://localhost:5000/logout/
7777
cas.authn.osf-url.resend-confirmation=http://localhost:5000/resend/
7878
cas.authn.osf-url.forgot-password=http://localhost:5000/forgotpassword/
79+
cas.authn.osf-url.forgot-password-institution=http://localhost:5000/forgotpassword-institution/
7980
cas.authn.osf-url.register=http://localhost:5000/register/
81+
cas.authn.osf-url.institutions-home=http://localhost:5000/institutions/
8082
########################################################################################################################
8183

8284
########################################################################################################################

src/main/java/io/cos/cas/osf/configuration/model/OsfUrlProperties.java

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,20 @@ public class OsfUrlProperties implements Serializable {
5757
private String resendConfirmation;
5858

5959
/**
60-
* OSF forgot-password page URL
60+
* OSF forgot-password page URL.
6161
*/
6262
private String forgotPassword;
6363

6464
/**
65-
* OSF forgot-password-institutions page URL
65+
* OSF forgot-password-institutions page URL.
6666
*/
6767
private String forgotPasswordInstitution;
6868

69+
/**
70+
* OSF institutions home page URL.
71+
*/
72+
private String institutionsHome;
73+
6974
/**
7075
* Build the default service URL using OSF login endpoint with OSF home page as destination.
7176
*/

src/main/resources/messages.properties

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -578,27 +578,27 @@ screen.tosconsent.link.cancel=Cancel and go back to OSF
578578
# Institution login page
579579
#
580580
screen.institutionlogin.title=Institution SSO
581-
screen.institutionlogin.tips=Sign in through your institution
581+
screen.institutionlogin.heading=Sign in through your institution
582582
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.
583583
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.
584584
screen.institutionlogin.heading.select=Select your institution
585-
screen.institutionlogin.select.unsupported=I can't find my institution
586585
screen.institutionlogin.heading.auto=Your institution
587586
screen.institutionlogin.link.select=Not your institution?
587+
screen.institutionlogin.link.unsupported=I can't find my institution
588588
screen.institutionlogin.button.submit=Sign in
589589
screen.institutionlogin.osf=Sign in with your OSF account
590590
#
591591
# Unsupported Institution
592592
#
593-
screen.unsupportedinstitutionlogin.heading=I can't find my institution
594-
screen.unsupportedinstitutionlogin.message=Signing into the OSF with institutional credentials is enabled for <a href="{0}">OSF Institutions members</a>. If your institution is not yet an OSFI member, choose one of the following sign-in methods.
595-
screen.unsupportedinstitutionlogin.existing.heading=I already have an OSF account
596-
screen.unsupportedinstitutionlogin.existing.osf.message=If you have already have an OSF password, you can sign in to the OSF
597-
screen.unsupportedinstitutionlogin.existing.osf.button=Sign in with OSF
598-
screen.unsupportedinstitutionlogin.existing.institution.message=If you have not yet set an OSF password for your account, create a password
599-
screen.unsupportedinstitutionlogin.existing.institution.button=Set a password
600-
screen.unsupportedinstitutionlogin.existing.institution.label.email=<span class="accesskey">E</span>mail
601-
screen.unsupportedinstitutionlogin.existing.institution.label.email.accesskey=e
593+
screen.unsupp-instn.heading=I can't find my institution
594+
screen.unsupp-instn.message=Signing into the OSF with institutional credentials is enabled for <a href="{0}">OSF Institutions members</a>. If your institution is not yet an OSFI member, choose one of the following sign-in methods.
595+
screen.unsupp-instn.existing.heading=I already have an OSF account
596+
screen.unsupp-instn.existing.message=If you have already have an OSF password, you can sign in to the OSF
597+
screen.unsupp-instn.existing.button=Sign in with OSF
598+
screen.unsupp-instn.existing.setpw.message=If you have not yet set an OSF password for your account, create a password
599+
screen.unsupp-instn.existing.setpw.button=Set a password
600+
screen.unsupp-instn.existing.setpw.label.email=<span class="accesskey">E</span>mail
601+
screen.unsupp-instn.existing.setpw.label.email.accesskey=e
602602
#
603603
# Generic login and logout success page
604604
#

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

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -919,6 +919,7 @@ body {
919919
padding: 1rem 0;
920920
}
921921

922+
.login-instn-card .card-message,
922923
.login-error-card .card-message {
923924
padding: 0;
924925
}
@@ -945,29 +946,6 @@ body {
945946
margin: 0.25rem 0;
946947
}
947948

948-
#unknown-institution-login, #unknown-institution-login:active {
949-
background-image: linear-gradient(to bottom, #2bc1f3 0, #337591 100%);
950-
color: white;
951-
font-weight: bold;
952-
}
953-
954-
#unknown-institution-login:hover {
955-
cursor: pointer;
956-
-webkit-box-shadow: 0px 0px 5px 0px #337591;
957-
-moz-box-shadow: 0px 0px 5px 0px #337591;
958-
box-shadow: 0px 0px 5px 0px #337591;
959-
}
960-
961-
#unknown-institution-login .label-login {
962-
opacity: 0.9;
963-
font-size: 1em;
964-
}
965-
966-
.unsupported-inst-body-header {
967-
font-weight: bold;
968-
font-size: 110%;
969-
}
970-
971949
.cas-field-primary {
972950
margin-bottom: 1rem!important;
973951
margin-top: 0.5rem!important;

src/main/resources/templates/casInstitutionLoginView.html

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<body class="login mdc-typography">
1313
<div layout:fragment="content" class="d-flex justify-content-center">
1414
<div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
15-
<section class="login-section login-form">
15+
<section class="login-section login-form login-instn-card">
1616

1717
<section class="mb-4 service-ui text-center">
1818
<table class="osf-shield-with-name">
@@ -30,11 +30,8 @@
3030
</table>
3131
</section>
3232

33-
<section class="text-without-mdi text-center text-bold text-large margin-large-vertical">
34-
<span th:utext="#{screen.institutionlogin.tips}"></span>
35-
</section>
36-
3733
<section class="card-message">
34+
<h2 th:utext="#{screen.institutionlogin.heading}"></h2>
3835
<p th:unless=${osfCasLoginContext.institutionId} th:utext="#{screen.institutionlogin.message.select}"></p>
3936
<p th:if=${osfCasLoginContext.institutionId} th:utext="#{screen.institutionlogin.message.auto}"></p>
4037
</section>
@@ -51,16 +48,16 @@
5148
</select>
5249
</section>
5350

54-
<section class="text-with-mdi" th:if=${osfCasLoginContext.institutionId}>
51+
<section class="text-with-mdi">
5552
<i class="mdi mdi-checkbox-blank-off-outline mdi-before-text"></i>
56-
<span><a th:href="@{/login(campaign=institution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.link.select}"></a></span>
53+
<span th:if="${osfCasLoginContext.institutionId}">
54+
<a th:href="@{/login(campaign=institution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.link.select}"></a>
55+
</span>
56+
<span th:unless="${osfCasLoginContext.institutionId}">
57+
<a th:href="@{/login(campaign=unsupportedinstitution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.link.unsupported}"></a>
58+
</span>
5759
</section>
5860

59-
<div class="instn-unsupported" th:unless=${osfCasLoginContext.institutionId}>
60-
<i class="mdi mdi-menu mdi-before-text"></i>
61-
<span><a th:href="@{/login(campaign=unsupportedinstitution, institutionId=${institutionId ?: ''}, service=${service?.originalUrl ?: ''})}" th:utext="#{screen.institutionlogin.select.unsupported}"></a></span>
62-
</div>
63-
6461
<section class="form-button">
6562
<button type="button" id="institutionSubmit" class="mdc-button mdc-button--raised" name="submit" onclick="institutionLogin()"
6663
th:classappend="${osfCasLoginContext.institutionId == null ? 'button-osf-disabled' : 'button-osf-blue'}"

src/main/resources/templates/casUnsupportedInstitutionLoginView.html

Lines changed: 84 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,75 +5,103 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
66
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
77

8-
<title th:text="#{screen.institutionlogin.pagetitle}"></title>
8+
<title th:text="#{screen.institutionlogin.title}"></title>
99
<link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
10-
<style type="text/css">
11-
#pmlink-forgotpwd { display: none; }
12-
</style>
1310
</head>
1411

15-
<body>
16-
<main role="main" class="container mt-3 mb-3">
12+
<body class="login mdc-typography">
13+
<div layout:fragment="content" class="d-flex justify-content-center">
14+
<div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
15+
<section class="login-section login-form login-instn-card">
1716

18-
<div layout:fragment="content" class="row">
19-
<div class="banner-generic m-auto mdc-card p-4 w-card-narrow">
20-
<div class="login-generic-card login-instn-card">
21-
<div th:replace="fragments/osfinstitutionbannerui :: osfInstitutionBannerUI">
22-
<a href="fragments/osfinstitutionbannerui.html"></a>
23-
</div>
24-
<hr class="my-4" />
25-
<div class="card-message">
26-
<h2 th:utext="#{screen.unsupportedinstitutionlogin.heading}"></h2>
27-
<p th:utext="#{screen.unsupportedinstitutionlogin.message(${osfUrl.institutionsHome})}"></p>
28-
</div>
29-
<div id="osfDefaultLogin">
30-
<div class="card-message">
31-
<h3 th:utext="#{screen.unsupportedinstitutionlogin.existing.heading}"></h3>
32-
<p th:utext="#{screen.unsupportedinstitutionlogin.existing.osf.message}"></p>
33-
</div>
34-
<section class="delegation-row">
35-
<a class="delegation-button" th:href="@{/login(service=${service?.originalUrl ?: ''})}">
36-
<img class="delegation-button-logo" src="/images/osf-logo.png">
37-
<span class="delegation-button-label" th:utext="#{screen.unsupportedinstitutionlogin.existing.osf.button}"></span>
38-
</a>
39-
</section>
40-
</div>
41-
42-
<div id="osfUnsupportedInstitutionLogin">
43-
<div class="card-message">
44-
<p th:utext="#{screen.unsupportedinstitutionlogin.existing.institution.message}"></p>
45-
</div>
46-
</div>
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">
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>
4732

48-
<div class="form-wrapper">
49-
<form method="post" id="fm1" th:object="${credential}" th:action="@{${osfUrl.forgotPasswordInstitution}}">
33+
<section class="card-message">
34+
<h2 th:utext="#{screen.unsupp-instn.heading}"></h2>
35+
<p th:utext="#{screen.unsupp-instn.message(${osfUrl.institutionsHome})}"></p>
36+
</section>
5037

51-
<section class="cas-field cas-field-primary my-3">
52-
<div class="mdc-text-field d-flex">
53-
<input class="mdc-text-field__input"
54-
id="username"
55-
size="256"
56-
type="email"
57-
name="forgot_password-email"
58-
th:accesskey="#{screen.unsupportedinstitutionlogin.existing.institution.label.email.accesskey}"
59-
autocomplete="off" />
60-
<label for="username" class="mdc-floating-label" th:utext="#{screen.unsupportedinstitutionlogin.existing.institution.label.email}"></label>
61-
</div>
62-
</section>
38+
<section class="card-message">
39+
<h3 th:utext="#{screen.unsupp-instn.existing.heading}"></h3>
40+
<p th:utext="#{screen.unsupp-instn.existing.message}"></p>
41+
</section>
6342

64-
<div th:replace="fragments/submitbutton :: submitButton (buttonCustomization='button-osf-green', messageKey='screen.unsupportedinstitutionlogin.existing.institution.button')" />
43+
<section class="form-button">
44+
<a class="mdc-button mdc-button--raised button-osf-blue" th:href="@{/login(service=${service?.originalUrl ?: ''})}">
45+
<span class="mdc-button__label" th:utext="#{screen.unsupp-instn.existing.button}"></span>
46+
</a>
47+
</section>
6548

66-
</form>
49+
<section id="osfUnsupportedInstitutionLogin">
50+
<div class="card-message">
51+
<p th:utext="#{screen.unsupp-instn.existing.setpw.message}"></p>
6752
</div>
53+
</section>
6854

69-
<hr class="my-4" />
70-
71-
<div th:replace="fragments/pmlinks :: pmlinks" />
55+
<div class="form-wrapper">
56+
<form method="post" id="fm1" th:object="${credential}" th:action="@{${osfUrl.forgotPasswordInstitution}}">
57+
<section class="cas-field cas-field-primary my-3">
58+
<div class="mdc-text-field d-flex">
59+
<input class="mdc-text-field__input"
60+
id="username"
61+
size="256"
62+
type="email"
63+
name="forgot_password-email"
64+
th:accesskey="#{screen.unsupp-instn.existing.setpw.label.email.accesskey}"
65+
autocomplete="off" />
66+
<label for="username" class="mdc-floating-label" th:utext="#{screen.unsupp-instn.existing.setpw.label.email}"></label>
67+
</div>
68+
</section>
69+
<section>
70+
<div th:replace="fragments/submitbutton :: submitButton (buttonDisabled=false, buttonCustomization='button-osf-blue', messageKey='screen.unsupp-instn.existing.setpw.button')" />
71+
</section>
72+
</form>
7273
</div>
73-
</div>
7474

75+
<hr class="my-4" />
76+
<section class="text-with-mdi">
77+
<i class="mdi mdi-account-question-outline mdi-before-text"></i>
78+
<span>
79+
<a href="https://help.osf.io/hc/en-us/articles/360019737194-Sign-in-to-OSF" th:utext="#{screen.generic.link.support}"></a>
80+
</span>
81+
</section>
82+
83+
</section>
7584
</div>
76-
</main>
85+
86+
<script type="text/javascript" th:inline="javascript">
87+
/*<![CDATA[*/
88+
var i = /*[[@{#{screen.generic.button.wip}}]]*/ 'One moment please...' ;
89+
var j = /*[[@{#{screen.unsupp-instn.existing.setpw.button}}]]*/ 'Set a password' ;
90+
/*]]>*/
91+
$(window).on('pageshow', function () {
92+
$(':submit').prop('disabled', false);
93+
$(':submit').attr('value', j);
94+
});
95+
$(document).ready(function () {
96+
$("#fm1").submit(function () {
97+
$(":submit").attr("disabled", true);
98+
$(":submit").attr("value", i);
99+
return true;
100+
});
101+
});
102+
</script>
103+
104+
</div>
77105
</body>
78106

79107
</html>

0 commit comments

Comments
 (0)