@masterteam/gateway-auth 0.0.12 → 0.0.13

package/fesm2022/masterteam-gateway-auth.mjs

@@ -1,9 +1,10 @@
 import { HttpClient, HttpContextToken, HttpBackend } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, computed, input, ChangeDetectionStrategy, Component, signal, effect } from '@angular/core';
-import { of, EMPTY, isObservable, from, firstValueFrom, map, tap as tap$1, shareReplay, finalize, switchMap, catchError as catchError$1, throwError } from 'rxjs';
+import { EMPTY, of, isObservable, from, firstValueFrom, map, tap as tap$1, shareReplay, finalize, switchMap, catchError as catchError$1, throwError } from 'rxjs';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { Router, ActivatedRoute } from '@angular/router';
+import { ModalService } from '@masterteam/components/modal';
 import { mergeMap, catchError, tap } from 'rxjs/operators';
 import * as i2 from '@angular/common';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
@@ -149,6 +150,25 @@ function mapGatewayUser(user, tokenData, delegations) {
 function hasGatewayTokens(tokens) {
     return Boolean(tokens?.accessToken && tokens?.refreshToken);
 }
+const GATEWAY_RATE_LIMIT_STATUS = 429;
+const GATEWAY_RATE_LIMIT_ERROR_CODE = 'RATE_001';
+function extractGatewayRateLimitInfo(error) {
+    const e = error;
+    if (!e || e.status !== GATEWAY_RATE_LIMIT_STATUS) {
+        return null;
+    }
+    const detailSeconds = Number(e.error?.errors?.details?.retryAfterSeconds);
+    const headerSeconds = Number(e.headers?.get?.('Retry-After'));
+    const retryAfterSeconds = Number.isFinite(detailSeconds) && detailSeconds > 0
+        ? Math.ceil(detailSeconds)
+        : Number.isFinite(headerSeconds) && headerSeconds > 0
+            ? Math.ceil(headerSeconds)
+            : null;
+    const message = e.error?.errors?.message ??
+        e.error?.message ??
+        'Too many attempts. Please try again later.';
+    return { retryAfterSeconds, message };
+}
 function getGatewayErrorMessage(error, fallback) {
     const response = error;
     return (response.error?.message ??
@@ -280,6 +300,16 @@ class ClearError {
 class ClearPendingMfa {
     static type = '[Auth] Clear Pending MFA';
 }
+class SetRateLimit {
+    lock;
+    static type = '[Auth] Set Rate Limit';
+    constructor(lock) {
+        this.lock = lock;
+    }
+}
+class ClearRateLimit {
+    static type = '[Auth] Clear Rate Limit';
+}
 
 const GATEWAY_AUTH_OPTIONS = new InjectionToken('GATEWAY_AUTH_OPTIONS', {
     factory: () => ({
@@ -347,7 +377,18 @@ const AUTH_STATE_DEFAULTS = {
     twoFactorRequired: false,
     pendingMfa: null,
     ssoProviders: [],
+    rateLimit: null,
 };
+function pruneRateLimit(rateLimit) {
+    if (!rateLimit) {
+        return null;
+    }
+    if (typeof rateLimit.retryUntilMs === 'number' &&
+        rateLimit.retryUntilMs <= Date.now()) {
+        return null;
+    }
+    return rateLimit;
+}
 function sanitizePersistedAuthState(obj) {
     return {
         ...AUTH_STATE_DEFAULTS,
@@ -360,6 +401,7 @@ function sanitizePersistedAuthState(obj) {
         twoFactorRequired: false,
         pendingMfa: null,
         ssoProviders: [],
+        rateLimit: pruneRateLimit(obj?.rateLimit ?? null),
     };
 }
 
@@ -373,6 +415,7 @@ let GatewayAuthState = class GatewayAuthState {
     http = inject(HttpClient);
     options = inject(GATEWAY_AUTH_OPTIONS);
     router = inject(Router);
+    modalService = inject(ModalService);
     ssoSession = new GatewaySsoSession();
     static user(state) {
         return state.user;
@@ -413,6 +456,9 @@ let GatewayAuthState = class GatewayAuthState {
     static ssoProviders(state) {
         return state.ssoProviders;
     }
+    static rateLimit(state) {
+        return state.rateLimit;
+    }
     static isAdmin(state) {
         return state.user?.isAdmin || false;
     }
@@ -420,6 +466,9 @@ let GatewayAuthState = class GatewayAuthState {
         return state.user?.user || null;
     }
     login(ctx, action) {
+        if (this.isRateLimitActive(ctx, 'login')) {
+            return EMPTY;
+        }
         ctx.patchState({
             loading: true,
             error: null,
@@ -436,6 +485,9 @@ let GatewayAuthState = class GatewayAuthState {
             recaptchaAction: action.payload.recaptchaAction,
         })
             .pipe(mergeMap((response) => this.handleLoginResponse(ctx, response.data)), catchError((error) => {
+            if (this.handleRateLimit(ctx, error, 'login')) {
+                return of(null);
+            }
             ctx.dispatch(new LoginFailure(getGatewayErrorMessage(error, 'Login failed')));
             return of(null);
         }));
@@ -456,6 +508,9 @@ let GatewayAuthState = class GatewayAuthState {
             deviceToken: this.deviceToken,
         })
             .pipe(mergeMap((response) => this.handleLoginResponse(ctx, response.data)), catchError((error) => {
+            if (this.handleRateLimit(ctx, error, 'verifyMfa')) {
+                return of(null);
+            }
             const message = getGatewayErrorMessage(error, 'Invalid verification code');
             const shouldClearMfa = error?.status === 403;
             ctx.patchState({
@@ -477,6 +532,9 @@ let GatewayAuthState = class GatewayAuthState {
             this.navigateToLogin();
             return EMPTY;
         }
+        if (this.isRateLimitActive(ctx, 'resendMfa')) {
+            return EMPTY;
+        }
         ctx.patchState({ mfaResendLoading: true, error: null });
         return this.http
             .post(this.gatewayAuthMutationUrl(GATEWAY_AUTH_ENDPOINTS.resendMfa), {
@@ -491,6 +549,10 @@ let GatewayAuthState = class GatewayAuthState {
                 error: null,
             });
         }), catchError((error) => {
+            if (this.handleRateLimit(ctx, error, 'resendMfa')) {
+                ctx.patchState({ mfaResendLoading: false });
+                return of(null);
+            }
             ctx.patchState({
                 mfaResendLoading: false,
                 error: getGatewayErrorMessage(error, 'Failed to resend code'),
@@ -549,6 +611,10 @@ let GatewayAuthState = class GatewayAuthState {
             deviceToken: this.deviceToken,
         })
             .pipe(mergeMap((response) => this.handleLoginResponse(ctx, response.data)), catchError((error) => {
+            if (this.handleRateLimit(ctx, error, 'ssoExchange')) {
+                ctx.patchState({ ssoCallbackLoading: false });
+                return of(null);
+            }
             ctx.patchState({
                 ssoCallbackLoading: false,
                 error: getGatewayErrorMessage(error, 'SSO sign-in failed. Please try again.'),
@@ -575,6 +641,7 @@ let GatewayAuthState = class GatewayAuthState {
     }
     logout(ctx, action) {
         const { token, refreshToken, ssoProviders } = ctx.getState();
+        this.modalService.closeAll();
         this.ssoSession.clearAll();
         this.toObservable(this.options.beforeLocalLogout?.(ctx)).subscribe();
         ctx.patchState({
@@ -631,6 +698,45 @@ let GatewayAuthState = class GatewayAuthState {
     clearPendingMfa(ctx) {
         ctx.patchState({ pendingMfa: null, twoFactorRequired: false });
     }
+    setRateLimit(ctx, action) {
+        ctx.patchState({
+            loading: false,
+            mfaResendLoading: false,
+            ssoCallbackLoading: false,
+            error: null,
+            rateLimit: action.lock,
+        });
+    }
+    clearRateLimit(ctx) {
+        ctx.patchState({ rateLimit: null });
+    }
+    isRateLimitActive(ctx, scope) {
+        const lock = ctx.getState().rateLimit;
+        if (!lock || lock.scope !== scope) {
+            return false;
+        }
+        if (lock.retryUntilMs && lock.retryUntilMs <= Date.now()) {
+            ctx.patchState({ rateLimit: null });
+            return false;
+        }
+        return lock.retryUntilMs === null || lock.retryUntilMs > Date.now();
+    }
+    handleRateLimit(ctx, error, scope) {
+        const info = extractGatewayRateLimitInfo(error);
+        if (!info) {
+            return false;
+        }
+        const retryUntilMs = info.retryAfterSeconds
+            ? Date.now() + info.retryAfterSeconds * 1000
+            : null;
+        ctx.dispatch(new SetRateLimit({
+            retryUntilMs,
+            totalSeconds: info.retryAfterSeconds,
+            message: info.message,
+            scope,
+        }));
+        return true;
+    }
     handleLoginResponse(ctx, session) {
         if (session.requiresTwoFactor) {
             ctx.patchState({
@@ -762,6 +868,12 @@ __decorate([
 __decorate([
     Action(ClearPendingMfa)
 ], GatewayAuthState.prototype, "clearPendingMfa", null);
+__decorate([
+    Action(SetRateLimit)
+], GatewayAuthState.prototype, "setRateLimit", null);
+__decorate([
+    Action(ClearRateLimit)
+], GatewayAuthState.prototype, "clearRateLimit", null);
 __decorate([
     Selector()
 ], GatewayAuthState, "user", null);
@@ -801,6 +913,9 @@ __decorate([
 __decorate([
     Selector()
 ], GatewayAuthState, "ssoProviders", null);
+__decorate([
+    Selector()
+], GatewayAuthState, "rateLimit", null);
 __decorate([
     Selector()
 ], GatewayAuthState, "isAdmin", null);
@@ -815,7 +930,7 @@ GatewayAuthState = __decorate([
 ], GatewayAuthState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GatewayAuthState, decorators: [{
             type: Injectable
-        }], propDecorators: { login: [], verifyMfa: [], resendMfa: [], loadSsoProviders: [], startSso: [], exchangeSsoCode: [], loginSuccess: [], loginFailure: [], logout: [], updateUserData: [], updateTokens: [], clearError: [], clearPendingMfa: [] } });
+        }], propDecorators: { login: [], verifyMfa: [], resendMfa: [], loadSsoProviders: [], startSso: [], exchangeSsoCode: [], loginSuccess: [], loginFailure: [], logout: [], updateUserData: [], updateTokens: [], clearError: [], clearPendingMfa: [], setRateLimit: [], clearRateLimit: [] } });
 
 class GatewayAuthFacade {
     store = inject(Store);
@@ -832,6 +947,7 @@ class GatewayAuthFacade {
     twoFactorRequired = select(GatewayAuthState.twoFactorRequired);
     pendingMfa = select(GatewayAuthState.pendingMfa);
     ssoProviders = select(GatewayAuthState.ssoProviders);
+    rateLimit = select(GatewayAuthState.rateLimit);
     isAdmin = select(GatewayAuthState.isAdmin);
     userDetails = select(GatewayAuthState.userDetails);
     hasError = computed(() => this.error() !== null, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
@@ -883,6 +999,9 @@ class GatewayAuthFacade {
     clearPendingMfa() {
         this.store.dispatch(new ClearPendingMfa());
     }
+    clearRateLimit() {
+        this.store.dispatch(new ClearRateLimit());
+    }
     hasRole(role) {
         const userRoles = this.user()?.user?.roles;
         return Array.isArray(userRoles) ? userRoles.includes(role) : false;
@@ -1145,6 +1264,43 @@ class GatewayLoginPage {
     error = this.authFacade.error;
     passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
     selectedLanguage = signal('', ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : /* istanbul ignore next */ []));
+    nowMs = signal(Date.now(), ...(ngDevMode ? [{ debugName: "nowMs" }] : /* istanbul ignore next */ []));
+    rateLimit = computed(() => {
+        const lock = this.authFacade.rateLimit();
+        return lock && lock.scope === 'login' ? lock : null;
+    }, ...(ngDevMode ? [{ debugName: "rateLimit" }] : /* istanbul ignore next */ []));
+    rateLimitSecondsLeft = computed(() => {
+        const lock = this.rateLimit();
+        if (!lock?.retryUntilMs)
+            return null;
+        return Math.max(0, Math.ceil((lock.retryUntilMs - this.nowMs()) / 1000));
+    }, ...(ngDevMode ? [{ debugName: "rateLimitSecondsLeft" }] : /* istanbul ignore next */ []));
+    rateLimitProgress = computed(() => {
+        const lock = this.rateLimit();
+        const left = this.rateLimitSecondsLeft();
+        if (!lock?.totalSeconds || left === null)
+            return 0;
+        return Math.max(0, Math.min(100, (left / lock.totalSeconds) * 100));
+    }, ...(ngDevMode ? [{ debugName: "rateLimitProgress" }] : /* istanbul ignore next */ []));
+    rateLimitCountdownLabel = computed(() => {
+        const left = this.rateLimitSecondsLeft();
+        if (left === null)
+            return '';
+        const minutes = Math.floor(left / 60);
+        const seconds = left % 60;
+        return minutes > 0
+            ? `${minutes}:${String(seconds).padStart(2, '0')}`
+            : `${seconds}s`;
+    }, ...(ngDevMode ? [{ debugName: "rateLimitCountdownLabel" }] : /* istanbul ignore next */ []));
+    isRateLimited = computed(() => {
+        const lock = this.rateLimit();
+        if (!lock)
+            return false;
+        if (lock.retryUntilMs === null)
+            return true;
+        return (this.rateLimitSecondsLeft() ?? 0) > 0;
+    }, ...(ngDevMode ? [{ debugName: "isRateLimited" }] : /* istanbul ignore next */ []));
+    submitDisabled = computed(() => this.loginForm.invalid || this.loading() || this.isRateLimited(), ...(ngDevMode ? [{ debugName: "submitDisabled" }] : /* istanbul ignore next */ []));
     loginOptions = computed(() => this.options.loginPage, ...(ngDevMode ? [{ debugName: "loginOptions" }] : /* istanbul ignore next */ []));
     defaultDisplayData = computed(() => this.brandDisplayFacade.defaultBrandDisplayData(), ...(ngDevMode ? [{ debugName: "defaultDisplayData" }] : /* istanbul ignore next */ []));
     loginData = computed(() => this.branding.loginData(), ...(ngDevMode ? [{ debugName: "loginData" }] : /* istanbul ignore next */ []));
@@ -1207,6 +1363,24 @@ class GatewayLoginPage {
         effect(() => {
             this.selectedLanguage.set(this.activeLanguage());
         });
+        effect((onCleanup) => {
+            const lock = this.rateLimit();
+            if (!lock?.retryUntilMs) {
+                return;
+            }
+            if (lock.retryUntilMs <= Date.now()) {
+                this.authFacade.clearRateLimit();
+                return;
+            }
+            this.nowMs.set(Date.now());
+            const id = window.setInterval(() => {
+                this.nowMs.set(Date.now());
+                if (lock.retryUntilMs <= Date.now()) {
+                    this.authFacade.clearRateLimit();
+                }
+            }, 1000);
+            onCleanup(() => window.clearInterval(id));
+        });
     }
     ngOnInit() {
         this.brandDisplayFacade.getBrandDisplay();
@@ -1235,6 +1409,9 @@ class GatewayLoginPage {
             this.loginForm.markAllAsTouched();
             return;
         }
+        if (this.isRateLimited()) {
+            return;
+        }
         const { username, password } = this.loginForm.getRawValue();
         this.authFacade.login({
             userName: username,
@@ -1244,7 +1421,7 @@ class GatewayLoginPage {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GatewayLoginPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: GatewayLoginPage, isStandalone: true, selector: "mt-gateway-login-page", ngImport: i0, template: "@if (formPosition()) {\n  <ng-container *transloco=\"let t; prefix: translationPrefix()\">\n    <div\n      class=\"w-screen h-screen flex overflow-hidden\"\n      [style]=\"pageStyles()\"\n      [style.backgroundImage]=\"\n        backgroundImage()\n          ? (backgroundImage()\n            | secureImage: false : undefined : imageBasePath())\n          : null\n      \"\n    >\n      @if (formPosition() === \"end\") {\n        <ng-container [ngTemplateOutlet]=\"brandPanel\" />\n      }\n\n      <div [class]=\"formContainerClasses()\">\n        @if (formPosition() === \"center\") {\n          <div\n            class=\"flex flex-col items-center text-center mb-8 space-y-4\"\n            [style.color]=\"textColor()\"\n          >\n            <img\n              [src]=\"\n                logoUrl()\n                  ? (logoUrl()\n                    | secureImage: true : undefined : imageBasePath())\n                  : defaultLogoUrl()\n              \"\n              alt=\"BrandLogo\"\n              class=\"h-20 mx-auto\"\n            />\n            @if (productTagline(); as tagline) {\n              <h3 class=\"text-2xl font-medium\">{{ tagline }}</h3>\n            }\n          </div>\n        }\n\n        <div\n          class=\"glass-card relative w-full max-w-md rounded-xl pb-8 px-10 pt-12 space-y-[4vh]\"\n          [style.color]=\"textColor()\"\n        >\n          <div class=\"text-center space-y-[4vh]\">\n            <h2 class=\"text-3xl font-bold\">{{ t(\"signin\") }}</h2>\n            <p>{{ t(\"welcome-subtitle\") }}</p>\n          </div>\n\n          <form\n            [formGroup]=\"loginForm\"\n            (ngSubmit)=\"onSubmit()\"\n            class=\"space-y-[1rem]\"\n          >\n            <mt-text-field [label]=\"t('username')\" formControlName=\"username\" />\n\n            <div class=\"relative\">\n              <mt-text-field\n                [label]=\"t('password')\"\n                [type]=\"passwordVisible() ? 'text' : 'password'\"\n                formControlName=\"password\"\n              />\n              <button\n                type=\"button\"\n                class=\"password-toggle-btn cursor-pointer absolute end-3 top-7 h-10 flex items-center justify-center text-lg leading-none z-10\"\n                [attr.aria-label]=\"\n                  passwordVisible() ? t('hide-password') : t('show-password')\n                \"\n                (click)=\"togglePasswordVisibility()\"\n              ></button>\n            </div>\n\n            <mt-button\n              [label]=\"t('signin')\"\n              size=\"large\"\n              severity=\"primary\"\n              fluid\n              type=\"submit\"\n              [loading]=\"loading()\"\n              [disabled]=\"loginForm.invalid || loading()\"\n              styleClass=\"mt-2\"\n            />\n\n            @if (error(); as errorMessage) {\n              <p class=\"text-sm text-red-500 text-center\">\n                {{ errorMessage }}\n              </p>\n            }\n\n            <mt-gateway-sso-buttons [dividerLabel]=\"t('or')\" />\n\n            @if (showLanguageToggle()) {\n              <div class=\"pt-1 w-35 mx-auto\">\n                <mt-select-field\n                  [(ngModel)]=\"selectedLanguage\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  [options]=\"languageOptions()\"\n                  optionLabel=\"label\"\n                  optionValue=\"id\"\n                  (onChange)=\"onLanguageChange()\"\n                  size=\"small\"\n                />\n              </div>\n            }\n          </form>\n\n          <p\n            class=\"absolute text-center text-xs text-gray-400 pt-6 bottom-4 left-1/2 -translate-x-1/2 w-full\"\n          >\n            {{ t(\"copyright\") }}\n          </p>\n        </div>\n      </div>\n\n      @if (formPosition() === \"start\") {\n        <ng-container [ngTemplateOutlet]=\"brandPanel\" />\n      }\n    </div>\n\n    <ng-template #brandPanel>\n      <div\n        class=\"hidden md:flex flex-col justify-center items-start w-1/2 p-12\"\n        [style.color]=\"textColor()\"\n      >\n        <div class=\"w-full max-w-full rounded-xl p-1 space-y-2 h-1/2 ps-24\">\n          <div [class]=\"logoAlignment()\">\n            <img\n              [src]=\"\n                logoUrl()\n                  ? (logoUrl()\n                    | secureImage: true : undefined : imageBasePath())\n                  : defaultLogoUrl()\n              \"\n              alt=\"Logo\"\n              class=\"h-20\"\n            />\n          </div>\n          @if (productTagline(); as tagline) {\n            <h3 class=\"text-2xl\">{{ tagline }}</h3>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-container>\n} @else {\n  <div class=\"w-screen h-screen flex items-center justify-center\">\n    <mt-icon\n      class=\"text-4xl text-primary animate-spin animate-duration-2000\"\n      icon=\"general.loading-02\"\n    />\n  </div>\n}\n", styles: [":host{display:block}.glass-card{background:#ffffff26;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 8px 32px #0003;color:#fff}.glass-card *:not(input):not(button):not([class*=p-]){color:inherit!important}.password-toggle-btn{color:#374151d9;transition:color .15s ease}.password-toggle-btn:hover{color:#111827}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: GatewaySsoButtons, selector: "mt-gateway-sso-buttons", inputs: ["dividerLabel"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: GatewayLoginPage, isStandalone: true, selector: "mt-gateway-login-page", ngImport: i0, template: "@if (formPosition()) {\r\n  <ng-container *transloco=\"let t; prefix: translationPrefix()\">\r\n    <div\r\n      class=\"w-screen h-screen flex overflow-hidden\"\r\n      [style]=\"pageStyles()\"\r\n      [style.backgroundImage]=\"\r\n        backgroundImage()\r\n          ? (backgroundImage()\r\n            | secureImage: false : undefined : imageBasePath())\r\n          : null\r\n      \"\r\n    >\r\n      @if (formPosition() === \"end\") {\r\n        <ng-container [ngTemplateOutlet]=\"brandPanel\" />\r\n      }\r\n\r\n      <div [class]=\"formContainerClasses()\">\r\n        @if (formPosition() === \"center\") {\r\n          <div\r\n            class=\"flex flex-col items-center text-center mb-8 space-y-4\"\r\n            [style.color]=\"textColor()\"\r\n          >\r\n            <img\r\n              [src]=\"\r\n                logoUrl()\r\n                  ? (logoUrl()\r\n                    | secureImage: true : undefined : imageBasePath())\r\n                  : defaultLogoUrl()\r\n              \"\r\n              alt=\"BrandLogo\"\r\n              class=\"h-20 mx-auto\"\r\n            />\r\n            @if (productTagline(); as tagline) {\r\n              <h3 class=\"text-2xl font-medium\">{{ tagline }}</h3>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div\r\n          class=\"glass-card relative w-full max-w-md rounded-xl pb-8 px-10 pt-12 space-y-[4vh]\"\r\n          [style.color]=\"textColor()\"\r\n        >\r\n          <div class=\"text-center space-y-[4vh]\">\r\n            <h2 class=\"text-3xl font-bold\">{{ t(\"signin\") }}</h2>\r\n            <p>{{ t(\"welcome-subtitle\") }}</p>\r\n          </div>\r\n\r\n          <form\r\n            [formGroup]=\"loginForm\"\r\n            (ngSubmit)=\"onSubmit()\"\r\n            class=\"space-y-[1rem]\"\r\n          >\r\n            <mt-text-field [label]=\"t('username')\" formControlName=\"username\" />\r\n\r\n            <div class=\"relative\">\r\n              <mt-text-field\r\n                [label]=\"t('password')\"\r\n                [type]=\"passwordVisible() ? 'text' : 'password'\"\r\n                formControlName=\"password\"\r\n              />\r\n              <button\r\n                type=\"button\"\r\n                class=\"password-toggle-btn cursor-pointer absolute end-3 top-7 h-10 flex items-center justify-center text-lg leading-none z-10\"\r\n                [attr.aria-label]=\"\r\n                  passwordVisible() ? t('hide-password') : t('show-password')\r\n                \"\r\n                (click)=\"togglePasswordVisibility()\"\r\n              ></button>\r\n            </div>\r\n\r\n            <mt-button\r\n              [label]=\"\r\n                isRateLimited() && rateLimitSecondsLeft() !== null\r\n                  ? t('rate-limit-retry-in', {\r\n                      time: rateLimitCountdownLabel(),\r\n                    })\r\n                  : t('signin')\r\n              \"\r\n              size=\"large\"\r\n              severity=\"primary\"\r\n              fluid\r\n              type=\"submit\"\r\n              [loading]=\"loading()\"\r\n              [disabled]=\"submitDisabled()\"\r\n              styleClass=\"mt-2\"\r\n            />\r\n\r\n            @if (rateLimit(); as lock) {\r\n              <div\r\n                class=\"rate-limit-banner flex items-start gap-3 rounded-lg border border-red-300/40 bg-red-500/10 p-3 text-sm\"\r\n                role=\"alert\"\r\n                aria-live=\"polite\"\r\n              >\r\n                <mt-icon\r\n                  class=\"text-base text-red-500 mt-0.5 shrink-0\"\r\n                  icon=\"alert.alert-circle\"\r\n                />\r\n                <div class=\"flex-1 min-w-0 space-y-1\">\r\n                  <p class=\"font-medium\">{{ t(\"rate-limit-title\") }}</p>\r\n                  <p class=\"text-xs opacity-90\">\r\n                    @if (rateLimitSecondsLeft() !== null) {\r\n                      {{\r\n                        t(\"rate-limit-countdown\", {\r\n                          time: rateLimitCountdownLabel(),\r\n                        })\r\n                      }}\r\n                    } @else {\r\n                      {{ lock.message || t(\"rate-limit-blocked\") }}\r\n                    }\r\n                  </p>\r\n                  @if (rateLimitSecondsLeft() !== null) {\r\n                    <div\r\n                      class=\"rate-limit-progress h-1 w-full overflow-hidden rounded-full bg-red-500/20\"\r\n                    >\r\n                      <div\r\n                        class=\"h-full bg-red-500 transition-[width] duration-1000 ease-linear\"\r\n                        [style.width.%]=\"rateLimitProgress()\"\r\n                      ></div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            } @else if (error(); as errorMessage) {\r\n              <p class=\"text-sm text-red-500 text-center\">\r\n                {{ errorMessage }}\r\n              </p>\r\n            }\r\n\r\n            <mt-gateway-sso-buttons [dividerLabel]=\"t('or')\" />\r\n\r\n            @if (showLanguageToggle()) {\r\n              <div class=\"pt-1 w-35 mx-auto\">\r\n                <mt-select-field\r\n                  [(ngModel)]=\"selectedLanguage\"\r\n                  [ngModelOptions]=\"{ standalone: true }\"\r\n                  [options]=\"languageOptions()\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"id\"\r\n                  (onChange)=\"onLanguageChange()\"\r\n                  size=\"small\"\r\n                />\r\n              </div>\r\n            }\r\n          </form>\r\n\r\n          <p\r\n            class=\"absolute text-center text-xs text-gray-400 pt-6 bottom-4 left-1/2 -translate-x-1/2 w-full\"\r\n          >\r\n            {{ t(\"copyright\") }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n\r\n      @if (formPosition() === \"start\") {\r\n        <ng-container [ngTemplateOutlet]=\"brandPanel\" />\r\n      }\r\n    </div>\r\n\r\n    <ng-template #brandPanel>\r\n      <div\r\n        class=\"hidden md:flex flex-col justify-center items-start w-1/2 p-12\"\r\n        [style.color]=\"textColor()\"\r\n      >\r\n        <div class=\"w-full max-w-full rounded-xl p-1 space-y-2 h-1/2 ps-24\">\r\n          <div [class]=\"logoAlignment()\">\r\n            <img\r\n              [src]=\"\r\n                logoUrl()\r\n                  ? (logoUrl()\r\n                    | secureImage: true : undefined : imageBasePath())\r\n                  : defaultLogoUrl()\r\n              \"\r\n              alt=\"Logo\"\r\n              class=\"h-20\"\r\n            />\r\n          </div>\r\n          @if (productTagline(); as tagline) {\r\n            <h3 class=\"text-2xl\">{{ tagline }}</h3>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n} @else {\r\n  <div class=\"w-screen h-screen flex items-center justify-center\">\r\n    <mt-icon\r\n      class=\"text-4xl text-primary animate-spin animate-duration-2000\"\r\n      icon=\"general.loading-02\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.glass-card{background:#ffffff26;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 8px 32px #0003;color:#fff}.glass-card *:not(input):not(button):not([class*=p-]){color:inherit!important}.password-toggle-btn{color:#374151d9;transition:color .15s ease}.password-toggle-btn:hover{color:#111827}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: GatewaySsoButtons, selector: "mt-gateway-sso-buttons", inputs: ["dividerLabel"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GatewayLoginPage, decorators: [{
             type: Component,
@@ -1259,7 +1436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SecureImagePipe,
                         Icon,
                         GatewaySsoButtons,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (formPosition()) {\n  <ng-container *transloco=\"let t; prefix: translationPrefix()\">\n    <div\n      class=\"w-screen h-screen flex overflow-hidden\"\n      [style]=\"pageStyles()\"\n      [style.backgroundImage]=\"\n        backgroundImage()\n          ? (backgroundImage()\n            | secureImage: false : undefined : imageBasePath())\n          : null\n      \"\n    >\n      @if (formPosition() === \"end\") {\n        <ng-container [ngTemplateOutlet]=\"brandPanel\" />\n      }\n\n      <div [class]=\"formContainerClasses()\">\n        @if (formPosition() === \"center\") {\n          <div\n            class=\"flex flex-col items-center text-center mb-8 space-y-4\"\n            [style.color]=\"textColor()\"\n          >\n            <img\n              [src]=\"\n                logoUrl()\n                  ? (logoUrl()\n                    | secureImage: true : undefined : imageBasePath())\n                  : defaultLogoUrl()\n              \"\n              alt=\"BrandLogo\"\n              class=\"h-20 mx-auto\"\n            />\n            @if (productTagline(); as tagline) {\n              <h3 class=\"text-2xl font-medium\">{{ tagline }}</h3>\n            }\n          </div>\n        }\n\n        <div\n          class=\"glass-card relative w-full max-w-md rounded-xl pb-8 px-10 pt-12 space-y-[4vh]\"\n          [style.color]=\"textColor()\"\n        >\n          <div class=\"text-center space-y-[4vh]\">\n            <h2 class=\"text-3xl font-bold\">{{ t(\"signin\") }}</h2>\n            <p>{{ t(\"welcome-subtitle\") }}</p>\n          </div>\n\n          <form\n            [formGroup]=\"loginForm\"\n            (ngSubmit)=\"onSubmit()\"\n            class=\"space-y-[1rem]\"\n          >\n            <mt-text-field [label]=\"t('username')\" formControlName=\"username\" />\n\n            <div class=\"relative\">\n              <mt-text-field\n                [label]=\"t('password')\"\n                [type]=\"passwordVisible() ? 'text' : 'password'\"\n                formControlName=\"password\"\n              />\n              <button\n                type=\"button\"\n                class=\"password-toggle-btn cursor-pointer absolute end-3 top-7 h-10 flex items-center justify-center text-lg leading-none z-10\"\n                [attr.aria-label]=\"\n                  passwordVisible() ? t('hide-password') : t('show-password')\n                \"\n                (click)=\"togglePasswordVisibility()\"\n              ></button>\n            </div>\n\n            <mt-button\n              [label]=\"t('signin')\"\n              size=\"large\"\n              severity=\"primary\"\n              fluid\n              type=\"submit\"\n              [loading]=\"loading()\"\n              [disabled]=\"loginForm.invalid || loading()\"\n              styleClass=\"mt-2\"\n            />\n\n            @if (error(); as errorMessage) {\n              <p class=\"text-sm text-red-500 text-center\">\n                {{ errorMessage }}\n              </p>\n            }\n\n            <mt-gateway-sso-buttons [dividerLabel]=\"t('or')\" />\n\n            @if (showLanguageToggle()) {\n              <div class=\"pt-1 w-35 mx-auto\">\n                <mt-select-field\n                  [(ngModel)]=\"selectedLanguage\"\n                  [ngModelOptions]=\"{ standalone: true }\"\n                  [options]=\"languageOptions()\"\n                  optionLabel=\"label\"\n                  optionValue=\"id\"\n                  (onChange)=\"onLanguageChange()\"\n                  size=\"small\"\n                />\n              </div>\n            }\n          </form>\n\n          <p\n            class=\"absolute text-center text-xs text-gray-400 pt-6 bottom-4 left-1/2 -translate-x-1/2 w-full\"\n          >\n            {{ t(\"copyright\") }}\n          </p>\n        </div>\n      </div>\n\n      @if (formPosition() === \"start\") {\n        <ng-container [ngTemplateOutlet]=\"brandPanel\" />\n      }\n    </div>\n\n    <ng-template #brandPanel>\n      <div\n        class=\"hidden md:flex flex-col justify-center items-start w-1/2 p-12\"\n        [style.color]=\"textColor()\"\n      >\n        <div class=\"w-full max-w-full rounded-xl p-1 space-y-2 h-1/2 ps-24\">\n          <div [class]=\"logoAlignment()\">\n            <img\n              [src]=\"\n                logoUrl()\n                  ? (logoUrl()\n                    | secureImage: true : undefined : imageBasePath())\n                  : defaultLogoUrl()\n              \"\n              alt=\"Logo\"\n              class=\"h-20\"\n            />\n          </div>\n          @if (productTagline(); as tagline) {\n            <h3 class=\"text-2xl\">{{ tagline }}</h3>\n          }\n        </div>\n      </div>\n    </ng-template>\n  </ng-container>\n} @else {\n  <div class=\"w-screen h-screen flex items-center justify-center\">\n    <mt-icon\n      class=\"text-4xl text-primary animate-spin animate-duration-2000\"\n      icon=\"general.loading-02\"\n    />\n  </div>\n}\n", styles: [":host{display:block}.glass-card{background:#ffffff26;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 8px 32px #0003;color:#fff}.glass-card *:not(input):not(button):not([class*=p-]){color:inherit!important}.password-toggle-btn{color:#374151d9;transition:color .15s ease}.password-toggle-btn:hover{color:#111827}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (formPosition()) {\r\n  <ng-container *transloco=\"let t; prefix: translationPrefix()\">\r\n    <div\r\n      class=\"w-screen h-screen flex overflow-hidden\"\r\n      [style]=\"pageStyles()\"\r\n      [style.backgroundImage]=\"\r\n        backgroundImage()\r\n          ? (backgroundImage()\r\n            | secureImage: false : undefined : imageBasePath())\r\n          : null\r\n      \"\r\n    >\r\n      @if (formPosition() === \"end\") {\r\n        <ng-container [ngTemplateOutlet]=\"brandPanel\" />\r\n      }\r\n\r\n      <div [class]=\"formContainerClasses()\">\r\n        @if (formPosition() === \"center\") {\r\n          <div\r\n            class=\"flex flex-col items-center text-center mb-8 space-y-4\"\r\n            [style.color]=\"textColor()\"\r\n          >\r\n            <img\r\n              [src]=\"\r\n                logoUrl()\r\n                  ? (logoUrl()\r\n                    | secureImage: true : undefined : imageBasePath())\r\n                  : defaultLogoUrl()\r\n              \"\r\n              alt=\"BrandLogo\"\r\n              class=\"h-20 mx-auto\"\r\n            />\r\n            @if (productTagline(); as tagline) {\r\n              <h3 class=\"text-2xl font-medium\">{{ tagline }}</h3>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div\r\n          class=\"glass-card relative w-full max-w-md rounded-xl pb-8 px-10 pt-12 space-y-[4vh]\"\r\n          [style.color]=\"textColor()\"\r\n        >\r\n          <div class=\"text-center space-y-[4vh]\">\r\n            <h2 class=\"text-3xl font-bold\">{{ t(\"signin\") }}</h2>\r\n            <p>{{ t(\"welcome-subtitle\") }}</p>\r\n          </div>\r\n\r\n          <form\r\n            [formGroup]=\"loginForm\"\r\n            (ngSubmit)=\"onSubmit()\"\r\n            class=\"space-y-[1rem]\"\r\n          >\r\n            <mt-text-field [label]=\"t('username')\" formControlName=\"username\" />\r\n\r\n            <div class=\"relative\">\r\n              <mt-text-field\r\n                [label]=\"t('password')\"\r\n                [type]=\"passwordVisible() ? 'text' : 'password'\"\r\n                formControlName=\"password\"\r\n              />\r\n              <button\r\n                type=\"button\"\r\n                class=\"password-toggle-btn cursor-pointer absolute end-3 top-7 h-10 flex items-center justify-center text-lg leading-none z-10\"\r\n                [attr.aria-label]=\"\r\n                  passwordVisible() ? t('hide-password') : t('show-password')\r\n                \"\r\n                (click)=\"togglePasswordVisibility()\"\r\n              ></button>\r\n            </div>\r\n\r\n            <mt-button\r\n              [label]=\"\r\n                isRateLimited() && rateLimitSecondsLeft() !== null\r\n                  ? t('rate-limit-retry-in', {\r\n                      time: rateLimitCountdownLabel(),\r\n                    })\r\n                  : t('signin')\r\n              \"\r\n              size=\"large\"\r\n              severity=\"primary\"\r\n              fluid\r\n              type=\"submit\"\r\n              [loading]=\"loading()\"\r\n              [disabled]=\"submitDisabled()\"\r\n              styleClass=\"mt-2\"\r\n            />\r\n\r\n            @if (rateLimit(); as lock) {\r\n              <div\r\n                class=\"rate-limit-banner flex items-start gap-3 rounded-lg border border-red-300/40 bg-red-500/10 p-3 text-sm\"\r\n                role=\"alert\"\r\n                aria-live=\"polite\"\r\n              >\r\n                <mt-icon\r\n                  class=\"text-base text-red-500 mt-0.5 shrink-0\"\r\n                  icon=\"alert.alert-circle\"\r\n                />\r\n                <div class=\"flex-1 min-w-0 space-y-1\">\r\n                  <p class=\"font-medium\">{{ t(\"rate-limit-title\") }}</p>\r\n                  <p class=\"text-xs opacity-90\">\r\n                    @if (rateLimitSecondsLeft() !== null) {\r\n                      {{\r\n                        t(\"rate-limit-countdown\", {\r\n                          time: rateLimitCountdownLabel(),\r\n                        })\r\n                      }}\r\n                    } @else {\r\n                      {{ lock.message || t(\"rate-limit-blocked\") }}\r\n                    }\r\n                  </p>\r\n                  @if (rateLimitSecondsLeft() !== null) {\r\n                    <div\r\n                      class=\"rate-limit-progress h-1 w-full overflow-hidden rounded-full bg-red-500/20\"\r\n                    >\r\n                      <div\r\n                        class=\"h-full bg-red-500 transition-[width] duration-1000 ease-linear\"\r\n                        [style.width.%]=\"rateLimitProgress()\"\r\n                      ></div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            } @else if (error(); as errorMessage) {\r\n              <p class=\"text-sm text-red-500 text-center\">\r\n                {{ errorMessage }}\r\n              </p>\r\n            }\r\n\r\n            <mt-gateway-sso-buttons [dividerLabel]=\"t('or')\" />\r\n\r\n            @if (showLanguageToggle()) {\r\n              <div class=\"pt-1 w-35 mx-auto\">\r\n                <mt-select-field\r\n                  [(ngModel)]=\"selectedLanguage\"\r\n                  [ngModelOptions]=\"{ standalone: true }\"\r\n                  [options]=\"languageOptions()\"\r\n                  optionLabel=\"label\"\r\n                  optionValue=\"id\"\r\n                  (onChange)=\"onLanguageChange()\"\r\n                  size=\"small\"\r\n                />\r\n              </div>\r\n            }\r\n          </form>\r\n\r\n          <p\r\n            class=\"absolute text-center text-xs text-gray-400 pt-6 bottom-4 left-1/2 -translate-x-1/2 w-full\"\r\n          >\r\n            {{ t(\"copyright\") }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n\r\n      @if (formPosition() === \"start\") {\r\n        <ng-container [ngTemplateOutlet]=\"brandPanel\" />\r\n      }\r\n    </div>\r\n\r\n    <ng-template #brandPanel>\r\n      <div\r\n        class=\"hidden md:flex flex-col justify-center items-start w-1/2 p-12\"\r\n        [style.color]=\"textColor()\"\r\n      >\r\n        <div class=\"w-full max-w-full rounded-xl p-1 space-y-2 h-1/2 ps-24\">\r\n          <div [class]=\"logoAlignment()\">\r\n            <img\r\n              [src]=\"\r\n                logoUrl()\r\n                  ? (logoUrl()\r\n                    | secureImage: true : undefined : imageBasePath())\r\n                  : defaultLogoUrl()\r\n              \"\r\n              alt=\"Logo\"\r\n              class=\"h-20\"\r\n            />\r\n          </div>\r\n          @if (productTagline(); as tagline) {\r\n            <h3 class=\"text-2xl\">{{ tagline }}</h3>\r\n          }\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n} @else {\r\n  <div class=\"w-screen h-screen flex items-center justify-center\">\r\n    <mt-icon\r\n      class=\"text-4xl text-primary animate-spin animate-duration-2000\"\r\n      icon=\"general.loading-02\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.glass-card{background:#ffffff26;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 8px 32px #0003;color:#fff}.glass-card *:not(input):not(button):not([class*=p-]){color:inherit!important}.password-toggle-btn{color:#374151d9;transition:color .15s ease}.password-toggle-btn:hover{color:#111827}\n"] }]
         }], ctorParameters: () => [] });
 
 class GatewayMfa {
@@ -1378,5 +1555,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AUTH_STATE_DEFAULTS, ClearError, ClearPendingMfa, ExchangeSsoCode, GATEWAY_AUTH_ACCESS_TOKEN_REFRESH_SKEW_MS, GATEWAY_AUTH_DEVICE_TOKEN, GATEWAY_AUTH_DEVICE_TOKEN_STORAGE_KEY, GATEWAY_AUTH_ENDPOINTS, GATEWAY_AUTH_NGSW_BYPASS_PARAM, GATEWAY_AUTH_OPTIONS, GATEWAY_AUTH_RETRY_CONTEXT, GatewayAuthFacade, GatewayAuthState, GatewayLoginPage, GatewayMfa, GatewaySsoButtons, GatewaySsoCallback, GatewaySsoSession, LoadSsoProviders, Login, LoginFailure, LoginSuccess, Logout, ResendMfa, StartSso, UpdateTokens, UpdateUserData, VerifyMfa, buildGatewayUrl, buildSsoStartUrl, createSecureClientState, gatewayAuthInterceptor, getGatewayErrorMessage, hasGatewayTokens, isExpired, isGatewayAuthRequestUrl, mapGatewayTokens, mapGatewayUser, normalizeGatewayBase, readPersistedGatewayAuthTokens, resolveAccessTokenRefreshSkewMs, resolveApiDateValue, resolveGatewayAuthPath, resolveGatewayDeviceToken, sanitizePersistedAuthState, withGatewayAuthNgswBypass };
+export { AUTH_STATE_DEFAULTS, ClearError, ClearPendingMfa, ClearRateLimit, ExchangeSsoCode, GATEWAY_AUTH_ACCESS_TOKEN_REFRESH_SKEW_MS, GATEWAY_AUTH_DEVICE_TOKEN, GATEWAY_AUTH_DEVICE_TOKEN_STORAGE_KEY, GATEWAY_AUTH_ENDPOINTS, GATEWAY_AUTH_NGSW_BYPASS_PARAM, GATEWAY_AUTH_OPTIONS, GATEWAY_AUTH_RETRY_CONTEXT, GATEWAY_RATE_LIMIT_ERROR_CODE, GATEWAY_RATE_LIMIT_STATUS, GatewayAuthFacade, GatewayAuthState, GatewayLoginPage, GatewayMfa, GatewaySsoButtons, GatewaySsoCallback, GatewaySsoSession, LoadSsoProviders, Login, LoginFailure, LoginSuccess, Logout, ResendMfa, SetRateLimit, StartSso, UpdateTokens, UpdateUserData, VerifyMfa, buildGatewayUrl, buildSsoStartUrl, createSecureClientState, extractGatewayRateLimitInfo, gatewayAuthInterceptor, getGatewayErrorMessage, hasGatewayTokens, isExpired, isGatewayAuthRequestUrl, mapGatewayTokens, mapGatewayUser, normalizeGatewayBase, readPersistedGatewayAuthTokens, resolveAccessTokenRefreshSkewMs, resolveApiDateValue, resolveGatewayAuthPath, resolveGatewayDeviceToken, sanitizePersistedAuthState, withGatewayAuthNgswBypass };
 //# sourceMappingURL=masterteam-gateway-auth.mjs.map