@nauticana/sail 1.1.8 → 1.1.10

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/social_login.html

@@ -1,8 +1,8 @@
 <div class="social-login">
-  @if (googleEnabled) {
+  @if (googleEnabled()) {
     <div #googleBtn class="social-google"></div>
   }
-  @if (appleEnabled) {
+  @if (appleEnabled()) {
     <button type="button" class="social-apple-btn" (click)="onAppleClick()" [disabled]="loading()">
       Sign in with Apple
     </button>

package/src/component/login/social_login.ts

@@ -1,6 +1,6 @@
 import {
-  ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild, ViewEncapsulation,
-  inject, input, output,
+  ChangeDetectionStrategy, Component, computed, ElementRef, OnInit, ViewEncapsulation,
+  inject, input, output, viewChild,
 } from '@angular/core';
 import { BaseAsync } from '../abstract/base_async';
 import { BaseAuthService } from '../../service/auth.service';
@@ -45,15 +45,14 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
   readonly loginSuccess = output<LoginResponseSocial>();
   readonly loginError = output<Error>();
 
-  @ViewChild('googleBtn', { static: false }) googleBtn?: ElementRef<HTMLDivElement>;
+  private readonly googleBtn = viewChild<ElementRef<HTMLDivElement>>('googleBtn');
 
-  protected googleEnabled = false;
-  protected appleEnabled = false;
+  protected readonly googleEnabled = computed(() =>
+    this.providers().includes('google') && !!this.guiConfig.googleClientId);
+  protected readonly appleEnabled = computed(() =>
+    this.providers().includes('apple') && !!this.guiConfig.appleServiceId);
 
   ngOnInit() {
-    this.googleEnabled = this.providers().includes('google') && !!this.guiConfig.googleClientId;
-    this.appleEnabled  = this.providers().includes('apple')  && !!this.guiConfig.appleServiceId;
-
     if (this.providers().includes('google') && !this.guiConfig.googleClientId) {
       console.warn('SocialLoginComponent: googleClientId missing from SailGuiConfig — Google button hidden');
     }
@@ -61,8 +60,15 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
       console.warn('SocialLoginComponent: appleServiceId missing from SailGuiConfig — Apple button hidden');
     }
 
-    if (this.googleEnabled) this.initGoogle();
-    if (this.appleEnabled)  this.initApple();
+    // SDK load failures (CSP, ad-blockers) must surface, not leave a blank area.
+    if (this.googleEnabled()) this.initGoogle().catch((err) => this.onInitError('Google', err));
+    if (this.appleEnabled())  this.initApple().catch((err) => this.onInitError('Apple', err));
+  }
+
+  private onInitError(provider: string, err: unknown) {
+    console.error(`${provider} sign-in init failed:`, err);
+    this.errorMessage.set(`${provider} sign-in is unavailable right now.`);
+    this.loginError.emit(err instanceof Error ? err : new Error(String(err)));
   }
 
   private async initGoogle() {
@@ -75,8 +81,9 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
     });
     // Render into the template anchor once the view is ready.
     queueMicrotask(() => {
-      if (this.googleBtn?.nativeElement) {
-        google.accounts.id.renderButton(this.googleBtn.nativeElement, { theme: 'outline', size: 'large' });
+      const anchor = this.googleBtn()?.nativeElement;
+      if (anchor) {
+        google.accounts.id.renderButton(anchor, { theme: 'outline', size: 'large' });
       }
     });
   }
@@ -98,7 +105,7 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
       const res = await AppleID.auth.signIn();
       const token = res?.authorization?.id_token;
       if (token) this.onIdToken('apple', token);
-    } catch (err: any) {
+    } catch (err: unknown) {
       this.loginError.emit(err instanceof Error ? err : new Error(String(err)));
     }
   }

package/src/component/navigation/navigation.html

