@nauticana/sail 0.5.0

package/src/component/billing/plan_selector.html

@@ -0,0 +1,24 @@
+<div class="plan-selector">
+  @for (plan of plans(); track plan.id) {
+    <div class="plan-card" [class.plan-selected]="plan.id === selected()">
+      <h3 class="plan-caption">{{ plan.caption }}</h3>
+      <div class="plan-price">
+        <span class="plan-amount">{{ plan.monthlyCost }}</span>
+        <span class="plan-period">/ month</span>
+      </div>
+      @if (featuresFor(plan.id).length > 0) {
+        <ul class="plan-features">
+          @for (feature of featuresFor(plan.id); track feature) {
+            <li>{{ feature }}</li>
+          }
+        </ul>
+      }
+      <button mat-raised-button class="primary" type="button" (click)="onSelect(plan.id)">
+        @if (plan.id === selected()) { Selected } @else { Choose }
+      </button>
+    </div>
+  }
+  @if (plans().length === 0) {
+    <p class="empty-state">No plans available.</p>
+  }
+</div>

package/src/component/billing/plan_selector.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { PublicPlan } from '../../model/appdata';
+
+/**
+ * Plan picker. Pure presentational component — stateless, no service calls.
+ * The caller provides the plans and handles the selection event.
+ */
+@Component({
+  selector: 'app-plan-selector',
+  templateUrl: './plan_selector.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [MatButtonModule],
+})
+export class PlanSelectorComponent {
+  readonly plans = input<PublicPlan[]>([]);
+  readonly selected = input<string | undefined>(undefined);
+  readonly features = input<{[planId: string]: string[]}>({});
+  readonly selectionChange = output<string>();
+
+  onSelect(planId: string): void {
+    this.selectionChange.emit(planId);
+  }
+
+  featuresFor(planId: string): string[] {
+    return this.features()[planId] ?? [];
+  }
+}

package/src/component/form/form_field.html

@@ -0,0 +1,54 @@
+@if (isLookupTableSearch()) {
+    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
+        <mat-label>{{ colCaption(field()) }}</mat-label>
+        <input matInput [value]="readonlyField() ? displayCaption : value()" [required]="required" [readonly]="readonlyField()">
+        <button mat-icon-button matSuffix (click)="openLookup()" [disabled]="readonlyField()">
+            <mat-icon>search</mat-icon>
+        </button>
+    </mat-form-field>
+} @else if (inputType === 'select' && readonlyField()) {
+    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
+        <mat-label>{{ colCaption(field()) }}</mat-label>
+        <input matInput [value]="displayCaption" readonly>
+    </mat-form-field>
+} @else if (inputType === 'select') {
+    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
+        <mat-label>{{ colCaption(field()) }}</mat-label>
+        <mat-select [value]="value()" (selectionChange)="onSelectChange($event);">
+            @for (option of options; track option.Value) {
+                <mat-option [value]="option.Value">{{option.Caption}}</mat-option>
+            }
+        </mat-select>
+    </mat-form-field>
+} @else if (inputType === 'checkbox') {
+    <mat-checkbox [checked]="value() === true || value() === '1'" (change)="onCheckboxChange($event);" [disabled]="readonlyField()">{{ colCaption(field()) }}</mat-checkbox>
+} @else if (readonlyField() && isDateLike && !value()) {
+    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
+        <mat-label>{{ colCaption(field()) }}</mat-label>
+        <input matInput value="" readonly>
+    </mat-form-field>
+} @else if (isTextArea) {
+    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
+        <mat-label>{{ colCaption(field()) }}</mat-label>
+        <textarea matInput
+         [value]="value()"
+         (input)="onInputChange($event);"
+         [disabled]="readonlyField()"
+         [required]="required"
+         [attr.maxLength]="maxLength"
+         [rows]="textAreaRows">
+        </textarea>
+    </mat-form-field>
+} @else {
+    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
+        <mat-label>{{ colCaption(field()) }}</mat-label>
+        <input matInput
+         [type]="inputType"
+         [value]="value()"
+         (input)="onInputChange($event);"
+         [disabled]="readonlyField()"
+         [required]="required"
+         [attr.maxLength]="maxLength"
+         [attr.step]="step">
+    </mat-form-field>
+}

package/src/component/form/form_field.ts

