@nauticana/sail 1.0.8 → 1.1.0

package/README.md

@@ -13,11 +13,12 @@ A shared Angular component library for building CRUD-based admin frontends. Prov
 | **Navigation** | `Navigation` (sidenav + toolbar with menu, responsive) |
 | **Login** | `LoginComponent`, `RegisterComponent`, `ChpassComponent`, `ConfirmRegisterComponent`, `ConfirmChpassComponent` |
 | **Security** | `TwoFactorSetupComponent`, `TwoFactorVerifyComponent`, `TrustedDevicesComponent`, `AccountDeletionComponent` |
+| **Account** | `MyAccountComponent` (self-service hub), `ProfileEditorComponent` (name/locale immediate; email/phone verify-before-apply) |
 | **Auth** | `ConsentGateComponent`, `OtpInputComponent`, `SocialLoginComponent` |
 | **Billing** | `PlanSelectorComponent`, `PriceSelectorComponent`, `CheckoutButtonComponent`, `PaymentMethodsComponent`, `PortalButtonComponent`, `UsageMeterComponent`, `StatusChipComponent`, `TrialBannerComponent`, `SeatSelectorComponent`, `DunningBannerComponent` |
 | **Payout** | `PayoutProviderOnboardingComponent`, `PayoutBankInfoFormComponent` |
 | **Payments / SCA** | `UserPaymentMethodsComponent`, `ScaConfirmComponent`, `ScaConfirmer` (port), `SCA_CONFIRMER` (token) |
-| **Services** | `BaseAuthService` (OTP / social / push / deleteAccount / logoutEverywhere), `BillingService`, `BackendService`, `PayoutService`, `UserPaymentMethodService`, `loadScript()`, `authInterceptor`, `apiResponseInterceptor` |
+| **Services** | `BaseAuthService` (OTP / social / push / deleteAccount / logoutEverywhere / profile: `getProfile`, `updateProfile`, `request`+`confirmEmailChange`, `request`+`confirmPhoneChange`), `BillingService`, `BackendService`, `PayoutService`, `UserPaymentMethodService`, `loadScript()`, `authInterceptor`, `apiResponseInterceptor` |
 | **Abstracts** | `BaseTable`, `BaseForm`, `BaseView`, `BaseAsync`, `BaseRestService` |
 | **Config** | `SAIL_GUI_CONFIG`, `SailGuiConfig`, `configureRestUrls()` |
 | **Models** | `ApplicationData`, `TableDefinition`, `SiudAction`, `ApplicationMenu`, `ConstantValue`, `UserAccount`, `RestReport`, `ReportParam`, `TrustedDevice`, `PublicPlan`, `PlanPrice`, `PaymentMethod`, `Subscription`, `Invoice`, `CheckoutRequest`/`CheckoutResponse`, `PortalResponse`, `UsageMeter`, `ChargeResult`, `UserPaymentMethod`, `TableAction`, `ReusableAccount`, `PayoutOnboardingSession`, `BankInfoFormValue`, `CountryProfile`, `OtpRequest`/`OtpResponse`, `SignupConsent`, `ConsentState`, `ConsentOption`, `SocialProvider`, `PushPlatform`, 2FA types, etc. |
