@nauticana/sail 0.5.0

package/src/component/security/trusted_devices.html

@@ -0,0 +1,76 @@
+<div class="auth-container">
+  <div class="auth-card">
+    <h2 class="auth-title">Trusted Devices</h2>
+    <p class="auth-instructions">Devices that can skip two-factor authentication for 30 days.</p>
+
+    @if (singleDeviceSession()) {
+      <div class="single-device-banner" role="status">
+        This account is in single-device mode — signing in on another device will sign you out here.
+      </div>
+    }
+
+    @if (devices().length > 0) {
+      <table class="trusted-devices-table">
+        <thead>
+          <tr>
+            <th>Device</th>
+            <th>Last Used</th>
+            <th>Trusted Since</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (device of devices(); track device.id) {
+            <tr>
+              <td>
+                {{ device.name }}
+                @if (isCurrentDevice(device)) {
+                  <span class="current-device-badge">(this device)</span>
+                }
+              </td>
+              <td>{{ formatDate(device.last_used_at) }}</td>
+              <td>{{ formatDate(device.created_at) }}</td>
+              <td>
+                <button mat-icon-button (click)="revokeDevice(device)" title="Revoke">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    } @else {
+      <p class="empty-state">No trusted devices.</p>
+    }
+
+    @if (errorMessage()) {
+      <div class="auth-error" role="alert">{{ errorMessage() }}</div>
+    }
+    @if (successMessage()) {
+      <div class="auth-success" role="status">{{ successMessage() }}</div>
+    }
+
+    @if (logoutOpen()) {
+      <form [formGroup]="logoutForm" class="auth-form" (ngSubmit)="signOutEverywhere()">
+        <p class="auth-instructions">Confirm your password to sign out of every device.</p>
+        <mat-form-field appearance="outline">
+          <mat-label>Password</mat-label>
+          <input matInput type="password" formControlName="password" autocomplete="current-password" required>
+        </mat-form-field>
+        <div class="auth-actions">
+          <button mat-raised-button class="warn" type="submit" [disabled]="!logoutForm.valid || loading()">
+            Sign out everywhere
+          </button>
+          <button mat-button type="button" (click)="logoutOpen.set(false)">Cancel</button>
+        </div>
+      </form>
+    } @else {
+      <div class="auth-actions">
+        <button mat-button class="warn" type="button" (click)="logoutOpen.set(true)" [disabled]="loading()">
+          Sign out of all devices
+        </button>
+        <a routerLink="/dashboard">Back to Dashboard</a>
+      </div>
+    }
+  </div>
+</div>

package/src/component/security/trusted_devices.ts

@@ -0,0 +1,92 @@
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject, signal, input } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BaseAsync } from '../abstract/base_async';
+import { BaseAuthService } from '../../service/auth.service';
+import { TrustedDevice } from '../../model/appdata';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-trusted-devices',
+  templateUrl: './trusted_devices.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    RouterLink,
+  ],
+})
+export class TrustedDevicesComponent extends BaseAsync implements OnInit {
+  private readonly auth = inject(BaseAuthService);
+  private readonly fb = inject(FormBuilder);
+
+  readonly devices = signal<TrustedDevice[]>([]);
+  /** When true, show the "single-device mode" banner (single-device session policy). */
+  readonly singleDeviceSession = input(false);
+
+  /** Inline form revealed when the user clicks "Sign out of all devices". */
+  readonly logoutOpen = signal(false);
+  readonly logoutForm = this.fb.group({
+    password: ['', Validators.required],
+  });
+
+  ngOnInit() {
+    this.loadDevices();
+  }
+
+  loadDevices() {
+    this.run(
+      this.auth.getTrustedDevices(),
+      (devices) => this.devices.set(devices),
+      'Failed to load devices.',
+    );
+  }
+
+  revokeDevice(device: TrustedDevice) {
+    if (!confirm(`Revoke trust for "${device.name}"?`)) return;
+    this.run(
+      this.auth.revokeTrustedDevice(device.id),
+      () => {
+        this.successMessage.set(`Device "${device.name}" revoked.`);
+        this.loadDevices();
+      },
+      'Failed to revoke device.',
+    );
+  }
+
+  /**
+   * logout-everywhere requires a re-auth gate, so we reveal a password
+   * field instead of relying on confirm() alone.
+   */
+  signOutEverywhere() {
+    if (this.logoutForm.invalid) return;
+    const password = this.logoutForm.value.password!;
+    this.run(
+      this.auth.logoutEverywhere({ password }),
+      () => {
+        this.successMessage.set('Signed out of all devices.');
+        this.logoutForm.reset();
+        this.logoutOpen.set(false);
+        this.auth.logout();
+      },
+      'Failed to sign out of all devices.',
+    );
+  }
+
+  isCurrentDevice(device: TrustedDevice): boolean {
+    const fp = localStorage.getItem('deviceFingerprint');
+    return !!fp && device.fingerprint === fp;
+  }
+
+  formatDate(dateStr: string): string {
+    if (!dateStr) return '';
+    return dateStr.slice(0, 16).replace('T', ' ');
+  }
+}

