@nauticana/sail 0.8.0 → 0.8.1

package/src/component/form/form_record.html

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

package/src/component/form/form_record.ts

@@ -4,7 +4,7 @@ import { BaseAuthService } from "../../service/auth.service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
 
 @Component({
-    selector: 'record-form',
+    selector: 'sail-record-form',
     templateUrl: './form_record.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,

package/src/component/form/form_table.html

@@ -11,7 +11,7 @@
     </button>
 </h1>
 <div mat-dialog-content>
-    <record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></record-form>
+    <sail-record-form [tableName]="tableName()" [record]="editableRecord" [isReadOnly]="isReadOnlyBound"></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

@@ -14,7 +14,7 @@ interface TableFormDialogData {
 }
 
 @Component({
-    selector: 'table-form',
+    selector: 'sail-table-form',
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     templateUrl: './form_table.html',

package/src/component/login/account_deletion.ts

@@ -24,7 +24,7 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
  * `/login/local`).
  */
 @Component({
-  selector: 'app-account-deletion',
+  selector: 'sail-account-deletion',
   templateUrl: './account_deletion.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/login/chpass_component.ts

@@ -7,9 +7,10 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-chpass',
+  selector: 'sail-chpass',
   templateUrl: './chpass_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -22,15 +23,13 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
     RouterLink,
   ],
 })
-export class ChpassComponent {
+export class ChpassComponent extends BaseAsync {
   private auth = inject(BaseAuthService);
   private fb = inject(FormBuilder);
   private router = inject(Router);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
   forgotPassword = signal(false);
-  errorMessage = signal('');
-  successMessage = signal('');
 
   chpassForm = this.fb.group({
     username: ['', Validators.required],
@@ -62,9 +61,6 @@ export class ChpassComponent {
   }
 
   changePassword(): void {
-    this.errorMessage.set('');
-    this.successMessage.set('');
-
     if (this.chpassForm.invalid) return;
 
     const { username, old_password, new_password, confirm_password } = this.chpassForm.value;
@@ -74,23 +70,22 @@ export class ChpassComponent {
       return;
     }
 
-    const request = this.forgotPassword()
+    const isForgot = this.forgotPassword();
+    const request = isForgot
       ? this.auth.forgotPassword(username!)
       : this.auth.chpass(username!, new_password!, old_password!);
 
-    request.subscribe({
-      next: () => {
-        if (this.forgotPassword()) {
+    this.run(
+      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.');
         }
       },
-      error: (err) => {
-        const msg = typeof err.error === 'string' ? err.error : err.error?.message;
-        this.errorMessage.set(msg || 'Password change failed. Please try again.');
-      },
-    });
+      'Password change failed. Please try again.',
+    );
   }
 }

package/src/component/login/confirm_chpass_component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, signal, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -6,9 +6,10 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-confirm-chpass',
+  selector: 'sail-confirm-chpass',
   templateUrl: './confirm_chpass_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -20,16 +21,13 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
     RouterLink,
   ],
 })
-export class ConfirmChpassComponent implements OnInit {
+export class ConfirmChpassComponent extends BaseAsync implements OnInit {
   private auth = inject(BaseAuthService);
   private fb = inject(FormBuilder);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
-  errorMessage = signal('');
-  successMessage = signal('');
-
   confirmForm = this.fb.group({
     username: ['', Validators.required],
     code: ['', Validators.required],
@@ -45,9 +43,6 @@ export class ConfirmChpassComponent implements OnInit {
   }
 
   confirm(): void {
-    this.errorMessage.set('');
-    this.successMessage.set('');
-
     if (this.confirmForm.invalid) return;
 
     const { username, code, new_password, confirm_password } = this.confirmForm.value;
@@ -57,14 +52,13 @@ export class ConfirmChpassComponent implements OnInit {
       return;
     }
 
-    this.auth.confirmChpass(username!, code!, new_password!).subscribe({
-      next: () => {
+    this.run(
+      this.auth.confirmChpass(username!, code!, new_password!),
+      () => {
         this.successMessage.set('Password changed successfully. Redirecting to login...');
         this.router.navigate(['/login/local']);
       },
-      error: (err) => {
-        this.errorMessage.set(err.error?.message ?? 'Confirmation failed. Please try again.');
-      },
-    });
+      'Confirmation failed. Please try again.',
+    );
   }
 }

package/src/component/login/confirm_register_component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, signal, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -6,9 +6,10 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-confirm-register',
+  selector: 'sail-confirm-register',
   templateUrl: './confirm_register_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -20,16 +21,13 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
     RouterLink,
   ],
 })
-export class ConfirmRegisterComponent implements OnInit {
+export class ConfirmRegisterComponent extends BaseAsync implements OnInit {
   private auth = inject(BaseAuthService);
   private fb = inject(FormBuilder);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
-  errorMessage = signal('');
-  successMessage = signal('');
-
   confirmForm = this.fb.group({
     email: ['', [Validators.required, Validators.email]],
     code: ['', Validators.required],
@@ -43,15 +41,13 @@ export class ConfirmRegisterComponent implements OnInit {
   }
 
   confirm(): void {
-    this.errorMessage.set('');
-    this.successMessage.set('');
-
     if (this.confirmForm.invalid) return;
 
     const { email, code } = this.confirmForm.value;
 
-    this.auth.confirmRegister(email!, code!).subscribe({
-      next: (resp) => {
+    this.run(
+      this.auth.confirmRegister(email!, code!),
+      (resp) => {
         this.successMessage.set('Registration confirmed.');
         if (resp?.paymentRequired && resp.paymentUrl) {
           // Paid plan: go straight to payment. Subscription is 'P' until paid.
@@ -63,9 +59,7 @@ export class ConfirmRegisterComponent implements OnInit {
         // Free plan: land on login.
         this.router.navigate(['/login/local']);
       },
-      error: (err) => {
-        this.errorMessage.set(err.error?.message ?? 'Confirmation failed. Please try again.');
-      },
-    });
+      'Confirmation failed. Please try again.',
+    );
   }
 }

package/src/component/login/consent_gate.ts

@@ -22,7 +22,7 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
  * See keel/README.md → "Consent Capture" for the backend-side contract.
  */
 @Component({
-  selector: 'app-consent-gate',
+  selector: 'sail-consent-gate',
   templateUrl: './consent_gate.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/login/login_component.html

@@ -24,7 +24,7 @@
     </form>
     @if (showSocialLogin()) {
       <hr class="auth-divider">
-      <app-social-login
+      <sail-social-login
         [providers]="enabledSocialProviders()"
         (loginSuccess)="onSocialSuccess($event)"
         (loginError)="onSocialError($event)" />

package/src/component/login/login_component.ts

@@ -10,7 +10,7 @@ import { LoginResponseSocial, SocialProvider } from '../../model/auth';
 import { SocialLoginComponent } from './social_login';
 
 @Component({
-  selector: 'app-login',
+  selector: 'sail-login',
   templateUrl: './login_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/login/otp_input.ts

@@ -13,7 +13,7 @@ import { MatIconModule } from '@angular/material/icon';
  * call verifyOtp / resendOtp. See README "Phone / email OTP login".
  */
 @Component({
-  selector: 'app-otp-input',
+  selector: 'sail-otp-input',
   templateUrl: './otp_input.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/login/register_component.ts

@@ -15,7 +15,7 @@ import { PartnerRegistration, PublicPlan } from '../../model/appdata';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
 
 @Component({
-  selector: 'app-register',
+  selector: 'sail-register',
   templateUrl: './register_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/login/social_login.ts

@@ -27,7 +27,7 @@ const APPLE_URL = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/
  * without config are hidden (with a console.warn for diagnostics).
  */
 @Component({
-  selector: 'app-social-login',
+  selector: 'sail-social-login',
   templateUrl: './social_login.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/navigation/navigation.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { RouterLink, RouterOutlet } from "@angular/router";
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -14,7 +14,7 @@ import { BaseAuthService } from "../../service/auth.service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
 
 @Component({
-  selector: 'app-navigation',
+  selector: 'sail-navigation',
   templateUrl: './navigation.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -29,16 +29,20 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
     MatExpansionModule,
   ],
 })
-export class Navigation implements OnInit {
+export class Navigation {
   private readonly authService = inject(BaseAuthService);
   private readonly breakpointObserver = inject(BreakpointObserver);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
-  private readonly allMenuItems = signal<ApplicationMenu[]>([]);
+  // Restore the stored JWT before the menu stream fires so `canAccess()` checks
+  // resolve against the right user. Done at field-init time (runs in injection
+  // context) rather than ngOnInit, so the toSignal below can read from it.
+  private readonly _sessionLoaded = (this.authService.loadStoredSession(), true);
+
+  private readonly allMenuItems = toSignal(this.authService.getMenus(), { initialValue: [] as ApplicationMenu[] });
 
   readonly menuItems = computed(() => {
-    const menus = this.allMenuItems();
-    return menus
+    return this.allMenuItems()
       .map(menu => ({
         ...menu,
         ApplicationMenuItems: (menu.ApplicationMenuItems ?? [])
@@ -54,11 +58,6 @@ export class Navigation implements OnInit {
 
   readonly isLoggedIn = this.authService.isLoggedIn;
 
-  ngOnInit() {
-    this.authService.loadStoredSession();
-    this.authService.getMenus().subscribe((menuItems: ApplicationMenu[]) => { this.allMenuItems.set(menuItems); });
-  }
-
   logout() {
     this.authService.logout();
   }

package/src/component/security/trusted_devices.ts

@@ -10,7 +10,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
 
 @Component({
-  selector: 'app-trusted-devices',
+  selector: 'sail-trusted-devices',
   templateUrl: './trusted_devices.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/security/twofactor_setup.ts

@@ -5,9 +5,10 @@ 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';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-twofactor-setup',
+  selector: 'sail-twofactor-setup',
   templateUrl: './twofactor_setup.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -19,7 +20,7 @@ import { RouterLink } from '@angular/router';
     RouterLink,
   ],
 })
-export class TwoFactorSetupComponent {
+export class TwoFactorSetupComponent extends BaseAsync {
   private readonly auth = inject(BaseAuthService);
   private readonly fb = inject(FormBuilder);
 
@@ -27,8 +28,6 @@ export class TwoFactorSetupComponent {
   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
@@ -48,20 +47,18 @@ export class TwoFactorSetupComponent {
 
   startSetup() {
     if (this.initForm.invalid) return;
-    this.errorMessage.set('');
     const password = this.initForm.value.password!;
-    this.auth.setup2FA({ password }).subscribe({
-      next: (res) => {
+    this.run(
+      this.auth.setup2FA({ password }),
+      (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.');
-      },
-    });
+      '2FA setup failed.',
+    );
   }
 
   proceedToVerify() {
@@ -70,11 +67,10 @@ export class TwoFactorSetupComponent {
 
   confirmSetup() {
     if (this.verifyForm.invalid) return;
-    this.errorMessage.set('');
-
     const { code } = this.verifyForm.value;
-    this.auth.verify2FA({ code: code! }).subscribe({
-      next: (res) => {
+    this.run(
+      this.auth.verify2FA({ code: code! }),
+      (res) => {
         if (res.valid) {
           this.successMessage.set('Two-factor authentication enabled.');
           this.step.set('done');
@@ -82,25 +78,21 @@ export class TwoFactorSetupComponent {
           this.errorMessage.set('Invalid code. Please try again.');
         }
       },
-      error: (err) => {
-        this.errorMessage.set(err.error?.message ?? 'Verification failed.');
-      },
-    });
+      '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.run(
+      this.auth.disable2FA(password!, code!),
+      () => {
         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.');
-      },
-    });
+      'Failed to disable 2FA.',
+    );
   }
 }

package/src/component/security/twofactor_verify.ts

@@ -7,9 +7,10 @@ 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';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-twofactor-verify',
+  selector: 'sail-twofactor-verify',
   templateUrl: './twofactor_verify.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -22,13 +23,12 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
     RouterLink,
   ],
 })
-export class TwoFactorVerifyComponent {
+export class TwoFactorVerifyComponent extends BaseAsync {
   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)]],
@@ -38,18 +38,17 @@ export class TwoFactorVerifyComponent {
   toggleBackupCode() {
     this.useBackupCode.update(v => !v);
     this.verifyForm.controls.code.reset();
-    this.errorMessage.set('');
+    this.clearMessages();
   }
 
   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) => {
+      this.run(
+        this.auth.verifyBackupCode(code!),
+        (res) => {
           if (res.valid && res.token) {
             localStorage.removeItem('loginToken');
             this.auth.token = res.token;
@@ -61,11 +60,10 @@ export class TwoFactorVerifyComponent {
             this.errorMessage.set('Invalid backup code.');
           }
         },
-        error: (err) => {
-          this.errorMessage.set(err.error?.message ?? 'Backup code verification failed.');
-        },
-      });
+        'Backup code verification failed.',
+      );
     } else {
+      this.clearMessages();
       this.auth.verify2FALogin(
         code!,
         trustDevice ?? false,

package/src/component/table/table_detail.html

@@ -26,14 +26,14 @@
     </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'">
+            <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) {
                         <td>
                             @if (isReadOnly(col)) {
                                 {{ record[col] }}
                             } @else {
-                                <dynamic-field [tableName]="tableName()" [value]="record[col]" [field]="col" (valueChange)="record[col]=$event" subscriptSizing="dynamic"></dynamic-field>
+                                <sail-dynamic-field [tableName]="tableName()" [value]="record[col]" [field]="col" (valueChange)="record[col]=$event" subscriptSizing="dynamic"></sail-dynamic-field>
                             }
                         </td>
                     }
@@ -49,12 +49,12 @@
                         @if (canUpdate()) {
                             <button matIconButton (click)="editRow(record)" title="Edit"><mat-icon>edit</mat-icon></button>
                         }
-                        @if (record[config.opField] === 'D') {
+                        @if (isDeleted(record)) {
                             <button matIconButton (click)="unDeleteRow(record)" title="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>
                         }
-                        @if (record[config.opField] !== 'I') {
+                        @if (!isInserted(record)) {
                             @for (action of getActions(true); track action.action) {
                                 @if (canExecuteAction(action)) {
                                     <button matIconButton type="button"