@zoreal/oauth2-js 0.1.22 → 0.1.24

package/README.md

@@ -157,7 +157,7 @@ step with the pairing, and takes it down when the flow settles. You render
 nothing.
 
 The code on screen changes every few seconds. Each image is one frame of the
-pairing, and the provider refuses a frame more than 30 seconds old, so a
+pairing, and the provider refuses a frame the sequence has moved past, so a
 screenshot of the code passed to someone else is already dead when it arrives:
 signing in needs the screen as it is right now. The provider renders the
 frames and this package re-fetches the image on the interval the provider
@@ -170,7 +170,7 @@ is nothing to configure and nothing to draw.
 | **Live status** | Copy and title follow the pairing: waiting for a scan, then waiting for approval once the code is claimed (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. |
-| **Timeout** | Closes and cancels at zero. Defaults to 120s; override with `pairingTimeoutMs`. The provider's own expiry wins when it is shorter. |
+| **Timeout** | Closes and cancels at zero. Follows the provider's expiry (five minutes); `pairingTimeoutMs` can shorten it, never extend it. |
 | **Cancel** | The X, the Cancel button, `Escape`, clicking outside and the timeout are one behaviour: abort the poll, close, reject the promise with `AbortError`. |
 | **No ZOREAL ID yet** | A footer says the same code also installs the app. Without it the panel reads as "scan this with something I do not have", and the flow dead-ends at the one moment it can still be recovered. |
 | **Themes** | `theme: 'auto'` (default) follows `prefers-color-scheme`; `'light'` and `'dark'` force it. In dark mode the code is drawn light on the dark surface, the mark included, and the light around it runs brighter and wider. |
@@ -182,7 +182,7 @@ startLogin({
   clientId: 'ast_your_asset_id',
   locale: 'sv',        // omit to follow the browser
   theme: 'auto',       // 'light' | 'dark'
-  pairingTimeoutMs: 120_000,
+  pairingTimeoutMs: 120_000, // shorten the provider's five minutes; omit to keep them
 });
 ```
 
@@ -406,7 +406,7 @@ enforced where enforcement counts: on your backend, against the verified token.
 | `unsafeClaims(idToken)` | reads claims without verifying. Convenience only; verification happens server-side |
 | `isMobileUserAgent()` | whether this user agent gets the app link rather than a QR |
 | `mountPairingModal(state, { onCancel, locale?, theme?, timeoutMs? })` | mounts the dialog yourself, for `pairingUI: 'none'` callers who still want the real one. Returns `{ update, close }`, or `null` outside a browser |
-| `DEFAULT_PAIRING_TIMEOUT_MS` | `120000`, the modal's default cap |
+| `DEFAULT_PAIRING_TIMEOUT_MS` | `300000`, the modal's cap when the provider states no expiry |
 | `DEFAULT_QR_REFRESH_SECONDS` | `3`, how often the QR frame is re-fetched when the provider does not say |
 
 Errors: `OAuthFlowError` (the provider refused; `error` is the OAuth code,
@@ -417,7 +417,7 @@ provider). `cancel()` rejects with a `DOMException` named `AbortError`.
 
 `startLogin` options controlling the built-in modal: `pairingUI`
 (`'modal'` default, `'none'` to render your own), `theme` (`'auto'` default,
-`'light'`, `'dark'`), `pairingTimeoutMs` (120000 default), and `locale`, which
+`'light'`, `'dark'`), `pairingTimeoutMs` (the provider's expiry by default), and `locale`, which
 is sent to the provider AND picks the modal's own language. See
 [The pairing modal](#the-pairing-modal).
 

package/dist/index.cjs

@@ -61,7 +61,7 @@ function unsafeClaims(idToken) {
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.1.22";
+var SDK_VERSION = "0.1.24";
 var SDK_NAME = "@zoreal/oauth2-js";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
@@ -717,9 +717,16 @@ var SVG_NS = "http://www.w3.org/2000/svg";
 var TAIL = 0.3;
 var STACK = Array.from({ length: 12 }, (_, i) => 12 - i);
 var HALO = [3, 2, 1];
-function radiusOf(control) {
-  const value = parseFloat(getComputedStyle(control).borderTopLeftRadius);
-  return Number.isFinite(value) ? value : 8;
+function cornerOf(radius, width, height) {
+  const raw = radius.trim();
+  const value = parseFloat(raw);
+  const offset = 2;
+  if (raw.endsWith("%") && Number.isFinite(value)) {
+    return [width * value / 100 + offset, height * value / 100 + offset];
+  }
+  const px = Number.isFinite(value) ? value : /infinity/i.test(raw) ? Infinity : 8;
+  const r = Math.min(px, width / 2, height / 2) + offset;
+  return [r, r];
 }
 function holdBusy(control) {
   if (typeof document === "undefined") return () => {
@@ -740,12 +747,11 @@ function holdBusy(control) {
   overlay.setAttribute("aria-hidden", "true");
   const svg2 = document.createElementNS(SVG_NS, "svg");
   svg2.setAttribute("class", cx("ring-svg"));
-  const rx = radiusOf(control) + 2;
+  const rects = [];
   const layer = (name, len, alpha) => {
     const rect = document.createElementNS(SVG_NS, "rect");
     rect.setAttribute("class", cx(name));
-    rect.setAttribute("rx", String(rx));
-    rect.setAttribute("ry", String(rx));
+    rects.push(rect);
     rect.style.strokeDasharray = `calc(var(--zrl-l) * ${len}) calc(var(--zrl-l) * ${1 - len})`;
     rect.style.setProperty("--zrl-s", `calc(var(--zrl-l) * ${-(TAIL - len)})`);
     rect.style.opacity = alpha;
@@ -768,6 +774,11 @@ function holdBusy(control) {
     overlay.style.top = `${box.top}px`;
     overlay.style.width = `${box.width}px`;
     overlay.style.height = `${box.height}px`;
+    const [rx, ry] = cornerOf(getComputedStyle(control).borderTopLeftRadius, box.width, box.height);
+    for (const rect of rects) {
+      rect.setAttribute("rx", String(rx));
+      rect.setAttribute("ry", String(ry));
+    }
     const length = typeof measured?.getTotalLength === "function" ? measured.getTotalLength() : 0;
     if (length > 0) overlay.style.setProperty("--zrl-ring-len", `${length}px`);
   };
@@ -1751,7 +1762,7 @@ function interpolate(template, time) {
 }
 
 // src/modal.ts
-var DEFAULT_PAIRING_TIMEOUT_MS = 12e4;
+var DEFAULT_PAIRING_TIMEOUT_MS = 3e5;
 var URGENT_SECONDS = 20;
 function mmss(totalSeconds) {
   const m = Math.floor(totalSeconds / 60);
@@ -1823,7 +1834,7 @@ function mountPairingModal(state, options) {
   if (typeof document === "undefined") return null;
   ensureStyles();
   const t = strings(options.locale);
-  const timeoutMs = options.timeoutMs ?? DEFAULT_PAIRING_TIMEOUT_MS;
+  const timeoutMs = options.timeoutMs;
   let closed = false;
   const scrim = el("div", `${cx("root")} ${cx("scrim")}`);
   scrim.dataset.theme = options.theme ?? "auto";
@@ -1881,7 +1892,8 @@ function mountPairingModal(state, options) {
   card.append(closeBtn, body, help, footer);
   scrim.appendChild(card);
   const serverMs = typeof state.expiresIn === "number" ? state.expiresIn * 1e3 : Infinity;
-  const deadline = Date.now() + Math.min(timeoutMs, serverMs);
+  const capMs = timeoutMs ?? (Number.isFinite(serverMs) ? serverMs : DEFAULT_PAIRING_TIMEOUT_MS);
+  const deadline = Date.now() + Math.min(capMs, serverMs);
   let shown = state.qrUrl;
   let loading = null;
   const spent = () => qr.dataset.spent === "true";