@@ -0,0 +1,156 @@
+import { ChangeDetectionStrategy, Component, inject, Input, input, output, ViewEncapsulation } from "@angular/core";
+import { MatButtonModule } from "@angular/material/button";
+import { 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 { BaseTable } from "../abstract/base_table";
+import { ConstantValue } from "../../model/common";
+import { TableLookup } from "../table/table_lookup";
+
+@Component({
+    selector: 'dynamic-field',
+    templateUrl: './form_field.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        '[class.field-wide]': 'isTextArea',
+        '[class.field-editable]': '!readonlyField()',
+        '[class.field-readonly]': 'readonlyField()',
+        '[style.max-width.px]': 'fieldMaxWidth',
+    },
+    imports: [
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+    ]
+})
+export class DynamicField extends BaseTable {
+    // @Input() required — signal input not possible due to BaseTable inheritance chain
+    @Input() override tableName = '';
+    readonly value = input<any>(undefined);
+    readonly valueChange = output<any>();
+    readonly recordUpdate = output<{[key: string]: any}>();
+    readonly field = input('');
+    readonly label = input('');
+    readonly readonlyField = input(false, {alias: 'readonly'});
+    readonly subscriptSizing = input<'fixed' | 'dynamic'>('dynamic');
+    readonly appearance = input<'fill' | 'outline'>('outline');
+
+    private readonly dialog = inject(MatDialog);
+
+    get col() {
+        return this.getColumn(this.field());
+    }
+
+    get inputType() {
+        if (!this.col || !this.col.InputType || this.col.LookupStyle === 'S') return 'text';
+        return this.col.InputType;
+    }
+
+    get isTextArea(): boolean {
+        if (!this.col) return false;
+        return this.col.Size > 80;
+    }
+
+    get isDateLike(): boolean {
+        if (!this.col) return false;
+        return this.col.InputType === 'date'
+            || this.col.InputType === 'datetime'
+            || this.col.InputType === 'datetime-local';
+    }
+
+    /**
+     * Max width (px) for the field, derived from column Size.
+     * `null` = no cap (field fills its container — used for text areas / long fields).
+     */
+    get fieldMaxWidth(): number | null {
+        if (this.isTextArea) return null;
+        const size = this.col?.Size ?? 0;
+        if (size === 0) return 240;
+        if (size <= 10) return 180;
+        if (size <= 30) return 260;
+        if (size <= 80) return 400;
+        return 520;
+    }
+
+    get textAreaRows(): number {
+        if (!this.col) return 3;
+        if (this.col.Size > 500) return 4;
+        return 2;
+    }
+
+    isLookupTableSearch(): boolean {
+        return !!(this.col && this.col.LookupTable && this.col.LookupStyle === 'S');
+    }
+
+    get maxLength() {
+        if (!this.col) return 0;
+        return this.col.Size;
+    }
+
+    get scale() {
+        if (!this.col) return 0;
+        return this.col.Scale;
+    }
+
+    get required() {
+        if (!this.col) return false;
+        return this.col.Required;
+    }
+
+    get options(): ConstantValue[] {
+        if (!this.col) return [];
+        return this.getOptions(this.field()) ?? [];
+    }
+
+    get step() {
+        if (!this.col) return 0;
+        return this.col.Step;
+    }
+
+    get displayCaption(): string {
+        return this.displayValue(this.field(), this.value());
+    }
+
+    onInputChange(event: any) {
+        if (event && event.target) this.valueChange.emit(event.target.value);
+    }
+
+    onSelectChange(event: any) {
+        if (event) this.valueChange.emit(event.value);
+    }
+
+    onCheckboxChange(event: any) {
+        if (event) this.valueChange.emit(event.checked);
+    }
+
+    updateForeignKeys(parentRecord: any) {
+        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];
+            });
+        }
+        this.recordUpdate.emit(updates);
+        this.valueChange.emit(updates[this.field()]);
+    }
+
+    openLookup() {
+        if (!this.isLookupTableSearch()) return;
+        const dialogRef = this.dialog.open(TableLookup, {
+            width: this.dialogWidth,
+            data: {tableName: this.col?.LookupTable},
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) this.updateForeignKeys(result);
+        });
+    }
+}

package/src/component/form/form_record.html

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