package/src/component/security/twofactor_setup.html

@@ -0,0 +1,75 @@
+<div class="auth-container">
+  <div class="auth-card">
+    <h2 class="auth-title">Two-Factor Authentication</h2>
+
+    @switch (step()) {
+      @case ('init') {
+        <p class="auth-instructions">Add an extra layer of security to your account with TOTP-based two-factor authentication.</p>
+        <form [formGroup]="initForm" (ngSubmit)="startSetup()" class="auth-form">
+          <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>
+          <button mat-raised-button class="primary" type="submit" [disabled]="!initForm.valid">Enable 2FA</button>
+        </form>
+      }
+      @case ('qr') {
+        <p class="auth-instructions">Scan this QR code with your authenticator app (e.g., Google Authenticator, Authy).</p>
+        <div class="twofactor-qr">
+          <img [src]="qrUri()" alt="2FA QR Code" width="200" height="200">
+        </div>
+        <p class="auth-instructions">Or enter this secret manually: <code>{{ secret() }}</code></p>
+
+        @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>
+          </div>
+        }
+
+        <button mat-raised-button class="primary" (click)="proceedToVerify()">I've saved my backup codes</button>
+      }
+      @case ('verify') {
+        <p class="auth-instructions">Enter the 6-digit code from your authenticator app to confirm setup.</p>
+        <form [formGroup]="verifyForm" (ngSubmit)="confirmSetup()" class="auth-form">
+          <mat-form-field appearance="outline">
+            <mat-label>Verification Code</mat-label>
+            <input matInput type="text" formControlName="code" maxlength="6" autocomplete="one-time-code" required>
+          </mat-form-field>
+
+          <button mat-raised-button class="primary" type="submit" [disabled]="!verifyForm.valid">
+            Verify and Enable
+          </button>
+        </form>
+      }
+      @case ('done') {
+        <div class="auth-success" role="status">{{ successMessage() }}</div>
+        <form [formGroup]="disableForm" (ngSubmit)="disable2FA()" class="auth-form">
+          <p class="auth-instructions">To disable 2FA, confirm your password and a current 2FA code.</p>
+          <mat-form-field appearance="outline">
+            <mat-label>Password</mat-label>
+            <input matInput type="password" formControlName="password" autocomplete="current-password" required>
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label>Current 6-digit code</mat-label>
+            <input matInput type="text" formControlName="code" maxlength="6" autocomplete="one-time-code" required>
+          </mat-form-field>
+          <button mat-button class="warn" type="submit" [disabled]="!disableForm.valid">Disable 2FA</button>
+        </form>
+      }
+    }
+
+    @if (errorMessage()) {
+      <div class="auth-error" role="alert">{{ errorMessage() }}</div>
+    }
+
+    <div class="auth-actions">
+      <a routerLink="/dashboard">Back to Dashboard</a>
+    </div>
+  </div>
+</div>

package/src/component/security/twofactor_setup.ts

