@nauticana/sail 1.1.43 → 1.1.45

package/src/component/dialog/confirm_dialog.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { MAT_DIALOG_DATA, MatDialogModule } from "@angular/material/dialog";
+import { MatButtonModule } from "@angular/material/button";
+
+export interface ConfirmOptions {
+    title: string;
+    message?: string;
+    /** Label of the confirming button, e.g. "Delete record". */
+    action: string;
+    /** Styles the action with the global `.warn` class. */
+    destructive?: boolean;
+}
+
+/** Material confirmation opened by `PromptService`; closes with true only on the action. */
+@Component({
+    selector: 'sail-confirm-dialog',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatDialogModule, MatButtonModule],
+    template: `
+        <h2 mat-dialog-title>{{ data.title }}</h2>
+        @if (data.message) { <mat-dialog-content><p>{{ data.message }}</p></mat-dialog-content> }
+        <mat-dialog-actions align="end">
+            <button matButton type="button" mat-dialog-close>Cancel</button>
+            <button matButton="filled" type="button" [class.warn]="data.destructive" [mat-dialog-close]="true">{{ data.action }}</button>
+        </mat-dialog-actions>`,
+})
+export class ConfirmDialog {
+    protected readonly data = inject<ConfirmOptions>(MAT_DIALOG_DATA);
+}

package/src/component/form/field_error.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { ValidationErrors } from "@angular/forms";
+import { MatFormField } from "@angular/material/form-field";
+
+/** Message for the enclosing field's first validation error: `<mat-error sailFieldError />`. */
+@Component({
+    selector: 'mat-error[sailFieldError]',
+    // Default: control errors are not signals, so the message is re-read on every check.
+    changeDetection: ChangeDetectionStrategy.Default,
+    template: '{{ message }}',
+})
+export class FieldError {
+    private readonly formField = inject(MatFormField);
+
+    get message(): string {
+        const errors: ValidationErrors | null | undefined = this.formField._control?.ngControl?.errors;
+        if (!errors) return '';
+        if (errors['required']) return 'This field is required.';
+        if (errors['email']) return 'Enter a valid email address.';
+        if (errors['minlength']) return `Use at least ${errors['minlength'].requiredLength} characters.`;
+        if (errors['maxlength']) return `Use at most ${errors['maxlength'].requiredLength} characters.`;
+        if (errors['min']) return `Enter ${errors['min'].min} or more.`;
+        if (errors['max']) return `Enter ${errors['max'].max} or less.`;
+        return 'Check this value.';
+    }
+}

package/src/component/form/form_field.html

@@ -7,10 +7,10 @@
             <mat-icon>search</mat-icon>
         </button>
     </mat-form-field>
