@nauticana/sail 1.1.9 → 1.1.11

package/src/component/security/twofactor_setup.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, signal, ViewEncapsulation } from '@angular/core';
 import { BaseAuthService } from '../../service/auth.service';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -6,6 +6,7 @@ import { MatInputModule } from '@angular/material/input';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { BaseAsync } from '../abstract/base_async';
+import { toDataURL } from 'qrcode';
 
 @Component({
   selector: 'sail-twofactor-setup',
@@ -24,8 +25,13 @@ export class TwoFactorSetupComponent extends BaseAsync {
   private readonly auth = inject(BaseAuthService);
   private readonly fb = inject(FormBuilder);
 
+  /** keel has no 2FA-status endpoint — the app tells us whether 2FA is already
+   * on so returning users land on the manage/disable view, not a fresh setup
+   * (which would rotate their seed and revoke all refresh tokens). */
+  readonly twoFactorEnabled = input(false);
+
   readonly step = signal<'init' | 'qr' | 'verify' | 'done'>('init');
-  readonly qrUri = signal('');
+  readonly qrDataUrl = signal('');
   readonly secret = signal('');
   readonly backupCodes = signal<string[]>([]);
   readonly showCodes = signal(false);
@@ -46,13 +52,25 @@ export class TwoFactorSetupComponent extends BaseAsync {
     code: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(6)]],
   });
 
