@flusys/ng-auth 9.1.0 → 9.1.2

package/fesm2022/flusys-ng-auth-login-page.component-DQl52Qau.mjs

@@ -0,0 +1,1074 @@
+import { AuthApiService, AuthStateService, EmailPolicyService, SocialLoginButtonsComponent, isCompanySelectionResponse, isEmailVerificationRequired, isLoginResponse } from "./flusys-ng-auth.mjs";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, computed, effect, inject, input, signal } from "@angular/core";
+import { APP_CONFIG, isCompanyFeatureEnabled, isServiceEnabled, isSignUpEnabled } from "@flusys/ng-core";
+import { RouterLink } from "@angular/router";
+import { TranslatePipe, TranslateService, buildBranchTreeNodes } from "@flusys/ng-shared";
+import { CheckboxComponent, FButtonDirective, InputTextDirective, MessageService, PasswordComponent, SelectComponent, TreeSelectComponent, UiIconComponent } from "@flusys/ng-ui";
+import { AppFloatingConfigurator } from "@flusys/ng-layout";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormField, form, required } from "@angular/forms/signals";
+var LoginPageComponent = class LoginPageComponent {
+	destroyRef = inject(DestroyRef);
+	appConfig = inject(APP_CONFIG);
+	messageService = inject(MessageService);
+	authApi = inject(AuthApiService);
+	authState = inject(AuthStateService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	emailPolicy = inject(EmailPolicyService);
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	returnUrl = input("", ...ngDevMode ? [{ debugName: "returnUrl" }] : /* istanbul ignore next */ []);
+	currentStep = signal("credentials", ...ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []);
+	isLoading = signal(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	unverifiedEmail = signal("", ...ngDevMode ? [{ debugName: "unverifiedEmail" }] : /* istanbul ignore next */ []);
+	savedUserName = signal(this.authState.getSavedUserName(), ...ngDevMode ? [{ debugName: "savedUserName" }] : /* istanbul ignore next */ []);
+	welcomeBackText = computed(() => this.translate("auth.login.welcome.back", { name: this.savedUserName() }), ...ngDevMode ? [{ debugName: "welcomeBackText" }] : /* istanbul ignore next */ []);
+	loginFormModel = signal({
+		email: "",
+		password: "",
+		rememberMe: true
+	}, ...ngDevMode ? [{ debugName: "loginFormModel" }] : /* istanbul ignore next */ []);
+	loginForm = form(this.loginFormModel, (f) => {
+		required(f.email, { message: this.translate("auth.validation.email.required") });
+		required(f.password, { message: this.translate("auth.validation.password.required") });
+	});
+	emailValidationError = computed(() => this.emailPolicy.validate(this.loginFormModel().email), ...ngDevMode ? [{ debugName: "emailValidationError" }] : /* istanbul ignore next */ []);
+	isLoginFormValid = computed(() => {
+		return this.loginForm().valid() && !this.emailValidationError();
+	}, ...ngDevMode ? [{ debugName: "isLoginFormValid" }] : /* istanbul ignore next */ []);
+	selectionFormModel = signal({
+		companyId: "",
+		branchId: "",
+		rememberSelection: true
+	}, ...ngDevMode ? [{ debugName: "selectionFormModel" }] : /* istanbul ignore next */ []);
+	selectionForm = form(this.selectionFormModel, (f) => {
+		required(f.companyId, { message: this.translate("auth.validation.company.required") });
+		required(f.branchId, { message: this.translate("auth.validation.branch.required") });
+	});
+	isSelectionFormValid = computed(() => this.selectionForm().valid(), ...ngDevMode ? [{ debugName: "isSelectionFormValid" }] : /* istanbul ignore next */ []);
+	companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), ...ngDevMode ? [{ debugName: "companyFeatureEnabled" }] : /* istanbul ignore next */ []);
+	emailFeatureEnabled = computed(() => isServiceEnabled(this.appConfig, "email"), ...ngDevMode ? [{ debugName: "emailFeatureEnabled" }] : /* istanbul ignore next */ []);
+	signUpEnabled = computed(() => isSignUpEnabled(this.appConfig), ...ngDevMode ? [{ debugName: "signUpEnabled" }] : /* istanbul ignore next */ []);
+	sessionId = null;
+	companies = signal([], ...ngDevMode ? [{ debugName: "companies" }] : /* istanbul ignore next */ []);
+	userName = signal("", ...ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []);
+	branches = computed(() => {
+		const companyId = this.selectionFormModel().companyId;
+		if (!companyId) return [];
+		return this.companies().find((c) => c.id === companyId)?.branches ?? [];
+	}, ...ngDevMode ? [{ debugName: "branches" }] : /* istanbul ignore next */ []);
+	branchTreeNodes = computed(() => buildBranchTreeNodes(this.branches()), ...ngDevMode ? [{ debugName: "branchTreeNodes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			if (this.authState.requiresCompanySelection()) this.restorePendingSelectionState();
+		});
+	}
+	restorePendingSelectionState() {
+		const availableCompanies = this.authState.availableCompanies();
+		const sessionId = this.authState.selectionSessionId();
+		const name = this.authState.userName();
+		if (availableCompanies.length > 0 && sessionId) {
+			this.companies.set(availableCompanies);
+			this.sessionId = sessionId;
+			this.userName.set(name);
+			this.currentStep.set("company-selection");
+			this.autoSelectIfSingle();
+		}
+	}
+	onSubmit(event) {
+		event.preventDefault();
+		if (!this.isLoginFormValid()) {
+			this.messageService.add({
+				severity: "error",
+				summary: this.translate("shared.validation.error"),
+				detail: this.translate("shared.fill.required.fields")
+			});
+			return;
+		}
+		this.isLoading.set(true);
+		const formData = this.loginFormModel();
+		const loginData = {
+			email: formData.email,
+			password: formData.password,
+			rememberMe: formData.rememberMe
+		};
+		this.authApi.login(loginData).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (response) => {
+				this.isLoading.set(false);
+				if (isEmailVerificationRequired(response)) {
+					if (!response.data) return;
+					this.unverifiedEmail.set(response.data.email);
+					this.currentStep.set("email-verification");
+					return;
+				}
+				if (isCompanySelectionResponse(response)) {
+					if (!response.data) return;
+					this.sessionId = response.data.sessionId;
+					this.companies.set(response.data.companies);
+					this.userName.set(response.data.user.name ?? response.data.user.email);
+					this.authState.setSelectionState(response.data);
+					this.currentStep.set("company-selection");
+					this.autoSelectIfSingle();
+				} else if (isLoginResponse(response)) {
+					if (!response.data) return;
+					this.authState.setLoginState(response.data);
+					this.messageService.add({
+						severity: "success",
+						summary: this.translate("shared.success"),
+						detail: response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message ?? this.translate("auth.login.success")
+					});
+					this.authState.navigateAfterLogin(this.returnUrl());
+				}
+			},
+			error: (error) => {
+				this.isLoading.set(false);
+				const messageKey = error?.error?.messageKey;
+				const detail = messageKey ? this.translate(messageKey, error?.error?.messageVariables) : error?.error?.message;
+				this.messageService.add({
+					severity: "error",
+					summary: this.translate("auth.login.title"),
+					detail
+				});
+			}
+		});
+	}
+	onCompanyChange() {
+		this.selectionFormModel.update((model) => ({
+			...model,
+			branchId: ""
+		}));
+		const branches = this.branches();
+		if (branches.length === 1) this.selectionFormModel.update((model) => ({
+			...model,
+			branchId: branches[0].id
+		}));
+	}
+	onSelectCompany(event) {
+		event.preventDefault();
+		if (!this.isSelectionFormValid()) {
+			this.messageService.add({
+				severity: "warn",
+				summary: this.translate("shared.validation.error"),
+				detail: this.translate("auth.login.requires.selection")
+			});
+			return;
+		}
+		if (!this.sessionId) {
+			this.messageService.add({
+				severity: "error",
+				summary: this.translate("shared.error"),
+				detail: this.translate("auth.session.expired")
+			});
+			this.goBackToCredentials();
+			return;
+		}
+		this.isLoading.set(true);
+		const formData = this.selectionFormModel();
+		const selectData = {
+			sessionId: this.sessionId,
+			companyId: formData.companyId,
+			branchId: formData.branchId,
+			rememberMe: this.loginFormModel().rememberMe
+		};
+		this.authApi.select(selectData).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (response) => {
+				this.isLoading.set(false);
+				if (!response.data) return;
+				this.authState.setLoginState(response.data);
+				this.messageService.add({
+					severity: "success",
+					summary: this.translate("shared.success"),
+					detail: response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message
+				});
+				this.authState.navigateAfterLogin(this.returnUrl());
+			},
+			error: () => {
+				this.isLoading.set(false);
+			}
+		});
+	}
+	goBackToCredentials() {
+		this.sessionId = null;
+		this.companies.set([]);
+		this.unverifiedEmail.set("");
+		this.selectionFormModel.set({
+			companyId: "",
+			branchId: "",
+			rememberSelection: true
+		});
+		this.authState.resetState();
+		this.currentStep.set("credentials");
+	}
+	onResendVerification() {
+		const email = this.unverifiedEmail();
+		if (!email) return;
+		this.isLoading.set(true);
+		this.authApi.resendVerification(email).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (response) => {
+				this.isLoading.set(false);
+				this.messageService.add({
+					severity: "success",
+					summary: this.translate("shared.success"),
+					detail: response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message
+				});
+			},
+			error: () => {
+				this.isLoading.set(false);
+			}
+		});
+	}
+	autoSelectIfSingle() {
+		if (this.companies().length === 1) {
+			this.selectionFormModel.update((model) => ({
+				...model,
+				companyId: this.companies()[0].id
+			}));
+			this.onCompanyChange();
+		}
+		const storedCompanyId = this.authState.getStoredCompanyId();
+		const storedBranchId = this.authState.getStoredBranchId();
+		if (storedCompanyId) {
+			const company = this.companies().find((c) => c.id === storedCompanyId);
+			if (company) {
+				this.selectionFormModel.update((model) => ({
+					...model,
+					companyId: storedCompanyId
+				}));
+				if (storedBranchId) {
+					if (company.branches.find((b) => b.id === storedBranchId)) this.selectionFormModel.update((model) => ({
+						...model,
+						branchId: storedBranchId
+					}));
+				}
+			}
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LoginPageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: LoginPageComponent,
+		isStandalone: true,
+		selector: "lib-login-page",
+		inputs: { returnUrl: {
+			classPropertyName: "returnUrl",
+			publicName: "returnUrl",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `
+    <app-floating-configurator />
+    <div
+      class="bg-surface-ground flex items-center justify-center min-h-screen"
+    >
+      <div
+        class="flex flex-col items-center justify-center w-full max-w-[32rem] px-4"
+      >
+        <div
+          class="w-full"
+          style="border-radius: var(--f-content-border-radius); padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)"
+        >
+          <div
+            class="w-full py-8 px-4 sm:py-12 sm:px-8 md:py-16 md:px-12"
+            style="border-radius: var(--f-content-border-radius); background: var(--f-content-background)"
+          >
+            <!-- Step Indicator (only when company feature enabled) -->
+            @if (companyFeatureEnabled()) {
+              <div class="flex items-center justify-center mb-6 gap-2">
+                <div
+                  class="flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold transition-colors"
+                  [class.bg-primary]="currentStep() === 'credentials'"
+                  [class.text-primary-contrast]="
+                    currentStep() === 'credentials'
+                  "
+                  [class.bg-surface-200]="currentStep() !== 'credentials'"
+                  [class.dark:bg-surface-700]="currentStep() !== 'credentials'"
+                  [class.text-muted-color]="currentStep() !== 'credentials'"
+                >
+                  1
+                </div>
+                <div class="w-12 h-0.5 bg-surface-200 dark:bg-surface-700"></div>
+                <div
+                  class="flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold transition-colors"
+                  [class.bg-primary]="currentStep() === 'company-selection'"
+                  [class.text-primary-contrast]="
+                    currentStep() === 'company-selection'
+                  "
+                  [class.bg-surface-200]="currentStep() !== 'company-selection'"
+                  [class.dark:bg-surface-700]="currentStep() !== 'company-selection'"
+                  [class.text-muted-color]="
+                    currentStep() !== 'company-selection'
+                  "
+                >
+                  2
+                </div>
+              </div>
+            }
+
+            <!-- Step 1: Credentials -->
+            @if (currentStep() === 'credentials') {
+              <div class="text-center mb-8">
+                <div
+                  class="text-3xl font-medium mb-4 text-color truncate"
+                  [title]="savedUserName() ? welcomeBackText() : null"
+                >
+                  @if (savedUserName()) {
+                    {{ welcomeBackText() }}
+                  } @else {
+                    {{ 'auth.login.welcome' | translate }}
+                  }
+                </div>
+                <span class="text-muted-color font-medium">{{
+                  'auth.login.sign.in.to.continue' | translate
+                }}</span>
+              </div>
+
+              <form (submit)="onSubmit($event)">
+                <label
+                  for="email"
+                  class="block text-lg font-medium mb-2 text-color"
+                >
+                  {{ 'auth.email.label' | translate }}
+                </label>
+                <input
+                  fInputText
+                  id="email"
+                  type="email"
+                  [placeholder]="'auth.email.placeholder' | translate"
+                  class="w-full"
+                  [formField]="loginForm.email"
+                  autocomplete="email"
+                />
+                @if (emailValidationError()) {
+                  <small class="text-danger block mt-1">{{
+                    emailValidationError()
+                  }}</small>
+                }
+                <div class="mb-4"></div>
+
+                <label
+                  for="password"
+                  class="block font-medium text-lg mb-2 text-color"
+                >
+                  {{ 'auth.password.label' | translate }}
+                </label>
+                <div class="mb-4">
+                  <f-password
+                    [inputId]="'password'"
+                    [placeholder]="'auth.password.placeholder' | translate"
+                    class="w-full"
+                    [formField]="loginForm.password"
+                    autocomplete="current-password"
+                  />
+                </div>
+
+                <div
+                  class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-2 mb-8 gap-4"
+                >
+                  <f-checkbox [formField]="loginForm.rememberMe" [label]="'auth.field.remember.me' | translate" />
+                  @if (emailFeatureEnabled()) {
+                    <span
+                      class="font-medium no-underline cursor-pointer text-primary"
+                      style="margin-inline-start: 0.5rem;"
+                      routerLink="/auth/forgot-password"
+                    >
+                      {{ 'auth.password.forgot' | translate }}
+                    </span>
+                  }
+                </div>
+
+                <button
+                  fButton
+                  class="w-full"
+                  type="submit"
+                  [disabled]="!isLoginFormValid() || isLoading()"
+                >
+                  @if (isLoading()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'auth.login.sign.in' | translate }}</span>
+                </button>
+
+                <lib-social-login-buttons [returnUrl]="returnUrl()" />
+
+                @if (signUpEnabled()) {
+                  <div class="flex items-center justify-center mt-4 gap-2">
+                    <span class="font-medium">{{
+                      'auth.login.no.account' | translate
+                    }}</span>
+                    <a
+                      routerLink="/auth/register"
+                      class="font-semibold text-primary cursor-pointer"
+                    >
+                      {{ 'auth.login.sign.up' | translate }}
+                    </a>
+                  </div>
+                }
+              </form>
+            }
+
+            <!-- Email Verification Required -->
+            @if (currentStep() === 'email-verification') {
+              <div class="text-center">
+                <div class="flex justify-center mb-6">
+                  <ui-icon name="envelope" class="text-6xl text-warn"></ui-icon>
+                </div>
+                <div class="text-3xl font-medium mb-4 text-color">
+                  {{ 'auth.login.email.not.verified' | translate }}
+                </div>
+                <p class="text-muted-color font-medium mb-6">
+                  {{ 'auth.login.verify.email.message' | translate }}
+                </p>
+                <button
+                  fButton
+                  class="w-full mb-4"
+                  (click)="onResendVerification()"
+                  [disabled]="isLoading()"
+                >
+                  @if (isLoading()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'auth.verify.resend' | translate }}</span>
+                </button>
+                <div class="mt-4">
+                  <span
+                    class="font-semibold text-primary cursor-pointer"
+                    (click)="goBackToCredentials()"
+                  >
+                    {{ 'auth.login.back.to.sign.in' | translate }}
+                  </span>
+                </div>
+              </div>
+            }
+
+            <!-- Step 2: Company Selection -->
+            @if (currentStep() === 'company-selection') {
+              <div class="text-center mb-8">
+                <div class="text-3xl font-medium mb-4 text-color">
+                  {{ 'auth.login.select.company' | translate }}
+                </div>
+                <div class="text-muted-color font-medium">
+                  {{ 'auth.login.select.company.message' | translate }}
+                </div>
+              </div>
+
+              <form (submit)="onSelectCompany($event)">
+                <label
+                  for="company"
+                  class="block text-lg font-medium mb-2 text-color"
+                >
+                  {{ 'shared.company' | translate }}
+                </label>
+                <f-select
+                  inputId="company"
+                  class="w-full mb-4"
+                  [options]="companies()"
+                  optionLabel="name"
+                  optionValue="id"
+                  [formField]="selectionForm.companyId"
+                  [placeholder]="'auth.login.select.company.option' | translate"
+                  (onChange)="onCompanyChange()"
+                />
+
+                <label
+                  for="branch"
+                  class="block text-lg font-medium mb-2 text-color"
+                >
+                  {{ 'auth.login.branch.label' | translate }}
+                </label>
+                <f-treeselect
+                  inputId="branch"
+                  class="w-full mb-4"
+                  [options]="branchTreeNodes()"
+                  [formField]="selectionForm.branchId"
+                  [placeholder]="'auth.login.select.branch.option' | translate"
+                  [filter]="true"
+                  [filterPlaceholder]="'shared.search' | translate"
+                  [emptyMessage]="'shared.no.results' | translate"
+                />
+
+                <div class="flex items-center mt-2 mb-8">
+                  <f-checkbox
+                    [formField]="selectionForm.rememberSelection"
+                    [label]="'auth.login.remember.selection' | translate"
+                  />
+                </div>
+
+                <div class="flex flex-col sm:flex-row gap-4">
+                  <button
+                    fButton
+                    class="w-full"
+                    severity="secondary"
+                    [outlined]="true"
+                    type="button"
+                    (click)="goBackToCredentials()"
+                  >
+                    <span pButtonLabel>{{ 'shared.back' | translate }}</span>
+                  </button>
+                  <button
+                    fButton
+                    class="w-full"
+                    type="submit"
+                    [disabled]="!isSelectionFormValid() || isLoading()"
+                  >
+                    @if (isLoading()) {
+                      <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                    }
+                    <span pButtonLabel>{{ 'shared.continue' | translate }}</span>
+                  </button>
+                </div>
+              </form>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: CheckboxComponent,
+				selector: "f-checkbox",
+				inputs: [
+					"label",
+					"binary",
+					"disabled",
+					"readonly",
+					"inputId",
+					"invalid",
+					"indeterminate",
+					"variant",
+					"size",
+					"touched",
+					"styleClass",
+					"style",
+					"checked"
+				],
+				outputs: [
+					"onChange",
+					"onBlur",
+					"touch",
+					"checkedChange"
+				]
+			},
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "directive",
+				type: InputTextDirective,
+				selector: "[fInputText]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"size",
+					"fluid"
+				]
+			},
+			{
+				kind: "component",
+				type: PasswordComponent,
+				selector: "f-password",
+				inputs: [
+					"toggleMask",
+					"feedback",
+					"disabled",
+					"placeholder",
+					"inputId",
+					"invalid",
+					"touched",
+					"inputStyleClass",
+					"styleClass",
+					"style",
+					"ariaDescribedby",
+					"autocomplete",
+					"variant",
+					"size",
+					"fluid",
+					"appendTo",
+					"promptLabel",
+					"weakLabel",
+					"mediumLabel",
+					"strongLabel",
+					"mediumRegex",
+					"strongRegex"
+				],
+				outputs: ["onBlur", "onFocus"]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "f-select",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"placeholder",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterMatchMode",
+					"filterLocale",
+					"filterPlaceholder",
+					"resetFilterOnHide",
+					"autofocusFilter",
+					"emptyMessage",
+					"emptyFilterMessage",
+					"showClear",
+					"loading",
+					"loadingIcon",
+					"dropdownIcon",
+					"clearIcon",
+					"inputId",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo",
+					"editable",
+					"readonly",
+					"autofocus",
+					"checkmark",
+					"group",
+					"optionGroupLabel",
+					"optionGroupChildren",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"lazy",
+					"selectedObject"
+				],
+				outputs: [
+					"onFilter",
+					"onChange",
+					"onShow",
+					"onHide",
+					"onBlur",
+					"onFocus",
+					"onClear",
+					"onLazyLoad"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeSelectComponent,
+				selector: "f-treeselect",
+				inputs: [
+					"options",
+					"placeholder",
+					"inputId",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterPlaceholder",
+					"selectionMode",
+					"display",
+					"propagateSelectionDown",
+					"propagateSelectionUp",
+					"showClear",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"emptyMessage",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "component",
+				type: AppFloatingConfigurator,
+				selector: "app-floating-configurator"
+			},
+			{
+				kind: "component",
+				type: SocialLoginButtonsComponent,
+				selector: "lib-social-login-buttons",
+				inputs: ["returnUrl"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: LoginPageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-login-page",
+			imports: [
+				CheckboxComponent,
+				FButtonDirective,
+				InputTextDirective,
+				PasswordComponent,
+				SelectComponent,
+				TreeSelectComponent,
+				UiIconComponent,
+				RouterLink,
+				FormField,
+				AppFloatingConfigurator,
+				SocialLoginButtonsComponent,
+				TranslatePipe
+			],
+			template: `
+    <app-floating-configurator />
+    <div
+      class="bg-surface-ground flex items-center justify-center min-h-screen"
+    >
+      <div
+        class="flex flex-col items-center justify-center w-full max-w-[32rem] px-4"
+      >
+        <div
+          class="w-full"
+          style="border-radius: var(--f-content-border-radius); padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)"
+        >
+          <div
+            class="w-full py-8 px-4 sm:py-12 sm:px-8 md:py-16 md:px-12"
+            style="border-radius: var(--f-content-border-radius); background: var(--f-content-background)"
+          >
+            <!-- Step Indicator (only when company feature enabled) -->
+            @if (companyFeatureEnabled()) {
+              <div class="flex items-center justify-center mb-6 gap-2">
+                <div
+                  class="flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold transition-colors"
+                  [class.bg-primary]="currentStep() === 'credentials'"
+                  [class.text-primary-contrast]="
+                    currentStep() === 'credentials'
+                  "
+                  [class.bg-surface-200]="currentStep() !== 'credentials'"
+                  [class.dark:bg-surface-700]="currentStep() !== 'credentials'"
+                  [class.text-muted-color]="currentStep() !== 'credentials'"
+                >
+                  1
+                </div>
+                <div class="w-12 h-0.5 bg-surface-200 dark:bg-surface-700"></div>
+                <div
+                  class="flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold transition-colors"
+                  [class.bg-primary]="currentStep() === 'company-selection'"
+                  [class.text-primary-contrast]="
+                    currentStep() === 'company-selection'
+                  "
+                  [class.bg-surface-200]="currentStep() !== 'company-selection'"
+                  [class.dark:bg-surface-700]="currentStep() !== 'company-selection'"
+                  [class.text-muted-color]="
+                    currentStep() !== 'company-selection'
+                  "
+                >
+                  2
+                </div>
+              </div>
+            }
+
+            <!-- Step 1: Credentials -->
+            @if (currentStep() === 'credentials') {
+              <div class="text-center mb-8">
+                <div
+                  class="text-3xl font-medium mb-4 text-color truncate"
+                  [title]="savedUserName() ? welcomeBackText() : null"
+                >
+                  @if (savedUserName()) {
+                    {{ welcomeBackText() }}
+                  } @else {
+                    {{ 'auth.login.welcome' | translate }}
+                  }
+                </div>
+                <span class="text-muted-color font-medium">{{
+                  'auth.login.sign.in.to.continue' | translate
+                }}</span>
+              </div>
+
+              <form (submit)="onSubmit($event)">
+                <label
+                  for="email"
+                  class="block text-lg font-medium mb-2 text-color"
+                >
+                  {{ 'auth.email.label' | translate }}
+                </label>
+                <input
+                  fInputText
+                  id="email"
+                  type="email"
+                  [placeholder]="'auth.email.placeholder' | translate"
+                  class="w-full"
+                  [formField]="loginForm.email"
+                  autocomplete="email"
+                />
+                @if (emailValidationError()) {
+                  <small class="text-danger block mt-1">{{
+                    emailValidationError()
+                  }}</small>
+                }
+                <div class="mb-4"></div>
+
+                <label
+                  for="password"
+                  class="block font-medium text-lg mb-2 text-color"
+                >
+                  {{ 'auth.password.label' | translate }}
+                </label>
+                <div class="mb-4">
+                  <f-password
+                    [inputId]="'password'"
+                    [placeholder]="'auth.password.placeholder' | translate"
+                    class="w-full"
+                    [formField]="loginForm.password"
+                    autocomplete="current-password"
+                  />
+                </div>
+
+                <div
+                  class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-2 mb-8 gap-4"
+                >
+                  <f-checkbox [formField]="loginForm.rememberMe" [label]="'auth.field.remember.me' | translate" />
+                  @if (emailFeatureEnabled()) {
+                    <span
+                      class="font-medium no-underline cursor-pointer text-primary"
+                      style="margin-inline-start: 0.5rem;"
+                      routerLink="/auth/forgot-password"
+                    >
+                      {{ 'auth.password.forgot' | translate }}
+                    </span>
+                  }
+                </div>
+
+                <button
+                  fButton
+                  class="w-full"
+                  type="submit"
+                  [disabled]="!isLoginFormValid() || isLoading()"
+                >
+                  @if (isLoading()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'auth.login.sign.in' | translate }}</span>
+                </button>
+
+                <lib-social-login-buttons [returnUrl]="returnUrl()" />
+
+                @if (signUpEnabled()) {
+                  <div class="flex items-center justify-center mt-4 gap-2">
+                    <span class="font-medium">{{
+                      'auth.login.no.account' | translate
+                    }}</span>
+                    <a
+                      routerLink="/auth/register"
+                      class="font-semibold text-primary cursor-pointer"
+                    >
+                      {{ 'auth.login.sign.up' | translate }}
+                    </a>
+                  </div>
+                }
+              </form>
+            }
+
+            <!-- Email Verification Required -->
+            @if (currentStep() === 'email-verification') {
+              <div class="text-center">
+                <div class="flex justify-center mb-6">
+                  <ui-icon name="envelope" class="text-6xl text-warn"></ui-icon>
+                </div>
+                <div class="text-3xl font-medium mb-4 text-color">
+                  {{ 'auth.login.email.not.verified' | translate }}
+                </div>
+                <p class="text-muted-color font-medium mb-6">
+                  {{ 'auth.login.verify.email.message' | translate }}
+                </p>
+                <button
+                  fButton
+                  class="w-full mb-4"
+                  (click)="onResendVerification()"
+                  [disabled]="isLoading()"
+                >
+                  @if (isLoading()) {
+                    <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                  }
+                  <span pButtonLabel>{{ 'auth.verify.resend' | translate }}</span>
+                </button>
+                <div class="mt-4">
+                  <span
+                    class="font-semibold text-primary cursor-pointer"
+                    (click)="goBackToCredentials()"
+                  >
+                    {{ 'auth.login.back.to.sign.in' | translate }}
+                  </span>
+                </div>
+              </div>
+            }
+
+            <!-- Step 2: Company Selection -->
+            @if (currentStep() === 'company-selection') {
+              <div class="text-center mb-8">
+                <div class="text-3xl font-medium mb-4 text-color">
+                  {{ 'auth.login.select.company' | translate }}
+                </div>
+                <div class="text-muted-color font-medium">
+                  {{ 'auth.login.select.company.message' | translate }}
+                </div>
+              </div>
+
+              <form (submit)="onSelectCompany($event)">
+                <label
+                  for="company"
+                  class="block text-lg font-medium mb-2 text-color"
+                >
+                  {{ 'shared.company' | translate }}
+                </label>
+                <f-select
+                  inputId="company"
+                  class="w-full mb-4"
+                  [options]="companies()"
+                  optionLabel="name"
+                  optionValue="id"
+                  [formField]="selectionForm.companyId"
+                  [placeholder]="'auth.login.select.company.option' | translate"
+                  (onChange)="onCompanyChange()"
+                />
+
+                <label
+                  for="branch"
+                  class="block text-lg font-medium mb-2 text-color"
+                >
+                  {{ 'auth.login.branch.label' | translate }}
+                </label>
+                <f-treeselect
+                  inputId="branch"
+                  class="w-full mb-4"
+                  [options]="branchTreeNodes()"
+                  [formField]="selectionForm.branchId"
+                  [placeholder]="'auth.login.select.branch.option' | translate"
+                  [filter]="true"
+                  [filterPlaceholder]="'shared.search' | translate"
+                  [emptyMessage]="'shared.no.results' | translate"
+                />
+
+                <div class="flex items-center mt-2 mb-8">
+                  <f-checkbox
+                    [formField]="selectionForm.rememberSelection"
+                    [label]="'auth.login.remember.selection' | translate"
+                  />
+                </div>
+
+                <div class="flex flex-col sm:flex-row gap-4">
+                  <button
+                    fButton
+                    class="w-full"
+                    severity="secondary"
+                    [outlined]="true"
+                    type="button"
+                    (click)="goBackToCredentials()"
+                  >
+                    <span pButtonLabel>{{ 'shared.back' | translate }}</span>
+                  </button>
+                  <button
+                    fButton
+                    class="w-full"
+                    type="submit"
+                    [disabled]="!isSelectionFormValid() || isLoading()"
+                  >
+                    @if (isLoading()) {
+                      <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                    }
+                    <span pButtonLabel>{{ 'shared.continue' | translate }}</span>
+                  </button>
+                </div>
+              </form>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { returnUrl: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "returnUrl",
+			required: false
+		}]
+	}] }
+});
+export { LoginPageComponent };
+
+//# sourceMappingURL=flusys-ng-auth-login-page.component-DQl52Qau.mjs.map