@nauticana/sail 1.1.9 → 1.1.11

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>
 

package/src/component/login/register_component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, inject, effect, DestroyRef, signal, ViewEncapsulation, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, DestroyRef, signal, ViewEncapsulation, OnInit } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { BaseAuthService } from '../../service/auth.service';
 import { BillingService } from '../../service/billing.service';
@@ -9,11 +9,20 @@ import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSelectModule } from '@angular/material/select';
-import { firstValueFrom, map, merge } from 'rxjs';
+import { catchError, debounceTime, map, merge, of, switchMap, tap } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { PartnerRegistration, PublicPlan } from '../../model/appdata';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
 import { fromPriceLabel } from '../../util/money';
+import { errorDetail } from '../../util/errors';
+
+const passwordsMatch = (group: AbstractControl): ValidationErrors | null =>
+  group.get('Password')?.value === group.get('ConfirmPassword')?.value ? null : { passwordMismatch: true };
+
+interface GeocodingResponse {
+  results: { geometry: { location: { lat: number; lng: number } } }[];
+  status: string;
+}
 
 @Component({
   selector: 'sail-register',
@@ -43,14 +52,16 @@ export class RegisterComponent implements OnInit {
   protected readonly geocodeEnabled = !!this.guiConfig.googleMapsApiKey;
 
   readonly registerError = signal('');
+  readonly plansError = signal('');
   readonly plans = signal<PublicPlan[]>([]);
 
   readonly registerForm = this.fb.group({
     FirstName: ['', Validators.required],
     LastName: ['', Validators.required],
     UserName: ['', Validators.required],
-    Email: ['', Validators.required],
-    Password: ['', Validators.required],
+    Email: ['', [Validators.required, Validators.email]],
+    Password: ['', [Validators.required, Validators.minLength(6)]],
+    ConfirmPassword: ['', Validators.required],
     PartnerCaption: ['', Validators.required],
     Address: ['', Validators.required],
     City: ['', Validators.required],
@@ -63,7 +74,7 @@ export class RegisterComponent implements OnInit {
     Latitude: [null as number | null],
     Longitude: [null as number | null],
     consentLocation: [false, this.geocodeEnabled ? Validators.requiredTrue : []],
-  });
+  }, { validators: passwordsMatch });
 
   readonly geocodeStatus = signal<'idle' | 'loading' | 'success' | 'error'>('idle');
   readonly geocodeError = signal('');
@@ -89,106 +100,86 @@ export class RegisterComponent implements OnInit {
   ngOnInit() {
     this.billing.listPlans().subscribe({
       next: (list) => this.plans.set(list ?? []),
-      error: () => this.plans.set([]),
+      error: () => this.plansError.set('Could not load subscription plans. Please reload the page.'),
     });
   }
 
   constructor() {
-    effect(() => {
-      const consent = this.consentLocation();
-      if (this.geocodeEnabled && consent) {
-        this.tryGeocode();
-      } else {
-        this.registerForm.patchValue({ Latitude: null, Longitude: null });
-        this.geocodeStatus.set('idle');
-        this.geocodeError.set('');
-      }
-    });
-
+    // Debounced + switchMapped so per-keystroke edits don't fan out billable
+    // geocode calls and a stale response can't overwrite a newer address.
     merge(
       ...this.addressFields.map((f) => this.registerForm.controls[f].valueChanges),
-    )
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => {
-        this.registerForm.patchValue({ Latitude: null, Longitude: null });
-        if (this.geocodeEnabled && this.consentLocation()) {
-          this.tryGeocode();
-        }
-      });
+      this.registerForm.controls.consentLocation.valueChanges,
+    ).pipe(
+      takeUntilDestroyed(this.destroyRef),
+      tap(() => this.registerForm.patchValue({ Latitude: null, Longitude: null })),
+      debounceTime(400),
+      switchMap(() => this.geocode$()),
+    ).subscribe();
   }
 
-  private async tryGeocode() {
+  private geocode$() {
+    if (!this.geocodeEnabled || !this.consentLocation()) {
+      this.geocodeStatus.set('idle');
+      this.geocodeError.set('');
+      return of(null);
+    }
     const { Address, City, State, Zipcode, Country } = this.registerForm.getRawValue();
     if (!Address || !City || !State || !Zipcode || !Country) {
       this.geocodeStatus.set('idle');
       this.geocodeError.set('');
-      return;
+      return of(null);
     }
     this.geocodeStatus.set('loading');
     this.geocodeError.set('');
-    try {
-      const coords = await this.getCoordinates(`${Address}, ${City}, ${State} ${Zipcode}, ${Country}`);
-      this.registerForm.patchValue({ Latitude: coords.lat, Longitude: coords.lng });
-      this.geocodeStatus.set('success');
-    } catch {
-      this.registerForm.patchValue({ Latitude: null, Longitude: null });
-      this.geocodeStatus.set('error');
-      this.geocodeError.set('Could not verify this address. Please check and try again.');
-    }
+    const address = `${Address}, ${City}, ${State} ${Zipcode}, ${Country}`;
+    const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${this.getGoogleMapsApiKey()}`;
+    return this.http.get<GeocodingResponse>(url).pipe(
+      map((data) => {
+        if (data.status !== 'OK' || data.results.length === 0) {
+          throw new Error(`Geocoding failed: ${data.status}`);
+        }
+        return data.results[0].geometry.location;
+      }),
+      tap((coords) => {
+        this.registerForm.patchValue({ Latitude: coords.lat, Longitude: coords.lng });
+        this.geocodeStatus.set('success');
+      }),
+      catchError(() => {
+        this.registerForm.patchValue({ Latitude: null, Longitude: null });
+        this.geocodeStatus.set('error');
+        this.geocodeError.set('Could not verify this address. Please check and try again.');
+        return of(null);
+      }),
+    );
   }
 
   register() {
-    if (this.registerForm.valid) {
-      this.registerError.set('');
-      const formValue = this.registerForm.getRawValue();
-      const partnerReg: PartnerRegistration = {
-        FirstName: formValue.FirstName!,
-        LastName: formValue.LastName!,
-        UserName: formValue.UserName!,
-        Email: formValue.Email!,
-        Password: formValue.Password!,
-        PartnerCaption: formValue.PartnerCaption!,
-        Address: formValue.Address!,
-        City: formValue.City!,
-        State: formValue.State!,
-        Zipcode: formValue.Zipcode!,
-        Country: formValue.Country!,
-        Phone: formValue.Phone!,
-        DomainURL: formValue.DomainURL!,
-        Latitude: formValue.Latitude!,
-        Longitude: formValue.Longitude!,
-        PlanID: formValue.PlanID!,
-      };
-      this.auth.register(partnerReg).subscribe({
-        next: () => this.router.navigate(['/confirm/register']),
-        error: (err) => this.registerError.set(err?.error?.message ?? 'Registration failed. Please try again.'),
-      });
-    }
-  }
-
-  private async getCoordinates(address: string): Promise<{ lat: number; lng: number }> {
-    const apiKey = this.getGoogleMapsApiKey();
-    const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${apiKey}`;
-
-    interface GeocodingResponse {
-      results: { geometry: { location: { lat: number; lng: number } } }[];
-      status: string;
-    }
-    try {
-      const response = await firstValueFrom(
-        this.http.get<GeocodingResponse>(url).pipe(
-          map((data) => {
-            if (data.status === 'OK' && data.results.length > 0) {
-              return data.results[0].geometry.location;
-            } else {
-              throw new Error(`Geocoding failed: ${data.status}`);
-            }
-          }),
-        ),
-      );
-      return response;
-    } catch (error) {
-      throw new Error(`Geocoding failed: ${error}`);
-    }
+    if (!this.registerForm.valid) return;
+    this.registerError.set('');
+    const formValue = this.registerForm.getRawValue();
+    const partnerReg: PartnerRegistration = {
+      FirstName: formValue.FirstName!,
+      LastName: formValue.LastName!,
+      UserName: formValue.UserName!,
+      Email: formValue.Email!,
+      Password: formValue.Password!,
+      PartnerCaption: formValue.PartnerCaption!,
+      Address: formValue.Address!,
+      City: formValue.City!,
+      State: formValue.State!,
+      Zipcode: formValue.Zipcode!,
+      Country: formValue.Country!,
+      Phone: formValue.Phone!,
+      DomainURL: formValue.DomainURL!,
+      Latitude: formValue.Latitude,
+      Longitude: formValue.Longitude,
+      PlanID: formValue.PlanID!,
+    };
+    this.auth.register(partnerReg).subscribe({
+      // Pass the email along so the confirm page pre-fills it.
+      next: () => this.router.navigate(['/confirm/register'], { queryParams: { email: formValue.Email } }),
+      error: (err) => this.registerError.set(errorDetail(err, 'Registration failed. Please try again.')),
+    });
   }
 }

package/src/component/login/sms_consent.html

@@ -0,0 +1,11 @@
+<p class="sail-sms-consent">
+  By providing your phone number and tapping &ldquo;{{ action() }},&rdquo; you agree to receive
+  recurring automated text messages ({{ messagePurpose() }}) from {{ brandName() }} at that number.
+  Message frequency varies. Msg &amp; data rates may apply. Reply STOP to opt out, HELP for help.
+  @if (terms() || privacy()) {
+    See our
+    @if (terms()) { <a [href]="terms()" target="_blank" rel="noopener">Terms</a> }
+    @if (terms() && privacy()) { and }
+    @if (privacy()) { <a [href]="privacy()" target="_blank" rel="noopener">Privacy Policy</a> }.
+  }
+</p>