@sinequa/atomic-angular 1.0.11 → 1.0.12

package/fesm2022/sinequa-atomic-angular.mjs

@@ -3415,14 +3415,10 @@ function AuthGuard() {
         const { loginPath, useCredentials, useSSO } = globalConfig;
         if (state.url.startsWith("/login"))
             return true;
-        // If the user is not authenticated, navigate to the login page or loading page based on the authentication method
+        // If the user is not authenticated, navigate to the login page.
+        // The login page handles every authentication method (credentials, OAuth, SAML).
         if (!isAuthenticated() && !useSSO) {
-            if (useCredentials) {
-                router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            }
-            else {
-                router.navigate(["loading"], { queryParams: { returnUrl: state.url } });
-            }
+            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
             return false;
         }
         // If the user is authenticated, initialize the principal store if it's in the initial state
@@ -4031,7 +4027,7 @@ class NavigationService {
      * - Maps all router events to `RouterEvent`.
      * - Filters the events to only include instances of `NavigationEnd`.
      * - Taps into the event stream to extract the route name from the URL and notify the audit service of route changes,
-     *   excluding the "loading" route and duplicate navigations.
+     *   excluding duplicate navigations.
      * - Updates the `urlAfterNavigation` property with the current URL after navigation.
      * - Shares the replayed value with a buffer size of 1 to ensure subscribers receive the latest emitted value.
      *
@@ -4039,8 +4035,7 @@ class NavigationService {
      */
     navigationEnd$ = this.router.events.pipe(map((event) => event), filter((event) => event instanceof NavigationEnd), tap((event) => {
         const url = event.url.slice(1).split("?")[0]; // Extract route name
-        // TODO: use a "loading" configuration from globalConfig
-        if (url && url !== "loading" && url !== this.urlAfterNavigation) {
+        if (url && url !== this.urlAfterNavigation) {
             this.auditService.notifyRouteChange(url);
         }
     }), tap((event) => {
@@ -5372,6 +5367,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+/**
+ * @deprecated This component and its `/loading` route are no longer used.
+ * Authentication is handled at bootstrap by `withBootstrapApp`/`signIn`, and the
+ * `AuthGuard` now redirects unauthenticated users to the login page directly.
+ * Will be removed in a future major release. Do not use in new code.
+ */
 class LoadingComponent {
     state = computed(() => getState(this.application), ...(ngDevMode ? [{ debugName: "state" }] : []));
     application = inject(ApplicationStore);
@@ -10740,6 +10741,15 @@ class SignInComponent {
     destroyRef;
     cn = cn;
     config = globalConfig;
+    /**
+     * True when authentication is handled outside the credentials form — i.e. by the
+     * browser/proxy (`useSSO`) or by an auto-configured OAuth/SAML provider. In those
+     * modes this screen shows a loader instead of a login form and initiates the
+     * handshake automatically by calling `handleLogin()`.
+     */
+    externalAuth = !!(globalConfig.useSSO ||
+        globalConfig.autoOAuthProvider ||
+        globalConfig.autoSAMLProvider);
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
     forgotPassword = output();
     username = model("", ...(ngDevMode ? [{ debugName: "username" }] : []));
@@ -10761,6 +10771,30 @@ class SignInComponent {
     expiresSoonNotified = signal(false, ...(ngDevMode ? [{ debugName: "expiresSoonNotified" }] : []));
     constructor(destroyRef) {
         this.destroyRef = destroyRef;
+        // If the user is already authenticated when landing here (e.g. page refresh on
+        // /login, or an external handshake completed before this screen was created),
+        // don't sit on the loader: go straight to the returnUrl.
+        if (this.authenticated()) {
+            const url = this.route.snapshot.queryParams["returnUrl"] || "/";
+            this.router.navigateByUrl(url);
+        }
+        // When authentication is delegated to the browser/proxy (SSO) or an OAuth/SAML
+        // provider, no credentials form is shown: this screen shows a loader and initiates
+        // the handshake automatically by calling `handleLogin()`. If the handshake never
+        // completes, fall back to /error after 5s; the fallback is cancelled as soon as
+        // the login succeeds (the `authenticated` event then drives navigation).
+        if (this.externalAuth && !this.authenticated()) {
+            const timeout = setTimeout(() => {
+                this.router.navigate(["/error"], {
+                    queryParams: { returnUrl: this.route.snapshot.queryParams["returnUrl"] }
+                });
+            }, 5000);
+            destroyRef.onDestroy(() => clearTimeout(timeout));
+            this.handleLogin().then(result => {
+                if (result)
+                    clearTimeout(timeout);
+            });
+        }
         effect(() => {
             const principal = getState(this.principalStore);
             if (this.authenticated() && principal && !this.expiresSoonNotified()) {
@@ -10806,14 +10840,16 @@ class SignInComponent {
         this.router.navigate(["/login"]);
     }
     async handleLogin() {
-        login().then((result) => {
+        return login().then((result) => {
             if (result) {
                 this.auditService.notifyLogin();
             }
+            return result;
         }).catch(error => {
             warn("An error occurred while logging in", error);
             this.auditService.notify({ type: 'Login_Denied' });
             this.router.navigate(["error"]);
+            return false;
         });
     }
     async handleLoginWithCredentials() {
@@ -10856,7 +10892,7 @@ class SignInComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SignInComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SignInComponent, isStandalone: true, selector: "signIn, signin, sign-in", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { forgotPassword: "forgotPassword", username: "usernameChange", password: "passwordChange" }, host: { properties: { "class": "cn('grid h-dvh w-full place-content-center', class())" } }, providers: [provideTranslocoScope("login")], ngImport: i0, template: `
-    @if (!authenticated()) {
+    @if (!authenticated() && !externalAuth) {
       <Card
         hover="no"
         cdkTrapFocus
@@ -10867,60 +10903,54 @@ class SignInComponent {
         </CardHeader>
 
         <CardContent class="grid gap-4">
-          @let useCredentials =
-            !config.autoOAuthProvider && !config.autoSAMLProvider;
-          @if (useCredentials) {
-            <!-- authentication using credentials -->
-            <div class="grid gap-2">
-              <label class="text-sm font-medium" for="username">{{
-                "login.username" | transloco
-              }}</label>
-              <input
-                id="username"
-                type="text"
-                required
-                [(ngModel)]="username"
-                (keydown.enter)="handleLoginWithCredentials()" />
-            </div>
-
-            <div class="grid gap-2">
-              <label class="text-sm font-medium" for="password">{{
-                "login.password" | transloco
-              }}</label>
-              <input
-                id="password"
-                type="password"
-                required
-                [(ngModel)]="password"
-                (keydown.enter)="handleLoginWithCredentials()" />
-            </div>
-
-            <span
-              class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
-              role="button"
-              tabindex="0"
-              (click)="forgotPassword.emit()"
-              (keydown.enter)="forgotPassword.emit()">
-              {{ "login.forgotPassword" | transloco }}
-            </span>
-            <button variant="primary"
-              [disabled]="!isValid()"
-              (click)="handleLoginWithCredentials()">
-              {{ "login.connect" | transloco }}
-            </button>
-          }
-          @else {
-            <!-- authentication using OAuth or SAML provider -->
-            <button (click)="handleLogin()">
-              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
-            </button>
-          }
+          <!-- authentication using credentials -->
+          <div class="grid gap-2">
+            <label class="text-sm font-medium" for="username">{{
+              "login.username" | transloco
+            }}</label>
+            <input
+              id="username"
+              type="text"
+              required
+              [(ngModel)]="username"
+              (keydown.enter)="handleLoginWithCredentials()" />
+          </div>
+
+          <div class="grid gap-2">
+            <label class="text-sm font-medium" for="password">{{
+              "login.password" | transloco
+            }}</label>
+            <input
+              id="password"
+              type="password"
+              required
+              [(ngModel)]="password"
+              (keydown.enter)="handleLoginWithCredentials()" />
+          </div>
+
+          <span
+            class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
+            role="button"
+            tabindex="0"
+            (click)="forgotPassword.emit()"
+            (keydown.enter)="forgotPassword.emit()">
+            {{ "login.forgotPassword" | transloco }}
+          </span>
+          <button variant="primary"
+            [disabled]="!isValid()"
+            (click)="handleLoginWithCredentials()">
+            {{ "login.connect" | transloco }}
+          </button>
         </CardContent>
       </Card>
     } @else {
-      <app-wait />
+      <div class="flex h-dvh w-full items-center justify-center">
+        <div class="flex flex-col items-center space-y-4">
+          <span class="loader"></span>
+        </div>
+      </div>
     }
-  `, isInline: true, styles: ["input{background-color:var(--background)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-wait" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: ["input{background-color:var(--background)}.loader{--w: 96px;--h: 96px;transform:rotate(45deg);perspective:1000px;border-radius:50%;width:var(--w);height:var(--h);color:#0040bf}.loader:before,.loader:after{content:\"\";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff854a;transform:rotateY(70deg);animation-delay:.4s}@keyframes spin{0%,to{box-shadow:.4em 0 0 0 currentcolor}12%{box-shadow:.4em .4em 0 0 currentcolor}25%{box-shadow:0 .4em 0 0 currentcolor}37%{box-shadow:-.4em .4em 0 0 currentcolor}50%{box-shadow:-.4em 0 0 0 currentcolor}62%{box-shadow:-.4em -.4em 0 0 currentcolor}75%{box-shadow:0 -.4em 0 0 currentcolor}87%{box-shadow:.4em -.4em 0 0 currentcolor}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -10933,10 +10963,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         ButtonComponent,
                         CardComponent,
                         CardHeaderComponent,
-                        CardContentComponent,
-                        LoadingComponent
+                        CardContentComponent
                     ], providers: [provideTranslocoScope("login")], template: `
-    @if (!authenticated()) {
+    @if (!authenticated() && !externalAuth) {
       <Card
         hover="no"
         cdkTrapFocus
@@ -10947,62 +10976,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         </CardHeader>
 
         <CardContent class="grid gap-4">
-          @let useCredentials =
-            !config.autoOAuthProvider && !config.autoSAMLProvider;
-          @if (useCredentials) {
-            <!-- authentication using credentials -->
-            <div class="grid gap-2">
-              <label class="text-sm font-medium" for="username">{{
-                "login.username" | transloco
-              }}</label>
-              <input
-                id="username"
-                type="text"
-                required
-                [(ngModel)]="username"
-                (keydown.enter)="handleLoginWithCredentials()" />
-            </div>
-
-            <div class="grid gap-2">
-              <label class="text-sm font-medium" for="password">{{
-                "login.password" | transloco
-              }}</label>
-              <input
-                id="password"
-                type="password"
-                required
-                [(ngModel)]="password"
-                (keydown.enter)="handleLoginWithCredentials()" />
-            </div>
-
-            <span
-              class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
-              role="button"
-              tabindex="0"
-              (click)="forgotPassword.emit()"
-              (keydown.enter)="forgotPassword.emit()">
-              {{ "login.forgotPassword" | transloco }}
-            </span>
-            <button variant="primary"
-              [disabled]="!isValid()"
-              (click)="handleLoginWithCredentials()">
-              {{ "login.connect" | transloco }}
-            </button>
-          }
-          @else {
-            <!-- authentication using OAuth or SAML provider -->
-            <button (click)="handleLogin()">
-              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
-            </button>
-          }
+          <!-- authentication using credentials -->
+          <div class="grid gap-2">
+            <label class="text-sm font-medium" for="username">{{
+              "login.username" | transloco
+            }}</label>
+            <input
+              id="username"
+              type="text"
+              required
+              [(ngModel)]="username"
+              (keydown.enter)="handleLoginWithCredentials()" />
+          </div>
+
+          <div class="grid gap-2">
+            <label class="text-sm font-medium" for="password">{{
+              "login.password" | transloco
+            }}</label>
+            <input
+              id="password"
+              type="password"
+              required
+              [(ngModel)]="password"
+              (keydown.enter)="handleLoginWithCredentials()" />
+          </div>
+
+          <span
+            class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
+            role="button"
+            tabindex="0"
+            (click)="forgotPassword.emit()"
+            (keydown.enter)="forgotPassword.emit()">
+            {{ "login.forgotPassword" | transloco }}
+          </span>
+          <button variant="primary"
+            [disabled]="!isValid()"
+            (click)="handleLoginWithCredentials()">
+            {{ "login.connect" | transloco }}
+          </button>
         </CardContent>
       </Card>
     } @else {
-      <app-wait />
+      <div class="flex h-dvh w-full items-center justify-center">
+        <div class="flex flex-col items-center space-y-4">
+          <span class="loader"></span>
+        </div>
+      </div>
     }
   `, host: {
                         "[class]": "cn('grid h-dvh w-full place-content-center', class())"
-                    }, styles: ["input{background-color:var(--background)}\n"] }]
+                    }, styles: ["input{background-color:var(--background)}.loader{--w: 96px;--h: 96px;transform:rotate(45deg);perspective:1000px;border-radius:50%;width:var(--w);height:var(--h);color:#0040bf}.loader:before,.loader:after{content:\"\";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff854a;transform:rotateY(70deg);animation-delay:.4s}@keyframes spin{0%,to{box-shadow:.4em 0 0 0 currentcolor}12%{box-shadow:.4em .4em 0 0 currentcolor}25%{box-shadow:0 .4em 0 0 currentcolor}37%{box-shadow:-.4em .4em 0 0 currentcolor}50%{box-shadow:-.4em 0 0 0 currentcolor}62%{box-shadow:-.4em -.4em 0 0 currentcolor}75%{box-shadow:0 -.4em 0 0 currentcolor}87%{box-shadow:.4em -.4em 0 0 currentcolor}}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], forgotPassword: [{ type: i0.Output, args: ["forgotPassword"] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }, { type: i0.Output, args: ["usernameChange"] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }, { type: i0.Output, args: ["passwordChange"] }] } });
 
 class AuthPageComponent {