-} @else if (inputType === 'select' && isReadonly) {
+} @else if (isReadonly && (inputType === 'select' || inputType === 'checkbox' || (isDateLike && !value()))) {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
-        <input matInput [value]="displayCaption" readonly>
+        <input matInput [value]="readonlyText" readonly>
     </mat-form-field>
 } @else if (inputType === 'select') {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
@@ -22,19 +22,14 @@
         </mat-select>
     </mat-form-field>
 } @else if (inputType === 'checkbox') {
-    <mat-checkbox [checked]="value() === true || value() === '1'" (change)="onCheckboxChange($event);" [disabled]="isReadonly">{{ colCaption(field()) }}</mat-checkbox>
-} @else if (isReadonly && isDateLike && !value()) {
-    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
-        <mat-label>{{ colCaption(field()) }}</mat-label>
-        <input matInput value="" readonly>
-    </mat-form-field>
+    <mat-checkbox [checked]="checked" (change)="onCheckboxChange($event);">{{ colCaption(field()) }}</mat-checkbox>
 } @else if (isTextArea) {
     <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
         <mat-label>{{ colCaption(field()) }}</mat-label>
         <textarea matInput
          [value]="inputValue"
          (input)="onInputChange($event);"
-         [disabled]="isReadonly"
+         [readonly]="isReadonly"
          [required]="required"
          [attr.maxLength]="maxLength"
          [rows]="textAreaRows">
@@ -47,7 +42,7 @@
          [type]="inputType"
          [value]="inputValue"
          (input)="onInputChange($event);"
-         [disabled]="isReadonly"
+         [readonly]="isReadonly"
          [required]="required"
          [attr.maxLength]="maxLength"
          [attr.step]="step">

package/src/component/form/form_field.ts

@@ -140,6 +140,16 @@ export class DynamicField extends BaseTable {
         return this.displayValue(this.field(), this.value());
     }
 
+    get checked(): boolean {
+        return this.value() === true || this.value() === '1';
+    }
+
+    /** Text of a read-only select, boolean, or empty date; a checkbox has no native readonly state. */
+    get readonlyText(): string {
+        if (this.inputType === 'checkbox') return this.checked ? 'Yes' : 'No';
+        return this.inputType === 'select' ? this.displayCaption : '';
+    }
+
     onInputChange(event: Event) {
         const target = event.target as HTMLInputElement | HTMLTextAreaElement | null;
         if (target) this.valueChange.emit(this.coerce(target.value));

package/src/component/login/chpass_component.html

@@ -10,12 +10,14 @@
       <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>
         <input matInput type="text" formControlName="username" autocomplete="username" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       @if (!forgotPassword()) {
         <mat-form-field appearance="outline">
           <mat-label>Current Password</mat-label>
           <input matInput type="password" formControlName="old_password" autocomplete="current-password" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
@@ -30,6 +32,7 @@
         <mat-form-field appearance="outline">
           <mat-label>Confirm New Password</mat-label>
           <input matInput type="password" formControlName="confirm_password" autocomplete="new-password" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
       }
 
@@ -43,7 +46,7 @@
         <div class="auth-error" role="alert">{{ errorMessage() }}</div>
       }
 
-      <button matButton="elevated" class="primary" type="submit" [disabled]="!chpassForm.valid">
+      <button matButton="elevated" class="primary" type="submit">
         @if (forgotPassword()) {
           Send Confirmation Code
         } @else {

package/src/component/login/chpass_component.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, signal, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, signal, ViewEncapsulation, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
 import { Router, RouterLink } from '@angular/router';
@@ -16,7 +18,7 @@ import { passwordPolicyValidator, passwordPolicyHint } from '../../util/password
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [
-    ReactiveFormsModule,
+    FieldError, ReactiveFormsModule,
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
@@ -25,6 +27,7 @@ import { passwordPolicyValidator, passwordPolicyHint } from '../../util/password
   ],
 })
 export class ChpassComponent extends BaseAsync {
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private auth = inject(BaseAuthService);
   private fb = inject(FormBuilder);
   private router = inject(Router);
@@ -73,7 +76,7 @@ export class ChpassComponent extends BaseAsync {
   }
 
   changePassword(): void {
-    if (this.chpassForm.invalid) return;
+    if (!submittable(this.chpassForm, this.host)) return;
 
     const { username, old_password, new_password, confirm_password } = this.chpassForm.value;
 

package/src/component/login/confirm_chpass_component.html

@@ -11,11 +11,13 @@
       <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>
         <input matInput type="text" formControlName="username" autocomplete="username" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       <mat-form-field appearance="outline">
         <mat-label>Confirmation Code</mat-label>
         <input matInput type="text" formControlName="code" autocomplete="one-time-code" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       <mat-form-field appearance="outline">
@@ -30,13 +32,14 @@
       <mat-form-field appearance="outline">
         <mat-label>Confirm New Password</mat-label>
         <input matInput type="password" formControlName="confirm_password" autocomplete="new-password" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       @if (errorMessage()) {
         <div class="auth-error" role="alert">{{ errorMessage() }}</div>
       }
 
-      <button matButton="elevated" class="primary" type="submit" [disabled]="!confirmForm.valid">
+      <button matButton="elevated" class="primary" type="submit">
         Confirm Password Change
       </button>
     </form>

package/src/component/login/confirm_chpass_component.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit, ViewEncapsulation, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -15,7 +17,7 @@ import { passwordPolicyValidator, passwordPolicyHint } from '../../util/password
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [
-    ReactiveFormsModule,
+    FieldError, ReactiveFormsModule,
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
@@ -23,6 +25,7 @@ import { passwordPolicyValidator, passwordPolicyHint } from '../../util/password
   ],
 })
 export class ConfirmChpassComponent extends BaseAsync implements OnInit {
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private auth = inject(BaseAuthService);
   private fb = inject(FormBuilder);
   private route = inject(ActivatedRoute);
@@ -55,7 +58,7 @@ export class ConfirmChpassComponent extends BaseAsync implements OnInit {
   }
 
   confirm(): void {
-    if (this.confirmForm.invalid) return;
+    if (!submittable(this.confirmForm, this.host)) return;
 
     const { username, code, new_password, confirm_password } = this.confirmForm.value;
 

package/src/component/login/confirm_register_component.html

@@ -11,11 +11,13 @@
       <mat-form-field appearance="outline">
         <mat-label>Email</mat-label>
         <input matInput type="email" formControlName="email" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       <mat-form-field appearance="outline">
         <mat-label>Confirmation Code</mat-label>
         <input matInput type="text" formControlName="code" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       @if (errorMessage()) {
@@ -26,7 +28,7 @@
         <div class="auth-success" role="status">{{ successMessage() }}</div>
       }
 
-      <button matButton="elevated" class="primary" type="submit" [disabled]="!confirmForm.valid">
+      <button matButton="elevated" class="primary" type="submit">
         Confirm
       </button>
     </form>

package/src/component/login/confirm_register_component.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit, ViewEncapsulation, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -14,7 +16,7 @@ import { BaseAsync } from '../abstract/base_async';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [
-    ReactiveFormsModule,
+    FieldError, ReactiveFormsModule,
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
@@ -22,6 +24,7 @@ import { BaseAsync } from '../abstract/base_async';
   ],
 })
 export class ConfirmRegisterComponent extends BaseAsync implements OnInit {
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private auth = inject(BaseAuthService);
   private fb = inject(FormBuilder);
   private route = inject(ActivatedRoute);
@@ -40,7 +43,7 @@ export class ConfirmRegisterComponent extends BaseAsync implements OnInit {
   }
 
   confirm(): void {
-    if (this.confirmForm.invalid) return;
+    if (!submittable(this.confirmForm, this.host)) return;
 
     const { email, code } = this.confirmForm.value;
 

package/src/component/login/login_component.html

@@ -30,15 +30,17 @@
       <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>
         <input matInput type="text" formControlName="username" autocomplete="username" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
       <mat-form-field appearance="outline">
         <mat-label>Password</mat-label>
         <input matInput type="password" formControlName="password" autocomplete="current-password" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
       @if (errorMessage()) {
         <p class="auth-error" role="alert">{{ errorMessage() }}</p>
       }
-      <button matButton="elevated" class="primary" type="submit" [disabled]="!loginForm.valid || loading()">
+      <button matButton="elevated" class="primary" type="submit" [disabled]="loading()">
         {{ loading() ? 'Signing in…' : 'Login' }}
       </button>
     </form>

package/src/component/login/login_component.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { BaseAsync } from '../abstract/base_async';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
@@ -17,7 +19,7 @@ import { SsoLoginComponent } from '../sso/sso_login';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [
-    ReactiveFormsModule,
+    FieldError, ReactiveFormsModule,
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
@@ -27,6 +29,7 @@ import { SsoLoginComponent } from '../sso/sso_login';
   ],
 })
 export class LoginComponent extends BaseAsync {
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   protected readonly auth = inject(BaseAuthService);
   protected fb = inject(FormBuilder);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
@@ -58,7 +61,7 @@ export class LoginComponent extends BaseAsync {
   });
 
   login(): void {
-    if (!this.loginForm.valid) return;
+    if (!submittable(this.loginForm, this.host)) return;
     const { username, password } = this.loginForm.value;
     this.run(
       this.auth.login(username!, password!),

package/src/component/login/register_component.html

@@ -14,11 +14,13 @@
         <mat-form-field appearance="outline">
           <mat-label>First Name</mat-label>
           <input matInput type="text" formControlName="FirstName" autocomplete="given-name" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Last Name</mat-label>
           <input matInput type="text" formControlName="LastName" autocomplete="family-name" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
       </div>
 
@@ -33,6 +35,7 @@
       <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>
         <input matInput type="text" formControlName="UserName" autocomplete="username" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       <div class="form-row">
@@ -47,6 +50,7 @@
         <mat-form-field appearance="outline">
           <mat-label>Confirm Password</mat-label>
           <input matInput type="password" formControlName="ConfirmPassword" autocomplete="new-password" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
       </div>
       @if (registerForm.hasError('passwordMismatch') && registerForm.controls.ConfirmPassword.touched) {
@@ -67,6 +71,7 @@
             </mat-option>
           }
         </mat-select>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       <div class="auth-section-label">Business Information</div>
@@ -74,17 +79,20 @@
       <mat-form-field appearance="outline">
         <mat-label>Business/Company Name</mat-label>
         <input matInput type="text" formControlName="PartnerCaption" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>Phone</mat-label>
           <input matInput type="tel" formControlName="Phone" autocomplete="tel" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Website URL</mat-label>
           <input matInput type="url" formControlName="DomainURL" autocomplete="url" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
       </div>
 
@@ -93,17 +101,20 @@
       <mat-form-field appearance="outline">
         <mat-label>Address (Street and Number)</mat-label>
         <input matInput type="text" formControlName="Address" autocomplete="address-line1" required>
+        <mat-error sailFieldError></mat-error>
       </mat-form-field>
 
       <div class="form-row">
         <mat-form-field appearance="outline">
           <mat-label>City</mat-label>
           <input matInput type="text" formControlName="City" autocomplete="address-level2" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>State</mat-label>
           <input matInput type="text" formControlName="State" autocomplete="address-level1" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
       </div>
 
@@ -111,11 +122,13 @@
         <mat-form-field appearance="outline">
           <mat-label>Zipcode</mat-label>
           <input matInput type="text" formControlName="Zipcode" autocomplete="postal-code" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
 
         <mat-form-field appearance="outline">
           <mat-label>Country</mat-label>
           <input matInput type="text" formControlName="Country" autocomplete="country-name" required>
+          <mat-error sailFieldError></mat-error>
         </mat-form-field>
       </div>
 
@@ -140,7 +153,7 @@
       }
 
       <button matButton="elevated" class="primary" type="submit"
-        [disabled]="!registerForm.valid || (geocodeEnabled && geocodeStatus() !== 'success')">
+        [disabled]="geocodeEnabled && geocodeStatus() !== 'success'">
         Create Account
       </button>
     </form>

package/src/component/login/register_component.ts

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, inject, DestroyRef, signal, ViewEncapsulation, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, DestroyRef, signal, ViewEncapsulation, OnInit, ElementRef } from '@angular/core';
+import { submittable } from '../../util/forms';
+import { FieldError } from '../form/field_error';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { AbstractControl, FormBuilder, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
@@ -30,7 +32,7 @@ interface GeocodingResponse {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [
-    ReactiveFormsModule,
+    FieldError, ReactiveFormsModule,
     RouterLink,
     MatButtonModule,
     MatFormFieldModule,
@@ -40,6 +42,7 @@ interface GeocodingResponse {
   ],
 })
 export class RegisterComponent implements OnInit {
+  private readonly host: HTMLElement = inject(ElementRef).nativeElement;
   private auth = inject(BaseAuthService);
   private billing = inject(BillingService);
   private fb = inject(FormBuilder);
@@ -155,7 +158,7 @@ export class RegisterComponent implements OnInit {
   }
 
   register() {
-    if (!this.registerForm.valid) return;
+    if (!submittable(this.registerForm, this.host)) return;
     this.registerError.set('');
     const formValue = this.registerForm.getRawValue();
     const partnerReg: PartnerRegistration = {

package/src/component/navigation/navigation.html

@@ -1,3 +1,4 @@
+<a class="sail-skip-link" href="#sail-main" (click)="focusMain($event)">Skip to content</a>
 <mat-sidenav-container class="sidenav-container">
     <mat-sidenav #sidenav class="sidenav"
         [attr.role]="isHandset() ? 'dialog' : 'navigation'"
@@ -61,6 +62,8 @@
                 }
             }
         </mat-toolbar>
-        <router-outlet></router-outlet>
+        <main #main id="sail-main" class="sail-main" tabindex="-1">
+            <router-outlet></router-outlet>
+        </main>
     </mat-sidenav-content>
 </mat-sidenav-container>

package/src/component/navigation/navigation.ts

@@ -1,15 +1,15 @@
-import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, viewChild, 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';
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
+import { NavigationEnd, Router, RouterLink, RouterOutlet } from "@angular/router";
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { map } from 'rxjs/operators';
+import { filter, map, pairwise } from 'rxjs/operators';
 import { ApplicationMenu, ApplicationMenuItem } from "../../model/common";
 import { BaseAuthService } from "../../service/auth.service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
@@ -35,6 +35,8 @@ 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 main = viewChild.required<ElementRef<HTMLElement>>('main');
+  private readonly sidenav = viewChild.required(MatSidenav);
 
   // 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
@@ -61,6 +63,23 @@ export class Navigation {
   readonly isLoggedIn = this.authService.isLoggedIn;
   protected readonly accountLink = this.guiConfig.accountLink;
 
+  constructor() {
+    // Focus the page after a path change; the initial load and query-only updates keep focus,
+    // as does an open handset menu.
+    inject(Router).events.pipe(
+      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
+      map((e) => e.urlAfterRedirects.split(/[?#]/)[0]),
+      pairwise(),
+      filter(([before, after]) => before !== after && !(this.isHandset() && this.sidenav().opened)),
+      takeUntilDestroyed(),
+    ).subscribe(() => this.main().nativeElement.focus());
+  }
+
+  focusMain(event: Event) {
+    event.preventDefault();
+    this.main().nativeElement.focus();
+  }
+
   logout() {
     this.authService.logout();
   }

package/src/component/oauth_connection/oauth_connection_panel.html

@@ -1,6 +1,7 @@
 @if (error()) {
   <p class="connection-panel__error" role="alert">{{ error() }}</p>
 }
+<p class="connection-panel__notice" role="status">{{ notice() }}</p>
 
 @if (loading()) {
   <p>Loading connections…</p>
@@ -28,6 +29,9 @@
         @if (v.provider.description) {
           <p class="connection-card__desc">{{ v.provider.description }}</p>
         }
+        @if (v.connection?.LastChecked) {
+          <p class="connection-card__checked">Last checked {{ v.connection?.LastChecked | date: 'medium' }}</p>
+        }
 
         <div class="connection-card__actions">
           @if (v.status === 'disconnected') {

package/src/component/oauth_connection/oauth_connection_panel.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, computed, effect, inject, input, output, signal } from '@angular/core';
-import { NgOptimizedImage } from '@angular/common';
+import { DatePipe, NgOptimizedImage } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -22,7 +22,7 @@ import { OAuthConnectionStatus, OAuthConnectionView, PartnerCredential, OAuthPro
 @Component({
   selector: 'sail-oauth-connection-panel',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatFormFieldModule, MatInputModule, NgOptimizedImage],
+  imports: [DatePipe, MatButtonModule, MatCardModule, MatIconModule, MatFormFieldModule, MatInputModule, NgOptimizedImage],
   templateUrl: './oauth_connection_panel.html',
 })
 export class OAuthConnectionPanelComponent implements OnInit {
@@ -37,6 +37,7 @@ export class OAuthConnectionPanelComponent implements OnInit {
   readonly connections = signal<PartnerCredential[]>([]);
   readonly loading = signal(true);
   readonly error = signal('');
+  readonly notice = signal(''); // last passing test
   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>>>({});
@@ -98,7 +99,8 @@ export class OAuthConnectionPanelComponent implements OnInit {
     return this.msg(e, 'Could not complete the connection.');
   }
 
-  private reload(entityId: number): void {
+  private reload(entityId: number, keepNotice = false): void {
+    if (!keepNotice) this.notice.set('');
     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('');
@@ -229,13 +231,15 @@ export class OAuthConnectionPanelComponent implements OnInit {
     if (!v.connection) return;
     this.busy.set(v.provider.code);
     this.error.set('');
+    this.notice.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());
+        if (res.status === 'ok') this.notice.set(`${v.provider.name} connection works.`);
+        else this.error.set(res.message || 'Connection test failed.');
+        this.reload(this.entityId(), true);
       },
       error: (e) => {
         this.busy.set('');