@@ -0,0 +1,106 @@
+import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation } from '@angular/core';
+import { BaseAuthService } from '../../service/auth.service';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-twofactor-setup',
+  templateUrl: './twofactor_setup.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    RouterLink,
+  ],
+})
+export class TwoFactorSetupComponent {
+  private readonly auth = inject(BaseAuthService);
+  private readonly fb = inject(FormBuilder);
+
+  readonly step = signal<'init' | 'qr' | 'verify' | 'done'>('init');
+  readonly qrUri = signal('');
+  readonly secret = signal('');
+  readonly backupCodes = signal<string[]>([]);
+  readonly errorMessage = signal('');
+  readonly successMessage = signal('');
+
+  // setup2FA requires the user's current password (or current TOTP code
+  // if 2FA already enabled — pass twoFactorCode instead). Disable additionally
+  // requires both.
+  readonly initForm = this.fb.group({
+    password: ['', Validators.required],
+  });
+
+  readonly verifyForm = this.fb.group({
+    code: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(6)]],
+  });
+
+  readonly disableForm = this.fb.group({
+    password: ['', Validators.required],
+    code: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(6)]],
+  });
+
+  startSetup() {
+    if (this.initForm.invalid) return;
+    this.errorMessage.set('');
+    const password = this.initForm.value.password!;
+    this.auth.setup2FA({ password }).subscribe({
+      next: (res) => {
+        this.qrUri.set(res.qrUri);
+        this.secret.set(res.secret);
+        this.backupCodes.set(res.backupCodes);
+        this.step.set('qr');
+        this.initForm.reset();
+      },
+      error: (err) => {
+        this.errorMessage.set(err.error?.message ?? '2FA setup failed.');
+      },
+    });
+  }
+
+  proceedToVerify() {
+    this.step.set('verify');
+  }
+
+  confirmSetup() {
+    if (this.verifyForm.invalid) return;
+    this.errorMessage.set('');
+
+    const { code } = this.verifyForm.value;
+    this.auth.verify2FA({ code: code! }).subscribe({
+      next: (res) => {
+        if (res.valid) {
+          this.successMessage.set('Two-factor authentication enabled.');
+          this.step.set('done');
+        } else {
+          this.errorMessage.set('Invalid code. Please try again.');
+        }
+      },
+      error: (err) => {
+        this.errorMessage.set(err.error?.message ?? 'Verification failed.');
+      },
+    });
+  }
+
+  disable2FA() {
+    if (this.disableForm.invalid) return;
+    this.errorMessage.set('');
+    const { password, code } = this.disableForm.value;
+    this.auth.disable2FA(password!, code!).subscribe({
+      next: () => {
+        this.successMessage.set('Two-factor authentication disabled.');
+        this.step.set('init');
+        this.disableForm.reset();
+      },
+      error: (err) => {
+        this.errorMessage.set(err.error?.message ?? 'Failed to disable 2FA.');
+      },
+    });
+  }
+}

package/src/component/security/twofactor_verify.html

@@ -0,0 +1,45 @@
+<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">Two-Factor Verification</h2>
+    <p class="auth-instructions">
+      @if (useBackupCode()) {
+        Enter one of your backup codes.
+      } @else {
+        Enter the 6-digit code from your authenticator app.
+      }
+    </p>
+    <form [formGroup]="verifyForm" (ngSubmit)="verify()" class="auth-form">
+      <mat-form-field appearance="outline">
+        <mat-label>{{ useBackupCode() ? 'Backup Code' : 'Verification Code' }}</mat-label>
+        <input matInput type="text" formControlName="code" autocomplete="one-time-code" required>
+      </mat-form-field>
+
+      @if (!useBackupCode()) {
+        <div class="auth-checkbox">
+          <mat-checkbox formControlName="trustDevice">
+            Trust this device for 30 days
+          </mat-checkbox>
+        </div>
+      }
+
+      @if (errorMessage()) {
+        <div class="auth-error" role="alert">{{ errorMessage() }}</div>
+      }
+
+      <button mat-raised-button class="primary" type="submit" [disabled]="!verifyForm.valid">
+        Verify
+      </button>
+    </form>
+    <div class="auth-actions">
+      <a tabindex="0" role="button" (click)="toggleBackupCode()" (keydown.enter)="toggleBackupCode()">
+        {{ useBackupCode() ? 'Use authenticator code' : 'Use a backup code instead' }}
+      </a>
+      <a routerLink="/login/local">Back to Login</a>
+    </div>
+  </div>
+</div>

package/src/component/security/twofactor_verify.ts

