Skip to content

Commit be45862

Browse files
cslzchencslzchen
committed
CAS unavailable / server error page rework
* In addititon to standard style updates, this page includes a developer mode option (depending on which server environment on which newCAS is running) that allows error info and stack trace to be displayed. * Currently, this is not fully implemented and the page assumes developer mode by default.
1 parent 6685ffe commit be45862

2 files changed

Lines changed: 84 additions & 57 deletions

File tree

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

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -688,6 +688,11 @@ body {
688688
padding: 0 8px;
689689
}
690690

691+
.form-button .button-osf-navbar,
692+
.form-button-inline .button-osf-navbar {
693+
background-color: var(--cas-theme-osf-navbar, #263947);
694+
}
695+
691696
.form-button .button-osf-grey,
692697
.form-button-inline .button-osf-grey {
693698
background-color: var(--cas-theme-osf-grey, #eeeeee);
@@ -714,11 +719,6 @@ body {
714719
background-color: var(--cas-theme-osf-disabled, #EFEFEF);
715720
}
716721

717-
.login-error-card .pre-formatted-small pre {
718-
font-size: 0.75rem;
719-
white-space: pre-wrap;
720-
}
721-
722722
.title-danger {
723723
color: var(--cas-theme-osf-red, #b52b27);
724724
}
@@ -830,6 +830,10 @@ body {
830830
margin: 1rem 0;
831831
}
832832

833+
.hidden-details {
834+
display: none;
835+
}
836+
833837
.form-button-inline .delegation-button-logo {
834838
position: absolute;
835839
left: 4px;
@@ -852,6 +856,11 @@ body {
852856
font-size: 1rem;
853857
}
854858

859+
.login-error-card .pre-formatted-small pre {
860+
font-size: 0.75rem;
861+
white-space: pre-wrap;
862+
}
863+
855864
.login-section .background-disabled {
856865
background-color: var(--cas-theme-osf-disabled-dark, #cccccc);
857866
}

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

Lines changed: 70 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,70 +2,88 @@
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.unavailable.header}">CAS Error View</title>
8+
<title th:text="#{screen.unavailable.header}"></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" class="banner banner-danger mdc-card p-4 w-md-wide">
12+
<body class="mdc-typography">
13+
<div layout:fragment="content" class="d-flex justify-content-center">
1514

16-
<div class="login-error-card">
17-
<div th:replace="fragments/osfbannerui :: osfBannerUI">
18-
<a href="fragments/osfbannerui.html"></a>
19-
</div>
20-
<h3 class="text-center title-danger">
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>
18+
<div th:replace="fragments/osfbannerui :: osfBannerUI">
19+
<a href="fragments/osfbannerui.html"></a>
20+
</div>
21+
</section>
22+
<section class="text-without-mdi text-center text-bold text-large margin-large-vertical title-danger">
2123
<span th:utext="#{screen.authnerror.instructions}"></span>
22-
</h3>
24+
</section>
2325
<hr class="my-4" />
24-
<div class="card-message">
26+
<section class="card-message">
2527
<h2 th:utext="#{screen.unavailable.heading}"></h2>
2628
<div th:utext="#{screen.unavailable.message}"></div>
27-
</div>
28-
<div class="form-button-inline">
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.authnerror.button.backtoosf}"></span>
29+
</section>
30+
<section class="form-button" th:with="loginUrl=@{/login(errorSource=401)}">
31+
<a class="mdc-button mdc-button--raised button-osf-blue" th:href="@{/logout(service=${loginUrl})}">
32+
<span class="mdc-button__label" th:utext="#{screen.error.page.loginagain}"></span>
3133
</a>
32-
<button id="buttonViewErrorDetails" type="button"
33-
class="mdc-button mdc-button--raised button-osf-red"
34-
onclick="showErrorDetails();">
35-
<span class="mdc-button__label" th:utext="#{screen.unavailable.button.viewdetails}"></span>
36-
</button>
37-
<button id="buttonHideErrorDetails" type="button" style="display: none;"
38-
class="mdc-button mdc-button--raised button-osf-red"
39-
onclick="hideErrorDetails();">
40-
<span class="mdc-button__label" th:utext="#{screen.unavailable.button.hidedetails}"></span>
41-
</button>
42-
</div>
43-
<div id="errorDetails" class="pre-formatted-small word-break-all" style="display: none;">
44-
<hr class="hr-text" data-content="DETAILS" />
45-
<pre th:utext="${'Error: ' + status + ' - ' + error}"></pre>
46-
<pre th:utext="${'Timestamp: ' + #dates.formatISO(#dates.createNow())}"></pre>
47-
<pre th:text="${'Message: ' + message}"></pre>
48-
<pre style="white-space: pre-wrap;" th:utext="${#strings.escapeXml(trace)}"></pre>
49-
</div>
50-
</div>
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.authnerror.button.backtoosf}"></a></span>
39+
</section>
40+
<hr class="my-4" />
41+
<section>
42+
<!-- <section th:if="${osfCasLoginContext.devMode}"> -->
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="pre-formatted-small word-break-all">
47+
<pre th:utext="${'Error: ' + status + ' - ' + error}"></pre>
48+
<pre th:utext="${'Timestamp: ' + #dates.formatISO(#dates.createNow())}"></pre>
49+
<pre th:text="${'Message: ' + message}"></pre>
50+
</section>
51+
<section class="form-button">
52+
<button id="buttonViewErrorDetails" type="button"
53+
class="mdc-button mdc-button--raised button-osf-navbar"
54+
onclick="showErrorDetails();">
55+
<span class="mdc-button__label" th:utext="#{screen.unavailable.button.viewdetails}"></span>
56+
</button>
57+
<button id="buttonHideErrorDetails" type="button" style="display: none;"
58+
class="mdc-button mdc-button--raised button-osf-navbar"
59+
onclick="hideErrorDetails();">
60+
<span class="mdc-button__label" th:utext="#{screen.unavailable.button.hidedetails}"></span>
61+
</button>
62+
</section>
63+
<section id="errorDetails" class="pre-formatted-small word-break-all hidden-details">
64+
<hr class="hr-text" data-content="DETAILS" />
65+
<pre th:utext="${#strings.escapeXml(trace)}"></pre>
66+
</section>
67+
</section>
68+
</section>
69+
</div>
5170

52-
<script th:inline="javascript">
53-
/*<![CDATA[*/
54-
function showErrorDetails() {
55-
$("#buttonViewErrorDetails").hide()
56-
$("#buttonHideErrorDetails").show()
57-
$("#errorDetails").show()
58-
}
59-
function hideErrorDetails() {
60-
$("#buttonViewErrorDetails").show()
61-
$("#buttonHideErrorDetails").hide()
62-
$("#errorDetails").hide()
63-
}
64-
/*]]>*/
65-
</script>
71+
<script type="text/javascript">
72+
disableSignUpButton();
6673

67-
</div>
68-
</main>
74+
function showErrorDetails() {
75+
$("#buttonViewErrorDetails").hide()
76+
$("#buttonHideErrorDetails").show()
77+
$("#errorDetails").show()
78+
}
79+
function hideErrorDetails() {
80+
$("#buttonViewErrorDetails").show()
81+
$("#buttonHideErrorDetails").hide()
82+
$("#errorDetails").hide()
83+
}
84+
</script>
85+
86+
</div>
6987
</body>
7088

7189
</html>

0 commit comments

Comments
 (0)