package/src/component/form/form_record.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from "@angular/core";
+import { DynamicField } from "./form_field";
+import { BaseAuthService } from "../../service/auth.service";
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
+
+@Component({
+    selector: 'record-form',
+    templateUrl: './form_record.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    imports: [DynamicField],
+})
+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 tableName = input('');
+    readonly fields = input<string[]>([]);
+    readonly isReadOnly = input<(key: string) => boolean>(() => false);
+
+    private get hiddenFields(): Set<string> {
+        const global = this.guiConfig.hiddenFields;
+        const override = this.guiConfig.tableOverrides?.[this.tableName()]?.hiddenFields ?? [];
+        return new Set([...global, ...override]);
+    }
+
+    readonly computedFields = computed(() => {
+        const f = this.fields();
+        const hidden = this.hiddenFields;
+        if (f.length > 0) {
+            return f.filter(key => !hidden.has(key));
+        }
+        const tableDef = this.auth.getTableDefinition(this.tableName());
+        const recordKeys = new Set(Object.keys(this.record()));
+        const editableTimestamps = new Set(
+            this.guiConfig.tableOverrides?.[this.tableName()]?.editableTimestamps ?? []
+        );
+        if (tableDef && tableDef.Columns && tableDef.Columns.length > 0) {
+            return tableDef.Columns
+                .filter(col => !(col.HasDefault && col.DataType === 'timestamp'
+                                 && !editableTimestamps.has(col.PascalName)))
+                .sort((a, b) => a.Order - b.Order)
+                .map(col => col.PascalName)
+                .filter(key => !hidden.has(key) && recordKeys.has(key));
+        }
+        return [...recordKeys].filter(key => !hidden.has(key));
+    });
+
+    isArray(value: any): boolean {
+        return Array.isArray(value);
+    }
+
+    onRecordUpdate(updates: {[key: string]: any}) {
+        Object.assign(this.record(), updates);
+    }
+}

package/src/component/form/form_table.html

@@ -0,0 +1,19 @@
+<h1 mat-dialog-title class="table-form-title">
+    <span class="table-form-title-text">
+        @if (isNew) {
+            New {{ getCaption() }} Record
+        } @else {
+            {{ getCaption() }} Details
+        }
+    </span>
+    <button mat-icon-button type="button" (click)="onCancel()" aria-label="Close dialog" class="table-form-close">
+        <mat-icon>close</mat-icon>
+    </button>
+</h1>
+<div mat-dialog-content>
+    <record-form [tableName]="tableName" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></record-form>
+</div>
+<div mat-dialog-actions align="end">
+    <button mat-raised-button class="primary" type="submit" (click)="onSave()">Save</button>
+    <button mat-button type="button" (click)="onCancel()">Cancel</button>
+</div>

package/src/component/form/form_table.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, inject, 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";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+
+interface TableFormDialogData {
+    record: {[key: string]: any};
+    tableName: string;
+    isNew?: boolean;
+    readOnlyColumns?: string[];
+    attributeName?: string;
+}
+
+@Component({
+    selector: 'table-form',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    templateUrl: './form_table.html',
+    imports: [
+        MatButtonModule,
+        MatDialogActions,
+        MatDialogContent,
+        MatDialogTitle,
+        MatIconModule,
+        RecordForm,
+    ]
+})
+export class TableForm extends BaseForm {
+    dialogRef = inject(MatDialogRef<TableForm>);
+    data = inject<TableFormDialogData>(MAT_DIALOG_DATA);
+
+    readOnlyColumns: string[] = [];
+
+    constructor() {
+        super();
+        this.editableRecord = {...this.data.record};
+        this.tableName = this.data.tableName;
+        this.isNew = !!this.data.isNew;
+        this.readOnlyColumns = this.data.readOnlyColumns ?? [];
+    }
+
+    override isReadOnly(fieldName: string): boolean {
+        if (this.readOnlyColumns.includes(fieldName)) return true;
+        return super.isReadOnly(fieldName);
+    }
+
+    onSave(): void {
+        const result = {...this.editableRecord};
+        this.readyToSave(result);
+        this.dialogRef.close(result);
+    }
+
+    onCancel(): void {
+        this.dialogRef.close();
+    }
+}

package/src/component/login/account_deletion.html

