@nauticana/sail 1.1.8 → 1.1.10

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>

package/src/component/login/consent_gate.ts

@@ -1,5 +1,5 @@
 import {
-  ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation,
+  ChangeDetectionStrategy, Component, DestroyRef, OnInit, ViewEncapsulation,
   computed, effect, inject, input, output, signal,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -28,7 +28,7 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
   encapsulation: ViewEncapsulation.None,
   imports: [ReactiveFormsModule, MatCheckboxModule],
 })
-export class ConsentGateComponent {
+export class ConsentGateComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
   protected readonly guiConfig: SailGuiConfig =
     inject(SAIL_GUI_CONFIG, { optional: true }) ?? DEFAULT_CONFIG;
@@ -74,7 +74,9 @@ export class ConsentGateComponent {
   }));
 
   constructor() {
-    // Register optional consent controls dynamically when the input changes.
+    // Register optional consent controls when the input changes. add/removeControl
+    // fire valueChanges, so the subscriptions below emit — never emit from an
+    // effect: its microtask scheduling is unreliable for outputs in AOT builds.
     effect(() => {
       const options = this.optionalConsents();
       for (const opt of options) {
@@ -85,33 +87,24 @@ export class ConsentGateComponent {
           );
         }
       }
-      // Drop controls for options that were removed.
       for (const key of Object.keys(this.form.controls)) {
         if (key === ConsentType.PRIVACY_POLICY || key === ConsentType.CROSS_BORDER) continue;
         if (!options.some((o) => o.id === key)) this.form.removeControl(key);
       }
-      this.formValue.set(this.form.getRawValue());
-      this.formValid.set(this.form.valid);
-      this.consentStateChange.emit(this.state());
     });
 
-    // Emit on every form change. We emit explicitly here rather than via a
-    // standalone `effect(() => emit(state()))` because output emission
-    // from inside an effect is unreliable in production AOT builds: the
-    // effect's scheduler runs in a microtask outside the user-event CD
-    // tick, and parent OnPush views can miss the propagated signal write.
-    // Emitting inside the RxJS subscription puts the emission on the
-    // synchronous click-handler path, where Angular's zone-aware CD
-    // picks up the parent's `consents` signal write deterministically.
-    this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-      this.formValue.set(this.form.getRawValue());
-      this.formValid.set(this.form.valid);
-      this.consentStateChange.emit(this.state());
-    });
-    this.form.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-      this.formValid.set(this.form.valid);
-      this.consentStateChange.emit(this.state());
-    });
+    this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.syncAndEmit());
+    this.form.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.syncAndEmit());
+  }
+
+  ngOnInit() {
+    this.syncAndEmit();
+  }
+
+  private syncAndEmit() {
+    this.formValue.set(this.form.getRawValue());
+    this.formValid.set(this.form.valid);
+    this.consentStateChange.emit(this.state());
   }
 
   protected readonly ConsentType = ConsentType;

package/src/component/login/login_component.html

@@ -15,14 +15,17 @@
     <form [formGroup]="loginForm" (ngSubmit)="login()" 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>Password</mat-label>
-        <input matInput type="password" formControlName="password" required>
+        <input matInput type="password" formControlName="password" autocomplete="current-password" required>
       </mat-form-field>
-      <button matButton="elevated" class="primary" type="submit" [disabled]="!loginForm.valid">
-        Login
+      @if (errorMessage()) {
+        <p class="auth-error" role="alert">{{ errorMessage() }}</p>
+      }
+      <button matButton="elevated" class="primary" type="submit" [disabled]="!loginForm.valid || loading()">
+        {{ loading() ? 'Signing in…' : 'Login' }}
       </button>
     </form>
     @if (showSocialLogin()) {

package/src/component/login/login_component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';
+import { BaseAsync } from '../abstract/base_async';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -23,7 +24,7 @@ import { SocialLoginComponent } from './social_login';
     SocialLoginComponent,
   ],
 })
