Skip to content

Commit 95931a9

Browse files
cslzchencslzchen
committed
Generic login / logut success pages rework
* The generic login / logout success pages show up if no service is provided or if the service info is somehow lost during the login process. Both pages are now presented to users as an auhn error page with the "tip" section using "title-danger" although it is not an anthn error internally. * The primary goal of the login success page is to help the user continue to OSF signed-in. It also provides a secondray link for them to exit login and go back to OSF signed-out. * Similarly, the primary gold of the logout success page is to help the user navigate back to OSF goodbye page. It aslo provides a secondary link for them to login again with default service. * In addition, applied the new UI / UX design to both pages; added developer mode support (similar to the CAS unavailable page) to show a list of authn attrs for the login success page. * Finally, renamed variables in messages.properties.
1 parent 096879e commit 95931a9

3 files changed

Lines changed: 143 additions & 113 deletions

File tree

‎src/main/resources/messages.properties‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -592,17 +592,23 @@ screen.institutionlogin.osf=Sign in with your OSF account
592592
#
593593
# Generic login and logout success page
594594
#
595-
screen.generic.logout.header=Signed-out
596-
screen.generic.logout.heading=Logout successful
597-
screen.generic.logout.message=You have successfully logged out of the OSF Central Authentication Service (CAS). You may continue to OSF signed-out or return to the sign-in page.
598-
screen.generic.login.header=Signed-in
599-
screen.generic.login.heading=Login successful
600-
screen.generic.login.message=You have successfully logged into the OSF Central Authentication Service (CAS). You may continue to OSF signed-in or log out and go back to OSF home page.
601-
screen.generic.button.backtoosf=Continue to OSF
602-
screen.generic.button.backtologin=Return to sign-in
603-
screen.generic.button.logout=Log out
604-
screen.generic.button.viewdetails=View authentication details
605-
screen.generic.button.hidedetails=Hide authentication details
595+
screen.generic.logoutsuccess.title=Signed-out
596+
screen.generic.logoutsuccess.tip=Oops! Redirection didn't happen ...
597+
screen.generic.logoutsuccess.heading=Logout successful
598+
screen.generic.logoutsuccess.message=You have successfully logged out of OSF. However, you are seeing this page \
599+
because the automatic redirection somehow didn't happen. Please click the button below to go back to OSF.
600+
screen.generic.logoutsuccess.button.continue=Back to OSF
601+
screen.generic.logoutsuccess.link.login=Login again
602+
#
603+
screen.generic.loginsuccess.title=Signed-in
604+
screen.generic.loginsuccess.tip=Oops! Redirection didn't happen ...
605+
screen.generic.loginsuccess.heading=Login successful
606+
screen.generic.loginsuccess.message=You have successfully logged into OSF! However, you are seeing this page because \
607+
the automatic redirection somehow didn't happen. Please click the button below to continue to OSF.
608+
screen.generic.loginsuccess.button.continue=Continue to OSF
609+
screen.generic.loginsuccess.link.cancel=Exit login
610+
screen.generic.loginsuccess.button.show=View authentication details
611+
screen.generic.loginsuccess.button.hide=Hide authentication details
606612
#
607613
# Authentication exception messages on the login form submission page (inline / pop-up)
608614
#

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

Lines changed: 92 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -2,96 +2,112 @@
22
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
33

44
<head>
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
77

8-
<title th:text="#{screen.generic.login.header}"></title>
9-
<link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
8+
<title th:text="#{screen.generic.loginsuccess.title}"></title>
9+
<link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
1010
</head>
1111