@@ -0,0 +1,42 @@
+<div class="auth-container">
+  <div class="auth-card">
+    <h2 class="auth-title">Delete account</h2>
+    <p class="auth-instructions">
+      This action cannot be undone. Your account will be anonymized and all
+      active sessions will be signed out. To confirm, type
+      <strong>{{ confirmationText() }}</strong> below.
+    </p>
+
+    <form [formGroup]="form" class="auth-form" (ngSubmit)="onDelete()">
+      <mat-form-field appearance="outline">
+        <mat-label>Type {{ confirmationText() }} to confirm</mat-label>
+        <input matInput formControlName="confirm" autocomplete="off" required>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Confirm your password</mat-label>
+        <input matInput type="password" formControlName="password" autocomplete="current-password" required>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Reason (optional)</mat-label>
+        <textarea matInput rows="3" formControlName="reason"></textarea>
+      </mat-form-field>
+
+      <button mat-raised-button class="warn" type="submit" [disabled]="!canSubmit()">
+        @if (loading()) { Deleting… } @else { Permanently delete account }
+      </button>
+
+      @if (errorMessage()) {
+        <div class="auth-error" role="alert">{{ errorMessage() }}</div>
+      }
+      @if (successMessage()) {
+        <div class="auth-success" role="status">{{ successMessage() }}</div>
+      }
+    </form>
+
+    <div class="auth-actions">
+      <a routerLink="/dashboard">Cancel</a>
+    </div>
+  </div>
+</div>

package/src/component/login/account_deletion.ts

@@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input, signal,
+} from '@angular/core';
+import { FormBuilder, 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 { Router, RouterLink } from '@angular/router';
+import { BaseAsync } from '../abstract/base_async';
+import { BaseAuthService } from '../../service/auth.service';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+
+/**
+ * AccountDeletionComponent — App Store / Play Store compliance surface.
+ *
+ * Typed-confirmation UX (standard anti-fat-finger pattern): user must type
+ * the literal `confirmationText` (default "DELETE") before the destructive
+ * button enables. Optional `reason` textarea forwarded to the backend's
+ * DELETE /api/user/account for the audit trail.
+ *
+ * On success: local session cleared by BaseAuthService.deleteAccount; this
+ * component then navigates to `config.accountDeletedRoute` (default
+ * `/login/local`).
+ */
+@Component({
+  selector: 'app-account-deletion',
+  templateUrl: './account_deletion.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    RouterLink,
+  ],
+})
+export class AccountDeletionComponent extends BaseAsync {
+  private readonly auth = inject(BaseAuthService);
+  private readonly fb = inject(FormBuilder);
+  private readonly router = inject(Router);
+  protected readonly guiConfig: SailGuiConfig =
+    inject(SAIL_GUI_CONFIG, { optional: true }) ?? DEFAULT_CONFIG;
+
+  readonly confirmationText = input('DELETE');
+
+  readonly form = this.fb.nonNullable.group({
+    confirm:  ['', Validators.required],
+    password: ['', Validators.required],   // re-auth gate required by keel
+    reason:   [''],
+  });
+
+  readonly typedValue = signal('');
+  readonly canSubmit = computed(() =>
+    this.typedValue() === this.confirmationText() &&
+    !!this.form.controls.password.value &&
+    !this.loading(),
+  );
+
+  constructor() {
+    super();
+    this.form.controls.confirm.valueChanges.subscribe((v) => this.typedValue.set(v ?? ''));
+  }
+
+  onDelete() {
+    if (!this.canSubmit()) return;
+    const password = this.form.controls.password.value;
+    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);
+      },
+      'Failed to delete account. Please try again.',
+    );
+  }
+}

package/src/component/login/chpass_component.html

@@ -0,0 +1,58 @@
+<div class="auth-container">
+  @if (guiConfig.appTitle) {
+    <div class="auth-header">
+      <h1 class="auth-app-title">{{ guiConfig.appTitle }}</h1>
+    </div>
+  }
+  <div class="auth-card">
+    <h2 class="auth-title">Change Password</h2>
+    <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>
+      </mat-form-field>
+
+      @if (!forgotPassword()) {
+        <mat-form-field appearance="outline">
+          <mat-label>Current Password</mat-label>
+          <input matInput type="password" formControlName="old_password" required>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>New Password</mat-label>
+          <input matInput type="password" formControlName="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>
+        </mat-form-field>
+      }
+
+      <div class="auth-checkbox">
+        <mat-checkbox (change)="toggleForgotPassword($event.checked)">
+          I don't remember my old password, send me a confirmation code in email
+        </mat-checkbox>
+      </div>
+
+      @if (errorMessage()) {
+        <div class="auth-error" role="alert">{{ errorMessage() }}</div>
+      }
+
+      @if (successMessage()) {
+        <div class="auth-success" role="status">{{ successMessage() }}</div>
+      }
+
+      <button mat-raised-button class="primary" type="submit" [disabled]="!chpassForm.valid">
+        @if (forgotPassword()) {
+          Send Confirmation Code
+        } @else {
+          Change Password
+        }
+      </button>
+    </form>
+    <div class="auth-actions">
+      <a routerLink="/login/local">Back to Login</a>
+    </div>
+  </div>
+</div>