@nauticana/sail 1.0.9 → 1.1.1

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.9",
+  "version": "1.1.1",
   "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/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/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/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/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/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,6 +8,7 @@ import {
   PushPlatform, PushRegisterRequest,
   ReauthCredentials,
   SignupConsent, SocialLoginRequest, SocialProvider,
+  UserProfile,
 } from '../model/auth';
 import { RestURL } from './rest_url';
 import { Observable, ReplaySubject } from 'rxjs';
@@ -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 });

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.