Add spinner for auth progress (#1036)

* Add spinner for auth progress

This adds an animated spinner for authentication progress and changes
the auth wording to avoid confusing terms like "delegation".

* 🤖 Selenium screenshots auto-update

* 🤖 Selenium screenshots auto-update

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: David Aerne <meodai@gmail.com>

src/frontend/screenshots.ts

@@ -86,7 +86,7 @@ async function withChrome<T>(
 async function visit(browser: WebdriverIO.Browser, url: string) {
   await browser.url(url);
 
-  /* Disable transitions to make sure we screenshot the (final) actual state */
+  /* Disable transitions and animations to make sure we screenshot the (final) actual state */
   await browser.execute(() => {
     const notransition = `
 *, *::before, *::after {
@@ -95,10 +95,17 @@ async function visit(browser: WebdriverIO.Browser, url: string) {
     -ms-transition-property: none !important;
     -webkit-transition-property: none !important;
     transition-property: none !important;
+}
+        `;
+
+    const noanimation = `
+*, *::before, *::after {
+    animation: none !important;
 }
         `;
     const style = document.createElement("style");
     style.appendChild(document.createTextNode(notransition));
+    style.appendChild(document.createTextNode(noanimation));
     document.body.appendChild(style);
   });
 

src/frontend/src/components/icons.ts

@@ -291,3 +291,25 @@ export const arrowRight = html`
     </g>
   </svg>
 `;
+
+export const spinner = html`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle
+      fill="none"
+      stroke="currentColor"
+      stroke-width="8"
+      cx="50"
+      cy="50"
+      r="44"
+      style="opacity:0.2;"
+    ></circle>
+    <circle
+      fill="currentColor"
+      stroke="#fff"
+      stroke-width="1"
+      cx="8"
+      cy="54"
+      r="10"
+    ></circle>
+  </svg>
+`;

src/frontend/src/flows/authenticate/index.ts

@@ -2,6 +2,7 @@ import { html, render } from "lit-html";
 import { unreachable } from "../../utils/utils";
 import { Connection } from "../../utils/iiConnection";
 import { displayError } from "../../components/displayError";
+import { spinner } from "../../components/icons";
 import { recoveryWizard } from "../recovery/recoveryWizard";
 import { authenticationProtocol } from "./postMessageInterface";
 import {
@@ -45,11 +46,12 @@ export const authenticationFlow = async (
   render(html`<h1>starting authentication</h1>`, container);
   const showMessage = (msg: string) =>
     render(
-      html`<h1
-        style="position: absolute; max-width: 100%; top: 50%; transform: translate(0, -50%);"
-      >
-        ${msg}
-      </h1>`,
+      html`
+        <div class="l-container c-card c-card--highlight t-centered">
+          <div class="c-spinner">${spinner}</div>
+          <p class="t-lead t-paragraph l-stack">${msg}</p>
+        </div>
+      `,
       container
     );
   const result = await authenticationProtocol({
@@ -75,13 +77,13 @@ export const authenticationFlow = async (
     onProgress: (status) => {
       switch (status) {
         case "waiting":
-          showMessage("waiting for authentication data from service...");
+          showMessage("Waiting for authentication data...");
           break;
         case "validating":
           showMessage("validating authentication data...");
           break;
         case "fetching delegation":
-          showMessage("fetching delegation...");
+          showMessage("Finalizing authentication...");
           break;
         default:
           unreachable(status);

src/frontend/src/flows/register/construct.ts

@@ -6,16 +6,15 @@ import {
   creationOptions,
 } from "../../utils/iiConnection";
 import { nextTick } from "process";
-import { icLogo } from "../../components/icons";
+import { spinner } from "../../components/icons";
 
 /* Anchor construction component (for creating WebAuthn credentials) */
 
 const constructingContent = html`
-  <div class="l-container c-card c-card--highlight">
-    <div class="c-logo">${icLogo}</div>
-    <p class="t-lead t-centered t-paragraph l-stack">
-      Creating your Identity Anchor. Do not refresh the page.
-    </p>
+  <div class="l-container c-card c-card--highlight t-centered">
+    <div class="c-spinner">${spinner}</div>
+    <p class="t-lead t-paragraph l-stack">Creating your Identity Anchor.</p>
+    <p><strong class="t-strong">Do not refresh the page</strong></p>
   </div>
 `;
 

src/frontend/src/styles/main.css

@@ -637,6 +637,20 @@ a:hover,
   color: var(--vc-brand-blue);
 }
 
+.c-spinner {
+  display: block;
+  position: relative;
+  width: 25%;
+  height: 25%;
+  margin: var(--rs-logo-stack) auto;
+  color: var(--vc-brand-purple);
+}
+
+.c-spinner svg {
+  overflow: visible;
+  animation: rotate 4s linear infinite;
+}
+
 /**
  *  Forms and Buttons
  */
@@ -1343,3 +1357,9 @@ input[type="checkbox"] {
   -o-appearance: checkbox !important;
   appearance: checkbox !important;
 }
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}