@@ -9,7 +9,7 @@
                 [attr.aria-label]="guiConfig.appTitle ? guiConfig.appTitle + ' home' : 'Home'">
                 @if (guiConfig.appLogoUrl) {
                     <img class="sail-navigation-logo"
-                        [src]="guiConfig.appLogoUrl"
+                        [ngSrc]="guiConfig.appLogoUrl"
                         width="40"
                         height="40"
                         alt="">
@@ -44,7 +44,7 @@
         <mat-toolbar class="primary">
             @if (isHandset()) {
                 <button type="button" aria-label="Toggle sidenav" matIconButton (click)="sidenav.toggle()">
-                    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+                    <mat-icon>menu</mat-icon>
                 </button>
             }
             <ng-content select="[toolbar-title]"></ng-content>

package/src/component/navigation/navigation.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from "@angular/core";
+import { NgOptimizedImage } from "@angular/common";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { RouterLink, RouterOutlet } from "@angular/router";
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -24,6 +25,7 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
     MatListModule,
     MatIconModule,
     MatButtonModule,
+    NgOptimizedImage,
     RouterOutlet,
     RouterLink,
     MatExpansionModule,

package/src/component/oauth_connection/oauth_connection_panel.html

@@ -0,0 +1,68 @@
+@if (error()) {
+  <p class="connection-panel__error" role="alert">{{ error() }}</p>
+}
+
+@if (loading()) {
+  <p>Loading connections…</p>
+} @else {
+  <div class="connections">
+    @for (v of views(); track v.provider.code) {
+      <mat-card class="connection-card">
+        <div class="connection-card__head">
+          @if (v.provider.icon) {
+            @if (isIconUrl(v.provider.icon)) {
+              <img class="connection-card__icon" [ngSrc]="v.provider.icon" alt="" width="24" height="24" />
+            } @else {
+              <mat-icon>{{ v.provider.icon }}</mat-icon>
+            }
+          }
+          <h3 class="connection-card__title">{{ v.provider.name }}</h3>
+          <span
+            class="connection-card__status"
+            [class.status--connected]="v.status === 'connected'"
+            [class.status--error]="v.status === 'error'"
+            [class.status--pending]="v.status === 'pending'"
+          >{{ v.status }}</span>
+        </div>
+
+        @if (v.provider.description) {
+          <p class="connection-card__desc">{{ v.provider.description }}</p>
+        }
+
+        <div class="connection-card__actions">
+          @if (v.status === 'disconnected') {
+            <button matButton="filled" [disabled]="busy() === v.provider.code" (click)="connect(v)">
+              Connect
+            </button>
+          } @else {
+            <button matButton [disabled]="busy() === v.provider.code" (click)="test(v)">Test</button>
+            <button matButton [disabled]="busy() === v.provider.code" (click)="connect(v)">Reconnect</button>
+            <button matButton [disabled]="busy() === v.provider.code" (click)="disconnect(v)">Disconnect</button>
+          }
+        </div>
+
+        @if (expanded() === v.provider.code) {
+          @if (v.provider.connectNote) {
+            <p class="connection-card__note">{{ v.provider.connectNote }}</p>
+          }
+          <div class="connection-form">
+            @for (f of v.provider.fields; track f.key) {
+              <mat-form-field>
+                <mat-label>{{ f.label }}</mat-label>
+                <input
+                  matInput
+                  [type]="f.type ?? 'text'"
+                  [placeholder]="f.placeholder ?? ''"
+                  (input)="setField(v.provider.code, f.key, $event)"
+                />
+              </mat-form-field>
+            }
+            <button matButton="filled" [disabled]="busy() === v.provider.code" (click)="submit(v)">
+              {{ v.provider.authType === 'oauth' ? 'Continue' : 'Save' }}
+            </button>
+          </div>
+        }
+      </mat-card>
+    }
+  </div>
+}

package/src/component/oauth_connection/oauth_connection_panel.ts

@@ -0,0 +1,252 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, computed, effect, inject, input, output, signal } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { OAuthConnectionService } from '../../service/oauth_connection.service';
+import { OAuthConnectionStatus, OAuthConnectionView, PartnerCredential, OAuthProviderDescriptor, OAuthProviderFieldRole } from '../../model/oauth_connection';
+
+/**
+ * ConnectionPanel — drop-in UI for keel oauth/connect. Renders a card per
+ * app-supplied OAuthProviderDescriptor with connect / disconnect / test. Providers
+ * that need inputs (API-key credentials, Shopify's shop) open an inline form;
+ * field-less OAuth providers redirect on one click. Ships no CSS — style the
+ * documented `.connection-*` hooks. `entityId` scopes per-business connections
+ * (0 = tenant-wide). Selector: <sail-oauth-connection-panel>.
+ */
+@Component({
+  selector: 'sail-oauth-connection-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatButtonModule, MatCardModule, MatIconModule, MatFormFieldModule, MatInputModule, NgOptimizedImage],
+  templateUrl: './oauth_connection_panel.html',
+})
+export class OAuthConnectionPanelComponent implements OnInit {
+  readonly providers = input<OAuthProviderDescriptor[]>([]);
+  readonly entityId = input(0);
+
+  readonly connected = output<string>();
+  readonly disconnected = output<string>();
+
+  private readonly svc = inject(OAuthConnectionService);
+
+  readonly connections = signal<PartnerCredential[]>([]);
+  readonly loading = signal(true);
+  readonly error = signal('');
+  readonly expanded = signal(''); // provider code whose input form is open
+  readonly busy = signal(''); // provider code with an action in flight
+  private readonly fieldValues = signal<Record<string, Record<string, string>>>({});
+  private readonly pendingSuccess = signal<Set<string>>(new Set());
+  private reloadSub?: Subscription;
+  private successRetries = 0;
+  private retryTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // The list is already scoped to entityId(), so a per-provider match is correct.
+  readonly views = computed<OAuthConnectionView[]>(() => {
+    const byProvider = new Map(this.connections().map((c) => [c.Provider, c]));
+    return this.providers().map((provider) => ({
+      provider,
+      connection: byProvider.get(provider.code),
+      status: this.toStatus(byProvider.get(provider.code)),
+    }));
+  });
+
+  constructor() {
+    // Reload on init and whenever the entity scope changes.
+    effect(() => this.reload(this.entityId()));
+    inject(DestroyRef).onDestroy(() => {
+      this.reloadSub?.unsubscribe();
+      if (this.retryTimer) clearTimeout(this.retryTimer);
+    });
+  }
+
+  // After an OAuth round-trip keel redirects back with ?<provider>=success. Record
+  // the codes (configured providers only), strip them — preserving the hash — and
+  // emit `connected` once the reload confirms the row exists (confirmSuccess).
+  ngOnInit(): void {
+    const q = new URLSearchParams(window.location.search);
+    const known = new Set(this.providers().map((p) => p.code));
+    const succeeded = new Set<string>();
+    q.forEach((value, key) => {
+      if (value === 'success' && known.has(key)) succeeded.add(key);
+    });
+    if (!succeeded.size) return;
+    this.pendingSuccess.set(succeeded);
+    for (const code of succeeded) q.delete(code);
+    const qs = q.toString();
+    window.history.replaceState({}, '', window.location.pathname + (qs ? '?' + qs : '') + window.location.hash);
+  }
+
+  private reload(entityId: number): void {
+    this.reloadSub?.unsubscribe(); // cancel any in-flight load so a slow old entity can't overwrite the new one
+    this.loading.set(true);
+    this.expanded.set('');
+    this.fieldValues.set({}); // never carry a typed credential across a reload / entity change
+    this.reloadSub = this.svc.list(entityId).subscribe({
+      next: (rows) => {
+        this.connections.set(rows ?? []);
+        this.loading.set(false);
+        this.confirmSuccess();
+      },
+      error: (e) => {
+        this.error.set(this.msg(e, 'Could not load your connections.'));
+        this.loading.set(false);
+      },
+    });
+  }
+
+  // Emit `connected` only for a returned provider whose row is actually present.
+  // Rows can lag the redirect (webhook/commit); retry twice before giving up loudly.
+  private confirmSuccess(): void {
+    const pending = this.pendingSuccess();
+    if (!pending.size) return;
+    const present = new Set(this.connections().map((c) => c.Provider));
+    const missing = [...pending].filter((code) => !present.has(code));
+    for (const code of pending) if (present.has(code)) this.connected.emit(code);
+    if (!missing.length) {
+      this.pendingSuccess.set(new Set());
+      this.successRetries = 0;
+      return;
+    }
+    this.pendingSuccess.set(new Set(missing));
+    if (this.successRetries < 2) {
+      this.successRetries++;
+      this.retryTimer = setTimeout(() => this.reload(this.entityId()), 1500 * this.successRetries);
+    } else {
+      this.pendingSuccess.set(new Set());
+      this.successRetries = 0;
+      this.error.set('The connection completed but is not visible yet — refresh to check.');
+    }
+  }
+
+  isIconUrl(icon?: string): boolean {
+    return !!icon && (icon.includes('/') || icon.includes('.'));
+  }
+
+  private toStatus(c?: PartnerCredential): OAuthConnectionStatus {
+    if (!c) return 'disconnected';
+    if (c.Status === 'A') return 'connected';
+    if (c.Status === 'E') return 'error';
+    if (c.Status === 'P') return 'pending';
+    return 'disconnected';
+  }
+
+  // Providers with inputs or a consent note open a form first; a bare field-less
+  // OAuth provider connects on one click.
+  connect(v: OAuthConnectionView): void {
+    const needsForm = (v.provider.fields ?? []).length > 0 || !!v.provider.connectNote;
+    if (needsForm && this.expanded() !== v.provider.code) {
+      this.clearFields(v.provider.code); // open blank — never a stale credential
+      this.expanded.set(v.provider.code);
+      this.error.set('');
+      return;
+    }
+    this.submit(v);
+  }
+
+  private clearFields(code: string): void {
+    const all = { ...this.fieldValues() };
+    delete all[code];
+    this.fieldValues.set(all);
+  }
+
+  // Submit collected inputs: OAuth → authorize redirect (fields ride as params);
+  // API-key → save the role-tagged credential + endpoint.
+  submit(v: OAuthConnectionView): void {
+    const fields = v.provider.fields ?? [];
+    const vals = this.fieldValues()[v.provider.code] ?? {};
+    const missing = fields.filter((f) => f.required !== false && !vals[f.key]);
+    if (missing.length) {
+      this.error.set('Missing ' + missing.map((f) => f.label).join(', '));
+      return;
+    }
+    this.busy.set(v.provider.code);
+    this.error.set('');
+
+    if (v.provider.authType === 'oauth') {
+      // Only 'param' fields belong in the authorize URL — never a credential/endpoint.
+      const extra: Record<string, string> = { entity_id: String(this.entityId()) };
+      for (const f of fields) if (f.role === 'param') extra[f.key] = vals[f.key] ?? '';
+      this.svc.startOAuth(v.provider.code, extra).subscribe({
+        next: (url) => this.redirect(url),
+        error: (e) => {
+          this.busy.set('');
+          this.error.set(this.msg(e, 'Could not start the connection.'));
+        },
+      });
+      return;
+    }
+
+    const credRef = this.roleValue(v, vals, 'credential');
+    const apiEndpoint = this.roleValue(v, vals, 'endpoint');
+    this.svc.saveApiKey(v.provider.code, credRef, apiEndpoint, this.entityId()).subscribe({
+      next: () => {
+        this.busy.set('');
+        this.connected.emit(v.provider.code);
+        this.reload(this.entityId());
+      },
+      error: (e) => {
+        this.busy.set('');
+        this.error.set(this.msg(e, 'Could not save the key.'));
+      },
+    });
+  }
+
+  private roleValue(v: OAuthConnectionView, vals: Record<string, string>, role: OAuthProviderFieldRole): string {
+    const f = (v.provider.fields ?? []).find((x) => x.role === role);
+    return f ? (vals[f.key] ?? '') : '';
+  }
+
+  setField(code: string, key: string, ev: Event): void {
+    const value = (ev.target as HTMLInputElement).value;
+    const all = { ...this.fieldValues() };
+    all[code] = { ...(all[code] ?? {}), [key]: value };
+    this.fieldValues.set(all);
+  }
+
+  test(v: OAuthConnectionView): void {
+    if (!v.connection) return;
+    this.busy.set(v.provider.code);
+    this.error.set('');
+    this.svc.testConnection(v.provider.code, this.entityId()).subscribe({
+      // keel returns HTTP 200 with {status:'error', message} for a failed test —
+      // surface the message, then reload to reflect the status it just recorded.
+      next: (res) => {
+        this.busy.set('');
+        if (res.status !== 'ok') this.error.set(res.message || 'Connection test failed.');
+        this.reload(this.entityId());
+      },
+      error: (e) => {
+        this.busy.set('');
+        this.error.set(this.msg(e, 'Could not test the connection.'));
+      },
+    });
+  }
+
+  disconnect(v: OAuthConnectionView): void {
+    if (!v.connection?.Id) return;
+    this.busy.set(v.provider.code);
+    this.svc.disconnect(v.connection.Id).subscribe({
+      next: () => {
+        this.busy.set('');
+        this.disconnected.emit(v.provider.code);
+        this.reload(this.entityId());
+      },
+      error: (e) => {
+        this.busy.set('');
+        this.error.set(this.msg(e, 'Could not disconnect.'));
+      },
+    });
+  }
+
+  protected redirect(url: string): void {
+    window.location.href = url;
+  }
+
+  private msg(e: unknown, fallback: string): string {
+    const err = e as { error?: { detail?: string; message?: string } };
+    return err?.error?.detail ?? err?.error?.message ?? fallback;
+  }
+}