@@ -0,0 +1,90 @@
+import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation } from '@angular/core';
+import { BaseAuthService } from '../../service/auth.service';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+
+@Component({
+  selector: 'app-twofactor-verify',
+  templateUrl: './twofactor_verify.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    RouterLink,
+  ],
+})
+export class TwoFactorVerifyComponent {
+  private readonly auth = inject(BaseAuthService);
+  private readonly fb = inject(FormBuilder);
+  protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
+
+  readonly useBackupCode = signal(false);
+  readonly errorMessage = signal('');
+
+  readonly verifyForm = this.fb.group({
+    code: ['', [Validators.required, Validators.minLength(6)]],
+    trustDevice: [false],
+  });
+
+  toggleBackupCode() {
+    this.useBackupCode.update(v => !v);
+    this.verifyForm.controls.code.reset();
+    this.errorMessage.set('');
+  }
+
+  verify() {
+    if (this.verifyForm.invalid) return;
+    this.errorMessage.set('');
+
+    const { code, trustDevice } = this.verifyForm.value;
+
+    if (this.useBackupCode()) {
+      this.auth.verifyBackupCode(code!).subscribe({
+        next: (res) => {
+          if (res.valid && res.token) {
+            localStorage.removeItem('loginToken');
+            this.auth.token = res.token;
+            this.auth.isLoggedIn.set(true);
+            localStorage.setItem('jwt', res.token);
+            this.auth.loadAppData();
+            this.auth.initRoutes();
+          } else {
+            this.errorMessage.set('Invalid backup code.');
+          }
+        },
+        error: (err) => {
+          this.errorMessage.set(err.error?.message ?? 'Backup code verification failed.');
+        },
+      });
+    } else {
+      this.auth.verify2FALogin(
+        code!,
+        trustDevice ?? false,
+        this.getDeviceFingerprint(),
+        this.getDeviceName(),
+      );
+    }
+  }
+
+  private getDeviceFingerprint(): string {
+    let fp = localStorage.getItem('deviceFingerprint');
+    if (!fp) {
+      fp = crypto.randomUUID();
+      localStorage.setItem('deviceFingerprint', fp);
+    }
+    return fp;
+  }
+
+  private getDeviceName(): string {
+    return navigator.userAgent.substring(0, 80);
+  }
+}

package/src/component/table/table_detail.html

