@nauticana/sail 1.1.0 → 1.1.2

package/README.md

@@ -140,6 +140,8 @@ bootstrapApplication(App, {
 });
 ```
 
+> **Auth-loop breaker.** `authInterceptor` carries a built-in circuit breaker: after 5 `401`/`403`s on token-bearing keel API calls within 10s it opens for 30s and refuses those requests **locally** (never sent), so a stale/rejected session can't drive the app to hammer the API and the edge/CDN. A later success closes it; login (no bearer) is never blocked, so recovery works. No wiring needed beyond registering `authInterceptor`.
+
 ### 5. Create the root component
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
   "scripts": {

package/src/component/abstract/base_table.ts

@@ -1,10 +1,12 @@
-import { inject, signal, WritableSignal } from "@angular/core";
+import { inject, signal, WritableSignal, Injector } from "@angular/core";
 import { ForeignKey, TableAction, TableColumn, TableDefinition } from "../../model/appdata";
 import { ConstantValue, LookupStyle, OpCode } from "../../model/common";
 import { BaseAuthService } from "../../service/auth.service";
 import { BackendService } from "../../service/rest_service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
 import { titleCase } from "../../util/text";
+import { MatDialog } from "@angular/material/dialog";
+import { RevealDialog } from "../table/reveal_dialog";
 
 
 /** CRUD verb used by `requireAuth()` to compose the "Missing authorization" alert. */
@@ -14,6 +16,8 @@ export type AuthVerb = 'create' | 'read' | 'update' | 'delete' | 'view';
 export abstract class BaseTable {
     protected readonly cacheService = inject(BaseAuthService);
     protected readonly backendService = inject(BackendService);
+    // Reveal dialogs are rare — resolve MatDialog lazily so every BaseTable subclass doesn't eagerly depend on it.
+    readonly #injector = inject(Injector);
     protected readonly config: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
     protected readonly dialogWidth: string = '400px';
     readonly tableName: WritableSignal<string> = signal('');
@@ -114,15 +118,18 @@ export abstract class BaseTable {
         if (!this.beforeExecuteAction(action, record)) return;
         if (action.confirmMessage && !confirm(action.confirmMessage)) return;
         const body = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
-        this.backendService.executeAction<{ url?: string }>(action.method, body).subscribe({
+        this.backendService.executeAction<Record<string, unknown>>(action.method, body).subscribe({
             next: (resp) => {
-                // A 'redirect' action POSTs then follows the returned {url}
-                // (provider-hosted checkout / portal / any external handoff
-                // declared as basis table_action metadata — no component).
-                if (action.kind === 'redirect' && resp?.url) {
-                    window.location.href = resp.url;
+                const url = resp?.['url'];
+                // R = redirect: POST then follow the returned {url} (hosted checkout / portal).
+                if (action.kind === 'R' && typeof url === 'string') {
+                    window.location.href = url;
                     return;
                 }
+                // V = reveal: show the returned secret once (e.g. a freshly minted key).
+                if (action.kind === 'V') {
+                    this.#injector.get(MatDialog).open(RevealDialog, { data: resp ?? {}, width: '480px' });
+                }
                 this.onActionSuccess(action, record);
             },
             error: (err) => {

package/src/component/table/reveal_dialog.html

@@ -0,0 +1,16 @@
+<h2 mat-dialog-title>Copy now</h2>
+<mat-dialog-content>
+    <p>This won't be shown again.</p>
+    @for (entry of entries; track entry[0]) {
+        <p style="margin:12px 0 2px; font-size:12px; opacity:0.7;">{{ entry[0] }}</p>
+        <div style="display:flex; align-items:center; gap:8px;">
+            <code style="flex:1; word-break:break-all;">{{ entry[1] }}</code>
+            <button matIconButton (click)="copy(entry[1])" [attr.aria-label]="'Copy ' + entry[0]">
+                <mat-icon>content_copy</mat-icon>
+            </button>
+        </div>
+    }
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button matButton mat-dialog-close>Done</button>
+</mat-dialog-actions>

package/src/component/table/reveal_dialog.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { MAT_DIALOG_DATA, MatDialogModule } from "@angular/material/dialog";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+import { Clipboard } from "@angular/cdk/clipboard";
+
+/** Shows the one-time secret a kind:'V' reveal action returned (e.g. a minted API key), with copy buttons. */
+@Component({
+    selector: "sail-reveal-dialog",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatDialogModule, MatButtonModule, MatIconModule],
+    templateUrl: "./reveal_dialog.html",
+})
+export class RevealDialog {
+    private readonly clipboard = inject(Clipboard);
+    readonly entries = Object.entries(inject<Record<string, unknown>>(MAT_DIALOG_DATA))
+        .filter(([, v]) => typeof v === "string" && v.length > 0) as [string, string][];
+
+    copy(value: string): void {
+        this.clipboard.copy(value);
+    }
+}

package/src/model/appdata.ts

@@ -83,7 +83,7 @@ export interface TableAction {
   confirmMessage?:  string;
   authorityObject:  string;   // uppercased table_name — for canExecute()
   authorityCheck:   string;   // uppercased action_name — for canExecute()
-  kind?:            'post' | 'redirect'; // 'redirect' = POST then follow the returned {url}; default 'post'
+  kind?:            'P' | 'R' | 'V'; // P post (default) / R redirect (follow {url}) / V reveal (show returned secret once)
 }
 
 export interface ForeignKey {

package/src/service/auth.interceptor.ts

@@ -1,12 +1,72 @@
-import { HttpInterceptorFn } from '@angular/common/http';
+import { HttpErrorResponse, HttpEventType, HttpInterceptorFn } from '@angular/common/http';
+import { catchError, tap, throwError } from 'rxjs';
 import { isKeelApiUrl } from './rest_url';
 
+// Auth-loop breaker: repeated 401/403s on token-bearing API calls (a stale or
+// rejected session) can drive the app to hammer the API — and the edge/CDN in
+// front of it — indefinitely. After AUTH_FAIL_THRESHOLD failures within
+// AUTH_FAIL_WINDOW_MS the circuit opens for AUTH_CIRCUIT_COOLDOWN_MS: authed API
+// requests are refused locally (never sent) so the storm stops at the browser. A
+// later success closes it; login (no bearer) is never blocked, so recovery works.
+const AUTH_FAIL_WINDOW_MS = 10_000;
+const AUTH_FAIL_THRESHOLD = 5;
+const AUTH_CIRCUIT_COOLDOWN_MS = 30_000;
+const FAIL_KEY = 'keel_auth_401s';
+const OPEN_KEY = 'keel_auth_circuit_until';
+
 export const authInterceptor: HttpInterceptorFn = (req, next) => {
   const token = localStorage.getItem('jwt');
-  if (token && isKeelApiUrl(req.url)) {
-    req = req.clone({
-      setHeaders: { Authorization: `Bearer ${token}` },
-    });
+  const authedApi = !!token && isKeelApiUrl(req.url);
+  if (authedApi) {
+    req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
+  }
+
+  if (authedApi && authCircuitOpen()) {
+    return throwError(() => new HttpErrorResponse({
+      url: req.url,
+      status: 0,
+      statusText: 'auth circuit open: too many 401s — request stopped to prevent a loop',
+    }));
   }
-  return next(req);
+
+  return next(req).pipe(
+    tap((event) => {
+      if (authedApi && event.type === HttpEventType.Response) {
+        clearAuthFailures();
+      }
+    }),
+    catchError((err: HttpErrorResponse) => {
+      if (authedApi && (err.status === 401 || err.status === 403)) {
+        recordAuthFailure();
+      }
+      return throwError(() => err);
+    }),
+  );
 };
+
+function authCircuitOpen(): boolean {
+  return Date.now() < Number(sessionStorage.getItem(OPEN_KEY) ?? 0);
+}
+
+function recordAuthFailure(): void {
+  const now = Date.now();
+  let times: number[];
+  try {
+    times = (JSON.parse(sessionStorage.getItem(FAIL_KEY) ?? '[]') as number[])
+      .filter((t) => now - t < AUTH_FAIL_WINDOW_MS);
+  } catch {
+    times = [];
+  }
+  times.push(now);
+  if (times.length >= AUTH_FAIL_THRESHOLD) {
+    sessionStorage.setItem(OPEN_KEY, String(now + AUTH_CIRCUIT_COOLDOWN_MS));
+    sessionStorage.removeItem(FAIL_KEY);
+  } else {
+    sessionStorage.setItem(FAIL_KEY, JSON.stringify(times));
+  }
+}
+
+function clearAuthFailures(): void {
+  sessionStorage.removeItem(FAIL_KEY);
+  sessionStorage.removeItem(OPEN_KEY);
+}