Skip to content

Commit 63fdf15

Browse files
alxndrsnalxndrsn
authored
oidc: show unbranded spinner on forwarding page (#981)
Spinner source: https://loading.io/css/ Licence: CC0 (public domain) Co-authored-by: alxndrsn <alxndrsn>
1 parent 0d2efaa commit 63fdf15

File tree

2 files changed

+46
-8
lines changed

2 files changed

+46
-8
lines changed

‎lib/http/endpoint.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,11 @@ const defaultEndpoint = endpointBase({
241241
const htmlEndpoint = endpointBase({
242242
resultWriter: (result, request, response) => {
243243
response.type('text/html');
244-
response.send(frontendPage(result));
244+
if (typeof result === 'string') {
245+
response.send(result);
246+
} else {
247+
response.send(frontendPage(result));
248+
}
245249
},
246250
errorWriter: (error, request, response) => {
247251
response.type('text/html');

‎lib/resources/oidc.js

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,47 @@ module.exports = (service, endpoint) => {
118118
// Instead, we need to render a page and then "browse" from that page to the normal frontend:
119119

120120
// id=cl only set for playwright. Why can't it locate this anchor in any other way?
121-
return {
122-
head: html`<meta http-equiv="refresh" content="0; url=${nextPath}">`,
123-
body: html`
124-
<h1>Authentication Successful</h1>
125-
<div><a href="${nextPath}" id="cl">Continue to ODK Central</a></div>
126-
`,
127-
};
121+
return html`
122+
<!doctype html>
123+
<html>
124+
<head>
125+
<title>Loading... | ODK Central</title>
126+
<meta http-equiv="refresh" content="0; url=${nextPath}">
127+
<style>
128+
#container { text-align:center }
129+
130+
.lds-spinner { display:inline-block; position:relative; width:80px; height:80px }
131+
.lds-spinner div { transform-origin:40px 40px; animation:lds-spinner 1.2s linear infinite }
132+
.lds-spinner div:after {
133+
content:" "; display:block; position:absolute; top:3px; left:37px;
134+
width:6px; height:18px; border-radius:20%; background:#000;
135+
}
136+
.lds-spinner div:nth-child(1) { transform:rotate(0deg); animation-delay:-1.1s }
137+
.lds-spinner div:nth-child(2) { transform:rotate(30deg); animation-delay:-1s }
138+
.lds-spinner div:nth-child(3) { transform:rotate(60deg); animation-delay:-0.9s }
139+
.lds-spinner div:nth-child(4) { transform:rotate(90deg); animation-delay:-0.8s }
140+
.lds-spinner div:nth-child(5) { transform:rotate(120deg); animation-delay:-0.7s }
141+
.lds-spinner div:nth-child(6) { transform:rotate(150deg); animation-delay:-0.6s }
142+
.lds-spinner div:nth-child(7) { transform:rotate(180deg); animation-delay:-0.5s }
143+
.lds-spinner div:nth-child(8) { transform:rotate(210deg); animation-delay:-0.4s }
144+
.lds-spinner div:nth-child(9) { transform:rotate(240deg); animation-delay:-0.3s }
145+
.lds-spinner div:nth-child(10) { transform:rotate(270deg); animation-delay:-0.2s }
146+
.lds-spinner div:nth-child(11) { transform:rotate(300deg); animation-delay:-0.1s }
147+
.lds-spinner div:nth-child(12) { transform:rotate(330deg); animation-delay:0s }
148+
@keyframes lds-spinner { 0% { opacity:1 } 100% { opacity:0 } }
149+
150+
.continue-message { opacity:0; animation: 1s ease-in 10s 1 normal forwards fade-in; margin-top:1em }
151+
@keyframes fade-in { from { opacity:0 } to { opacity:1 } }
152+
</style>
153+
</head>
154+
<body>
155+
<div id="container">
156+
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
157+
<div class="continue-message"><a href="${nextPath}" id="cl">Continue</a></div>
158+
</div>
159+
</body>
160+
</html>
161+
`;
128162
} catch (err) {
129163
if (redirect.isRedirect(err)) {
130164
throw err;

0 commit comments

Comments
 (0)