@flusys/ng-auth 9.1.0 → 9.1.2

package/fesm2022/flusys-ng-auth-register-page.component-D99y1jiA.mjs

@@ -0,0 +1,1513 @@
+import { AUTH_REGISTRATION_EXTENSION, AuthApiService, AuthStateService, EmailPolicyService, PasswordPolicyService, REGISTRATION_FIELD_CONTEXT } from "./flusys-ng-auth.mjs";
+import { t as sortByOrder } from "./flusys-ng-auth-extension-order.util-2XWSLqii.mjs";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Injector, computed, effect, inject, input, signal } from "@angular/core";
+import { APP_CONFIG, getDefaultBranchSlug, getDefaultCompanySlug, isCompanyFeatureEnabled } from "@flusys/ng-core";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
+import { TranslatePipe, TranslateService } from "@flusys/ng-shared";
+import { NgComponentOutlet, NgTemplateOutlet } from "@angular/common";
+import { CheckboxComponent, FButtonDirective, InputTextDirective, MessageService, PasswordComponent, SelectComponent, TextareaDirective, UiIconComponent } from "@flusys/ng-ui";
+import { AppFloatingConfigurator } from "@flusys/ng-layout";
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { FormField, form, minLength, required } from "@angular/forms/signals";
+var RegisterPageComponent = class RegisterPageComponent {
+	destroyRef = inject(DestroyRef);
+	appConfig = inject(APP_CONFIG);
+	messageService = inject(MessageService);
+	authApi = inject(AuthApiService);
+	authState = inject(AuthStateService);
+	route = inject(ActivatedRoute);
+	router = inject(Router);
+	emailPolicy = inject(EmailPolicyService);
+	passwordPolicy = inject(PasswordPolicyService);
+	registrationExtension = inject(AUTH_REGISTRATION_EXTENSION, { optional: true });
+	translateAdapter = inject(TranslateService, { optional: true });
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	queryParamMap = toSignal(this.route.queryParamMap);
+	companySlugInitialized = false;
+	returnUrl = input("", ...ngDevMode ? [{ debugName: "returnUrl" }] : /* istanbul ignore next */ []);
+	isLoading = signal(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), ...ngDevMode ? [{ debugName: "companyFeatureEnabled" }] : /* istanbul ignore next */ []);
+	defaultCompanySlug = computed(() => getDefaultCompanySlug(this.appConfig), ...ngDevMode ? [{ debugName: "defaultCompanySlug" }] : /* istanbul ignore next */ []);
+	defaultBranchSlug = computed(() => getDefaultBranchSlug(this.appConfig), ...ngDevMode ? [{ debugName: "defaultBranchSlug" }] : /* istanbul ignore next */ []);
+	hasDefaultCompany = computed(() => !!this.defaultCompanySlug(), ...ngDevMode ? [{ debugName: "hasDefaultCompany" }] : /* istanbul ignore next */ []);
+	hasDefaultBranch = computed(() => !!this.defaultBranchSlug(), ...ngDevMode ? [{ debugName: "hasDefaultBranch" }] : /* istanbul ignore next */ []);
+	extraFields = computed(() => {
+		if (!this.registrationExtension) return [];
+		return sortByOrder(this.registrationExtension.getExtraFields());
+	}, ...ngDevMode ? [{ debugName: "extraFields" }] : /* istanbul ignore next */ []);
+	extraFieldsModel = signal(this.extraFields().reduce((acc, field) => {
+		if (field.defaultValue !== void 0) acc[field.key] = field.defaultValue;
+		return acc;
+	}, {}), ...ngDevMode ? [{ debugName: "extraFieldsModel" }] : /* istanbul ignore next */ []);
+	userFormModel = signal({
+		name: "",
+		email: "",
+		password: "",
+		confirmPassword: "",
+		phone: ""
+	}, ...ngDevMode ? [{ debugName: "userFormModel" }] : /* istanbul ignore next */ []);
+	userForm = form(this.userFormModel, (f) => {
+		required(f.name, { message: this.translate("shared.name.required") });
+		minLength(f.name, 2, { message: this.translate("auth.validation.name.min.length", { min: 2 }) });
+		required(f.email, { message: this.translate("auth.validation.email.required") });
+		required(f.password, { message: this.translate("auth.validation.password.required") });
+		required(f.confirmPassword, { message: this.translate("auth.validation.confirm.password.required") });
+	});
+	companyFormModel = signal({
+		createNewCompany: false,
+		companySlug: "",
+		branchSlug: "",
+		newCompanyName: "",
+		newCompanyPhone: "",
+		newCompanyAddress: ""
+	}, ...ngDevMode ? [{ debugName: "companyFormModel" }] : /* istanbul ignore next */ []);
+	companyForm = form(this.companyFormModel);
+	emailValidationError = computed(() => this.emailPolicy.validate(this.userFormModel().email), ...ngDevMode ? [{ debugName: "emailValidationError" }] : /* istanbul ignore next */ []);
+	passwordValidationError = computed(() => this.passwordPolicy.validate(this.userFormModel().password), ...ngDevMode ? [{ debugName: "passwordValidationError" }] : /* istanbul ignore next */ []);
+	extraFieldsValidationError = computed(() => {
+		if (!this.registrationExtension?.validateExtraFields) return null;
+		return this.registrationExtension.validateExtraFields(this.extraFieldsModel());
+	}, ...ngDevMode ? [{ debugName: "extraFieldsValidationError" }] : /* istanbul ignore next */ []);
+	passwordsMatch = computed(() => {
+		const model = this.userFormModel();
+		return model.password === model.confirmPassword;
+	}, ...ngDevMode ? [{ debugName: "passwordsMatch" }] : /* istanbul ignore next */ []);
+	isFormValid = computed(() => {
+		const userModel = this.userFormModel();
+		const emailError = this.emailValidationError();
+		const passwordError = this.passwordValidationError();
+		const extraFieldsError = this.extraFieldsValidationError();
+		const userValid = userModel.name.trim().length >= 2 && userModel.email.includes("@") && !emailError && userModel.password.length > 0 && !passwordError && userModel.confirmPassword.length > 0 && this.passwordsMatch() && !extraFieldsError;
+		const extraFieldsValid = this.validateRequiredExtraFields();
+		if (!isCompanyFeatureEnabled(this.appConfig)) return userValid && extraFieldsValid;
+		const companyModel = this.companyFormModel();
+		if (companyModel.createNewCompany) return userValid && extraFieldsValid && companyModel.newCompanyName.trim().length > 0;
+		return userValid && extraFieldsValid;
+	}, ...ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []);
+	validateRequiredExtraFields() {
+		const fields = this.extraFields();
+		const values = this.extraFieldsModel();
+		for (const field of fields) if (field.required) {
+			const value = values[field.key];
+			if (value === void 0 || value === null || value === "") return false;
+		}
+		return true;
+	}
+	updateExtraField(key, value) {
+		this.extraFieldsModel.update((model) => ({
+			...model,
+			[key]: value
+		}));
+	}
+	getFieldTemplateContext(field) {
+		return {
+			field,
+			value: this.extraFieldsModel()[field.key] ?? field.defaultValue,
+			updateValue: (value) => this.updateExtraField(field.key, value)
+		};
+	}
+	parentInjector = inject(Injector);
+	fieldInjectors = /* @__PURE__ */ new Map();
+	getFieldInjector(field) {
+		const cached = this.fieldInjectors.get(field.key);
+		if (cached) {
+			cached.setField(field);
+			return cached.injector;
+		}
+		let currentField = field;
+		const extraFieldsModel = this.extraFieldsModel;
+		const injector = Injector.create({
+			providers: [{
+				provide: REGISTRATION_FIELD_CONTEXT,
+				useValue: {
+					get field() {
+						return currentField;
+					},
+					get value() {
+						return extraFieldsModel()[currentField.key] ?? currentField.defaultValue;
+					},
+					updateValue: (value) => this.updateExtraField(currentField.key, value)
+				}
+			}],
+			parent: field.injector ?? this.parentInjector
+		});
+		this.fieldInjectors.set(field.key, {
+			injector,
+			setField: (next) => currentField = next
+		});
+		return injector;
+	}
+	constructor() {
+		effect(() => {
+			const params = this.queryParamMap();
+			if (!params || this.companySlugInitialized) return;
+			this.companySlugInitialized = true;
+			const configCompanySlug = this.defaultCompanySlug();
+			const configBranchSlug = this.defaultBranchSlug();
+			const queryCompanySlug = params.get("companySlug");
+			const companySlug = configCompanySlug || queryCompanySlug || "";
+			const branchSlug = configBranchSlug || "";
+			if (companySlug || branchSlug) this.companyFormModel.update((model) => ({
+				...model,
+				companySlug,
+				branchSlug
+			}));
+		});
+	}
+	onCreateCompanyToggle(createNew) {
+		if (createNew) this.companyFormModel.update((model) => ({
+			...model,
+			createNewCompany: true,
+			companySlug: "",
+			branchSlug: ""
+		}));
+		else this.companyFormModel.update((model) => ({
+			...model,
+			createNewCompany: false,
+			newCompanyName: "",
+			newCompanyPhone: "",
+			newCompanyAddress: ""
+		}));
+	}
+	onSubmit() {
+		if (!this.isFormValid()) {
+			this.messageService.add({
+				severity: "error",
+				summary: this.translate("shared.validation.error"),
+				detail: this.translate("shared.fill.required.fields")
+			});
+			return;
+		}
+		this.isLoading.set(true);
+		const userModel = this.userFormModel();
+		const companyModel = this.companyFormModel();
+		let registrationData = {
+			name: userModel.name,
+			email: userModel.email,
+			password: userModel.password,
+			phone: userModel.phone || void 0
+		};
+		const extraFieldsData = this.extraFieldsModel();
+		if (Object.keys(extraFieldsData).length > 0) registrationData["additionalFields"] = extraFieldsData;
+		if (this.registrationExtension?.transformRegistrationData) registrationData = this.registrationExtension.transformRegistrationData(registrationData);
+		if (isCompanyFeatureEnabled(this.appConfig)) {
+			if (companyModel.createNewCompany) {
+				registrationData["newCompanyName"] = companyModel.newCompanyName || void 0;
+				registrationData["newCompanyPhone"] = companyModel.newCompanyPhone || void 0;
+				registrationData["newCompanyAddress"] = companyModel.newCompanyAddress || void 0;
+			} else {
+				registrationData["companySlug"] = companyModel.companySlug || void 0;
+				registrationData["branchSlug"] = companyModel.branchSlug || void 0;
+			}
+		}
+		this.authApi.register(registrationData).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (response) => {
+				this.isLoading.set(false);
+				const data = response.data;
+				if (!data) return;
+				if (data.requiresEmailVerification) {
+					this.messageService.add({
+						severity: "success",
+						summary: this.translate("shared.success"),
+						detail: response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message,
+						life: 5e3
+					});
+					this.router.navigate(["/auth/login"]);
+					return;
+				}
+				if (data.accessToken) {
+					this.authState.setLoginState({
+						accessToken: data.accessToken,
+						user: data.user,
+						company: data.company,
+						branch: data.branch
+					});
+					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);
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: RegisterPageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: RegisterPageComponent,
+		isStandalone: true,
+		selector: "lib-register-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 py-8"
+    >
+      <div class="flex flex-col items-center justify-center">
+        <div
+          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="py-8 px-4 sm:py-10 sm:px-8 md:py-12 md:px-12 w-full sm:w-[650px] max-w-[95vw] sm:max-w-[90vw]"
+            style="border-radius: var(--f-content-border-radius); background: var(--f-content-background)"
+          >
+            <div class="text-center mb-6">
+              <div class="text-3xl font-medium mb-4 text-color">
+                {{ 'auth.register.create.account' | translate }}
+              </div>
+              <span class="text-muted-color font-medium">{{
+                'auth.register.subtitle' | translate
+              }}</span>
+            </div>
+
+            <form (ngSubmit)="onSubmit()">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div>
+                  <label for="name" class="block font-medium mb-2"
+                    >{{ 'auth.register.full.name' | translate }} *</label
+                  >
+                  <input
+                    fInputText
+                    id="name"
+                    [formField]="userForm.name"
+                    [placeholder]="'auth.register.name.placeholder' | translate"
+                    class="w-full"
+                    autocomplete="name"
+                  />
+                </div>
+
+                <div>
+                  <label for="phone" class="block font-medium mb-2">{{
+                    'auth.phone.label' | translate
+                  }}</label>
+                  <input
+                    fInputText
+                    id="phone"
+                    [formField]="userForm.phone"
+                    [placeholder]="'auth.phone.placeholder' | translate"
+                    class="w-full"
+                    autocomplete="tel"
+                  />
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label for="email" class="block font-medium mb-2"
+                  >{{ 'auth.email.label' | translate }} *</label
+                >
+                <input
+                  fInputText
+                  id="email"
+                  type="email"
+                  [formField]="userForm.email"
+                  [placeholder]="'auth.email.placeholder' | translate"
+                  class="w-full"
+                  autocomplete="email"
+                />
+                @if (emailValidationError()) {
+                  <small class="text-danger block mt-1">{{
+                    emailValidationError()
+                  }}</small>
+                }
+              </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div>
+                  <label for="password" class="block font-medium mb-2"
+                    >{{ 'auth.password.label' | translate }} *</label
+                  >
+                  <f-password
+                    [inputId]="'password'"
+                    [formField]="userForm.password"
+                    [placeholder]="
+                      'shared.min.characters'
+                        | translate: { count: passwordPolicy.minLength }
+                    "
+                    class="w-full"
+                    autocomplete="new-password"
+                  />
+                  @if (passwordValidationError()) {
+                    <small class="text-danger block mt-1">{{
+                      passwordValidationError()
+                    }}</small>
+                  }
+                </div>
+
+                <div>
+                  <label for="confirmPassword" class="block font-medium mb-2"
+                    >{{ 'auth.register.confirm.password' | translate }} *</label
+                  >
+                  <f-password
+                    [inputId]="'confirmPassword'"
+                    [formField]="userForm.confirmPassword"
+                    [placeholder]="
+                      'auth.register.confirm.password.placeholder' | translate
+                    "
+                    class="w-full"
+                    autocomplete="new-password"
+                  />
+                  @if (!passwordsMatch() && userFormModel().confirmPassword) {
+                    <small class="text-danger block mt-2">{{
+                      'auth.register.passwords.do.not.match' | translate
+                    }}</small>
+                  }
+                </div>
+              </div>
+
+              @if (extraFields().length > 0) {
+                <div class="border-t border-surface pt-4 mt-4 mb-4">
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    @for (field of extraFields(); track field.key) {
+                      <div [class]="field.containerClass ?? ''">
+                        <label [for]="field.key" class="block font-medium mb-2">
+                          {{ field.labelKey | translate: null : field.label
+                          }}{{ field.required ? ' *' : '' }}
+                        </label>
+                        @if (field.component) {
+                          <ng-container
+                            [ngComponentOutlet]="field.component"
+                            [ngComponentOutletInjector]="getFieldInjector(field)"
+                          ></ng-container>
+                        } @else if (field.template) {
+                          <ng-container
+                            [ngTemplateOutlet]="field.template"
+                            [ngTemplateOutletContext]="
+                              getFieldTemplateContext(field)
+                            "
+                          ></ng-container>
+                        } @else {
+                          @switch (field.type) {
+                            @case ('text') {
+                              <input
+                                fInputText
+                                [id]="field.key"
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate: null : field.placeholder ?? ''
+                                "
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                            @case ('number') {
+                              <input
+                                fInputText
+                                type="number"
+                                [id]="field.key"
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate: null : field.placeholder ?? ''
+                                "
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).valueAsNumber
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                            @case ('textarea') {
+                              <textarea
+                                fTextarea
+                                [id]="field.key"
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate: null : field.placeholder ?? ''
+                                "
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                                rows="3"
+                              ></textarea>
+                            }
+                            @case ('select') {
+                              <f-select
+                                [id]="field.key"
+                                class="w-full"
+                                [options]="field.options ?? []"
+                                optionValue="value"
+                                [ngModel]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                [ngModelOptions]="{ standalone: true }"
+                                (ngModelChange)="
+                                  updateExtraField(field.key, $event)
+                                "
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate
+                                      : null
+                                      : field.placeholder ??
+                                          ('shared.select' | translate)
+                                "
+                              >
+                                <ng-template #item let-opt>{{
+                                  opt.labelKey | translate: null : opt.label
+                                }}</ng-template>
+                                <ng-template #selectedItem let-opt>{{
+                                  opt.labelKey | translate: null : opt.label
+                                }}</ng-template>
+                              </f-select>
+                            }
+                            @case ('checkbox') {
+                              <f-checkbox
+                                [inputId]="field.key"
+                                [checked]="
+                                  $any(
+                                    extraFieldsModel()[field.key] ??
+                                      field.defaultValue ??
+                                      false
+                                  )
+                                "
+                                (onChange)="
+                                  updateExtraField(field.key, $event.checked)
+                                "
+                                [label]="
+                                  field.placeholderKey
+                                    | translate
+                                      : null
+                                      : field.placeholder ??
+                                          (field.labelKey
+                                            | translate: null : field.label)
+                                "
+                              />
+                            }
+                            @case ('date') {
+                              <input
+                                fInputText
+                                type="date"
+                                [id]="field.key"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                          }
+                        }
+                      </div>
+                    }
+                  </div>
+                  @if (extraFieldsValidationError()) {
+                    <small class="text-danger block mt-2">{{
+                      extraFieldsValidationError()
+                    }}</small>
+                  }
+                </div>
+              }
+
+              @if (companyFeatureEnabled()) {
+                <div class="border-t border-surface pt-6 mt-6">
+                  <div class="text-center mb-6">
+                    <div class="text-2xl font-medium mb-2 text-color">
+                      {{ 'auth.register.company.details' | translate }}
+                    </div>
+                    <span class="text-muted-color font-medium">
+                      @if (hasDefaultCompany()) {
+                        {{ 'auth.register.join.default.company' | translate }}
+                      } @else {
+                        {{ 'auth.register.join.or.create.company' | translate }}
+                      }
+                    </span>
+                  </div>
+
+                  @if (!hasDefaultCompany()) {
+                    <div class="mb-4">
+                      <f-checkbox
+                        [formField]="companyForm.createNewCompany"
+                        [label]="'auth.register.create.new.company' | translate"
+                        (onChange)="onCreateCompanyToggle($event.checked)"
+                      />
+                    </div>
+                  }
+
+                  @if (!companyFormModel().createNewCompany) {
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                      <div>
+                        <label
+                          for="companySlug"
+                          class="block font-medium mb-2"
+                          >{{ 'auth.register.company.code' | translate }}</label
+                        >
+                        @if (hasDefaultCompany()) {
+                          <input
+                            fInputText
+                            id="companySlug"
+                            [value]="defaultCompanySlug()"
+                            class="w-full bg-(--f-form-field-filled-background)"
+                            readonly
+                          />
+                          <small class="text-muted-color">{{
+                            'auth.register.preconfigured.company' | translate
+                          }}</small>
+                        } @else {
+                          <input
+                            fInputText
+                            id="companySlug"
+                            [formField]="companyForm.companySlug"
+                            [placeholder]="
+                              'auth.register.company.code.placeholder'
+                                | translate
+                            "
+                            class="w-full"
+                          />
+                          <small class="text-muted-color">{{
+                            'auth.register.enter.company.code' | translate
+                          }}</small>
+                        }
+                      </div>
+
+                      <div>
+                        <label
+                          for="branchSlug"
+                          class="block font-medium mb-2"
+                          >{{ 'auth.register.branch.code' | translate }}</label
+                        >
+                        @if (hasDefaultBranch()) {
+                          <input
+                            fInputText
+                            id="branchSlug"
+                            [value]="defaultBranchSlug()"
+                            class="w-full bg-(--f-form-field-filled-background)"
+                            readonly
+                          />
+                          <small class="text-muted-color">{{
+                            'auth.register.preconfigured.branch' | translate
+                          }}</small>
+                        } @else {
+                          <input
+                            fInputText
+                            id="branchSlug"
+                            [formField]="companyForm.branchSlug"
+                            [placeholder]="
+                              'auth.register.branch.code.placeholder'
+                                | translate
+                            "
+                            class="w-full"
+                          />
+                        }
+                      </div>
+                    </div>
+                  } @else {
+                    <div class="mb-4">
+                      <label for="newCompanyName" class="block font-medium mb-2"
+                        >{{ 'auth.register.company.name' | translate }} *</label
+                      >
+                      <input
+                        fInputText
+                        id="newCompanyName"
+                        [formField]="companyForm.newCompanyName"
+                        [placeholder]="
+                          'auth.register.company.name.placeholder' | translate
+                        "
+                        class="w-full"
+                      />
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                      <div>
+                        <label
+                          for="newCompanyPhone"
+                          class="block font-medium mb-2"
+                          >{{ 'auth.phone.label' | translate }}</label
+                        >
+                        <input
+                          fInputText
+                          id="newCompanyPhone"
+                          [formField]="companyForm.newCompanyPhone"
+                          [placeholder]="'auth.phone.placeholder' | translate"
+                          class="w-full"
+                        />
+                      </div>
+
+                      <div>
+                        <label
+                          for="newCompanyAddress"
+                          class="block font-medium mb-2"
+                          >{{ 'auth.address.label' | translate }}</label
+                        >
+                        <input
+                          fInputText
+                          id="newCompanyAddress"
+                          [formField]="companyForm.newCompanyAddress"
+                          [placeholder]="'auth.address.placeholder' | translate"
+                          class="w-full"
+                        />
+                      </div>
+                    </div>
+                  }
+                </div>
+              }
+
+              <button
+                fButton
+                class="w-full mt-4"
+                type="submit"
+                [disabled]="!isFormValid() || isLoading()"
+              >
+                @if (isLoading()) {
+                  <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                }
+                <span pButtonLabel>{{
+                  'auth.register.create.account' | translate
+                }}</span>
+              </button>
+
+              <div class="flex items-center justify-center mt-4 gap-2">
+                <span class="font-medium">{{
+                  'auth.register.already.have.account' | translate
+                }}</span>
+                <a
+                  routerLink="/auth/login"
+                  class="font-semibold text-primary cursor-pointer"
+                >
+                  {{ 'auth.login.sign.in' | translate }}
+                </a>
+              </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: "directive",
+				type: TextareaDirective,
+				selector: "[fTextarea]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"fluid",
+					"autoResize"
+				],
+				outputs: ["onResize"]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				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: "directive",
+				type: i1.NgForm,
+				selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]",
+				inputs: ["ngFormOptions"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				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: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: RegisterPageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-register-page",
+			imports: [
+				CheckboxComponent,
+				FButtonDirective,
+				InputTextDirective,
+				PasswordComponent,
+				SelectComponent,
+				TextareaDirective,
+				UiIconComponent,
+				FormsModule,
+				NgComponentOutlet,
+				NgTemplateOutlet,
+				RouterLink,
+				FormField,
+				AppFloatingConfigurator,
+				TranslatePipe
+			],
+			template: `
+    <app-floating-configurator />
+    <div
+      class="bg-surface-ground flex items-center justify-center min-h-screen py-8"
+    >
+      <div class="flex flex-col items-center justify-center">
+        <div
+          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="py-8 px-4 sm:py-10 sm:px-8 md:py-12 md:px-12 w-full sm:w-[650px] max-w-[95vw] sm:max-w-[90vw]"
+            style="border-radius: var(--f-content-border-radius); background: var(--f-content-background)"
+          >
+            <div class="text-center mb-6">
+              <div class="text-3xl font-medium mb-4 text-color">
+                {{ 'auth.register.create.account' | translate }}
+              </div>
+              <span class="text-muted-color font-medium">{{
+                'auth.register.subtitle' | translate
+              }}</span>
+            </div>
+
+            <form (ngSubmit)="onSubmit()">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div>
+                  <label for="name" class="block font-medium mb-2"
+                    >{{ 'auth.register.full.name' | translate }} *</label
+                  >
+                  <input
+                    fInputText
+                    id="name"
+                    [formField]="userForm.name"
+                    [placeholder]="'auth.register.name.placeholder' | translate"
+                    class="w-full"
+                    autocomplete="name"
+                  />
+                </div>
+
+                <div>
+                  <label for="phone" class="block font-medium mb-2">{{
+                    'auth.phone.label' | translate
+                  }}</label>
+                  <input
+                    fInputText
+                    id="phone"
+                    [formField]="userForm.phone"
+                    [placeholder]="'auth.phone.placeholder' | translate"
+                    class="w-full"
+                    autocomplete="tel"
+                  />
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label for="email" class="block font-medium mb-2"
+                  >{{ 'auth.email.label' | translate }} *</label
+                >
+                <input
+                  fInputText
+                  id="email"
+                  type="email"
+                  [formField]="userForm.email"
+                  [placeholder]="'auth.email.placeholder' | translate"
+                  class="w-full"
+                  autocomplete="email"
+                />
+                @if (emailValidationError()) {
+                  <small class="text-danger block mt-1">{{
+                    emailValidationError()
+                  }}</small>
+                }
+              </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                <div>
+                  <label for="password" class="block font-medium mb-2"
+                    >{{ 'auth.password.label' | translate }} *</label
+                  >
+                  <f-password
+                    [inputId]="'password'"
+                    [formField]="userForm.password"
+                    [placeholder]="
+                      'shared.min.characters'
+                        | translate: { count: passwordPolicy.minLength }
+                    "
+                    class="w-full"
+                    autocomplete="new-password"
+                  />
+                  @if (passwordValidationError()) {
+                    <small class="text-danger block mt-1">{{
+                      passwordValidationError()
+                    }}</small>
+                  }
+                </div>
+
+                <div>
+                  <label for="confirmPassword" class="block font-medium mb-2"
+                    >{{ 'auth.register.confirm.password' | translate }} *</label
+                  >
+                  <f-password
+                    [inputId]="'confirmPassword'"
+                    [formField]="userForm.confirmPassword"
+                    [placeholder]="
+                      'auth.register.confirm.password.placeholder' | translate
+                    "
+                    class="w-full"
+                    autocomplete="new-password"
+                  />
+                  @if (!passwordsMatch() && userFormModel().confirmPassword) {
+                    <small class="text-danger block mt-2">{{
+                      'auth.register.passwords.do.not.match' | translate
+                    }}</small>
+                  }
+                </div>
+              </div>
+
+              @if (extraFields().length > 0) {
+                <div class="border-t border-surface pt-4 mt-4 mb-4">
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    @for (field of extraFields(); track field.key) {
+                      <div [class]="field.containerClass ?? ''">
+                        <label [for]="field.key" class="block font-medium mb-2">
+                          {{ field.labelKey | translate: null : field.label
+                          }}{{ field.required ? ' *' : '' }}
+                        </label>
+                        @if (field.component) {
+                          <ng-container
+                            [ngComponentOutlet]="field.component"
+                            [ngComponentOutletInjector]="getFieldInjector(field)"
+                          ></ng-container>
+                        } @else if (field.template) {
+                          <ng-container
+                            [ngTemplateOutlet]="field.template"
+                            [ngTemplateOutletContext]="
+                              getFieldTemplateContext(field)
+                            "
+                          ></ng-container>
+                        } @else {
+                          @switch (field.type) {
+                            @case ('text') {
+                              <input
+                                fInputText
+                                [id]="field.key"
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate: null : field.placeholder ?? ''
+                                "
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                            @case ('number') {
+                              <input
+                                fInputText
+                                type="number"
+                                [id]="field.key"
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate: null : field.placeholder ?? ''
+                                "
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).valueAsNumber
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                            @case ('textarea') {
+                              <textarea
+                                fTextarea
+                                [id]="field.key"
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate: null : field.placeholder ?? ''
+                                "
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                                rows="3"
+                              ></textarea>
+                            }
+                            @case ('select') {
+                              <f-select
+                                [id]="field.key"
+                                class="w-full"
+                                [options]="field.options ?? []"
+                                optionValue="value"
+                                [ngModel]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                [ngModelOptions]="{ standalone: true }"
+                                (ngModelChange)="
+                                  updateExtraField(field.key, $event)
+                                "
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate
+                                      : null
+                                      : field.placeholder ??
+                                          ('shared.select' | translate)
+                                "
+                              >
+                                <ng-template #item let-opt>{{
+                                  opt.labelKey | translate: null : opt.label
+                                }}</ng-template>
+                                <ng-template #selectedItem let-opt>{{
+                                  opt.labelKey | translate: null : opt.label
+                                }}</ng-template>
+                              </f-select>
+                            }
+                            @case ('checkbox') {
+                              <f-checkbox
+                                [inputId]="field.key"
+                                [checked]="
+                                  $any(
+                                    extraFieldsModel()[field.key] ??
+                                      field.defaultValue ??
+                                      false
+                                  )
+                                "
+                                (onChange)="
+                                  updateExtraField(field.key, $event.checked)
+                                "
+                                [label]="
+                                  field.placeholderKey
+                                    | translate
+                                      : null
+                                      : field.placeholder ??
+                                          (field.labelKey
+                                            | translate: null : field.label)
+                                "
+                              />
+                            }
+                            @case ('date') {
+                              <input
+                                fInputText
+                                type="date"
+                                [id]="field.key"
+                                [value]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
+                                (input)="
+                                  updateExtraField(
+                                    field.key,
+                                    $any($event.target).value
+                                  )
+                                "
+                                class="w-full"
+                              />
+                            }
+                          }
+                        }
+                      </div>
+                    }
+                  </div>
+                  @if (extraFieldsValidationError()) {
+                    <small class="text-danger block mt-2">{{
+                      extraFieldsValidationError()
+                    }}</small>
+                  }
+                </div>
+              }
+
+              @if (companyFeatureEnabled()) {
+                <div class="border-t border-surface pt-6 mt-6">
+                  <div class="text-center mb-6">
+                    <div class="text-2xl font-medium mb-2 text-color">
+                      {{ 'auth.register.company.details' | translate }}
+                    </div>
+                    <span class="text-muted-color font-medium">
+                      @if (hasDefaultCompany()) {
+                        {{ 'auth.register.join.default.company' | translate }}
+                      } @else {
+                        {{ 'auth.register.join.or.create.company' | translate }}
+                      }
+                    </span>
+                  </div>
+
+                  @if (!hasDefaultCompany()) {
+                    <div class="mb-4">
+                      <f-checkbox
+                        [formField]="companyForm.createNewCompany"
+                        [label]="'auth.register.create.new.company' | translate"
+                        (onChange)="onCreateCompanyToggle($event.checked)"
+                      />
+                    </div>
+                  }
+
+                  @if (!companyFormModel().createNewCompany) {
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                      <div>
+                        <label
+                          for="companySlug"
+                          class="block font-medium mb-2"
+                          >{{ 'auth.register.company.code' | translate }}</label
+                        >
+                        @if (hasDefaultCompany()) {
+                          <input
+                            fInputText
+                            id="companySlug"
+                            [value]="defaultCompanySlug()"
+                            class="w-full bg-(--f-form-field-filled-background)"
+                            readonly
+                          />
+                          <small class="text-muted-color">{{
+                            'auth.register.preconfigured.company' | translate
+                          }}</small>
+                        } @else {
+                          <input
+                            fInputText
+                            id="companySlug"
+                            [formField]="companyForm.companySlug"
+                            [placeholder]="
+                              'auth.register.company.code.placeholder'
+                                | translate
+                            "
+                            class="w-full"
+                          />
+                          <small class="text-muted-color">{{
+                            'auth.register.enter.company.code' | translate
+                          }}</small>
+                        }
+                      </div>
+
+                      <div>
+                        <label
+                          for="branchSlug"
+                          class="block font-medium mb-2"
+                          >{{ 'auth.register.branch.code' | translate }}</label
+                        >
+                        @if (hasDefaultBranch()) {
+                          <input
+                            fInputText
+                            id="branchSlug"
+                            [value]="defaultBranchSlug()"
+                            class="w-full bg-(--f-form-field-filled-background)"
+                            readonly
+                          />
+                          <small class="text-muted-color">{{
+                            'auth.register.preconfigured.branch' | translate
+                          }}</small>
+                        } @else {
+                          <input
+                            fInputText
+                            id="branchSlug"
+                            [formField]="companyForm.branchSlug"
+                            [placeholder]="
+                              'auth.register.branch.code.placeholder'
+                                | translate
+                            "
+                            class="w-full"
+                          />
+                        }
+                      </div>
+                    </div>
+                  } @else {
+                    <div class="mb-4">
+                      <label for="newCompanyName" class="block font-medium mb-2"
+                        >{{ 'auth.register.company.name' | translate }} *</label
+                      >
+                      <input
+                        fInputText
+                        id="newCompanyName"
+                        [formField]="companyForm.newCompanyName"
+                        [placeholder]="
+                          'auth.register.company.name.placeholder' | translate
+                        "
+                        class="w-full"
+                      />
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                      <div>
+                        <label
+                          for="newCompanyPhone"
+                          class="block font-medium mb-2"
+                          >{{ 'auth.phone.label' | translate }}</label
+                        >
+                        <input
+                          fInputText
+                          id="newCompanyPhone"
+                          [formField]="companyForm.newCompanyPhone"
+                          [placeholder]="'auth.phone.placeholder' | translate"
+                          class="w-full"
+                        />
+                      </div>
+
+                      <div>
+                        <label
+                          for="newCompanyAddress"
+                          class="block font-medium mb-2"
+                          >{{ 'auth.address.label' | translate }}</label
+                        >
+                        <input
+                          fInputText
+                          id="newCompanyAddress"
+                          [formField]="companyForm.newCompanyAddress"
+                          [placeholder]="'auth.address.placeholder' | translate"
+                          class="w-full"
+                        />
+                      </div>
+                    </div>
+                  }
+                </div>
+              }
+
+              <button
+                fButton
+                class="w-full mt-4"
+                type="submit"
+                [disabled]="!isFormValid() || isLoading()"
+              >
+                @if (isLoading()) {
+                  <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+                }
+                <span pButtonLabel>{{
+                  'auth.register.create.account' | translate
+                }}</span>
+              </button>
+
+              <div class="flex items-center justify-center mt-4 gap-2">
+                <span class="font-medium">{{
+                  'auth.register.already.have.account' | translate
+                }}</span>
+                <a
+                  routerLink="/auth/login"
+                  class="font-semibold text-primary cursor-pointer"
+                >
+                  {{ 'auth.login.sign.in' | translate }}
+                </a>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { returnUrl: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "returnUrl",
+			required: false
+		}]
+	}] }
+});
+export { RegisterPageComponent };
+
+//# sourceMappingURL=flusys-ng-auth-register-page.component-D99y1jiA.mjs.map