@@ -0,0 +1,53 @@
+<section class="child-table">
+<div class="child-table-header">
+    <h3>{{ getCaption() }}</h3>
+    @if (canCreate()) {
+        <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
+    }
+</div>
+<table class="mat-table">
+    <thead>
+        <tr>
+            @for (col of displayedColumns; track col) {
+                <th>{{ colCaption(col) }}</th>
+            }
+            <th>Actions</th>
+        </tr>
+    </thead>
+    <tbody>
+        @for (record of records; track $index) {
+            <tr [class.deleted-record]="record[config.opField] === 'D'" [class.updated-record]="record[config.opField] === 'U'" [class.new-record]="record[config.opField] === 'I'">
+                @if (record == editingRecord) {
+                    @for (col of displayedColumns; track col) {
+                        <td>
+                            @if (isReadOnly(col)) {
+                                {{ record[col] }}
+                            } @else {
+                                <dynamic-field [tableName]="tableName" [value]="record[col]" [field]="col" (valueChange)="record[col]=$event" subscriptSizing="dynamic"></dynamic-field>
+                            }
+                        </td>
+                    }
+                    <td>
+                        <button mat-icon-button (click)="saveRow()" title="Save"><mat-icon>save</mat-icon></button>
+                        <button mat-icon-button (click)="cancelRow(record)" title="Cancel"><mat-icon>cancel</mat-icon></button>
+                    </td>
+                } @else {
+                    @for (col of displayedColumns; track col) {
+                        <td>{{ displayValue(col, record[col]) }}</td>
+                    }
+                    <td>
+                        @if (canUpdate()) {
+                            <button mat-icon-button (click)="editRow(record)" title="Edit"><mat-icon>edit</mat-icon></button>
+                        }
+                        @if (record[config.opField] === 'D') {
+                            <button mat-icon-button (click)="unDeleteRow(record)" title="Undelete"><mat-icon>restore_from_trash</mat-icon></button>
+                        } @else if (canDelete()) {
+                            <button mat-icon-button (click)="deleteRow(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+                        }
+                    </td>
+                }
+            </tr>
+        }
+    </tbody>
+</table>
+</section>

package/src/component/table/table_detail.ts

@@ -0,0 +1,133 @@
+import { ChangeDetectionStrategy, Component, inject, Input, input, OnInit, ViewEncapsulation } from "@angular/core";
+import { DynamicField } from "../form/form_field";
+import { MatButtonModule } from "@angular/material/button";
+import { BaseForm } from "../abstract/base_form";
+import { MatDialog } from "@angular/material/dialog";
+import { TableForm } from "../form/form_table";
+import { MatIconModule } from "@angular/material/icon";
+
+@Component({
+    selector: 'table-detail',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    templateUrl: './table_detail.html',
+    imports: [
+        DynamicField,
+        MatButtonModule,
+        MatIconModule,
+    ],
+})
+export class TableDetail extends BaseForm implements OnInit {
+    @Input() override tableName = '';
+    @Input() records: any[] = [];
+    readonly parentTableName = input('');
+    readonly parentRecord = input<any>({});
+    /** When true, the parent view is in read-only mode — disable all child row editing. */
+    readonly parentReadOnly = input(false);
+
+    editingRecord: any = null;
+    originalRecord: any = null;
+    displayedColumns: string[] = [];
+    fkColumns: string[] = [];
+
+    private readonly dialog = inject(MatDialog);
+
+    override canCreate() { return !this.parentReadOnly() && super.canCreate(); }
+    override canUpdate() { return !this.parentReadOnly() && super.canUpdate(); }
+    override canDelete() { return !this.parentReadOnly() && super.canDelete(); }
+
+    ngOnInit(): void {
+        this.displayedColumns = this.getDisplayedColumns(this.records);
+        const fkCfg = this.getForeignKeyConfig(this.parentTableName());
+        if (fkCfg && fkCfg.fk && fkCfg.fk.Columns) {
+            for (const col of fkCfg.fk.Columns) {
+                this.fkColumns.push(col.PascalName);
+            }
+        }
+    }
+
+    override isReadOnly(fieldName: string): boolean {
+        return (this.fkColumns.includes(fieldName) || super.isReadOnly(fieldName));
+    }
+
+    openEditDialog(record: any, isNew: boolean, readOnlyColumns: string[]) {
+        const dialogRef = this.dialog.open(TableForm, {
+            width: this.dialogWidth,
+            disableClose: true,
+            data: this.getDialogData(record, isNew, readOnlyColumns),
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                if (isNew) {
+                    this.records.push(result);
+                } else {
+                    Object.assign(record, result);
+                }
+            }
+        });
+    }
+
+    addRecord() {
+        const newRecord = this.emptyRecord();
+        newRecord[this.config.opField] = 'I';
+        this.initializeForeignKeys(newRecord, this.parentTableName(), this.parentRecord());
+
+        if (this.displayedColumns.length > 6) {
+            this.openEditDialog(newRecord, true, this.fkColumns);
+        } else {
+            this.records.push(newRecord);
+            this.isNew = true;
+            this.originalRecord = null;
+            this.editingRecord = newRecord;
+        }
+    }
+
+    editRow(record: any) {
+        if (this.displayedColumns.length > 6) {
+            this.openEditDialog(record, false, this.fkColumns);
+        } else {
+            this.editingRecord = record;
+            this.isNew = record[this.config.opField] === 'I';
+            this.originalRecord = {...record};
+            this.formatRecordTimeStamp(record);
+        }
+    }
+
+    saveRow() {
+        this.readyToSave(this.editingRecord);
+        this.editingRecord = null;
+        this.originalRecord = null;
+        this.isNew = false;
+    }
+
+    cancelRow(record: any) {
+        if (this.originalRecord) {
+            Object.assign(record, this.originalRecord);
+        } else {
+            const index = this.records.indexOf(record);
+            if (index > -1) {
+                this.records.splice(index, 1);
+            }
+        }
+        this.editingRecord = null;
+        this.originalRecord = null;
+        this.isNew = false;
+    }
+
+    deleteRow(record: any) {
+        if (record[this.config.opField] === 'I') {
+            const index = this.records.indexOf(record);
+            if (index > -1) {
+                this.records.splice(index, 1);
+            }
+        } else {
+            record[this.config.opField] = 'D';
+        }
+    }
+
+    unDeleteRow(record: any) {
+        if (record[this.config.opField] === 'D') {
+            record[this.config.opField] = 'U';
+        }
+    }
+}