+  constructor() {
+    super();
+    // Only flips between the two idle states; never yanks a user out of a flow.
+    effect(() => {
+      const enabled = this.twoFactorEnabled();
+      this.step.update((s) => (s === 'init' || s === 'done') ? (enabled ? 'done' : 'init') : s);
+    });
+  }
+
   startSetup() {
     if (this.initForm.invalid) return;
     const password = this.initForm.value.password!;
     this.run(
       this.auth.setup2FA({ password }),
       (res) => {
-        this.qrUri.set(res.qrUri);
+        // keel returns an otpauth:// provisioning URI, not an image — render it.
+        toDataURL(res.qrUri, { width: 200, margin: 1 })
+          .then((url) => this.qrDataUrl.set(url))
+          .catch(() => this.qrDataUrl.set(''));
         this.secret.set(res.secret);
         this.backupCodes.set(res.backupCodes);
         this.step.set('qr');

package/src/component/security/twofactor_verify.html

@@ -36,7 +36,8 @@
       </button>
     </form>
     <div class="auth-actions">
-      <a tabindex="0" role="button" (click)="toggleBackupCode()" (keydown.enter)="toggleBackupCode()">
+      <a tabindex="0" role="button" (click)="toggleBackupCode()" (keydown.enter)="toggleBackupCode()"
+         (keydown.space)="$event.preventDefault(); toggleBackupCode()">
         {{ useBackupCode() ? 'Use authenticator code' : 'Use a backup code instead' }}
       </a>
       <a routerLink="/login/local">Back to Login</a>

package/src/component/security/twofactor_verify.ts

@@ -46,17 +46,11 @@ export class TwoFactorVerifyComponent extends BaseAsync {
     const { code, trustDevice } = this.verifyForm.value;
 
     if (this.useBackupCode()) {
+      // verifyBackupCode completes the login inside BaseAuthService.
       this.run(
         this.auth.verifyBackupCode(code!),
         (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 {
+          if (!res.valid || !res.token) {
             this.errorMessage.set('Invalid backup code.');
           }
         },

package/src/component/table/table_detail.html

@@ -4,7 +4,7 @@
     @if (canCreate()) {
         <button matButton="elevated" class="accent" (click)="addRecord()">New Record</button>
     }
-    @for (action of getActions(false); track action.action) {
+    @for (action of tableActions(); track action.action) {
         @if (canExecuteAction(action)) {
             <button matButton="outlined" type="button"
                     [title]="action.caption"
@@ -18,17 +18,17 @@
 <table class="mat-table">
     <thead>
         <tr>
-            @for (col of displayedColumns; track col) {
-                <th>{{ colCaption(col) }}</th>
+            @for (col of displayedColumns(); track col) {
+                <th scope="col">{{ colCaption(col) }}</th>
             }
-            <th>Actions</th>
+            <th scope="col">Actions</th>
         </tr>
     </thead>
     <tbody>
-        @for (record of records; track $index) {
+        @for (record of visibleRecords(); track trackByRecord($index, record)) {
             <tr [class.deleted-record]="isDeleted(record)" [class.updated-record]="isUpdated(record)" [class.new-record]="isInserted(record)">
-                @if (record == editingRecord) {
-                    @for (col of displayedColumns; track col) {
+                @if (record === editingRecord()) {
+                    @for (col of displayedColumns(); track col) {
                         <td>
                             @if (isReadOnly(col)) {
                                 {{ record[col] }}
@@ -38,27 +38,28 @@
                         </td>
                     }
                     <td>
-                        <button matIconButton (click)="saveRow()" [title]="isNew ? 'Add' : 'Update'"><mat-icon>{{ isNew ? 'add' : 'check' }}</mat-icon></button>
-                        <button matIconButton (click)="cancelRow(record)" title="Cancel"><mat-icon>cancel</mat-icon></button>
+                        <button matIconButton (click)="saveRow()" [title]="isNew() ? 'Add' : 'Update'" [attr.aria-label]="isNew() ? 'Add' : 'Update'"><mat-icon>{{ isNew() ? 'add' : 'check' }}</mat-icon></button>
+                        <button matIconButton (click)="cancelRow(record)" title="Cancel" aria-label="Cancel"><mat-icon>cancel</mat-icon></button>
                     </td>
                 } @else {
-                    @for (col of displayedColumns; track col) {
+                    @for (col of displayedColumns(); track col) {
                         <td>{{ displayValue(col, record[col]) }}</td>
                     }
                     <td>
                         @if (canUpdate()) {
-                            <button matIconButton (click)="editRow(record)" title="Edit"><mat-icon>edit</mat-icon></button>
+                            <button matIconButton (click)="editRow(record)" title="Edit" aria-label="Edit"><mat-icon>edit</mat-icon></button>
                         }
                         @if (isDeleted(record)) {
-                            <button matIconButton (click)="unDeleteRow(record)" title="Undelete"><mat-icon>restore_from_trash</mat-icon></button>
+                            <button matIconButton (click)="unDeleteRow(record)" title="Undelete" aria-label="Undelete"><mat-icon>restore_from_trash</mat-icon></button>
                         } @else if (canDelete()) {
-                            <button matIconButton (click)="deleteRow(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+                            <button matIconButton (click)="deleteRow(record)" title="Delete" aria-label="Delete"><mat-icon>delete</mat-icon></button>
                         }
                         @if (!isInserted(record)) {
-                            @for (action of getActions(true); track action.action) {
+                            @for (action of recordActions(); track action.action) {
                                 @if (canExecuteAction(action)) {
                                     <button matIconButton type="button"
                                             [title]="action.caption"
+                                            [attr.aria-label]="action.caption"
                                             (click)="executeAction(action, record)">
                                         <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>
                                     </button>

package/src/component/table/table_detail.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, effect, inject, input, linkedSignal, OnInit, output, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, linkedSignal, output, signal, ViewEncapsulation } from "@angular/core";
 import { DynamicField } from "../form/form_field";
 import { MatButtonModule } from "@angular/material/button";
 import { BaseForm } from "../abstract/base_form";
@@ -19,11 +19,11 @@ import { OpCode } from "../../model/common";
         MatIconModule,
     ],
 })
-export class TableDetail extends BaseForm implements OnInit {
+export class TableDetail extends BaseForm {
     readonly tableNameInput = input('', { alias: 'tableName' });
-    readonly recordsInput   = input<any[]>([], { alias: 'records' });
+    readonly recordsInput   = input<Record<string, unknown>[]>([], { alias: 'records' });
     readonly parentTableName = input('');
-    readonly parentRecord = input<any>({});
+    readonly parentRecord = input<Record<string, unknown>>({});
     /** When true, the parent view is in read-only mode — disable all child row editing. */
     readonly parentReadOnly = input(false);
     /** Fires after any grid mutation (add/edit/delete/undelete/cancel) so a parent
@@ -32,19 +32,34 @@ export class TableDetail extends BaseForm implements OnInit {
 
     override readonly tableName = linkedSignal<string, string>({ source: () => this.tableNameInput(), computation: (v, p) => v || p?.value || '' });
 
-    records: any[] = [];
-    editingRecord: any = null;
-    originalRecord: any = null;
-    displayedColumns: string[] = [];
-    fkColumns: string[] = [];
+    // The parent owns the rows array (TableEdit saves it verbatim), so mutations
+    // happen in place; refresh() snapshots them for the template.
+    records: Record<string, unknown>[] = [];
+    readonly visibleRecords = signal<Record<string, unknown>[]>([]);
+
+    readonly editingRecord = signal<Record<string, unknown> | null>(null);
+    private originalRecord: Record<string, unknown> | null = null;
+
+    readonly displayedColumns = computed(() => {
+        this.visibleRecords();
+        return this.getDisplayedColumns(this.records);
+    });
+
+    readonly fkColumns = computed(() =>
+        this.getForeignKeyConfig(this.parentTableName())?.fk?.Columns?.map((col) => col.PascalName) ?? []);
 
     private readonly dialog = inject(MatDialog);
 
     constructor() {
         super();
-        // records is a writable array (push/splice in event handlers); keep it in sync with the input
-        // via effect rather than linkedSignal so mutations work on the consumer's array reference.
-        effect(() => { this.records = this.recordsInput(); });
+        effect(() => {
+            this.records = this.recordsInput() ?? [];
+            this.refresh();
+        });
+    }
+
+    private refresh() {
+        this.visibleRecords.set([...this.records]);
     }
 
     /**
@@ -64,21 +79,11 @@ export class TableDetail extends BaseForm implements OnInit {
     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));
+        return (this.fkColumns().includes(fieldName) || super.isReadOnly(fieldName));
     }
 
-    openEditDialog(record: any, isNew: boolean, readOnlyColumns: string[]) {
+    openEditDialog(record: Record<string, unknown>, isNew: boolean, readOnlyColumns: string[]) {
         const dialogRef = this.dialog.open(TableForm, {
             width: this.dialogWidth,
             disableClose: true,
@@ -91,46 +96,59 @@ export class TableDetail extends BaseForm implements OnInit {
                 } else {
                     Object.assign(record, result);
                 }
+                this.refresh();
                 this.changed.emit();
             }
         });
     }
 
+    /** Finish an in-progress inline edit before starting another (its values are
+     * already in the row; leaving it un-finalized would drop them on save). */
+    private finalizeInlineEdit() {
+        if (this.editingRecord()) this.saveRow();
+    }
+
     addRecord() {
+        this.finalizeInlineEdit();
         const newRecord = this.emptyRecord();
         newRecord[this.config.opField] = OpCode.Insert;
         this.initializeForeignKeys(newRecord, this.parentTableName(), this.parentRecord());
 
-        if (this.displayedColumns.length > 6) {
-            this.openEditDialog(newRecord, true, this.fkColumns);
+        if (this.displayedColumns().length > 6) {
+            this.openEditDialog(newRecord, true, this.fkColumns());
         } else {
             this.records.push(newRecord);
-            this.isNew = true;
+            this.isNew.set(true);
             this.originalRecord = null;
-            this.editingRecord = newRecord;
+            this.editingRecord.set(newRecord);
+            this.refresh();
         }
     }
 
-    editRow(record: any) {
-        if (this.displayedColumns.length > 6) {
-            this.openEditDialog(record, false, this.fkColumns);
+    editRow(record: Record<string, unknown>) {
+        if (this.displayedColumns().length > 6) {
+            this.openEditDialog(record, false, this.fkColumns());
         } else {
-            this.editingRecord = record;
-            this.isNew = record[this.config.opField] === OpCode.Insert;
+            this.finalizeInlineEdit();
+            this.isNew.set(record[this.config.opField] === OpCode.Insert);
             this.originalRecord = {...record};
             this.formatRecordTimeStamp(record);
+            this.editingRecord.set(record);
+            this.refresh();
         }
     }
 
     saveRow() {
-        this.readyToSave(this.editingRecord);
-        this.editingRecord = null;
+        const editing = this.editingRecord();
+        if (editing) this.readyToSave(editing, this.originalRecord);
+        this.editingRecord.set(null);
         this.originalRecord = null;
-        this.isNew = false;
+        this.isNew.set(false);
+        this.refresh();
         this.changed.emit();
     }
 
-    cancelRow(record: any) {
+    cancelRow(record: Record<string, unknown>) {
         if (this.originalRecord) {
             Object.assign(record, this.originalRecord);
         } else {
@@ -139,13 +157,14 @@ export class TableDetail extends BaseForm implements OnInit {
                 this.records.splice(index, 1);
             }
         }
-        this.editingRecord = null;
+        this.editingRecord.set(null);
         this.originalRecord = null;
-        this.isNew = false;
+        this.isNew.set(false);
+        this.refresh();
         this.changed.emit();
     }
 
-    deleteRow(record: any) {
+    deleteRow(record: Record<string, unknown>) {
         if (record[this.config.opField] === OpCode.Insert) {
             const index = this.records.indexOf(record);
             if (index > -1) {
@@ -154,13 +173,15 @@ export class TableDetail extends BaseForm implements OnInit {
         } else {
             record[this.config.opField] = OpCode.Delete;
         }
+        this.refresh();
         this.changed.emit();
     }
 
-    unDeleteRow(record: any) {
+    unDeleteRow(record: Record<string, unknown>) {
         if (record[this.config.opField] === OpCode.Delete) {
             record[this.config.opField] = OpCode.Update;
         }
+        this.refresh();
         this.changed.emit();
     }
 }

package/src/component/table/table_edit.html

@@ -1,8 +1,8 @@
 <h1 class="mat-h1 table-edit-title">
     <span class="table-edit-title-text">
-        @if (title) {
-            {{ title }}
-        } @else if (isNew) {
+        @if (title()) {
+            {{ title() }}
+        } @else if (isNew()) {
             New {{ getCaption() }} Record
         } @else {
             {{ getCaption() }} Details
@@ -18,7 +18,7 @@
 
 <div class="edit-container">
     <div class="actions-bar">
-        @if (isReadOnlyMode) {
+        @if (isReadOnlyMode()) {
             @if (canUpdate()) {
                 <button matButton="elevated" class="primary" (click)="onEdit()">Edit</button>
             }
@@ -28,7 +28,7 @@
             @if (canDelete()) {
                 <button matButton class="warn" (click)="onDelete()">Delete</button>
             }
-            @for (action of getActions(true); track action.action) {
+            @for (action of recordActions(); track action.action) {
                 @if (canExecuteAction(action)) {
                     <button matButton="outlined" type="button"
                             [title]="action.caption"
@@ -44,20 +44,24 @@
         }
     </div>
 
-    <sail-record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></sail-record-form>
+    @if (saveError()) {
+        <p class="table-edit-error" role="alert">{{ saveError() }}</p>
+    }
+
+    <sail-record-form [tableName]="tableName()" [record]="editableRecord()" (recordChange)="editableRecord.set($event)" [isReadOnly]="isReadOnlyFn"></sail-record-form>
 
-    @if (tabCount > 0) {
+    @if (tabFields().length > 0) {
         <mat-tab-group>
-        @for (key of tabFields; track key) {
+        @for (key of tabFields(); track key) {
             @if (cacheService.canRead(getTableName(key))) {
                 <mat-tab [label]="key">
                     <div class="tab-content">
                         <sail-table-detail
-                           [records]="editableRecord[key]"
+                           [records]="childRecords(key)"
                            [tableName]="getTableName(key)"
                            [parentTableName]="tableName()"
-                           [parentRecord]="editableRecord"
-                           [parentReadOnly]="isReadOnlyMode">
+                           [parentRecord]="editableRecord()"
+                           [parentReadOnly]="isReadOnlyMode()">
                         </sail-table-detail>
                     </div>
                 </mat-tab>