-export class LoginComponent {
+export class LoginComponent extends BaseAsync {
   private auth = inject(BaseAuthService);
   protected fb = inject(FormBuilder);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
@@ -52,10 +53,13 @@ export class LoginComponent {
   });
 
   login(): void {
-    if (this.loginForm.valid) {
-      const { username, password } = this.loginForm.value;
-      this.auth.login(username!, password!);
-    }
+    if (!this.loginForm.valid) return;
+    const { username, password } = this.loginForm.value;
+    this.run(
+      this.auth.login(username!, password!),
+      () => {},
+      'Invalid username or password.',
+    );
   }
 
   /**

package/src/component/login/otp_input.html

@@ -4,17 +4,25 @@
     <p class="otp-contact">{{ contact() }}</p>
   }
 
-  <div class="otp-digits" role="group" aria-label="Verification code">
+  <input class="otp-input-field"
+         type="text"
+         inputmode="numeric"
+         autocomplete="one-time-code"
+         [attr.maxlength]="length()"
+         [value]="code()"
+         (input)="onCodeInput($event)"
+         [disabled]="disabled()"
+         aria-label="Verification code">
+
+  <div class="otp-digits" aria-hidden="true">
     @for (digit of digits(); track $index) {
-      <div class="otp-digit"
-           [class.active]="$index === currentIndex()"
-           [attr.aria-label]="'Digit ' + ($index + 1)">
+      <div class="otp-digit" [class.active]="$index === currentIndex()">
         {{ digit }}
       </div>
     }
   </div>
 
-  <p class="otp-resend">
+  <p class="otp-resend" aria-live="polite">
     @if (canResend()) {
       <button matButton class="resend-btn" type="button" (click)="onResend()">Resend code</button>
     } @else {

package/src/component/login/otp_input.ts

@@ -1,12 +1,14 @@
 import {
-  ChangeDetectionStrategy, Component, DestroyRef, OnInit, ViewEncapsulation,
+  ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation,
   computed, effect, inject, input, output, signal,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
 /**
- * OtpInput — pure-presentational numeric OTP keypad with resend countdown.
+ * OtpInput — numeric OTP entry with resend countdown. A real (styleable)
+ * input drives the digit boxes, so typing, paste, and one-time-code
+ * autofill all work; the keypad is a touch-friendly supplement.
  *
  * Owns no service layer. The parent component sends the OTP (via
  * BaseAuthService.sendOtp) and subscribes to `codeComplete` / `resend` to
@@ -19,17 +21,14 @@ import { MatIconModule } from '@angular/material/icon';
   encapsulation: ViewEncapsulation.None,
   imports: [MatButtonModule, MatIconModule],
 })
-export class OtpInputComponent implements OnInit {
+export class OtpInputComponent {
   private readonly destroyRef = inject(DestroyRef);
 
   readonly length = input(6);
   readonly contact = input('');
   // Fallback only. Consumers should pass the value returned by
-  // /public/otp/send in `resendCountdownSec` on the response — that is
-  // the authoritative value (sourced from the keel server's
-  // --otp_token_ttl_seconds flag and matches the lifetime of the OTP
-  // code itself). 300s is the legacy default, kept so existing callers
-  // without the new field don't break.
+  // /public/otp/send in `resendCountdownSec` — the authoritative TTL from
+  // keel's --otp_token_ttl_seconds. The countdown restarts when it changes.
   readonly resendCountdownSec = input(300);
   readonly disabled = input(false);
 
@@ -48,48 +47,56 @@ export class OtpInputComponent implements OnInit {
     return idx === -1 ? d.length - 1 : idx;
   });
 
+  readonly code = computed(() => this.digits().join(''));
+
   readonly keypadKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'back'] as const;
 
   constructor() {
-    // Reset the digits array whenever `length` input changes.
     effect(() => { this.digits.set(Array(this.length()).fill('')); });
+    // Restarts when the parent binds the authoritative TTL (arrives async).
+    effect(() => {
+      const ttl = this.resendCountdownSec();
+      this.startCountdown(ttl);
+    });
     this.destroyRef.onDestroy(() => this.clearTimer());
   }
 
-  ngOnInit() {
-    this.startCountdown();
+  onCodeInput(event: Event) {
+    if (this.disabled()) return;
+    const target = event.target as HTMLInputElement;
+    const raw = target.value.replace(/\D/g, '').slice(0, this.length());
+    target.value = raw;
+    this.setCode(raw);
+  }
+
+  private setCode(raw: string) {
+    const d = Array<string>(this.length()).fill('');
+    for (let i = 0; i < raw.length; i++) d[i] = raw[i];
+    this.digits.set(d);
+    if (raw.length === this.length()) this.codeComplete.emit(raw);
   }
 
   onKeyPress(key: string) {
     if (this.disabled()) return;
-    const d = [...this.digits()];
-    const idx = d.findIndex((v) => v === '');
-    if (idx === -1) return;
-    d[idx] = key;
-    this.digits.set(d);
-    if (idx === this.length() - 1) this.codeComplete.emit(d.join(''));
+    const current = this.code();
+    if (current.length >= this.length()) return;
+    this.setCode(current + key);
   }
 
   onBackspace() {
     if (this.disabled()) return;
-    const d = [...this.digits()];
-    let idx = d.findIndex((v) => v === '');
-    if (idx === -1) idx = d.length;
-    if (idx > 0) {
-      d[idx - 1] = '';
-      this.digits.set(d);
-    }
+    this.setCode(this.code().slice(0, -1));
   }
 
   onResend() {
     this.resend.emit();
     this.digits.set(Array(this.length()).fill(''));
-    this.startCountdown();
+    this.startCountdown(this.resendCountdownSec());
   }
 
-  private startCountdown() {
+  private startCountdown(seconds: number) {
     this.clearTimer();
-    this.countdown.set(this.resendCountdownSec());
+    this.countdown.set(seconds);
     this.canResend.set(false);
     this.countdownTimer = setInterval(() => {
       const next = this.countdown() - 1;

package/src/component/login/register_component.html

@@ -13,34 +13,51 @@
       <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>First Name</mat-label>
-          <input matInput type="text" formControlName="FirstName" required>
+          <input matInput type="text" formControlName="FirstName" autocomplete="given-name" required>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Last Name</mat-label>
-          <input matInput type="text" formControlName="LastName" required>
+          <input matInput type="text" formControlName="LastName" autocomplete="family-name" required>
         </mat-form-field>
       </div>
 
       <mat-form-field appearance="outline">
         <mat-label>Email</mat-label>
-        <input matInput type="email" formControlName="Email" required>
+        <input matInput type="email" formControlName="Email" autocomplete="email" required>
+        @if (registerForm.controls.Email.hasError('email')) {
+          <mat-error>Enter a valid email address.</mat-error>
+        }
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Username</mat-label>
+        <input matInput type="text" formControlName="UserName" autocomplete="username" required>
       </mat-form-field>
 
       <div class="form-row">
         <mat-form-field appearance="outline">
-          <mat-label>Username</mat-label>
-          <input matInput type="text" formControlName="UserName" required>
+          <mat-label>Password</mat-label>
+          <input matInput type="password" formControlName="Password" autocomplete="new-password" required>
+          @if (registerForm.controls.Password.hasError('minlength')) {
+            <mat-error>At least 6 characters.</mat-error>
+          }
         </mat-form-field>
 
         <mat-form-field appearance="outline">
-          <mat-label>Password</mat-label>
-          <input matInput type="password" formControlName="Password" required>
+          <mat-label>Confirm Password</mat-label>
+          <input matInput type="password" formControlName="ConfirmPassword" autocomplete="new-password" required>
         </mat-form-field>
       </div>
+      @if (registerForm.hasError('passwordMismatch') && registerForm.controls.ConfirmPassword.touched) {
+        <div class="geocode-status geocode-error" role="alert">Passwords do not match.</div>
+      }
 
       <div class="auth-section-label">Plan</div>
 
+      @if (plansError()) {
+        <div class="geocode-status geocode-error" role="alert">{{ plansError() }}</div>
+      }
       <mat-form-field appearance="outline">
         <mat-label>Subscription plan</mat-label>
         <mat-select formControlName="PlanID" required>
@@ -62,12 +79,12 @@
       <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Phone</mat-label>
-          <input matInput type="tel" formControlName="Phone" required>
+          <input matInput type="tel" formControlName="Phone" autocomplete="tel" required>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Website URL</mat-label>
-          <input matInput type="url" formControlName="DomainURL" required>
+          <input matInput type="url" formControlName="DomainURL" autocomplete="url" required>
         </mat-form-field>
       </div>
 
@@ -75,30 +92,30 @@
 
       <mat-form-field appearance="outline">
         <mat-label>Address (Street and Number)</mat-label>
-        <input matInput type="text" formControlName="Address" required>
+        <input matInput type="text" formControlName="Address" autocomplete="address-line1" required>
       </mat-form-field>
 
       <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>City</mat-label>
-          <input matInput type="text" formControlName="City" required>
+          <input matInput type="text" formControlName="City" autocomplete="address-level2" required>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>State</mat-label>
-          <input matInput type="text" formControlName="State" required>
+          <input matInput type="text" formControlName="State" autocomplete="address-level1" required>
         </mat-form-field>
       </div>
 
       <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Zipcode</mat-label>
-          <input matInput type="text" formControlName="Zipcode" required>
+          <input matInput type="text" formControlName="Zipcode" autocomplete="postal-code" required>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Country</mat-label>
-          <input matInput type="text" formControlName="Country" required>
+          <input matInput type="text" formControlName="Country" autocomplete="country-name" required>
         </mat-form-field>
       </div>