@@ -121,6 +122,10 @@ bootstrapApplication(App, {
           { label: 'Login', routerLink: '/login/local' },
           { label: 'Register', routerLink: '/login/register' },
         ],
+        // Shown in the toolbar before Logout when logged in. Mount the matching
+        // authenticated route to MyAccountComponent (its links expect
+        // /account/2fa, /account/devices, /account/delete, /login/chpass).
+        accountLink: { label: 'My Account', routerLink: '/account' },
         loginFooterLinks: [
           { label: 'Sign in with Google', routerLink: '/login/google' },
         ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "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

@@ -0,0 +1,17 @@
+<div class="auth-container">
+  <div class="auth-card">
+    <h2 class="auth-title">My Account</h2>
+
+    <sail-profile-editor></sail-profile-editor>
+
+    <section class="account-section">
+      <h3>Security</h3>
+      <nav class="account-links">
+        <a matButton routerLink="/login/chpass">Change password</a>
+        <a matButton routerLink="/account/2fa">Two-factor authentication</a>
+        <a matButton routerLink="/account/devices">Trusted devices</a>
+        <a matButton class="warn" routerLink="/account/delete">Delete account</a>
+      </nav>
+    </section>
+  </div>
+</div>

package/src/component/account/my_account.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { ProfileEditorComponent } from './profile_editor';
+
+// "My Account" hub: the profile editor plus links to the existing self-service
+// flows (password, 2FA, trusted devices, account deletion) at their
+// conventional sail routes.
+@Component({
+  selector: 'sail-my-account',
+  templateUrl: './my_account.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink, MatButtonModule, ProfileEditorComponent],
+})
+export class MyAccountComponent {}

package/src/component/account/profile_editor.html

@@ -0,0 +1,50 @@
+<section class="account-section">
+  <h3>Profile</h3>
+  <form [formGroup]="profileForm" (ngSubmit)="saveProfile()" class="auth-form">
+    <mat-form-field appearance="outline">
+      <mat-label>First name</mat-label>
+      <input matInput formControlName="firstName" required>
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+      <mat-label>Last name</mat-label>
+      <input matInput formControlName="lastName">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+      <mat-label>Locale</mat-label>
+      <input matInput formControlName="locale" placeholder="en">
+    </mat-form-field>
+    <button matButton="elevated" class="primary" type="submit" [disabled]="!profileForm.valid || loading()">Save</button>
+  </form>
+  @if (profileMsg()) { <div class="auth-success" role="status">{{ profileMsg() }}</div> }
+  @if (profileErr()) { <div class="auth-error" role="alert">{{ profileErr() }}</div> }
+</section>
+
+<section class="account-section">
+  <h3>Email</h3>
+  @if (emailPhase() === 'idle') {
+    <p>{{ email() || 'Not set' }}</p>
+    <button matButton (click)="startEmailChange()">Change email</button>
+  } @else if (emailPhase() === 'enter') {
+    <mat-form-field appearance="outline">
+      <mat-label>New email</mat-label>
+      <input matInput type="email" [formControl]="newEmail" required>
+    </mat-form-field>
+    <button matButton="elevated" class="primary" (click)="sendEmailCode()" [disabled]="newEmail.invalid || loading()">Send code</button>
+    <button matButton (click)="cancelEmailChange()">Cancel</button>
+  } @else {
+    @if (emailMsg()) { <p>{{ emailMsg() }}</p> }
+    <mat-form-field appearance="outline">
+      <mat-label>Confirmation code</mat-label>
+      <input matInput [formControl]="emailCode" inputmode="numeric" required>
+    </mat-form-field>
+    <button matButton="elevated" class="primary" (click)="confirmEmailChange()" [disabled]="emailCode.invalid || loading()">Confirm</button>
+    <button matButton (click)="cancelEmailChange()">Cancel</button>
+  }
+  @if (emailErr()) { <div class="auth-error" role="alert">{{ emailErr() }}</div> }
+</section>
+
+<section class="account-section">
+  <h3>Phone</h3>
+  <p>{{ phone() || 'Not set' }}</p>
+  @if (!phoneChangeEnabled) { <p class="auth-instructions">Phone change is coming soon.</p> }
+</section>

package/src/component/account/profile_editor.ts

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, Component, OnInit, inject, 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';
+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.
+@Component({
+  selector: 'sail-profile-editor',
+  templateUrl: './profile_editor.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ReactiveFormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
+})
+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;
+
+  readonly loading = signal(false);
+  readonly profileMsg = signal('');
+  readonly profileErr = signal('');
+  readonly email = signal('');
+  readonly phone = signal('');
+
+  readonly profileForm = this.fb.group({
+    firstName: ['', Validators.required],
+    lastName: [''],
+    locale: [''],
+  });
+
+  readonly emailPhase = signal<'idle' | 'enter' | 'code'>('idle');
+  readonly emailMsg = signal('');
+  readonly emailErr = signal('');
+  readonly newEmail = new FormControl('', [Validators.required, Validators.email]);
+  readonly emailCode = new FormControl('', [Validators.required]);
+
+  ngOnInit(): void {
+    this.auth.getProfile().subscribe({
+      next: (p: UserProfile) => {
+        this.profileForm.patchValue({ firstName: p.firstName, lastName: p.lastName, locale: p.language });
+        this.email.set(p.email ?? '');
+        this.phone.set(p.phoneNumber ?? '');
+      },
+      error: () => this.profileErr.set('Could not load your profile.'),
+    });
+  }
+
+  saveProfile(): void {
+    if (this.profileForm.invalid) return;
+    const v = this.profileForm.getRawValue();
+    this.loading.set(true);
+    this.profileMsg.set('');
+    this.profileErr.set('');
+    this.auth.updateProfile(v.firstName!, v.lastName ?? '', v.locale ?? '').subscribe({
+      next: () => { this.loading.set(false); this.profileMsg.set('Profile saved.'); },
+      error: (e) => { this.loading.set(false); this.profileErr.set(this.msg(e, 'Could not save profile.')); },
+    });
+  }
+
+  startEmailChange(): void {
+    this.emailPhase.set('enter');
+    this.emailMsg.set('');
+    this.emailErr.set('');
+  }
+
+  cancelEmailChange(): void {
+    this.emailPhase.set('idle');
+    this.newEmail.reset();
+    this.emailCode.reset();
+  }
+
+  sendEmailCode(): void {
+    if (this.newEmail.invalid) return;
+    this.loading.set(true);
+    this.emailErr.set('');
+    this.auth.requestEmailChange(this.newEmail.value!).subscribe({
+      next: () => { this.loading.set(false); this.emailPhase.set('code'); this.emailMsg.set('We sent a code to your new email.'); },
+      error: (e) => { this.loading.set(false); this.emailErr.set(this.msg(e, 'Could not send a code.')); },
+    });
+  }
+
+  confirmEmailChange(): void {
+    if (this.emailCode.invalid) return;
+    this.loading.set(true);
+    this.emailErr.set('');
+    this.auth.confirmEmailChange(this.newEmail.value!, Number(this.emailCode.value)).subscribe({
+      next: () => { this.loading.set(false); this.email.set(this.newEmail.value!); this.cancelEmailChange(); this.profileMsg.set('Email updated.'); },
+      error: (e) => { this.loading.set(false); this.emailErr.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/form/form_record.ts

@@ -40,11 +40,12 @@ export class RecordForm {
             return tableDef.Columns
                 .filter(col => !(col.HasDefault && col.DataType === 'timestamp'
                                  && !editableTimestamps.has(col.PascalName)))
-                // column_display_attribute: 'H' is never shown; 'R'/'U' (read-only
-                // and keel-set audit stamp) show display-only but hide when empty —
-                // so a new record's audit fields disappear and on edit only
-                // populated ones show.
-                .filter(col => col.DisplayMode !== 'H')
+                // column_display_attribute: 'H' is never shown; 'S' (secret) is
+                // also never shown and is stripped from reads server-side; 'R'/'U'
+                // (read-only and keel-set audit stamp) show display-only but hide
+                // when empty — so a new record's audit fields disappear and on edit
+                // only populated ones show.
+                .filter(col => col.DisplayMode !== 'H' && col.DisplayMode !== 'S')
                 .filter(col => !((col.DisplayMode === 'R' || col.DisplayMode === 'U')
                                  && this.isEmpty(record[col.PascalName])))
                 .sort((a, b) => a.Order - b.Order)

package/src/component/navigation/navigation.html

@@ -37,6 +37,9 @@
             <span class="toolbar-spacer"></span>
             <ng-content select="[toolbar-actions]"></ng-content>
             @if (isLoggedIn()) {
+                @if (accountLink) {
+                    <a matButton [routerLink]="accountLink.routerLink">{{ accountLink.label }}</a>
+                }
                 <button matButton (click)="logout()">Logout</button>
             } @else if (guiConfig.publicRouteLinks) {
                 @for (link of guiConfig.publicRouteLinks; track link.routerLink) {

package/src/component/navigation/navigation.ts

@@ -57,6 +57,7 @@ export class Navigation {
   );
 
   readonly isLoggedIn = this.authService.isLoggedIn;
+  protected readonly accountLink = this.guiConfig.accountLink;
 
   logout() {
     this.authService.logout();

package/src/component/security/twofactor_setup.html

@@ -23,12 +23,18 @@
         @if (backupCodes().length > 0) {
           <div class="twofactor-backup">
             <h3>Backup Codes</h3>
-            <p class="auth-instructions">Save these codes in a safe place. Each code can only be used once.</p>
-            <ul class="backup-code-list">
-              @for (code of backupCodes(); track code) {
-                <li><code>{{ code }}</code></li>
-              }
-            </ul>
+            <p class="auth-instructions">Download these codes and keep them safe — they're shown only once, each works once, and can't be retrieved later (only regenerated).</p>
+            <div class="auth-actions">
+              <button matButton="elevated" class="primary" type="button" (click)="downloadBackupCodes()">Download codes</button>
+              <button matButton type="button" (click)="showCodes.set(!showCodes())">{{ showCodes() ? 'Hide codes' : 'Show codes' }}</button>
+            </div>
+            @if (showCodes()) {
+              <ul class="backup-code-list">
+                @for (code of backupCodes(); track code) {
+                  <li><code>{{ code }}</code></li>
+                }
+              </ul>
+            }
           </div>
         }
 

package/src/component/security/twofactor_setup.ts

@@ -28,6 +28,7 @@ export class TwoFactorSetupComponent extends BaseAsync {
   readonly qrUri = signal('');
   readonly secret = signal('');
   readonly backupCodes = signal<string[]>([]);
+  readonly showCodes = signal(false);
 
   // setup2FA requires the user's current password (or current TOTP code
   // if 2FA already enabled — pass twoFactorCode instead). Disable additionally
@@ -65,6 +66,18 @@ export class TwoFactorSetupComponent extends BaseAsync {
     this.step.set('verify');
   }
 
+  // Backup codes are shown once at setup. Offer a download (they're hashed
+  // server-side, so they can never be re-displayed later — only regenerated).
+  downloadBackupCodes() {
+    const blob = new Blob([this.backupCodes().join('\n') + '\n'], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'backup-codes.txt';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
   confirmSetup() {
     if (this.verifyForm.invalid) return;
     const { code } = this.verifyForm.value;

package/src/component/table/table_detail.html

@@ -38,7 +38,7 @@
                         </td>
                     }
                     <td>
-                        <button matIconButton (click)="saveRow()" title="Save"><mat-icon>save</mat-icon></button>
+                        <button matIconButton (click)="saveRow()" [title]="isNew ? 'Add' : 'Update'"><mat-icon>{{ isNew ? 'add' : 'check' }}</mat-icon></button>
                         <button matIconButton (click)="cancelRow(record)" title="Cancel"><mat-icon>cancel</mat-icon></button>
                     </td>
                 } @else {

package/src/component/table/table_detail.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, inject, input, linkedSignal, OnInit, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, effect, inject, input, linkedSignal, OnInit, output, ViewEncapsulation } from "@angular/core";
 import { DynamicField } from "../form/form_field";
 import { MatButtonModule } from "@angular/material/button";
 import { BaseForm } from "../abstract/base_form";
@@ -26,6 +26,9 @@ export class TableDetail extends BaseForm implements OnInit {
     readonly parentRecord = input<any>({});
     /** When true, the parent view is in read-only mode — disable all child row editing. */
     readonly parentReadOnly = input(false);
+    /** Fires after any grid mutation (add/edit/delete/undelete/cancel) so a parent
+     *  can re-evaluate unsaved-changes state. Local only — no server call. */
+    readonly changed = output<void>();
 
     override readonly tableName = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });
 
@@ -88,6 +91,7 @@ export class TableDetail extends BaseForm implements OnInit {
                 } else {
                     Object.assign(record, result);
                 }
+                this.changed.emit();
             }
         });
     }
@@ -123,6 +127,7 @@ export class TableDetail extends BaseForm implements OnInit {
         this.editingRecord = null;
         this.originalRecord = null;
         this.isNew = false;
+        this.changed.emit();
     }
 
     cancelRow(record: any) {
@@ -137,6 +142,7 @@ export class TableDetail extends BaseForm implements OnInit {
         this.editingRecord = null;
         this.originalRecord = null;
         this.isNew = false;
+        this.changed.emit();
     }
 
     deleteRow(record: any) {
@@ -148,11 +154,13 @@ export class TableDetail extends BaseForm implements OnInit {
         } else {
             record[this.config.opField] = OpCode.Delete;
         }
+        this.changed.emit();
     }
 
     unDeleteRow(record: any) {
         if (record[this.config.opField] === OpCode.Delete) {
             record[this.config.opField] = OpCode.Update;
         }
+        this.changed.emit();
     }
 }

package/src/config.ts

@@ -37,6 +37,8 @@ export interface SailGuiConfig {
   loginFooterLinks?: RouteLink[];
   /** Links shown in navigation toolbar when not logged in (e.g., Login, Register) */
   publicRouteLinks?: RouteLink[];
+  /** Link shown in the toolbar before Logout when logged in, e.g. {label:'My Account', routerLink:'/account'}. Omitted → not shown. */
+  accountLink?: RouteLink;
   /** Map RestUri (or prefix pattern like 'analytic/*') to a custom component */
   menuItemRouteOverrides?: { [restUriPattern: string]: Type<unknown> };
   /** Per-table overrides for hiding fields / seeding defaults. Keyed by table PascalName. */

package/src/index.ts

@@ -26,6 +26,8 @@ export * from './component/login/consent_gate';
 export * from './component/login/otp_input';
 export * from './component/login/social_login';
 export * from './component/login/account_deletion';
+export * from './component/account/profile_editor';
+export * from './component/account/my_account';
 export * from './component/security/twofactor_setup';
 export * from './component/security/twofactor_verify';
 export * from './component/security/trusted_devices';

package/src/model/auth.ts

@@ -102,6 +102,16 @@ export interface OtpResendRequest {
   purpose?: OtpPurpose;
 }
 
+// Current user's editable profile (GET profileURL). language is the locale.
+export interface UserProfile {
+  firstName:        string;
+  lastName:         string;
+  email:            string;
+  phoneNumber:      string;
+  language:         string;
+  twoFactorEnabled?: boolean;
+}
+
 // ── Re-authentication credentials ──
 // Required by Setup2FA, Disable2FA, DeleteAccount, LogoutEverywhere — server
 // rejects with 401 if neither `password` nor `twoFactorCode` is supplied.

package/src/service/auth.service.ts

@@ -8,11 +8,12 @@ import {
   PushPlatform, PushRegisterRequest,
   ReauthCredentials,
   SignupConsent, SocialLoginRequest, SocialProvider,
+  UserProfile,
 } from '../model/auth';
 import { RestURL } from './rest_url';
 import { Observable, ReplaySubject } from 'rxjs';
 import { ApplicationMenu, ConstantValue } from '../model/common';
-import { CanActivateFn, Router, Routes } from '@angular/router';
+import { CanActivateFn, CanDeactivateFn, Router, Routes } from '@angular/router';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../config';
 import { BaseRestService } from './base_rest.service';
 
@@ -51,6 +52,11 @@ export abstract class BaseAuthService extends BaseRestService {
   protected readonly deleteAccountUrl          = this.url(RestURL.deleteAccountURL);
   protected readonly pushRegisterUrl           = this.url(RestURL.pushRegisterURL);
   protected readonly pushRevokeUrl             = this.url(RestURL.pushRevokeURL);
+  protected readonly profileUrl                = this.url(RestURL.profileURL);
+  protected readonly profileEmailUrl           = this.url(RestURL.profileEmailURL);
+  protected readonly profileEmailConfirmUrl    = this.url(RestURL.profileEmailConfirmURL);
+  protected readonly profilePhoneUrl           = this.url(RestURL.profilePhoneURL);
+  protected readonly profilePhoneConfirmUrl    = this.url(RestURL.profilePhoneConfirmURL);
 
   token: string | null = null;
   readonly isLoggedIn = signal(false);
@@ -216,6 +222,34 @@ export abstract class BaseAuthService extends BaseRestService {
     return this.http.post<{ message: string }>(this.chpassUrl, { username });
   }
 
+  // ── Self-service profile (keel ProfileHandler) ──
+  // Name/locale apply immediately; email/phone are verify-before-apply: a code
+  // is sent to the new value, the change lands only on confirm.
+
+  getProfile() {
+    return this.http.get<UserProfile>(this.profileUrl);
+  }
+
+  updateProfile(firstName: string, lastName: string, locale: string) {
+    return this.http.post<{ message: string }>(this.profileUrl, { firstName, lastName, locale });
+  }
+
+  requestEmailChange(value: string) {
+    return this.http.post<{ message: string }>(this.profileEmailUrl, { value });
+  }
+
+  confirmEmailChange(value: string, code: number) {
+    return this.http.post<{ message: string }>(this.profileEmailConfirmUrl, { value, code });
+  }
+
+  requestPhoneChange(value: string) {
+    return this.http.post<{ message: string }>(this.profilePhoneUrl, { value });
+  }
+
+  confirmPhoneChange(value: string, code: number) {
+    return this.http.post<{ message: string }>(this.profilePhoneConfirmUrl, { value, code });
+  }
+
   confirmRegister(email: string, code: string) {
     const params = new HttpParams().set('email', email).set('code', code);
     return this.http.post<ConfirmRegisterResponse>(this.confirmRegisterUrl, null, { params });
@@ -500,6 +534,15 @@ export abstract class BaseAuthService extends BaseRestService {
     );
   };
 
+  // Confirms navigation away when the routed component reports unsaved changes.
+  // Opt in by implementing hasUnsavedChanges(): boolean on the component.
+  readonly canDeactivate: CanDeactivateFn<{ hasUnsavedChanges?: () => boolean }> = (component) => {
+    if (component && typeof component.hasUnsavedChanges === 'function' && component.hasUnsavedChanges()) {
+      return window.confirm('You have unsaved changes. Leave this page without saving?');
+    }
+    return true;
+  };
+
   /** Override in subclasses to add project-specific routes */
   protected buildExtraRoutes(data: ApplicationData): Routes {
     if (this.guiConfig.extraRoutes) {
@@ -615,6 +658,13 @@ export abstract class BaseAuthService extends BaseRestService {
                     }
                 }
 
+                // Guard navigation away from any component-backed page that
+                // tracks unsaved changes (opt-in via hasUnsavedChanges()).
+                for (const r of children) {
+                    if ((r as { component?: unknown }).component) {
+                        (r as { canDeactivate?: unknown[] }).canDeactivate = [this.canDeactivate];
+                    }
+                }
                 newRoutes.push({ path: menuPath, children });
             }
 

package/src/service/rest_url.ts

@@ -33,6 +33,15 @@ export const RestURL = {
   loginSocialURL:      '/public/login/social',
   logoutEverywhereURL: '/api/user/logout-everywhere',
   deleteAccountURL:    '/api/user/account',
+  // Self-service profile (keel ProfileHandler). GET profileURL reads the
+  // current profile; POST updates name/locale. Email/phone are verify-before-
+  // apply (request → confirm). A consumer whose backend mounts these under a
+  // different prefix overrides them via configureRestUrls.
+  profileURL:             '/api/user/profile',
+  profileEmailURL:        '/api/user/profile/email',
+  profileEmailConfirmURL: '/api/user/profile/email/confirm',
+  profilePhoneURL:        '/api/user/profile/phone',
+  profilePhoneConfirmURL: '/api/user/profile/phone/confirm',
   pushRegisterURL:     '/api/push/register',
   pushRevokeURL:       '/api/push/revoke',
   // Payout — keel/payout endpoints.