@zoreal/oauth2-react 0.2.13 → 0.2.15

package/README.md

@@ -148,6 +148,28 @@ scans the QR with their phone and approves in the ZOREAL ID app. On a phone it
 skips the QR and opens the app directly. Either way your page just receives
 `onSuccess`.
 
+### What it looks like
+
+The default: the mark in the brand blue, the label in the page's font, a 12px
+corner. `shape="pill"`, `theme="filled_black"` and `text="verify_with"` are the
+other shapes and words it takes.
+
+<p>
+  <img src="docs/buttons/continue-with-zoreal.svg" alt="Continue with ZOREAL" height="62">
+  <img src="docs/buttons/verify-with-zoreal-id-pill.svg" alt="Verify with ZOREAL ID, pill" height="62">
+  <img src="docs/buttons/sign-in-with-zoreal-black.svg" alt="Sign in with ZOREAL, black" height="62">
+</p>
+
+While the tap is being answered, on a phone between the tap and the hand-over
+to the app, the button is disabled and the pairing modal's light runs round it:
+
+<p>
+  <img src="docs/buttons/continue-with-zoreal-busy.svg" alt="Continue with ZOREAL, busy" height="82">
+</p>
+
+A site that renders its own button can wrap it in `ZorealBusyRing` for the
+same light; see [the pairing modal](#the-pairing-modal), **Mobile**.
+
 ### On your backend
 
 There is a sibling library for every major backend — use one instead of
@@ -229,7 +251,7 @@ What the modal does:
 
 | | |
 | --- | --- |
-| **Mobile** | No QR. The SDK opens the pairing link, which the ZOREAL ID app claims; the modal never appears. Force one or the other with `display: 'qr'` / `'link'`. |
+| **Mobile** | No QR and no modal. The SDK creates the pairing and sends the tab to the pairing link, which the ZOREAL ID app claims; with no app installed the same link is the page that installs it. That is one round trip after the tap: `ZorealLogin` disables itself and runs a light round its edge for that gap; a site with its own button keeps that button and draws its own busy state from the tap until `onSuccess` or `onError` fires, or wraps it in `ZorealBusyRing` to get the same light (a wrapper: pass `block` for a full-width button, keep `overflow: hidden` off its ancestors, and expect `.parent > button` selectors to stop matching). Force one or the other with `display: 'qr'` / `'link'`. |
 | **Live status** | The copy and the title follow the pairing: waiting for a scan, then waiting for approval once the holder has claimed the code (the spent QR blurs out behind a phone glyph). |
 | **Title** | Says what the scan is for, inferred from the request: "Scan to sign in" for `openid`, `email` and `profile.name`; "Scan to verify your identity" once a document attribute such as `zoreal.age` or `profile.birthdate` is requested; "Scan to prove you are a real human" for `openid` alone with `acr_values: 'zoreal.live'`. Override with `intent`, one of `'sign-in'`, `'identify'`, `'presence'`, when the scope does not say. |
 | **Countdown** | Counts down to expiry, turning amber under 20s. Reads the clock each tick rather than decrementing, so a backgrounded tab comes back honest. |

package/dist/index.cjs

@@ -23,6 +23,7 @@ var index_exports = {};
 __export(index_exports, {
   DEFAULT_PAIRING_TIMEOUT_MS: () => DEFAULT_PAIRING_TIMEOUT_MS,
   PairingModal: () => PairingModal,
+  ZorealBusyRing: () => ZorealBusyRing,
   ZorealLogin: () => ZorealLogin,
   ZorealOAuthProvider: () => ZorealOAuthProvider,
   hasGrantedAllScopesZoreal: () => hasGrantedAllScopesZoreal,
@@ -40,7 +41,7 @@ var import_react2 = require("react");
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.2.13";
+var SDK_VERSION = "0.2.15";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
@@ -1362,6 +1363,65 @@ var CSS = `
 }
 
 @keyframes ${PREFIX}-orbit { to { transform: rotate(360deg) } }
+/* THE BUSY RING. The light of the QR well, around any control that is
+   waiting on the provider: the button on a phone between the tap and the
+   hand-over to the app. The well's sweep is a cone from the centre, which is
+   even on a square and useless on a wide button: it crawls along the long
+   sides and lights two edges at once near the ends. So here the light is a
+   dash on an SVG outline, which moves at one speed the whole way round
+   whatever the shape, drawn with the well's tokens: its colour and head
+   tint, its line width, its halo, its four second lap. pathLength makes the
+   outline 100 units long, so every dash and offset is a percentage of the
+   way round; the three layers share one head at 30 and differ in length
+   and brightness, which is the comet's tail. Shown only while busy. */
+.${PREFIX}-ring {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  --zrl-beam-time: 4s;
+}
+.${PREFIX}-ring-svg {
+  position: absolute;
+  inset: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  overflow: visible;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+}
+.${PREFIX}-ring[data-busy="true"] > .${PREFIX}-ring-svg { opacity: 1; }
+.${PREFIX}-ring-svg rect {
+  x: 2px;
+  y: 2px;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  fill: none;
+  stroke: var(--zrl-beam);
+  stroke-width: var(--zrl-beam-line);
+  stroke-linecap: round;
+  animation: ${PREFIX}-dash var(--zrl-beam-time) linear infinite;
+}
+.${PREFIX}-ring-tail { stroke-dasharray: 30 70; stroke-dashoffset: 0; opacity: 0.35; }
+.${PREFIX}-ring-body { stroke-dasharray: 16 84; stroke-dashoffset: -14; opacity: 0.8; }
+.${PREFIX}-ring-head { stroke-dasharray: 5 95; stroke-dashoffset: -25; stroke: var(--zrl-beam-head); }
+.${PREFIX}-ring-halo {
+  stroke-dasharray: 30 70;
+  stroke-dashoffset: 0;
+  stroke-width: calc(var(--zrl-glow-core) * 2 + var(--zrl-beam-line));
+  opacity: calc(var(--zrl-glow-opacity) * 0.5);
+  filter: blur(var(--zrl-glow-blur));
+}
+@keyframes ${PREFIX}-dash {
+  to { stroke-dashoffset: calc(var(--zrl-dash-start, 0) - 100); }
+}
+.${PREFIX}-ring-body { --zrl-dash-start: -14; }
+.${PREFIX}-ring-head { --zrl-dash-start: -25; }
+@media (prefers-reduced-motion: reduce) {
+  .${PREFIX}-ring-svg rect { animation: none; stroke-dasharray: none; opacity: 0.45; }
+  .${PREFIX}-ring-halo, .${PREFIX}-ring-head { display: none; }
+}
+
 
 @media (prefers-reduced-motion: reduce) {
   .${PREFIX}-scrim,
@@ -1570,7 +1630,7 @@ function useZorealOAuth() {
 }
 
 // src/ZorealLogin.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/useZorealLogin.ts
 var import_react3 = require("react");
@@ -1937,8 +1997,45 @@ function useZorealLogin(options) {
   }).login;
 }
 
-// src/ZorealLogin.tsx
+// src/ring.tsx
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function ZorealBusyRing({
+  busy,
+  radius = 8,
+  theme = "auto",
+  block = false,
+  className,
+  style,
+  children
+}) {
+  (0, import_react4.useEffect)(() => {
+    ensureStyles();
+  }, []);
+  const rx = radius + 2;
+  const layer = (name) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { className: cx(name), rx, ry: rx, pathLength: 100 });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "span",
+    {
+      className: className ? `${cx("root")} ${cx("ring")} ${className}` : `${cx("root")} ${cx("ring")}`,
+      "data-theme": theme,
+      "data-busy": busy,
+      style: block ? { display: "flex", ...style } : style,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: cx("ring-svg"), "aria-hidden": "true", children: [
+          layer("ring-halo"),
+          layer("ring-tail"),
+          layer("ring-body"),
+          layer("ring-head")
+        ] })
+      ]
+    }
+  );
+}
+
+// src/ZorealLogin.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var TEXTS = {
   continue_with: null,
   signin_with: "Sign in with ZOREAL",
@@ -1947,9 +2044,9 @@ var TEXTS = {
   verify_with: "Verify with ZOREAL ID"
 };
 var SIZES = {
-  large: { height: 44, font: 15, pad: 20 },
-  medium: { height: 38, font: 14, pad: 16 },
-  small: { height: 32, font: 12, pad: 12 }
+  large: { height: 50, font: 14, pad: 20, mark: 22, gap: 12, radius: 12 },
+  medium: { height: 42, font: 14, pad: 16, mark: 20, gap: 10, radius: 10 },
+  small: { height: 34, font: 12, pad: 12, mark: 16, gap: 8, radius: 8 }
 };
 function ZorealLogin(props) {
   const {
@@ -1957,11 +2054,11 @@ function ZorealLogin(props) {
     onError,
     containerProps,
     type = "standard",
-    theme = "filled",
+    theme = "outline",
     size = "large",
     text = "continue_with",
     shape = "rectangular",
-    logo_alignment = "left",
+    logo_alignment = "center",
     width,
     click_listener,
     flow = "browser-direct",
@@ -1969,21 +2066,36 @@ function ZorealLogin(props) {
   } = props;
   const { locale } = useZorealOAuth();
   const label = TEXTS[text] ?? strings(locale).buttonContinue;
+  const [busy, setBusy] = (0, import_react5.useState)(false);
   const { login } = useZorealFlow({
     ...request,
     flow,
-    onCredential: flow === "browser-direct" ? onSuccess : void 0,
-    onCode: flow === "auth-code" ? onSuccess : void 0,
-    onError: (e) => onError?.({ type: "unknown", description: e.description ?? e.error }),
-    onNonOAuthError: (e) => onError?.(e)
+    onCredential: flow === "browser-direct" ? (r) => {
+      setBusy(false);
+      onSuccess(r);
+    } : void 0,
+    onCode: flow === "auth-code" ? (r) => {
+      setBusy(false);
+      onSuccess(r);
+    } : void 0,
+    onError: (e) => {
+      setBusy(false);
+      onError?.({ type: "unknown", description: e.description ?? e.error });
+    },
+    onNonOAuthError: (e) => {
+      setBusy(false);
+      onError?.(e);
+    }
   });
   const s = SIZES[size];
-  const style = (0, import_react4.useMemo)(
+  const radius = shape === "pill" ? s.height / 2 : shape === "square" ? 4 : s.radius;
+  const brandMark = theme !== "filled";
+  const style = (0, import_react5.useMemo)(
     () => ({
       display: "inline-flex",
       alignItems: "center",
       justifyContent: logo_alignment === "center" ? "center" : "flex-start",
-      gap: 10,
+      gap: s.gap,
       height: s.height,
       padding: `0 ${s.pad}px`,
       width,
@@ -1991,30 +2103,34 @@ function ZorealLogin(props) {
       fontFamily: "inherit",
       fontWeight: 500,
       cursor: "pointer",
-      borderRadius: shape === "pill" ? s.height / 2 : shape === "square" ? 4 : 8,
-      ...theme === "outline" ? { background: "transparent", color: "inherit", border: "1px solid rgba(128,128,128,0.5)" } : theme === "filled_black" ? { background: "#111", color: "#fff", border: "1px solid #111" } : { background: "#00b4d9", color: "#fff", border: "1px solid #00b4d9" }
+      borderRadius: radius,
+      ...theme === "outline" ? { background: "#ffffff", color: "#16181c", border: "1px solid #e2e4de" } : theme === "filled_black" ? { background: "#111", color: "#fff", border: "1px solid #111" } : { background: "#00b4d9", color: "#fff", border: "1px solid #00b4d9" }
     }),
-    [logo_alignment, s, shape, theme, width]
+    [logo_alignment, s, radius, theme, width]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ZorealBusyRing, { busy, radius, theme: theme === "outline" ? "auto" : "light", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "button",
     {
       type: "button",
-      style,
+      style: busy ? { ...style, cursor: "progress" } : style,
+      disabled: busy,
+      "aria-busy": busy,
       onClick: () => {
+        if (busy) return;
         click_listener?.();
+        setBusy(true);
         login();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ZorealMark, { size: Math.round(s.font * 1.25) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ZorealMark, { size: s.mark, brand: brandMark }),
         type === "standard" && label
       ]
     }
-  ) });
+  ) }) });
 }
 
 // src/useZorealAutoLogin.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useZorealAutoLogin(options) {
   const { login } = useZorealFlow({
     flow: "browser-direct",
@@ -2031,8 +2147,8 @@ function useZorealAutoLogin(options) {
     },
     onNonOAuthError: (e) => options.onError?.(e)
   });
-  const fired = (0, import_react5.useRef)(false);
-  (0, import_react5.useEffect)(() => {
+  const fired = (0, import_react6.useRef)(false);
+  (0, import_react6.useEffect)(() => {
     if (options.disabled || fired.current) return;
     fired.current = true;
     login();
@@ -2056,6 +2172,7 @@ function hasGrantedAnyScopeZoreal(response, firstScope, ...restScopes) {
 0 && (module.exports = {
   DEFAULT_PAIRING_TIMEOUT_MS,
   PairingModal,
+  ZorealBusyRing,
   ZorealLogin,
   ZorealOAuthProvider,
   hasGrantedAllScopesZoreal,