@nauticana/sail 1.1.9 → 1.1.11

package/src/component/billing/payment_methods.ts

@@ -7,8 +7,7 @@ import { PaymentMethod } from '../../model/appdata';
 
 /**
  * Lists the partner's saved payment methods. Inherits loading/error state
- * from BaseAsyncView. The "Manage in Stripe" button is a placeholder — pass
- * `[portalUrl]` to show it; otherwise the button is hidden.
+ * from BaseAsync. Pair with `<sail-portal-button>` for provider-side management.
  */
 @Component({
   selector: 'sail-payment-methods',

package/src/component/billing/price_selector.html

@@ -1,9 +1,10 @@
-<div class="price-selector" role="radiogroup" aria-label="Billing options">
+<div class="price-selector" role="radiogroup" aria-label="Billing options" (keydown)="onKeydown($event)">
   @for (offer of offers(); track offer.key) {
     <button class="price-offer" type="button"
             role="radio"
             [class.price-selected]="offer.key === selected()"
             [attr.aria-checked]="offer.key === selected()"
+            [attr.tabindex]="tabIndexFor(offer, $index)"
             (click)="onSelect(offer)">
       <span class="price-amount">{{ offer.amountText }}</span>
       <span class="price-cycle">/ {{ offer.cycleText }}</span>

package/src/component/billing/price_selector.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';
 import { PlanPrice } from '../../model/appdata';
-import { formatCurrency } from '../../util/money';
+import { formatCurrency, PERIOD_TYPE_INFO } from '../../util/money';
 
 /** Per-offer view model for accessible, currency-formatted rendering. */
 interface OfferRow {
@@ -27,14 +27,6 @@ interface OfferRow {
   encapsulation: ViewEncapsulation.None,
 })
 export class PriceSelectorComponent {
-  private static readonly DEFAULT_CYCLE: Record<string, string> = {
-    D: 'Daily',
-    W: 'Weekly',
-    M: 'Monthly',
-    Q: 'Quarterly',
-    A: 'Annual',
-  };
-
   readonly prices = input<PlanPrice[]>([]);
   /** Selected offer key — a `priceId`, or the composite key when priceId is empty. */
   readonly selected = input<string | undefined>(undefined);
@@ -45,7 +37,9 @@ export class PriceSelectorComponent {
   readonly offers = computed<OfferRow[]>(() => {
     const labels = this.cycleLabels();
     const cycleLabel = (code: string) =>
-      labels[code] ?? PriceSelectorComponent.DEFAULT_CYCLE[code] ?? code;
+      labels[code] ?? PERIOD_TYPE_INFO[code]?.label ?? code;
+    const termNoun = (code: string) =>
+      PERIOD_TYPE_INFO[code]?.noun ?? cycleLabel(code).toLowerCase();
     return this.prices().map((p) => {
       const singleCycle = p.termCount === 1 && p.termType === p.billingCycle;
       return {
@@ -53,9 +47,7 @@ export class PriceSelectorComponent {
         price:      p,
         amountText: formatCurrency(p.amount, p.currency),
         cycleText:  cycleLabel(p.billingCycle),
-        termText:   singleCycle
-          ? ''
-          : `${p.termCount} ${cycleLabel(p.termType)}${p.termCount > 1 ? 's' : ''} commitment`,
+        termText:   singleCycle ? '' : `${p.termCount}-${termNoun(p.termType)} commitment`,
       };
     });
   });
@@ -63,4 +55,27 @@ export class PriceSelectorComponent {
   onSelect(offer: OfferRow): void {
     this.selectionChange.emit(offer.price);
   }
+
+  /** Roving-radio tabindex: the selected offer (or the first) is the tab stop. */
+  tabIndexFor(offer: OfferRow, index: number): number {
+    const sel = this.selected();
+    if (sel) return offer.key === sel ? 0 : -1;
+    return index === 0 ? 0 : -1;
+  }
+
+  /** Arrow-key navigation required by the radio pattern (WCAG 4.1.2). */
+  onKeydown(event: KeyboardEvent): void {
+    const forward = event.key === 'ArrowRight' || event.key === 'ArrowDown';
+    const backward = event.key === 'ArrowLeft' || event.key === 'ArrowUp';
+    if (!forward && !backward) return;
+    event.preventDefault();
+    const group = event.currentTarget as HTMLElement;
+    const buttons = Array.from(group.querySelectorAll<HTMLButtonElement>('[role="radio"]'));
+    if (!buttons.length) return;
+    const current = buttons.indexOf(event.target as HTMLButtonElement);
+    const next = (current + (forward ? 1 : -1) + buttons.length) % buttons.length;
+    buttons[next].focus();
+    const offer = this.offers()[next];
+    if (offer) this.onSelect(offer);
+  }
 }

package/src/component/billing/trial_banner.ts

@@ -1,4 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map, timer } from 'rxjs';
 
 /**
  * "Trial ends in N days" banner, bound to `Subscription.trialEnd`. Renders
@@ -15,12 +17,16 @@ export class TrialBannerComponent {
   /** ISO timestamp the trial ends (Subscription.trialEnd). */
   readonly trialEnd = input<string | undefined>(undefined);
 
+  // Hourly clock tick — a computed reading Date.now() directly would freeze
+  // at mount time and show a stale day count across midnight.
+  private readonly now = toSignal(timer(0, 3_600_000).pipe(map(() => Date.now())), { requireSync: true });
+
   readonly daysLeft = computed<number>(() => {
     const raw = this.trialEnd();
     if (!raw) return 0;
     const end = Date.parse(raw);
     if (Number.isNaN(end)) return 0;
-    return Math.ceil((end - Date.now()) / 86_400_000);
+    return Math.ceil((end - this.now()) / 86_400_000);
   });
 
   readonly message = computed<string>(() => {

package/src/component/billing/usage_meter.ts

@@ -34,9 +34,9 @@ export class UsageMeterComponent {
       return {
         resource:  m.resource,
         hasBar,
-        percent:   hasBar ? Math.min(100, Math.round((m.used / m.limit) * 100)) : 0,
+        percent:   hasBar ? Math.min(100, Math.max(0, Math.round((m.used / m.limit) * 100))) : 0,
         ariaMax:   m.limit,
-        ariaNow:   hasBar ? Math.min(m.used, m.limit) : m.used,
+        ariaNow:   hasBar ? Math.min(Math.max(0, m.used), m.limit) : m.used,
         valueText: `${m.used} / ${m.limit < 0 ? 'Unlimited' : m.limit}`,
       };
     }),

package/src/component/dashboard/data_card.html

@@ -3,7 +3,7 @@
 
   @switch (state()) {
     @case ('loading') {
-      <div class="data-card-loading"><mat-spinner diameter="28"></mat-spinner></div>
+      <div class="data-card-loading"><mat-spinner diameter="28" [attr.aria-label]="(heading() || 'Card') + ' loading'"></mat-spinner></div>
     }
     @case ('ready') {
       <p class="sr-only">{{ description() }}</p>

package/src/component/dashboard/entity_selector.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, effect, input, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, linkedSignal } from '@angular/core';
+import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { EntityOption } from '../../model/dashboard';
@@ -19,32 +20,29 @@ export class EntitySelectorComponent {
   readonly entities = input<EntityOption[]>([]);
   readonly selected = input<string | undefined>(undefined);
   readonly label = input<string>('Business');
-  readonly selectionChange = output<string | undefined>();
 
-  readonly value = signal<string | undefined>(undefined);
+  /**
+   * Re-resolves only when the INPUTS change (a user pick via `.set()` sticks —
+   * an unchanged `[selected]` binding can never snap the selection back):
+   * a newly-changed valid `selected` wins, else the current pick if still
+   * valid, else the first active entity, else undefined (host clears stale data).
+   */
+  readonly value = linkedSignal<{ opts: EntityOption[]; sel?: string }, string | undefined>({
+    source: () => ({ opts: this.entities(), sel: this.selected() }),
+    computation: (src, prev) => {
+      const isActive = (id?: string) => !!id && src.opts.some((e) => e.id === id && e.active !== false);
+      const selChanged = src.sel !== prev?.source.sel;
+      if (selChanged && isActive(src.sel)) return src.sel;
+      if (isActive(prev?.value)) return prev?.value;
+      if (isActive(src.sel)) return src.sel;
+      return src.opts.find((e) => e.active !== false)?.id;
+    },
+  });
 
-  constructor() {
-    // Explicit selection wins; else keep the current pick if still valid; else the
-    // 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 isActive = (id?: string) => !!id && opts.some((e) => e.id === id && e.active !== false);
-      const cur = this.value();
-      const resolved =
-        isActive(this.selected()) ? this.selected()
-          : isActive(cur) ? cur
-            : opts.find((e) => e.active !== false)?.id;
-      if (resolved !== cur) {
-        this.value.set(resolved);
-        this.selectionChange.emit(resolved);
-      }
-    });
-  }
+  // Single emission path — signals already dedupe unchanged values.
+  readonly selectionChange = outputFromObservable(toObservable(this.value));
 
   onChange(id: string): void {
     this.value.set(id);
-    this.selectionChange.emit(id);
   }
 }

package/src/component/form/form_field.html

@@ -1,8 +1,9 @@
 @if (isLookupTableSearch()) {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
-        <input matInput [value]="isReadonly ? displayCaption : value()" [required]="required" [readonly]="isReadonly">
-        <button matIconButton matSuffix (click)="openLookup()" [disabled]="isReadonly">
+        <input matInput [value]="isReadonly ? displayCaption : inputValue" [required]="required" readonly>
+        <button matIconButton matSuffix type="button" (click)="openLookup()" [disabled]="isReadonly"
+                [attr.aria-label]="'Look up ' + colCaption(field())">
             <mat-icon>search</mat-icon>
         </button>
     </mat-form-field>
@@ -14,7 +15,7 @@
 } @else if (inputType === 'select') {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
-        <mat-select [value]="value()" (selectionChange)="onSelectChange($event);">
+        <mat-select [value]="value()" [required]="required" (selectionChange)="onSelectChange($event);">
             @for (option of options; track option.Value) {
                 <mat-option [value]="option.Value">{{option.Caption}}</mat-option>
             }
@@ -31,7 +32,7 @@
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
         <textarea matInput
-         [value]="value()"
+         [value]="inputValue"
          (input)="onInputChange($event);"
          [disabled]="isReadonly"
          [required]="required"
@@ -44,7 +45,7 @@
         <mat-label>{{ colCaption(field()) }}</mat-label>
         <input matInput
          [type]="inputType"
-         [value]="value()"
+         [value]="inputValue"
          (input)="onInputChange($event);"
          [disabled]="isReadonly"
          [required]="required"

package/src/component/form/form_field.ts

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, inject, input, linkedSignal, output, ViewEncapsulation } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
-import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatCheckboxChange, MatCheckboxModule } from "@angular/material/checkbox";
 import { MatDialog } from "@angular/material/dialog";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatIconModule } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
-import { MatSelectModule } from "@angular/material/select";
+import { MatSelectChange, MatSelectModule } from "@angular/material/select";
 import { BaseTable } from "../abstract/base_table";
 import { ConstantValue, LookupStyle } from "../../model/common";
 import { TableLookup } from "../table/table_lookup";
@@ -32,9 +32,9 @@ import { TableLookup } from "../table/table_lookup";
 })
 export class DynamicField extends BaseTable {
     readonly tableNameInput = input('', { alias: 'tableName' });
-    readonly value = input<any>(undefined);
-    readonly valueChange = output<any>();
-    readonly recordUpdate = output<{[key: string]: any}>();
+    readonly value = input<unknown>(undefined);
+    readonly valueChange = output<unknown>();
+    readonly recordUpdate = output<{[key: string]: unknown}>();
     readonly field = input('');
     readonly label = input('');
     readonly readonlyField = input(false, {alias: 'readonly'});
@@ -103,9 +103,17 @@ export class DynamicField extends BaseTable {
         return !!(this.col && this.col.LookupTable && this.col.LookupStyle === LookupStyle.Search);
     }
 
-    get maxLength() {
-        if (!this.col) return 0;
-        return this.col.Size;
+    /** null when metadata is missing/zero — [attr.maxLength] then omits the
+     * attribute (maxlength="0" would block all typing). */
+    get maxLength(): number | null {
+        const size = this.col?.Size ?? 0;
+        return size > 0 ? size : null;
+    }
+
+    /** Input-safe string form of the bound value. */
+    get inputValue(): string {
+        const v = this.value();
+        return v === null || v === undefined ? '' : String(v);
     }
 
     get scale() {
@@ -132,27 +140,37 @@ export class DynamicField extends BaseTable {
         return this.displayValue(this.field(), this.value());
     }
 
-    onInputChange(event: any) {
-        if (event && event.target) this.valueChange.emit(event.target.value);
+    onInputChange(event: Event) {
+        const target = event.target as HTMLInputElement | HTMLTextAreaElement | null;
+        if (target) this.valueChange.emit(this.coerce(target.value));
     }
 
-    onSelectChange(event: any) {
-        if (event) this.valueChange.emit(event.value);
+    /** Numeric columns emit numbers, not the input's raw string. */
+    private coerce(raw: string): unknown {
+        if (raw !== '' && this.isNumber(this.field())) {
+            const n = Number(raw);
+            if (!isNaN(n)) return n;
+        }
+        return raw;
     }
 
-    onCheckboxChange(event: any) {
-        if (event) this.valueChange.emit(event.checked);
+    onSelectChange(event: MatSelectChange) {
+        this.valueChange.emit(event.value);
     }
 
-    updateForeignKeys(parentRecord: any) {
+    onCheckboxChange(event: MatCheckboxChange) {
+        this.valueChange.emit(event.checked);
+    }
+
+    updateForeignKeys(parentRecord: Record<string, unknown>) {
         if (!this.col || !this.col.LookupTable) return;
         const fk = this.getForeignKeyConfig(this.col.LookupTable);
-        const updates: {[key: string]: any} = {};
-        if (fk && fk.fk) {
-            fk.fk.Columns.forEach((column, index) => {
-                updates[column.PascalName] = parentRecord[fk.parent.Keys[index].PascalName];
-            });
-        }
+        // No FK config → nothing to map; emitting would wipe the current value.
+        if (!fk?.fk || fk.fk.Columns.length !== fk.parent.Keys.length) return;
+        const updates: {[key: string]: unknown} = {};
+        fk.fk.Columns.forEach((column, index) => {
+            updates[column.PascalName] = parentRecord[fk.parent.Keys[index].PascalName];
+        });
         this.recordUpdate.emit(updates);
         this.valueChange.emit(updates[this.field()]);
     }

package/src/component/form/form_record.html

@@ -1,10 +1,10 @@
 <div class="form-container">
     @for (key of computedFields(); track key) {
-        @if (!isArray(record()[key])) {
+        @if (!isArray(working()[key])) {
             <sail-dynamic-field
              [tableName]="tableName()"
-             [value]="record()[key]"
-             (valueChange)="record()[key]=$event"
+             [value]="working()[key]"
+             (valueChange)="onFieldChange(key, $event)"
              (recordUpdate)="onRecordUpdate($event)"
              [field]="key"
              [readonly]="isReadOnly()(key)">

package/src/component/form/form_record.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, linkedSignal, output, ViewEncapsulation } from "@angular/core";
 import { DynamicField } from "./form_field";
 import { BaseAuthService } from "../../service/auth.service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
@@ -13,10 +13,15 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
 export class RecordForm {
     private readonly auth = inject(BaseAuthService);
     private readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
-    readonly record = input<{[key: string]: any}>({});
+    readonly record = input<{[key: string]: unknown}>({});
     readonly tableName = input('');
     readonly fields = input<string[]>([]);
     readonly isReadOnly = input<(key: string) => boolean>(() => false);
+    /** Full updated record on every field edit. The input object is never mutated. */
+    readonly recordChange = output<{[key: string]: unknown}>();
+
+    /** Local working copy — resets whenever the parent binds a new record object. */
+    readonly working = linkedSignal(() => ({...this.record()}));
 
     private get hiddenFields(): Set<string> {
         const global = this.guiConfig.hiddenFields;
@@ -31,12 +36,12 @@ export class RecordForm {
             return f.filter(key => !hidden.has(key));
         }
         const tableDef = this.auth.getTableDefinition(this.tableName());
-        const recordKeys = new Set(Object.keys(this.record()));
+        const record = this.working();
+        const recordKeys = new Set(Object.keys(record));
         const editableTimestamps = new Set(
             this.guiConfig.tableOverrides?.[this.tableName()]?.editableTimestamps ?? []
         );
         if (tableDef && tableDef.Columns && tableDef.Columns.length > 0) {
-            const record = this.record();
             return tableDef.Columns
                 .filter(col => !(col.HasDefault && col.DataType === 'timestamp'
                                  && !editableTimestamps.has(col.PascalName)))
@@ -55,15 +60,25 @@ export class RecordForm {
         return [...recordKeys].filter(key => !hidden.has(key));
     });
 
-    isArray(value: any): boolean {
+    isArray(value: unknown): boolean {
         return Array.isArray(value);
     }
 
-    private isEmpty(value: any): boolean {
+    private isEmpty(value: unknown): boolean {
         return value === null || value === undefined || value === '';
     }
 
-    onRecordUpdate(updates: {[key: string]: any}) {
-        Object.assign(this.record(), updates);
+    onFieldChange(key: string, value: unknown) {
+        this.applyUpdates({[key]: value});
+    }
+
+    onRecordUpdate(updates: {[key: string]: unknown}) {
+        this.applyUpdates(updates);
+    }
+
+    private applyUpdates(updates: {[key: string]: unknown}) {
+        const updated = {...this.working(), ...updates};
+        this.working.set(updated);
+        this.recordChange.emit(updated);
     }
 }

package/src/component/form/form_table.html

@@ -1,6 +1,6 @@
 <h1 mat-dialog-title class="table-form-title">
     <span class="table-form-title-text">
-        @if (isNew) {
+        @if (isNew()) {
             New {{ getCaption() }} Record
         } @else {
             {{ getCaption() }} Details
@@ -11,7 +11,7 @@
     </button>
 </h1>
 <div mat-dialog-content>
-    <sail-record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></sail-record-form>
+    <sail-record-form [tableName]="tableName()" [record]="editableRecord()" (recordChange)="editableRecord.set($event)" [isReadOnly]="isReadOnlyFn"></sail-record-form>
 </div>
 <div mat-dialog-actions align="end">
     <button matButton="elevated" class="primary" type="submit" (click)="onSave()">Save</button>

package/src/component/form/form_table.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation } from "@angular/core";
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from "@angular/material/dialog";
 import { BaseForm } from "../abstract/base_form";
 import { RecordForm } from "./form_record";
@@ -6,7 +6,7 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
 
 interface TableFormDialogData {
-    record: {[key: string]: any};
+    record: {[key: string]: unknown};
     tableName: string;
     isNew?: boolean;
     readOnlyColumns?: string[];
@@ -28,6 +28,7 @@ interface TableFormDialogData {
     ]
 })
 export class TableForm extends BaseForm {
+    override readonly tableName = signal('');
     dialogRef = inject(MatDialogRef<TableForm>);
     data = inject<TableFormDialogData>(MAT_DIALOG_DATA);
 
@@ -35,9 +36,9 @@ export class TableForm extends BaseForm {
 
     constructor() {
         super();
-        this.editableRecord = {...this.data.record};
+        this.editableRecord.set({...this.data.record});
         this.tableName.set(this.data.tableName);
-        this.isNew = !!this.data.isNew;
+        this.isNew.set(!!this.data.isNew);
         this.readOnlyColumns = this.data.readOnlyColumns ?? [];
     }
 
@@ -47,7 +48,7 @@ export class TableForm extends BaseForm {
     }
 
     onSave(): void {
-        const result = {...this.editableRecord};
+        const result = {...this.editableRecord()};
         this.readyToSave(result);
         this.dialogRef.close(result);
     }

package/src/component/login/account_deletion.ts

@@ -52,9 +52,10 @@ export class AccountDeletionComponent extends BaseAsync {
   });
 
   readonly typedValue = signal('');
+  private readonly passwordValue = signal('');
   readonly canSubmit = computed(() =>
     this.typedValue() === this.confirmationText() &&
-    !!this.form.controls.password.value &&
+    !!this.passwordValue() &&
     !this.loading(),
   );
 
@@ -63,6 +64,9 @@ export class AccountDeletionComponent extends BaseAsync {
     this.form.controls.confirm.valueChanges
       .pipe(takeUntilDestroyed())
       .subscribe((v) => this.typedValue.set(v ?? ''));
+    this.form.controls.password.valueChanges
+      .pipe(takeUntilDestroyed())
+      .subscribe((v) => this.passwordValue.set(v ?? ''));
   }
 
   onDelete() {
@@ -71,11 +75,7 @@ export class AccountDeletionComponent extends BaseAsync {
     const reason = this.form.controls.reason.value?.trim() || undefined;
     this.run(
       this.auth.deleteAccount({ password }, reason),
-      () => {
-        this.successMessage.set('Account deleted.');
-        const route = this.guiConfig.accountDeletedRoute ?? '/login/local';
-        this.router.navigateByUrl(route);
-      },
+      () => this.router.navigateByUrl(this.guiConfig.accountDeletedRoute ?? '/login/local'),
       'Failed to delete account. Please try again.',
     );
   }

package/src/component/login/chpass_component.html

@@ -9,23 +9,23 @@
     <form [formGroup]="chpassForm" (ngSubmit)="changePassword()" class="auth-form">
       <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>
-        <input matInput type="text" formControlName="username" required>
+        <input matInput type="text" formControlName="username" autocomplete="username" required>
       </mat-form-field>
 
       @if (!forgotPassword()) {
         <mat-form-field appearance="outline">
           <mat-label>Current Password</mat-label>
-          <input matInput type="password" formControlName="old_password" required>
+          <input matInput type="password" formControlName="old_password" autocomplete="current-password" required>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>New Password</mat-label>
-          <input matInput type="password" formControlName="new_password" required>
+          <input matInput type="password" formControlName="new_password" autocomplete="new-password" required>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Confirm New Password</mat-label>
-          <input matInput type="password" formControlName="confirm_password" required>
+          <input matInput type="password" formControlName="confirm_password" autocomplete="new-password" required>
         </mat-form-field>
       }
 

package/src/component/login/chpass_component.ts

@@ -79,7 +79,6 @@ export class ChpassComponent extends BaseAsync {
       request,
       () => {
         if (isForgot) {
-          this.successMessage.set('A confirmation code has been sent to your email.');
           this.router.navigate(['/confirm/password'], { queryParams: { username } });
         } else {
           this.successMessage.set('Password changed successfully.');

package/src/component/login/confirm_chpass_component.html

@@ -10,22 +10,22 @@
     <form [formGroup]="confirmForm" (ngSubmit)="confirm()" class="auth-form">
       <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>
-        <input matInput type="text" formControlName="username" required>
+        <input matInput type="text" formControlName="username" autocomplete="username" required>
       </mat-form-field>
 
       <mat-form-field appearance="outline">
         <mat-label>Confirmation Code</mat-label>
-        <input matInput type="text" formControlName="code" required>
+        <input matInput type="text" formControlName="code" autocomplete="one-time-code" required>
       </mat-form-field>
 
       <mat-form-field appearance="outline">
         <mat-label>New Password</mat-label>
-        <input matInput type="password" formControlName="new_password" required>
+        <input matInput type="password" formControlName="new_password" autocomplete="new-password" required>
       </mat-form-field>
 
       <mat-form-field appearance="outline">
         <mat-label>Confirm New Password</mat-label>
-        <input matInput type="password" formControlName="confirm_password" required>
+        <input matInput type="password" formControlName="confirm_password" autocomplete="new-password" required>
       </mat-form-field>
 
       @if (errorMessage()) {

package/src/component/login/confirm_chpass_component.ts

@@ -54,10 +54,7 @@ export class ConfirmChpassComponent extends BaseAsync implements OnInit {
 
     this.run(
       this.auth.confirmChpass(username!, code!, new_password!),
-      () => {
-        this.successMessage.set('Password changed successfully. Redirecting to login...');
-        this.router.navigate(['/login/local']);
-      },
+      () => this.router.navigate(['/login/local']),
       'Confirmation failed. Please try again.',
     );
   }

package/src/component/login/consent_gate.html

@@ -1,21 +1,21 @@
 <form [formGroup]="form" class="consent-form" role="group" aria-label="Consent required to continue">
-  <label class="consent-row">
+  <div class="consent-row">
     <mat-checkbox [formControlName]="ConsentType.PRIVACY_POLICY" required>
       I have read and agree to the
       <a [attr.href]="effectivePrivacyUrl()" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
       and Terms of Service.
     </mat-checkbox>
-  </label>
+  </div>
 
-  <label class="consent-row">
+  <div class="consent-row">
     <mat-checkbox [formControlName]="ConsentType.CROSS_BORDER" required>
       I consent to my personal information being processed outside my region
       as described in the Privacy Policy.
     </mat-checkbox>
-  </label>
+  </div>
 
   @for (opt of optionalConsents(); track opt.id) {
-    <label class="consent-row">
+    <div class="consent-row">
       <mat-checkbox [formControlName]="opt.id" [required]="opt.required ?? false">
         {{ opt.label }}
         @if (opt.linkUrl && opt.linkText) {
@@ -25,6 +25,6 @@
           <small class="consent-hint">{{ opt.hint }}</small>
         }
       </mat-checkbox>
-    </label>
+    </div>
   }
 </form>