12-
<body>
13-
<main role="main" class="container mt-3 mb-3">
14-
<div layout:fragment="content" class="row">
15-
<div class="banner-generic m-auto mdc-card p-4 w-card-wide">
16-
<div class="login-generic-card">
12+
<body class="mdc-typography">
13+
<div layout:fragment="content" class="d-flex justify-content-center">
14+
15+
<div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
16+
<section class="login-error-card">
17+
<section>
1718
<div th:replace="fragments/osfbannerui :: osfBannerUI">
1819
<a href="fragments/osfbannerui.html"></a>
1920
</div>
21+
</section>
22+
<section class="text-without-mdi text-center text-bold text-large margin-large-vertical title-danger">
23+
<span th:utext="#{screen.generic.loginsuccess.tip}"></span>
24+
</section>
25+
<hr class="my-4" />
26+
<section class="card-message">
27+
<h2 th:utext="#{screen.generic.loginsuccess.heading}"></h2>
28+
<div th:utext="#{screen.generic.loginsuccess.message}"></div>
29+
</section>
30+
<section class="form-button">
31+
<a class="mdc-button mdc-button--raised button-osf-blue" th:href="@{${osfUrl.dashboard}}">
32+
<span class="mdc-button__label" th:utext="#{screen.generic.loginsuccess.button.continue}"></span>
33+
</a>
34+
</section>
35+
<hr class="my-4" />
36+
<section class="text-with-mdi">
37+
<i class="mdi mdi-logout mdi-before-text"></i>
38+
<span><a th:href="@{/logout(service=${osfUrl.logout})}" th:utext="#{screen.generic.loginsuccess.link.cancel}"></a></span>
39+
</section>
40+
<section>
41+
<!-- <section th:if="${osfCasLoginContext.devMode}"> -->
2042
<hr class="my-4" />
21-
<div class="card-message">
22-
<h2 th:utext="#{screen.generic.login.heading}"></h2>
23-
<p th:utext="#{screen.generic.login.message}"></p>
24-
</div>
25-
<div class="form-button-inline">
26-
<a class="mdc-button mdc-button--raised button-osf-green" th:href="@{${osfUrl.dashboard}}">
27-
<span class="mdc-button__label" th:utext="#{screen.generic.button.backtoosf}"></span>
28-
</a>
29-
<a class="mdc-button mdc-button--raised button-osf-blue" th:href="@{/logout(service=${osfUrl.logout})}">
30-
<span class="mdc-button__label" th:utext="#{screen.generic.button.logout}"></span>
31-
</a>
32-
</div>
33-
<hr class="hr-text" data-content="DEVELOPING MODE ONLY" />
34-
<div class="form-button">
43+
<section class="text-without-mdi text-center text-bold text-large margin-large-vertical title-danger">
44+
<span th:utext="#{screen.authnerror.instructions.devmode}"></span>
45+
</section>
46+
<section class="form-button">
3547
<button id="buttonViewAuthenticationDetails" type="button"
36-
class="mdc-button mdc-button--raised button-osf-red"
37-
onclick="showAuthenticationDetails();">
38-
<span class="mdc-button__label" th:utext="#{screen.generic.button.viewdetails}"></span>
48+
class="mdc-button mdc-button--raised button-osf-navbar"
49+
onclick="showAuthenticationDetails();">
50+
<span class="mdc-button__label" th:utext="#{screen.generic.loginsuccess.button.show}"></span>
3951
</button>
40-
<button id="buttonHideAuthenticationDetails" type="button" style="display: none;"
41-
class="mdc-button mdc-button--raised button-osf-red"
42-
onclick="hideAuthenticationrDetails();">
43-
<span class="mdc-button__label" th:utext="#{screen.generic.button.hidedetails}"></span>
52+
<button id="buttonHideAuthenticationDetails" type="button"
53+
class="mdc-button mdc-button--raised button-osf-navbar hidden-button"
54+
onclick="hideAuthenticationDetails();">
55+
<span class="mdc-button__label" th:utext="#{screen.generic.loginsuccess.button.hide}"></span>
4456
</button>
45-
</div>
46-
<div id="authenticationDetails" class="pre-formatted-small word-break-all" style="display: none;">
57+
</section>
58+
<section id="authenticationDetails" class="pre-formatted-small word-break-all hidden-details">
4759
<p th:unless="${#maps.isEmpty(authentication.principal.attributes)}">
4860
The following attributes are resolved for <strong th:utext="${authentication.principal.id}"></strong>:
49-
<div class="w-100 mdc-data-table mx-auto my-4" id="divPrincipalAttributes">
50-
<table id="attributesTable" class="mdc-data-table__table" style="white-space: unset">
51-
<thead>
52-
<tr class="mdc-data-table__header-row">
53-
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
54-
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>
55-
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Type</th>
56-
</tr>
57-
</thead>
58-
<tbody class="mdc-data-table__content">
59-
<tr th:each="attribute : ${authentication.principal.attributes}" class="mdc-data-table__row">
60-
<td class="mdc-data-table__cell"><code><span th:utext="${attribute.key}"></span></code></td>
61-
<td class="mdc-data-table__cell"><code><span th:utext="${attribute.value}"></span></code></td>
62-
<td class="mdc-data-table__cell"><code>Principal</code></td>
63-
</tr>
64-
<tr th:each="attribute : ${authentication.attributes}" class="mdc-data-table__row">
65-
<td class="mdc-data-table__cell"><code><span th:utext="${attribute.key}"></span></code></td>
66-
<td class="mdc-data-table__cell"><code><span th:utext="${attribute.value}"></span></code></td>
67-
<td class="mdc-data-table__cell"><code>Authentication</code></td>
68-
</tr>
69-
</tbody>
70-
</table>
71-
</div>
7261
</p>
73-
</div>
74-
</div>
75-
</div>
76-
<script type="text/javascript" th:inline="javascript">
77-
let div = document.querySelector('#divPrincipalAttributes');
78-
new mdc.dataTable.MDCDataTable(div);
79-
80-
/*<![CDATA[*/
81-
function showAuthenticationDetails() {
82-
$("#buttonViewAuthenticationDetails").hide()
83-
$("#buttonHideAuthenticationDetails").show()
84-
$("#authenticationDetails").show()
85-
}
86-
function hideAuthenticationrDetails() {
87-
$("#buttonViewAuthenticationDetails").show()
88-
$("#buttonHideAuthenticationDetails").hide()
89-
$("#authenticationDetails").hide()
90-
}
91-
/*]]>*/
92-
</script>
62+
<div class="w-100 mdc-data-table mx-auto my-4" id="divPrincipalAttributes">
63+
<table id="attributesTable" class="mdc-data-table__table" style="white-space: unset">
64+
<thead>
65+
<tr class="mdc-data-table__header-row">
66+
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
67+
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>
68+
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Type</th>
69+
</tr>
70+
</thead>
71+
<tbody class="mdc-data-table__content">
72+
<tr th:each="attribute : ${authentication.principal.attributes}" class="mdc-data-table__row">
73+
<td class="mdc-data-table__cell"><code><span th:utext="${attribute.key}"></span></code></td>
74+
<td class="mdc-data-table__cell"><code><span th:utext="${attribute.value}"></span></code></td>
75+
<td class="mdc-data-table__cell"><code>Principal</code></td>
76+
</tr>
77+
<tr th:each="attribute : ${authentication.attributes}" class="mdc-data-table__row">
78+
<td class="mdc-data-table__cell"><code><span th:utext="${attribute.key}"></span></code></td>
79+
<td class="mdc-data-table__cell"><code><span th:utext="${attribute.value}"></span></code></td>
80+
<td class="mdc-data-table__cell"><code>Authentication</code></td>
81+
</tr>
82+
</tbody>
83+
</table>
84+
</div>
85+
</section>
86+
</section>
87+
</section>
9388
</div>
94-
</main>
89+
90+
<script type="text/javascript">
91+
disableSignUpButton();
92+
</script>
93+
94+
<script type="text/javascript">
95+
<!-- <script type="text/javascript" th:if="${devMode}"> -->
96+
let div = document.querySelector('#divPrincipalAttributes');
97+
new mdc.dataTable.MDCDataTable(div);
98+
function showAuthenticationDetails() {
99+
$("#buttonViewAuthenticationDetails").hide()
100+
$("#buttonHideAuthenticationDetails").show()
101+
$("#authenticationDetails").show()
102+
}
103+
function hideAuthenticationDetails() {
104+
$("#buttonViewAuthenticationDetails").show()
105+
$("#buttonHideAuthenticationDetails").hide()
106+
$("#authenticationDetails").hide()
107+
}
108+
</script>
109+
110+
</div>
95111
</body>
96112

