@nauticana/sail 1.1.7 → 1.1.8

package/README.md

@@ -144,7 +144,9 @@ 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`.
+> **Auth-loop breaker.** `authInterceptor` carries a built-in circuit breaker: after 5 `401`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. Only `401` counts — a `403` is a legitimate permission denial, not a session failure. A later success **or accepting a new token** (login) closes it, so a freshly authenticated session is never blocked. No wiring needed beyond registering `authInterceptor`.
+
+> **Phone-number change (opt-in).** `ProfileEditorComponent` and `MyAccountComponent` gate phone change behind a `phoneChangeEnabled` input (default `false`, since it needs an SMS provider — keel returns 503 without `Notify`). Enable it once your backend has SMS wired: `<sail-my-account [phoneChangeEnabled]="true" />` or `<sail-profile-editor [phoneChangeEnabled]="true" />`.
 
 ### 5. Create the root component
 
@@ -506,7 +508,7 @@ readonly meters = toSignal(this.billing.listUsage(), { initialValue: [] });
 
 ### Redirect-action (v1.0.0)
 
-A `TableAction` with `kind: 'redirect'` makes `BaseTable.executeAction` POST and then follow the returned `{ url }` instead of refreshing — so checkout / portal / any provider-hosted handoff can be declared as a basis `table_action` row with **no bespoke component**. The backend action handler returns `{ "url": "https://…" }`.
+A `TableAction` with `kind: 'R'` (redirect — the `constant_value` code) makes `BaseTable.executeAction` POST and then follow the returned `{ url }` instead of refreshing — so checkout / portal / any provider-hosted handoff can be declared as a basis `table_action` row with **no bespoke component**. The backend action handler returns `{ "url": "https://…" }`.
 
 > **Response-shape contract.** The generic redirect-action path reads a bare `url` because it's polymorphic — one dispatch for checkout / portal / export / etc., where the action's identity lives in the metadata, not the payload. keel's `WrapTableAction` enforces no shape; your inner handler must return `{ url }`. The *typed* billing endpoints keep specific names instead (`createCheckout()` → `checkoutUrl`, `createPortalSession()` → `portalUrl`). So the same portal concept has two response shapes depending on the path: wire it as `<sail-portal-button>` (typed → `portalUrl`) **or** as a `table_action` redirect (generic → `url`), not both.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "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/account/my_account.html

@@ -2,7 +2,7 @@
   <div class="auth-card">
     <h2 class="auth-title">My Account</h2>
 
-    <sail-profile-editor></sail-profile-editor>
+    <sail-profile-editor [phoneChangeEnabled]="phoneChangeEnabled()"></sail-profile-editor>
 
     <section class="account-section">
       <h3>Security</h3>

package/src/component/account/my_account.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { ProfileEditorComponent } from './profile_editor';
@@ -12,4 +12,8 @@ import { ProfileEditorComponent } from './profile_editor';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterLink, MatButtonModule, ProfileEditorComponent],
 })
-export class MyAccountComponent {}
+export class MyAccountComponent {
+  /** Opt-in: set true once the host's backend has an SMS provider, to expose
+   *  phone-number change in the embedded profile editor. */
+  readonly phoneChangeEnabled = input(false);
+}

package/src/component/account/profile_editor.html

@@ -45,6 +45,26 @@
 
 <section class="account-section">
   <h3>Phone</h3>
-  <p>{{ phone() || 'Not set' }}</p>
-  @if (!phoneChangeEnabled) { <p class="auth-instructions">Phone change is coming soon.</p> }
+  @if (!phoneChangeEnabled()) {
+    <p>{{ phone() || 'Not set' }}</p>
+  } @else if (phonePhase() === 'idle') {
+    <p>{{ phone() || 'Not set' }}</p>
+    <button matButton (click)="startPhoneChange()">Change phone</button>
+  } @else if (phonePhase() === 'enter') {
+    <mat-form-field appearance="outline">
+      <mat-label>New phone</mat-label>
+      <input matInput type="tel" [formControl]="newPhone" required>
+    </mat-form-field>
+    <button matButton="elevated" class="primary" (click)="sendPhoneCode()" [disabled]="newPhone.invalid || loading()">Send code</button>
+    <button matButton (click)="cancelPhoneChange()">Cancel</button>
+  } @else {
+    @if (phoneMsg()) { <p>{{ phoneMsg() }}</p> }
+    <mat-form-field appearance="outline">
+      <mat-label>Confirmation code</mat-label>
+      <input matInput [formControl]="phoneCode" inputmode="numeric" required>
+    </mat-form-field>
+    <button matButton="elevated" class="primary" (click)="confirmPhoneChange()" [disabled]="phoneCode.invalid || loading()">Confirm</button>
+    <button matButton (click)="cancelPhoneChange()">Cancel</button>
+  }
+  @if (phoneErr()) { <div class="auth-error" role="alert">{{ phoneErr() }}</div> }
 </section>

package/src/component/account/profile_editor.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, signal } from '@angular/core';
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -6,9 +6,9 @@ import { MatInputModule } from '@angular/material/input';
 import { BaseAuthService } from '../../service/auth.service';
 import { UserProfile } from '../../model/auth';
 
-// Self-service profile editor: name/locale save immediately; email change is
-// verify-before-apply (code to the new address). Phone change is gated until
-// the backend has an SMS provider.
+// Self-service profile editor: name/locale save immediately; email and phone
+// change are verify-before-apply (code to the new value). Phone change is shown
+// only when the host enables phoneChangeEnabled (its backend has an SMS provider).
 @Component({
   selector: 'sail-profile-editor',
   templateUrl: './profile_editor.html',
@@ -19,8 +19,8 @@ export class ProfileEditorComponent implements OnInit {
   private readonly auth = inject(BaseAuthService);
   private readonly fb = inject(FormBuilder);
 
-  // Flip true once the backend wires an SMS provider for phone codes.
-  readonly phoneChangeEnabled = false;
+  // Set by the host once its backend wires an SMS provider for phone codes.
+  readonly phoneChangeEnabled = input(false);
 
   readonly loading = signal(false);
   readonly profileMsg = signal('');
@@ -40,6 +40,12 @@ export class ProfileEditorComponent implements OnInit {
   readonly newEmail = new FormControl('', [Validators.required, Validators.email]);
   readonly emailCode = new FormControl('', [Validators.required]);
 
+  readonly phonePhase = signal<'idle' | 'enter' | 'code'>('idle');
+  readonly phoneMsg = signal('');
+  readonly phoneErr = signal('');
+  readonly newPhone = new FormControl('', [Validators.required]);
+  readonly phoneCode = new FormControl('', [Validators.required]);
+
   ngOnInit(): void {
     this.auth.getProfile().subscribe({
       next: (p: UserProfile) => {
@@ -95,6 +101,38 @@ export class ProfileEditorComponent implements OnInit {
     });
   }
 
+  startPhoneChange(): void {
+    this.phonePhase.set('enter');
+    this.phoneMsg.set('');
+    this.phoneErr.set('');
+  }
+
+  cancelPhoneChange(): void {
+    this.phonePhase.set('idle');
+    this.newPhone.reset();
+    this.phoneCode.reset();
+  }
+
+  sendPhoneCode(): void {
+    if (this.newPhone.invalid) return;
+    this.loading.set(true);
+    this.phoneErr.set('');
+    this.auth.requestPhoneChange(this.newPhone.value!).subscribe({
+      next: () => { this.loading.set(false); this.phonePhase.set('code'); this.phoneMsg.set('We sent a code to your new number.'); },
+      error: (e) => { this.loading.set(false); this.phoneErr.set(this.msg(e, 'Could not send a code.')); },
+    });
+  }
+
+  confirmPhoneChange(): void {
+    if (this.phoneCode.invalid) return;
+    this.loading.set(true);
+    this.phoneErr.set('');
+    this.auth.confirmPhoneChange(this.newPhone.value!, Number(this.phoneCode.value)).subscribe({
+      next: () => { this.loading.set(false); this.phone.set(this.newPhone.value!); this.cancelPhoneChange(); this.profileMsg.set('Phone updated.'); },
+      error: (e) => { this.loading.set(false); this.phoneErr.set(this.msg(e, 'Invalid or expired code.')); },
+    });
+  }
+
   private msg(e: { error?: { detail?: string; message?: string } }, fallback: string): string {
     return e?.error?.detail || e?.error?.message || fallback;
   }

package/src/component/dashboard/entity_selector.ts

@@ -19,22 +19,24 @@ export class EntitySelectorComponent {
   readonly entities = input<EntityOption[]>([]);
   readonly selected = input<string | undefined>(undefined);
   readonly label = input<string>('Business');
-  readonly selectionChange = output<string>();
+  readonly selectionChange = output<string | undefined>();
 
   readonly value = signal<string | undefined>(undefined);
 
   constructor() {
     // Explicit selection wins; else keep the current pick if still valid; else the
-    // first active entity. Emit whenever the resolved value actually changes.
+    // first active entity. "Valid" means present AND active, so a scope that goes
+    // inactive (or vanishes) is dropped. Emit on every change, including a clear
+    // (undefined) when no active option remains, so the host stops showing stale data.
     effect(() => {
       const opts = this.entities();
-      const want = this.selected();
+      const isActive = (id?: string) => !!id && opts.some((e) => e.id === id && e.active !== false);
       const cur = this.value();
       const resolved =
-        want && opts.some((e) => e.id === want) ? want
-          : cur && opts.some((e) => e.id === cur) ? cur
+        isActive(this.selected()) ? this.selected()
+          : isActive(cur) ? cur
             : opts.find((e) => e.active !== false)?.id;
-      if (resolved && resolved !== cur) {
+      if (resolved !== cur) {
         this.value.set(resolved);
         this.selectionChange.emit(resolved);
       }

package/src/component/login/login_component.html

@@ -9,6 +9,9 @@
     @if (loggedOut) {
       <p class="auth-message" role="status" aria-live="polite">You have been logged out successfully.</p>
     }
+    @if (sessionHandoffError()) {
+      <p class="auth-error" role="alert">{{ sessionHandoffError() }}</p>
+    }
     <form [formGroup]="loginForm" (ngSubmit)="login()" class="auth-form">
       <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>

package/src/component/login/login_component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from '@angular/material/input';
@@ -25,10 +25,11 @@ import { SocialLoginComponent } from './social_login';
 })
 export class LoginComponent {
   private auth = inject(BaseAuthService);
-  private router = inject(Router);
   protected fb = inject(FormBuilder);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
   protected readonly loggedOut = inject(ActivatedRoute).snapshot.queryParamMap.get('loggedOut') === 'true';
+  /** OAuth session-cookie handoff failure from BaseAuthService, shown below. */
+  protected readonly sessionHandoffError = this.auth.sessionHandoffError;
 
   /**
    * Auto-show the embedded SocialLoginComponent whenever at least one
@@ -58,14 +59,12 @@ export class LoginComponent {
   }
 
   /**
-   * SocialLoginComponent emits the response after BaseAuthService.loginSocial
-   * persists the JWT internally. Mirror the same post-login navigation that
-   * password-login uses (root route by default; consumers override via
-   * BaseAuthService.navigateToRoleHome when role-aware routing lands).
+   * loginSocial already ran completeLogin, which owns post-login navigation
+   * (route init, or the OAuth cookie handoff). Handlers must NOT navigate here —
+   * doing so abandons a pending handoff before its cookie is set. Downstream
+   * social-login handlers should follow the same rule.
    */
-  protected onSocialSuccess(_: LoginResponseSocial): void {
-    this.router.navigateByUrl('/');
-  }
+  protected onSocialSuccess(_: LoginResponseSocial): void {}
 
   protected onSocialError(err: Error): void {
     console.error('social login failed:', err);

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?:            'P' | 'R' | 'V'; // P post (default) / R redirect (follow {url}) / V reveal (show returned secret once)
+  kind?:            'P' | 'R' | 'V'; // constant_value codes: P post (default) / R redirect (follow {url}) / V reveal (show returned secret once)
 }
 
 export interface ForeignKey {

package/src/service/auth.interceptor.ts

@@ -2,12 +2,11 @@ import { HttpErrorResponse, HttpEventType, HttpInterceptorFn } from '@angular/co
 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.
+// Auth-loop breaker: repeated 401s on token-bearing API calls (a stale session) can
+// drive the app to hammer the API/CDN. After AUTH_FAIL_THRESHOLD within
+// AUTH_FAIL_WINDOW_MS the circuit opens for AUTH_CIRCUIT_COOLDOWN_MS — authed
+// requests are refused locally. Only 401 counts (403 is a permission denial); a
+// success or accepting a new token closes it.
 const AUTH_FAIL_WINDOW_MS = 10_000;
 const AUTH_FAIL_THRESHOLD = 5;
 const AUTH_CIRCUIT_COOLDOWN_MS = 30_000;
@@ -36,7 +35,7 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {
       }
     }),
     catchError((err: HttpErrorResponse) => {
-      if (authedApi && (err.status === 401 || err.status === 403)) {
+      if (authedApi && err.status === 401) {
         recordAuthFailure();
       }
       return throwError(() => err);
@@ -70,3 +69,9 @@ function clearAuthFailures(): void {
   sessionStorage.removeItem(FAIL_KEY);
   sessionStorage.removeItem(OPEN_KEY);
 }
+
+/** Close the circuit on accepting a new token, so a freshly logged-in session
+ *  isn't blocked by failures from a prior stale session. */
+export function resetAuthCircuit(): void {
+  clearAuthFailures();
+}

package/src/service/auth.service.ts

@@ -16,6 +16,7 @@ import { ApplicationMenu, ConstantValue } from '../model/common';
 import { CanActivateFn, CanDeactivateFn, Router, Routes } from '@angular/router';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../config';
 import { BaseRestService } from './base_rest.service';
+import { resetAuthCircuit } from './auth.interceptor';
 
 /** Sort dropdown options by their visible label so long lookup lists are scannable. */
 const byCaption = (a: ConstantValue, b: ConstantValue) =>
@@ -61,6 +62,10 @@ export abstract class BaseAuthService extends BaseRestService {
   token: string | null = null;
   readonly isLoggedIn = signal(false);
 
+  /** Set when the OAuth session-cookie handoff fails; the UI shows it and lets the
+   *  user retry instead of being redirected into a cookieless login loop. */
+  readonly sessionHandoffError = signal<string | null>(null);
+
   /**
    * Multi-role app support. Consumers that distinguish rider/driver/admin
    * (or any equivalent split) call setRole() after login, then
@@ -117,15 +122,22 @@ export abstract class BaseAuthService extends BaseRestService {
     this.token = token;
     this.isLoggedIn.set(true);
     localStorage.setItem('jwt', token);
+    resetAuthCircuit(); // a new session must not inherit a prior session's open circuit
     const ret = this.validatedReturnUrl();
     if (ret && this.guiConfig.sessionCookieUrl) {
       // OAuth flow: mirror the bearer into a cookie, then hand off to the
-      // (cross-origin) authorization server via a full navigation.
+      // (cross-origin) authorization server via a full navigation. Only hand off
+      // once the cookie is actually set — redirecting after a failed cookie request
+      // sends the user on without a session and loops them back to login.
+      this.sessionHandoffError.set(null);
       this.http.post(this.url(this.guiConfig.sessionCookieUrl), {}, { withCredentials: true })
           .pipe(take(1))
           .subscribe({
             next: () => window.location.assign(ret),
-            error: () => window.location.assign(ret),
+            error: (err) => {
+              console.error('Session cookie handoff failed:', err);
+              this.sessionHandoffError.set('Could not complete sign-in. Please try again.');
+            },
           });
       return;
     }