oidc: show unbranded spinner on forwarding page (#981)

Spinner source: https://loading.io/css/ Licence: CC0 (public domain) Co-authored-by: alxndrsn <alxndrsn>
getodk · Sep 25, 2023 · 63fdf15 · 63fdf15
1 parent 0d2efaa
commit 63fdf15
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 8 deletions.
diff --git a/lib/http/endpoint.js b/lib/http/endpoint.js
@@ -241,7 +241,11 @@ const defaultEndpoint = endpointBase({
 const htmlEndpoint = endpointBase({
   resultWriter: (result, request, response) => {
     response.type('text/html');
-    response.send(frontendPage(result));
+    if (typeof result === 'string') {
+      response.send(result);
+    } else {
+      response.send(frontendPage(result));
+    }
   },
   errorWriter: (error, request, response) => {
     response.type('text/html');

diff --git a/lib/resources/oidc.js b/lib/resources/oidc.js
@@ -118,13 +118,47 @@ module.exports = (service, endpoint) => {
       // Instead, we need to render a page and then "browse" from that page to the normal frontend:
 
       // id=cl only set for playwright. Why can't it locate this anchor in any other way?
-      return {
-        head: html`<meta http-equiv="refresh" content="0; url=${nextPath}">`,
-        body: html`
-          <h1>Authentication Successful</h1>
-          <div><a href="${nextPath}" id="cl">Continue to ODK Central</a></div>
-        `,
-      };
+      return html`
+        <!doctype html>
+        <html>
+          <head>
+            <title>Loading... | ODK Central</title>
+            <meta http-equiv="refresh" content="0; url=${nextPath}">
+            <style>
+              #container { text-align:center }
+
+              .lds-spinner { display:inline-block; position:relative; width:80px; height:80px }
+              .lds-spinner div { transform-origin:40px 40px; animation:lds-spinner 1.2s linear infinite }
+              .lds-spinner div:after {
+                content:" "; display:block; position:absolute; top:3px; left:37px;
+                width:6px; height:18px; border-radius:20%; background:#000;
+              }
+              .lds-spinner div:nth-child(1) { transform:rotate(0deg); animation-delay:-1.1s }
+              .lds-spinner div:nth-child(2) { transform:rotate(30deg); animation-delay:-1s }
+              .lds-spinner div:nth-child(3) { transform:rotate(60deg); animation-delay:-0.9s }
+              .lds-spinner div:nth-child(4) { transform:rotate(90deg); animation-delay:-0.8s }
+              .lds-spinner div:nth-child(5) { transform:rotate(120deg); animation-delay:-0.7s }
+              .lds-spinner div:nth-child(6) { transform:rotate(150deg); animation-delay:-0.6s }
+              .lds-spinner div:nth-child(7) { transform:rotate(180deg); animation-delay:-0.5s }
+              .lds-spinner div:nth-child(8) { transform:rotate(210deg); animation-delay:-0.4s }
+              .lds-spinner div:nth-child(9) { transform:rotate(240deg); animation-delay:-0.3s }
+              .lds-spinner div:nth-child(10) { transform:rotate(270deg); animation-delay:-0.2s }
+              .lds-spinner div:nth-child(11) { transform:rotate(300deg); animation-delay:-0.1s }
+              .lds-spinner div:nth-child(12) { transform:rotate(330deg); animation-delay:0s }
+              @keyframes lds-spinner { 0% { opacity:1 } 100% { opacity:0 } }
+
+              .continue-message { opacity:0; animation: 1s ease-in 10s 1 normal forwards fade-in; margin-top:1em }
+              @keyframes fade-in { from { opacity:0 } to { opacity:1 } }
+            </style>
+          </head>
+          <body>
+            <div id="container">
+              <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>
+              <div class="continue-message"><a href="${nextPath}" id="cl">Continue</a></div>
+            </div>
+          </body>
+        </html>
+      `;
     } catch (err) {
       if (redirect.isRedirect(err)) {
         throw err;