97113
</html>

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

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,48 @@
22
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
33

44
<head>
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
77

8-
<title th:text="#{screen.generic.logout.header}"></title>
8+
<title th:text="#{screen.generic.logoutsuccess.title}"></title>
99
<link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
1010
</head>
1111

12-
<body>
13-
<main role="main" class="container mt-3 mb-3">
14-
<div layout:fragment="content">
15-
<div class="banner-generic m-auto mdc-card p-4 w-card-narrow">
16-
<div class="login-generic-card">
12+
<body class="mdc-typography">
13+
<div layout:fragment="content" class="d-flex justify-content-center">
14+
15+
<div class="d-flex justify-content-center flex-md-row flex-column mdc-card mdc-card-content w-lg-30">
16+
<section class="login-error-card">
17+
<section>
1718
<div th:replace="fragments/osfbannerui :: osfBannerUI">
1819
<a href="fragments/osfbannerui.html"></a>
1920
</div>
20-
<hr class="my-4" />
21-
<div class="card-message">
22-
<h2 th:utext="#{screen.generic.logout.heading}"></h2>
23-
<p th:utext="#{screen.generic.logout.message}"></p>
24-
</div>
25-
<div class="form-button">
26-
<a class="mdc-button mdc-button--raised button-osf-green" th:href="@{/login}">
27-
<span class="mdc-button__label" th:utext="#{screen.generic.button.backtologin}"></span>
28-
</a>
29-
</div>
30-
<div class="form-button">
31-
<a class="mdc-button mdc-button--raised button-osf-blue" th:href="@{/logout(service=${osfUrl.logout})}">
32-
<span class="mdc-button__label" th:utext="#{screen.generic.button.backtoosf}"></span>
33-
</a>
34-
</div>
35-
</div>
36-
</div>
21+
</section>
22+
<section class="text-without-mdi text-center text-bold text-large margin-large-vertical title-danger">
23+
<span th:utext="#{screen.generic.loginsuccess.tip}"></span>
24+
</section>
25+
<hr class="my-4" />
26+
<section class="card-message">
27+
<h2 th:utext="#{screen.generic.logoutsuccess.heading}"></h2>
28+
<div th:utext="#{screen.generic.logoutsuccess.message}"></div>
29+
</section>
30+
<section class="form-button">
31+
<a class="mdc-button mdc-button--raised button-osf-blue" th:href="@{/logout(service=${osfUrl.logout})}">
32+
<span class="mdc-button__label" th:utext="#{screen.generic.logoutsuccess.button.continue}"></span>
33+
</a>
34+
</section>
35+
<hr class="my-4" />
36+
<section class="text-with-mdi" th:with="loginUrl=@{/login(casRedirectSource=cas)}">
37+
<i class="mdi mdi-login mdi-before-text"></i>
38+
<span><a th:href="@{/login(casRedirectSource=200)}" th:utext="#{screen.generic.logoutsuccess.link.login}"></a></span>
39+
</section>
40+
</section>
3741
</div>
38-
</main>
42+
43+
<script type="text/javascript">
44+
disableSignUpButton();
45+
</script>
46+
</div>
3947
</body>
4048

4149
</html>

0 commit comments

Comments
 (0)