@nauticana/sail 1.1.4 → 1.1.6

package/README.md

@@ -111,6 +111,7 @@ bootstrapApplication(App, {
         opField: 'op_code',
         hiddenFields: ['op_code', 'PartnerId'],
         appTitle: 'My App',
+        appLogoUrl: 'logo.png',
         dashboardComponent: DashUser,
         publicRoutes: [
           { path: 'login/local', loadComponent: () => import('@nauticana/sail').then(m => m.LoginComponent) },
@@ -160,6 +161,17 @@ import { Navigation } from '@nauticana/sail';
 export class App {}
 ```
 
+Place the application logo in the consumer's `public/` directory (for example,
+`public/logo.png`) and set the same public URL in `appLogoUrl`. Sail displays it
+in the sidenav toolbar as a link to `/`. When `appLogoUrl` is omitted, the link
+falls back to `appTitle`, then to a home icon, so home navigation remains
+available without requiring a library-owned brand asset. The consuming app may
+also reuse that asset as its favicon:
+
+```html
+<link rel="icon" type="image/png" href="logo.png">
+```
+
 ### 6. Provide global styles
 
 All sail components use `ViewEncapsulation.None` — they ship no CSS. Your project must provide a global stylesheet covering sail selectors.
@@ -177,7 +189,8 @@ Key CSS classes used by components:
 /* Layout */
 .auth-container, .auth-card, .auth-header, .auth-title, .auth-form,
 .auth-actions, .auth-footer, .auth-app-title, .auth-checkbox,
-.auth-section-label, .auth-instructions, .form-row, .register-card
+.auth-section-label, .auth-instructions, .form-row, .register-card,
+.sail-navigation-home, .sail-navigation-logo, .sail-navigation-home-title
 
 /* Feedback */
 .auth-error, .auth-success, .geocode-status, .geocode-loading,
@@ -240,6 +253,7 @@ interface SailGuiConfig {
   opField: string;                    // Operation field name (default: 'op_code')
   hiddenFields: string[];             // Fields hidden from forms (default: ['op_code', 'PartnerId'])
   appTitle?: string;                  // Shown on login pages
+  appLogoUrl?: string;                // Public logo URL used by the navigation home link
   googleMapsApiKey?: string;          // For RegisterComponent geocoding
   dashboardComponent?: Type<any>;     // Component for /dashboard route
   publicRoutes?: Routes;              // Routes available before login

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
   "scripts": {

package/src/component/login/social_login.ts

@@ -9,6 +9,7 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
 import {
   ConsentState, LoginResponseSocial, SignupConsent, SocialProvider,
 } from '../../model/auth';
+import { firstValueFrom } from 'rxjs';
 
 declare const google: any;
 declare const AppleID: any;
@@ -66,9 +67,11 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
 
   private async initGoogle() {
     await loadScript(GSI_URL);
+    const nonce = await firstValueFrom(this.auth.getSocialNonce());
     google.accounts.id.initialize({
       client_id: this.guiConfig.googleClientId,
       callback: (res: { credential: string }) => this.onIdToken('google', res.credential),
+      ...(nonce ? { nonce } : {}),
     });
     // Render into the template anchor once the view is ready.
     queueMicrotask(() => {
@@ -80,11 +83,13 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
 
   private async initApple() {
     await loadScript(APPLE_URL);
+    const nonce = await firstValueFrom(this.auth.getSocialNonce());
     AppleID.auth.init({
       clientId: this.guiConfig.appleServiceId,
       scope: 'name email',
       redirectURI: this.guiConfig.appleRedirectUri ?? window.location.origin,
       usePopup: true,
+      ...(nonce ? { nonce } : {}),
     });
   }
 

package/src/component/navigation/navigation.html

@@ -4,7 +4,21 @@
         [mode]="isHandset() ? 'over' : 'side'"
         [opened]="isLoggedIn() && !isHandset()">
         <mat-toolbar class="primary">
-            <span>Menu</span>
+            <a class="sail-navigation-home"
+                routerLink="/"
+                [attr.aria-label]="guiConfig.appTitle ? guiConfig.appTitle + ' home' : 'Home'">
+                @if (guiConfig.appLogoUrl) {
+                    <img class="sail-navigation-logo"
+                        [src]="guiConfig.appLogoUrl"
+                        width="40"
+                        height="40"
+                        alt="">
+                } @else if (guiConfig.appTitle) {
+                    <span class="sail-navigation-home-title">{{ guiConfig.appTitle }}</span>
+                } @else {
+                    <mat-icon aria-hidden="true">home</mat-icon>
+                }
+            </a>
         </mat-toolbar>
         @if (isLoggedIn()) {
             <mat-accordion>

package/src/config.ts

@@ -33,6 +33,8 @@ export interface SailGuiConfig {
   extraRoutes?: (data: ApplicationData) => Routes;
   dashboardComponent?: Type<any>;
   appTitle?: string;
+  /** Public asset URL for the application logo shown in the navigation home link, e.g. 'logo.png'. */
+  appLogoUrl?: string;
   googleMapsApiKey?: string;
   loginFooterLinks?: RouteLink[];
   /** Links shown in navigation toolbar when not logged in (e.g., Login, Register) */

package/src/service/auth.service.ts

@@ -11,7 +11,7 @@ import {
   UserProfile,
 } from '../model/auth';
 import { RestURL } from './rest_url';
-import { Observable, ReplaySubject } from 'rxjs';
+import { Observable, ReplaySubject, catchError, of } from 'rxjs';
 import { ApplicationMenu, ConstantValue } from '../model/common';
 import { CanActivateFn, CanDeactivateFn, Router, Routes } from '@angular/router';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../config';
@@ -381,6 +381,16 @@ export abstract class BaseAuthService extends BaseRestService {
     );
   }
 
+  // Single-use nonce for the social id_token flow (replay protection): GET on
+  // the same social-login route. Empty when the backend hasn't enabled it —
+  // callers then sign in without one.
+  getSocialNonce(): Observable<string> {
+    return this.http.get<{ nonce: string }>(this.loginSocialUrl).pipe(
+      map((res) => res?.nonce ?? ''),
+      catchError(() => of('')),
+    );
+  }
+
   // ── Account lifecycle ──
 
   /**