@flusys/ng-auth 1.0.0-beta → 1.1.1-beta

package/fesm2022/flusys-ng-auth.mjs

@@ -1,12 +1,12 @@
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect, PLATFORM_ID, Component, DestroyRef, input, output } from '@angular/core';
-import { APP_CONFIG, getServiceUrl, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import * as i2$1 from '@angular/router';
+import { inject, Injectable, signal, computed, effect, PLATFORM_ID, Component, DestroyRef, input, ChangeDetectionStrategy, output, makeStateKey, TransferState } from '@angular/core';
+import { APP_CONFIG, getServiceUrl, isCompanyFeatureEnabled, isFeatureEnabled, getPermissionMode } from '@flusys/ng-core';
+import * as i2 from '@angular/router';
 import { Router, RouterOutlet, RouterLink, RouterLinkActive, ActivatedRoute } from '@angular/router';
 import { of, timeout, switchMap, map, tap, catchError, shareReplay, finalize, BehaviorSubject, throwError, filter, take, firstValueFrom } from 'rxjs';
-import { ApiResourceService, CookieService, USER_PROVIDER, COMPANY_API_PROVIDER, USER_PERMISSION_PROVIDER, AUTH_STATE_PROVIDER, AngularModule, PrimeModule } from '@flusys/ng-shared';
+import { ApiResourceService, CookieService, USER_PROVIDER, COMPANY_API_PROVIDER, USER_PERMISSION_PROVIDER, AUTH_STATE_PROVIDER, AngularModule, PrimeModule, FileUrlService, PROFILE_UPLOAD_PROVIDER, PROFILE_PERMISSION_PROVIDER, FileUploaderComponent } from '@flusys/ng-shared';
 import { map as map$1, catchError as catchError$1, tap as tap$1 } from 'rxjs/operators';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i2$2 from 'primeng/api';
@@ -14,24 +14,31 @@ import { MessageService, ConfirmationService } from 'primeng/api';
 import { LAYOUT_AUTH_STATE, LAYOUT_AUTH_API, AppFloatingConfigurator } from '@flusys/ng-layout';
 import { form, required, FormField, email, minLength } from '@angular/forms/signals';
 import * as i1$1 from '@angular/forms';
-import * as i2 from 'primeng/inputtext';
 import * as i3 from 'primeng/button';
-import * as i4 from 'primeng/card';
-import * as i1$2 from 'primeng/tag';
+import * as i3$1 from 'primeng/card';
+import * as i4 from 'primeng/inputtext';
+import * as i4$2 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i3$1 from 'primeng/tooltip';
-import * as i4$1 from 'primeng/table';
-import * as i7 from 'primeng/select';
+import * as i4$1 from 'primeng/select';
+import * as i3$2 from 'primeng/table';
+import * as i5 from 'primeng/tooltip';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i5 from 'primeng/dialog';
+import * as i2$1 from 'primeng/avatar';
+import * as i5$1 from 'primeng/password';
+import * as i6 from 'primeng/skeleton';
+import * as i5$2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i6 from 'primeng/progressspinner';
+import * as i6$1 from 'primeng/progressspinner';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import * as i4$2 from 'primeng/checkbox';
+import * as i4$3 from 'primeng/checkbox';
 
-// =============================================================================
 // AUTH INTERFACES - Matching NestJS Auth Package DTOs
-// =============================================================================
+/**
+ * Type guard to check if response requires email verification
+ */
+function isEmailVerificationRequired(response) {
+    return 'requiresEmailVerification' in response && response.requiresEmailVerification === true;
+}
 /**
  * Type guard to check if response requires company selection
  */
@@ -42,7 +49,7 @@ function isCompanySelectionResponse(response) {
  * Type guard to check if response is a successful login
  */
 function isLoginResponse(response) {
-    return 'accessToken' in response && !('requiresSelection' in response);
+    return 'accessToken' in response && !('requiresSelection' in response) && !('requiresEmailVerification' in response);
 }
 
 // =============================================================================
@@ -148,6 +155,22 @@ class AuthApiService {
             newPassword,
         });
     }
+    /**
+     * Resend verification email (unauthenticated)
+     */
+    resendVerification(email) {
+        return this.http.post(`${this.baseUrl}/resend-verification`, { email });
+    }
+    /**
+     * Verify email with token
+     * Returns IMessageResponse for existing user verification
+     * Returns IRegistrationResponse for pending registration completion
+     */
+    verifyEmail(token) {
+        return this.http.post(`${this.baseUrl}/verify-email`, {
+            token,
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthApiService, providedIn: 'root' });
 }
@@ -764,6 +787,10 @@ const AUTH_ENDPOINTS = {
     REGISTER: '/auth/register',
     SELECT: '/auth/select',
     SWITCH_COMPANY: '/auth/switch-company',
+    VERIFY_EMAIL: '/auth/verify-email',
+    FORGOT_PASSWORD: '/auth/forgot-password',
+    RESET_PASSWORD: '/auth/reset-password',
+    RESEND_VERIFICATION: '/auth/resend-verification',
 };
 /**
  * Check if a URL is an auth-related endpoint
@@ -905,22 +932,18 @@ const companyFeatureGuard = () => {
     return true;
 };
 
+/** Endpoints that need withCredentials for cookie handling */
+const COOKIE_ENDPOINTS = [
+    AUTH_ENDPOINTS.LOGIN,
+    AUTH_ENDPOINTS.LOGOUT,
+    AUTH_ENDPOINTS.REFRESH,
+    AUTH_ENDPOINTS.REGISTER,
+    AUTH_ENDPOINTS.SELECT,
+    AUTH_ENDPOINTS.SWITCH_COMPANY,
+    AUTH_ENDPOINTS.VERIFY_EMAIL,
+];
 /**
- * Auth Interceptor
- * Adds Authorization header and tenant header to HTTP requests.
- *
- * - Adds Bearer token for authenticated requests (including /auth/me)
- * - Adds tenant header for multi-tenant mode
- * - Adds withCredentials for auth endpoints (cookies)
- *
- * @example
- * ```typescript
- * // In app.config.ts
- * provideHttpClient(
- *   withFetch(),
- *   withInterceptors([authInterceptor, tokenRefreshInterceptor])
- * )
- * ```
+ * Auth Interceptor - Adds auth headers and cookie credentials to requests
  */
 function authInterceptor(req, next) {
     const authState = inject(AuthStateService);
@@ -930,33 +953,21 @@ function authInterceptor(req, next) {
     // Add tenant header if multi-tenant mode
     if (appConfig.multiTenant.enabled) {
         const tenantId = authState.tenantId();
-        const tenantHeader = appConfig.multiTenant.tenantHeader;
         if (tenantId) {
-            headers[tenantHeader] = tenantId;
+            headers[appConfig.multiTenant.tenantHeader] = tenantId;
         }
     }
-    // Add Bearer token for authenticated endpoints (including /auth/me)
+    // Add Bearer token if available
     const token = authState.accessToken();
     if (token) {
         headers['Authorization'] = `Bearer ${token}`;
     }
-    // Check if this is an auth endpoint that needs withCredentials (for cookies)
-    const needsCredentials = isEndpoint(req.url, AUTH_ENDPOINTS.REFRESH) ||
-        isEndpoint(req.url, AUTH_ENDPOINTS.LOGOUT) ||
-        isEndpoint(req.url, AUTH_ENDPOINTS.LOGIN) ||
-        isEndpoint(req.url, AUTH_ENDPOINTS.REGISTER) ||
-        isEndpoint(req.url, AUTH_ENDPOINTS.SELECT) ||
-        isEndpoint(req.url, AUTH_ENDPOINTS.SWITCH_COMPANY);
+    // Check if this endpoint needs withCredentials for cookies
+    const needsCredentials = COOKIE_ENDPOINTS.some((ep) => isEndpoint(req.url, ep));
     if (needsCredentials) {
-        // Auth endpoints use cookies
-        return next(req.clone({
-            withCredentials: true,
-            setHeaders: {
-                cookie: cookieService.get(),
-            },
-        }));
+        headers['cookie'] = cookieService.get();
+        return next(req.clone({ withCredentials: true, setHeaders: headers }));
     }
-    // Other requests just need headers (Bearer token + tenant)
     if (Object.keys(headers).length > 0) {
         return next(req.clone({ setHeaders: headers }));
     }
@@ -1072,6 +1083,20 @@ const AUTH_ROUTES = [
                 loadComponent: () => Promise.resolve().then(function () { return registerPage_component; }).then((m) => m.RegisterPageComponent),
                 canActivate: [guestGuard],
             },
+            {
+                path: 'forgot-password',
+                loadComponent: () => Promise.resolve().then(function () { return forgotPasswordPage_component; }).then((m) => m.ForgotPasswordPageComponent),
+                canActivate: [guestGuard],
+            },
+            {
+                path: 'reset-password',
+                loadComponent: () => Promise.resolve().then(function () { return resetPasswordPage_component; }).then((m) => m.ResetPasswordPageComponent),
+                canActivate: [guestGuard],
+            },
+            {
+                path: 'verify-email',
+                loadComponent: () => Promise.resolve().then(function () { return verifyEmailPage_component; }).then((m) => m.VerifyEmailPageComponent),
+            },
             {
                 path: '',
                 redirectTo: 'login',
@@ -1157,6 +1182,17 @@ const ADMINISTRATION_ROUTES = [
         ],
     },
 ];
+/**
+ * Profile Routes Configuration
+ * Protected route for user profile management
+ */
+const PROFILE_ROUTES = [
+    {
+        path: '',
+        canActivate: [authGuard],
+        loadComponent: () => Promise.resolve().then(function () { return profilePage_component; }).then((m) => m.ProfilePageComponent),
+    },
+];
 
 /**
  * Auth Layout State Adapter
@@ -1568,10 +1604,10 @@ class AdministrationPageComponent {
     <div class="administration-page p-4">
       <div class="administration-header mb-4">
         <h1 class="text-2xl font-bold m-0">Administration</h1>
-        <p class="text-gray-500 mt-1">{{ subtitle() }}</p>
+        <p class="text-muted-color mt-1">{{ subtitle() }}</p>
       </div>
 
-      <div class="administration-tabs flex gap-1 mb-4 border-b border-gray-200">
+      <div class="administration-tabs flex gap-1 mb-4 border-b border-surface-200">
         @for (tab of visibleTabs(); track tab.id) {
           <a
             [routerLink]="tab.route"
@@ -1595,10 +1631,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
     <div class="administration-page p-4">
       <div class="administration-header mb-4">
         <h1 class="text-2xl font-bold m-0">Administration</h1>
-        <p class="text-gray-500 mt-1">{{ subtitle() }}</p>
+        <p class="text-muted-color mt-1">{{ subtitle() }}</p>
       </div>
 
-      <div class="administration-tabs flex gap-1 mb-4 border-b border-gray-200">
+      <div class="administration-tabs flex gap-1 mb-4 border-b border-surface-200">
         @for (tab of visibleTabs(); track tab.id) {
           <a
             [routerLink]="tab.route"
@@ -1915,7 +1951,7 @@ class BranchFormComponent {
         </div>
       </form>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BranchFormComponent, decorators: [{
             type: Component,
@@ -2232,7 +2268,7 @@ class BranchListComponent {
         </ng-template>
       </p-table>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i4$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i7.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TagModule }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TagModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BranchListComponent, decorators: [{
             type: Component,
@@ -2599,7 +2635,7 @@ class CompanyFormComponent {
         </div>
       </form>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyFormComponent, decorators: [{
             type: Component,
@@ -2876,7 +2912,7 @@ class CompanyListComponent {
         </ng-template>
       </p-table>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i4$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TagModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CompanyListComponent, decorators: [{
             type: Component,
@@ -2974,6 +3010,223 @@ var companyList_component = /*#__PURE__*/Object.freeze({
     CompanyListComponent: CompanyListComponent
 });
 
+class ForgotPasswordPageComponent {
+    destroyRef = inject(DestroyRef);
+    messageService = inject(MessageService);
+    authApi = inject(AuthApiService);
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    emailSent = signal(false, ...(ngDevMode ? [{ debugName: "emailSent" }] : []));
+    submittedEmail = signal('', ...(ngDevMode ? [{ debugName: "submittedEmail" }] : []));
+    formModel = signal({ email: '' }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    forgotForm = form(this.formModel, (f) => {
+        required(f.email, { message: 'Email is required' });
+        email(f.email, { message: 'Please enter a valid email address' });
+    });
+    isFormValid = computed(() => this.forgotForm().valid(), ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    onSubmit() {
+        if (!this.isFormValid()) {
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Validation Error',
+                detail: 'Please enter a valid email address.',
+            });
+            return;
+        }
+        this.isLoading.set(true);
+        const email = this.formModel().email;
+        this.authApi
+            .forgotPassword(email)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => {
+                this.isLoading.set(false);
+                this.submittedEmail.set(email);
+                this.emailSent.set(true);
+            },
+            error: () => {
+                this.isLoading.set(false);
+                this.submittedEmail.set(email);
+                this.emailSent.set(true);
+            },
+        });
+    }
+    resetForm() {
+        this.emailSent.set(false);
+        this.submittedEmail.set('');
+        this.formModel.set({ email: '' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ForgotPasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ForgotPasswordPageComponent, isStandalone: true, selector: "lib-forgot-password-page", 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(--p-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-16 px-12"
+            style="border-radius: var(--p-content-border-radius); background: var(--p-content-background);">
+
+            @if (!emailSent()) {
+              <div class="text-center mb-8">
+                <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                  Forgot Password
+                </div>
+                <span class="text-muted-color font-medium">
+                  Enter your email address and we'll send you a link to reset your password.
+                </span>
+              </div>
+
+              <form (ngSubmit)="onSubmit()">
+                <label for="email" class="block text-lg font-medium mb-2" style="color: var(--p-content-color);">
+                  Email
+                </label>
+                <input
+                  pInputText
+                  id="email"
+                  type="email"
+                  placeholder="Enter your email address"
+                  class="w-full md:w-[25rem] mb-6"
+                  [formField]="forgotForm.email"
+                  autocomplete="email" />
+
+                <p-button
+                  label="Send Reset Link"
+                  styleClass="w-full mb-4"
+                  type="submit"
+                  [loading]="isLoading()"
+                  [disabled]="!isFormValid() || isLoading()" />
+
+                <div class="flex items-center justify-center gap-2">
+                  <span class="font-medium">Remember your password?</span>
+                  <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                    Sign In
+                  </a>
+                </div>
+              </form>
+            } @else {
+              <div class="text-center">
+                <div class="flex justify-center mb-6">
+                  <i class="pi pi-envelope text-6xl text-primary"></i>
+                </div>
+                <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                  Check Your Email
+                </div>
+                <p class="text-muted-color font-medium mb-6">
+                  We've sent a password reset link to <strong>{{ submittedEmail() }}</strong>.
+                  Please check your inbox and follow the instructions.
+                </p>
+                <p class="text-sm text-muted-color mb-6">
+                  Didn't receive the email? Check your spam folder or
+                  <span
+                    class="text-primary cursor-pointer font-semibold"
+                    (click)="resetForm()">
+                    try again
+                  </span>.
+                </p>
+                <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                  Back to Sign In
+                </a>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-forgot-password-page',
+                    standalone: true,
+                    imports: [AngularModule, PrimeModule, FormField, AppFloatingConfigurator],
+                    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(--p-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-16 px-12"
+            style="border-radius: var(--p-content-border-radius); background: var(--p-content-background);">
+
+            @if (!emailSent()) {
+              <div class="text-center mb-8">
+                <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                  Forgot Password
+                </div>
+                <span class="text-muted-color font-medium">
+                  Enter your email address and we'll send you a link to reset your password.
+                </span>
+              </div>
+
+              <form (ngSubmit)="onSubmit()">
+                <label for="email" class="block text-lg font-medium mb-2" style="color: var(--p-content-color);">
+                  Email
+                </label>
+                <input
+                  pInputText
+                  id="email"
+                  type="email"
+                  placeholder="Enter your email address"
+                  class="w-full md:w-[25rem] mb-6"
+                  [formField]="forgotForm.email"
+                  autocomplete="email" />
+
+                <p-button
+                  label="Send Reset Link"
+                  styleClass="w-full mb-4"
+                  type="submit"
+                  [loading]="isLoading()"
+                  [disabled]="!isFormValid() || isLoading()" />
+
+                <div class="flex items-center justify-center gap-2">
+                  <span class="font-medium">Remember your password?</span>
+                  <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                    Sign In
+                  </a>
+                </div>
+              </form>
+            } @else {
+              <div class="text-center">
+                <div class="flex justify-center mb-6">
+                  <i class="pi pi-envelope text-6xl text-primary"></i>
+                </div>
+                <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                  Check Your Email
+                </div>
+                <p class="text-muted-color font-medium mb-6">
+                  We've sent a password reset link to <strong>{{ submittedEmail() }}</strong>.
+                  Please check your inbox and follow the instructions.
+                </p>
+                <p class="text-sm text-muted-color mb-6">
+                  Didn't receive the email? Check your spam folder or
+                  <span
+                    class="text-primary cursor-pointer font-semibold"
+                    (click)="resetForm()">
+                    try again
+                  </span>.
+                </p>
+                <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                  Back to Sign In
+                </a>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+
+var forgotPasswordPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ForgotPasswordPageComponent: ForgotPasswordPageComponent
+});
+
 /**
  * Login Page Component
  * Multi-step authentication flow:
@@ -2986,12 +3239,10 @@ class LoginPageComponent {
     messageService = inject(MessageService);
     authApi = inject(AuthApiService);
     authState = inject(AuthStateService);
-    /** Return URL after successful login */
     returnUrl = input('', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
-    /** Current step in login flow */
     currentStep = signal('credentials', ...(ngDevMode ? [{ debugName: "currentStep" }] : []));
-    /** Loading state */
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    unverifiedEmail = signal('', ...(ngDevMode ? [{ debugName: "unverifiedEmail" }] : []));
     // ============================================
     // Login Form (Signal Forms)
     // ============================================
@@ -3080,23 +3331,24 @@ class LoginPageComponent {
         };
         this.authApi
             .login(loginData)
-            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (response) => {
                 this.isLoading.set(false);
-                // Check if company selection is required
+                if (isEmailVerificationRequired(response)) {
+                    this.unverifiedEmail.set(response.email);
+                    this.currentStep.set('email-verification');
+                    return;
+                }
                 if (isCompanySelectionResponse(response)) {
-                    // Move to step 2 (company selection)
                     this.sessionId = response.sessionId;
                     this.companies.set(response.companies);
                     this.userName.set(response.user.name ?? response.user.email);
-                    // Store selection state for potential page refresh
                     this.authState.setSelectionState(response);
                     this.currentStep.set('company-selection');
                     this.autoSelectIfSingle();
                 }
                 else {
-                    // Direct login success
                     this.authState.setLoginState(response);
                     this.messageService.add({
                         severity: 'success',
@@ -3162,7 +3414,7 @@ class LoginPageComponent {
         };
         this.authApi
             .select(selectData)
-            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (response) => {
                 this.isLoading.set(false);
@@ -3186,9 +3438,9 @@ class LoginPageComponent {
         });
     }
     goBackToCredentials() {
-        // Reset selection state
         this.sessionId = null;
         this.companies.set([]);
+        this.unverifiedEmail.set('');
         this.selectionFormModel.set({
             companyId: '',
             branchId: '',
@@ -3197,6 +3449,33 @@ class LoginPageComponent {
         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: 'Email Sent',
+                    detail: response.message || 'Verification email has been sent.',
+                });
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Failed to Send',
+                    detail: error.error?.message || 'Unable to send verification email.',
+                });
+            },
+        });
+    }
     // ============================================
     // Helpers
     // ============================================
@@ -3332,6 +3611,33 @@ class LoginPageComponent {
               </form>
             }
 
+            <!-- Email Verification Required -->
+            @if (currentStep() === 'email-verification') {
+              <div class="text-center">
+                <div class="flex justify-center mb-6">
+                  <i class="pi pi-envelope text-6xl text-warn"></i>
+                </div>
+                <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                  Email Not Verified
+                </div>
+                <p class="text-muted-color font-medium mb-6">
+                  Please verify your email address <strong>{{ unverifiedEmail() }}</strong> before logging in.
+                </p>
+                <p-button
+                  label="Resend Verification Email"
+                  styleClass="w-full mb-4"
+                  [loading]="isLoading()"
+                  (onClick)="onResendVerification()" />
+                <div class="mt-4">
+                  <span
+                    class="font-semibold text-primary cursor-pointer"
+                    (click)="goBackToCredentials()">
+                    Back to Sign In
+                  </span>
+                </div>
+              </div>
+            }
+
             <!-- Step 2: Company Selection -->
             @if (currentStep() === 'company-selection') {
               <div class="text-center mb-8">
@@ -3401,7 +3707,7 @@ class LoginPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LoginPageComponent, decorators: [{
             type: Component,
@@ -3509,6 +3815,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               </form>
             }
 
+            <!-- Email Verification Required -->
+            @if (currentStep() === 'email-verification') {
+              <div class="text-center">
+                <div class="flex justify-center mb-6">
+                  <i class="pi pi-envelope text-6xl text-warn"></i>
+                </div>
+                <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                  Email Not Verified
+                </div>
+                <p class="text-muted-color font-medium mb-6">
+                  Please verify your email address <strong>{{ unverifiedEmail() }}</strong> before logging in.
+                </p>
+                <p-button
+                  label="Resend Verification Email"
+                  styleClass="w-full mb-4"
+                  [loading]="isLoading()"
+                  (onClick)="onResendVerification()" />
+                <div class="mt-4">
+                  <span
+                    class="font-semibold text-primary cursor-pointer"
+                    (click)="goBackToCredentials()">
+                    Back to Sign In
+                  </span>
+                </div>
+              </div>
+            }
+
             <!-- Step 2: Company Selection -->
             @if (currentStep() === 'company-selection') {
               <div class="text-center mb-8">
@@ -3588,109 +3921,922 @@ var loginPage_component = /*#__PURE__*/Object.freeze({
 });
 
 /**
- * Registration Page Component
- * Handles user registration with optional company creation
- * Adapts UI based on company feature configuration
+ * Profile Page Component
+ *
+ * Allows users to view and update their profile information.
+ * Features:
+ * - Update name, phone, profile picture (if storage enabled)
+ * - View company/branch info (read-only, if company feature enabled)
+ * - View roles/actions (read-only, if IAM enabled via optional injection)
+ *
+ * Package Independence:
+ * - Uses PROFILE_UPLOAD_PROVIDER (optional) for storage functionality
+ * - Uses PROFILE_PERMISSION_PROVIDER (optional) for IAM functionality
+ * - No direct imports from ng-storage or ng-iam
  */
-class RegisterPageComponent {
+class ProfilePageComponent {
     destroyRef = inject(DestroyRef);
     appConfig = inject(APP_CONFIG);
     messageService = inject(MessageService);
-    authApi = inject(AuthApiService);
     authState = inject(AuthStateService);
-    route = inject(ActivatedRoute);
-    /** Return URL after successful registration */
-    returnUrl = input('', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
-    /** Loading state */
+    userService = inject(UserApiService);
+    authApiService = inject(AuthApiService);
+    fileUrlService = inject(FileUrlService);
+    // Optional injection - null if storage not configured
+    uploadProvider = inject(PROFILE_UPLOAD_PROVIDER, {
+        optional: true,
+    });
+    // Optional injection - null if IAM not configured
+    permissionProvider = inject(PROFILE_PERMISSION_PROVIDER, {
+        optional: true,
+    });
+    // State
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    /** Whether company feature is enabled */
-    companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), ...(ngDevMode ? [{ debugName: "companyFeatureEnabled" }] : []));
-    // ============================================
-    // User Form (Signal Forms)
-    // ============================================
-    /** User form model */
-    userFormModel = signal({
+    isLoadingPermissions = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingPermissions" }] : []));
+    _profilePictureUrl = signal(null, ...(ngDevMode ? [{ debugName: "_profilePictureUrl" }] : []));
+    profilePictureUrl = this._profilePictureUrl.asReadonly();
+    // Permission data
+    _userRoles = signal([], ...(ngDevMode ? [{ debugName: "_userRoles" }] : []));
+    userRoles = this._userRoles.asReadonly();
+    _userActions = signal([], ...(ngDevMode ? [{ debugName: "_userActions" }] : []));
+    userActions = this._userActions.asReadonly();
+    // Computed from auth state
+    userEmail = computed(() => this.authState.user()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
+    userName = computed(() => this.authState.user()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
+    userInitials = computed(() => {
+        const name = this.authState.user()?.name ?? '';
+        return name
+            .split(' ')
+            .map((n) => n[0])
+            .join('')
+            .toUpperCase()
+            .slice(0, 2);
+    }, ...(ngDevMode ? [{ debugName: "userInitials" }] : []));
+    companyName = computed(() => this.authState.companyName(), ...(ngDevMode ? [{ debugName: "companyName" }] : []));
+    branchName = computed(() => this.authState.branchName(), ...(ngDevMode ? [{ debugName: "branchName" }] : []));
+    // Feature flags - Storage feature check
+    showUploadSection = computed(() => isFeatureEnabled(this.appConfig, 'storage') &&
+        this.uploadProvider !== null, ...(ngDevMode ? [{ debugName: "showUploadSection" }] : []));
+    showCompanySection = computed(() => isCompanyFeatureEnabled(this.appConfig), ...(ngDevMode ? [{ debugName: "showCompanySection" }] : []));
+    showPermissionsSection = computed(() => isFeatureEnabled(this.appConfig, 'iam') &&
+        this.permissionProvider !== null, ...(ngDevMode ? [{ debugName: "showPermissionsSection" }] : []));
+    permissionMode = computed(() => getPermissionMode(this.appConfig), ...(ngDevMode ? [{ debugName: "permissionMode" }] : []));
+    showRoles = computed(() => {
+        const mode = this.permissionMode();
+        return mode === 'rbac' || mode === 'full';
+    }, ...(ngDevMode ? [{ debugName: "showRoles" }] : []));
+    showActions = computed(() => {
+        const mode = this.permissionMode();
+        return mode === 'direct' || mode === 'full';
+    }, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
+    // Show bottom row only if at least one section is visible
+    showBottomRow = computed(() => this.showCompanySection() || this.showPermissionsSection(), ...(ngDevMode ? [{ debugName: "showBottomRow" }] : []));
+    // Form
+    formModel = signal({
         name: '',
-        email: '',
-        password: '',
-        confirmPassword: '',
         phone: '',
-    }, ...(ngDevMode ? [{ debugName: "userFormModel" }] : []));
-    /** User form with validation schema */
-    userForm = form(this.userFormModel, (f) => {
+    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    formTree = form(this.formModel, (f) => {
         required(f.name, { message: 'Name is required' });
-        minLength(f.name, 2, { message: 'Name must be at least 2 characters' });
-        required(f.email, { message: 'Email is required' });
-        email(f.email, { message: 'Please enter a valid email address' });
-        required(f.password, { message: 'Password is required' });
-        minLength(f.password, 6, { message: 'Password must be at least 6 characters' });
-        required(f.confirmPassword, { message: 'Please confirm your password' });
-    });
-    // ============================================
-    // Company Form (Signal Forms)
-    // ============================================
-    /** Company form model */
-    companyFormModel = signal({
-        createNewCompany: false,
-        companySlug: '',
-        branchSlug: '',
-        newCompanyName: '',
-        newCompanyPhone: '',
-        newCompanyAddress: '',
-    }, ...(ngDevMode ? [{ debugName: "companyFormModel" }] : []));
-    /** Company form with conditional validation schema */
-    companyForm = form(this.companyFormModel, (f) => {
-        // Validation is conditional based on createNewCompany flag
-        // We'll handle this in isFormValid() computed
     });
-    // ============================================
-    // Lifecycle
-    // ============================================
-    ngOnInit() {
-        // Read companySlug from query params and prefill the form
-        const companySlug = this.route.snapshot.queryParamMap.get('companySlug');
-        if (companySlug) {
-            this.companyFormModel.update((model) => ({
-                ...model,
-                companySlug,
-            }));
+    isFormValid = computed(() => {
+        const model = this.formModel();
+        return model.name.trim().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    // Password form
+    passwordModel = signal({
+        currentPassword: '',
+        newPassword: '',
+        confirmPassword: '',
+    }, ...(ngDevMode ? [{ debugName: "passwordModel" }] : []));
+    isPasswordLoading = signal(false, ...(ngDevMode ? [{ debugName: "isPasswordLoading" }] : []));
+    isPasswordFormValid = computed(() => {
+        const model = this.passwordModel();
+        return (model.currentPassword.length > 0 &&
+            model.newPassword.length >= 6 &&
+            model.newPassword === model.confirmPassword);
+    }, ...(ngDevMode ? [{ debugName: "isPasswordFormValid" }] : []));
+    passwordsMatch = computed(() => {
+        const model = this.passwordModel();
+        return model.confirmPassword.length === 0 || model.newPassword === model.confirmPassword;
+    }, ...(ngDevMode ? [{ debugName: "passwordsMatch" }] : []));
+    // Upload function for FileUploader - uses provider if available
+    uploadFileFn = (file, options) => {
+        if (!this.uploadProvider) {
+            throw new Error('Upload provider not available');
+        }
+        return this.uploadProvider
+            .uploadProfilePicture(file, {
+            folderPath: options?.folderPath ?? 'profile-pictures',
+            compress: options?.compress ?? true,
+            maxWidth: options?.maxWidth ?? 400,
+            maxHeight: options?.maxHeight ?? 400,
+        })
+            .pipe(map((response) => ({
+            success: response.success,
+            message: response.message,
+            data: response.data
+                ? this.mapUploadResultToUploadedFile(response.data)
+                : undefined,
+        })));
+    };
+    /** Map upload result to IUploadedFile format */
+    mapUploadResultToUploadedFile(result) {
+        return {
+            id: result.id, // UUID for storing in profilePictureId
+            name: result.name,
+            key: result.key,
+            size: result.size,
+            contentType: result.contentType,
+        };
+    }
+    ngOnInit() {
+        this.loadUserData();
+        if (this.showPermissionsSection()) {
+            this.loadPermissions();
         }
     }
-    // ============================================
-    // Form Validation
-    // ============================================
-    /** Check if passwords match */
+    loadUserData() {
+        const user = this.authState.user();
+        if (user) {
+            this.formModel.set({
+                name: user.name ?? '',
+                phone: user.phone ?? '',
+            });
+            // Load profile picture URL (only if storage is enabled)
+            if (user.profilePictureId && isFeatureEnabled(this.appConfig, 'storage')) {
+                this.fileUrlService
+                    .fetchSingleFileUrl(user.profilePictureId)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe((file) => {
+                    this._profilePictureUrl.set(file?.url ?? null);
+                });
+            }
+        }
+    }
+    loadPermissions() {
+        const user = this.authState.user();
+        const branch = this.authState.branch();
+        if (!user || !this.permissionProvider)
+            return;
+        const loadRoles = this.showRoles();
+        const loadActions = this.showActions();
+        if (!loadRoles && !loadActions)
+            return;
+        this.isLoadingPermissions.set(true);
+        let rolesLoaded = !loadRoles;
+        let actionsLoaded = !loadActions;
+        const checkComplete = () => {
+            if (rolesLoaded && actionsLoaded) {
+                this.isLoadingPermissions.set(false);
+            }
+        };
+        // Load roles (if applicable)
+        if (loadRoles) {
+            this.permissionProvider
+                .getUserRoles(user.id, branch?.id)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (response) => {
+                    this._userRoles.set(response.data ?? []);
+                    rolesLoaded = true;
+                    checkComplete();
+                },
+                error: () => {
+                    this._userRoles.set([]);
+                    rolesLoaded = true;
+                    checkComplete();
+                },
+            });
+        }
+        // Load actions (if applicable)
+        if (loadActions) {
+            this.permissionProvider
+                .getUserActions(user.id, branch?.id)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (response) => {
+                    this._userActions.set(response.data ?? []);
+                    actionsLoaded = true;
+                    checkComplete();
+                },
+                error: () => {
+                    this._userActions.set([]);
+                    actionsLoaded = true;
+                    checkComplete();
+                },
+            });
+        }
+    }
+    onProfilePictureUploaded(file) {
+        // Update user with new profile picture ID (file.id is the FileManager UUID)
+        const user = this.authState.user();
+        if (!user || !file.id)
+            return;
+        const fileManagerId = file.id;
+        this.userService
+            .updateProfile({ id: user.id, profilePictureId: fileManagerId })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    // Update auth state with new profile picture ID
+                    this.authState.user.set({
+                        ...user,
+                        profilePictureId: fileManagerId,
+                    });
+                    // Fetch new profile picture URL (force refresh to get fresh URL)
+                    this.fileUrlService
+                        .fetchSingleFileUrl(fileManagerId, true)
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe((fileInfo) => {
+                        this._profilePictureUrl.set(fileInfo?.url ?? null);
+                    });
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: 'Success',
+                        detail: 'Profile picture updated',
+                    });
+                }
+            },
+            error: () => {
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'Failed to update profile picture',
+                });
+            },
+        });
+    }
+    onSubmit() {
+        if (!this.isFormValid())
+            return;
+        const user = this.authState.user();
+        if (!user)
+            return;
+        this.isLoading.set(true);
+        const model = this.formModel();
+        const updateData = {
+            id: user.id,
+            name: model.name,
+            phone: model.phone || undefined,
+        };
+        this.userService
+            .updateProfile(updateData)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response.success && response.data) {
+                    // Update auth state with new user data (name and phone)
+                    this.authState.user.set({
+                        ...user,
+                        name: response.data.name,
+                        phone: response.data.phone ?? null,
+                    });
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: 'Success',
+                        detail: 'Profile updated successfully',
+                    });
+                }
+                this.isLoading.set(false);
+            },
+            error: (error) => {
+                const err = error;
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: err.error?.message || 'Failed to update profile',
+                });
+                this.isLoading.set(false);
+            },
+        });
+    }
+    updatePasswordField(field, value) {
+        this.passwordModel.update((model) => ({ ...model, [field]: value }));
+    }
+    onChangePassword() {
+        if (!this.isPasswordFormValid())
+            return;
+        this.isPasswordLoading.set(true);
+        const model = this.passwordModel();
+        this.authApiService
+            .changePassword({
+            currentPassword: model.currentPassword,
+            newPassword: model.newPassword,
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => {
+                this.messageService.add({
+                    severity: 'success',
+                    summary: 'Success',
+                    detail: 'Password changed successfully',
+                });
+                // Reset password form
+                this.passwordModel.set({
+                    currentPassword: '',
+                    newPassword: '',
+                    confirmPassword: '',
+                });
+                this.isPasswordLoading.set(false);
+            },
+            error: (error) => {
+                const err = error;
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: err.error?.message || 'Failed to change password',
+                });
+                this.isPasswordLoading.set(false);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfilePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ProfilePageComponent, isStandalone: true, selector: "lib-profile-page", ngImport: i0, template: `
+    <!-- Page Header -->
+    <div class="mb-4 md:mb-6">
+      <h1 class="text-2xl font-bold text-color mb-2">My Profile</h1>
+      <p class="text-muted-color">Manage your account settings and preferences.</p>
+    </div>
+
+    <!-- Profile Form Card (full width) -->
+    <div class="card mb-2 md:mb-4">
+      <div class="flex flex-col md:flex-row gap-4 md:gap-6">
+        <!-- Avatar Section -->
+        <div class="flex flex-col items-center gap-4 md:w-72 lg:w-80 md:border-r md:border-surface-200 md:pr-6">
+          @if (profilePictureUrl()) {
+            <p-avatar
+              [image]="profilePictureUrl()!"
+              size="xlarge"
+              shape="circle"
+              styleClass="w-28 h-28" />
+          } @else {
+            <p-avatar
+              [label]="userInitials()"
+              size="xlarge"
+              shape="circle"
+              styleClass="w-28 h-28 text-3xl bg-primary text-primary-contrast" />
+          }
+          <div class="text-center">
+            <div class="font-semibold text-color">{{ userName() }}</div>
+            <div class="text-muted-color text-sm">{{ userEmail() }}</div>
+          </div>
+          <!-- Upload section - only show if storage is enabled and provider is available -->
+          @if (showUploadSection()) {
+            <lib-file-uploader
+              [uploadFile]="uploadFileFn"
+              [acceptTypes]="['image/*']"
+              [multiple]="false"
+              [maxSizeMb]="5"
+              [showPreview]="false"
+              (fileUploaded)="onProfilePictureUploaded($event)"
+              class="w-full" />
+          } @else {
+            <div class="w-full p-3 bg-surface-100 rounded-lg text-center">
+              <i class="pi pi-info-circle text-muted-color mr-2"></i>
+              <span class="text-sm text-muted-color">Storage feature not enabled</span>
+            </div>
+          }
+        </div>
+
+        <!-- Form Section -->
+        <div class="flex-1">
+          <form (ngSubmit)="onSubmit()" class="flex flex-col gap-4">
+            <!-- Email (read-only) -->
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-color">Email</label>
+              <input
+                pInputText
+                [value]="userEmail()"
+                disabled
+                class="bg-surface-50" />
+            </div>
+
+            <!-- Name -->
+            <div class="flex flex-col gap-2">
+              <label for="name" class="font-medium text-color">Name *</label>
+              <input
+                pInputText
+                id="name"
+                [formField]="formTree.name"
+                placeholder="Your full name" />
+            </div>
+
+            <!-- Phone -->
+            <div class="flex flex-col gap-2">
+              <label for="phone" class="font-medium text-color">Phone</label>
+              <input
+                pInputText
+                id="phone"
+                [formField]="formTree.phone"
+                placeholder="+1 234 567 8900" />
+            </div>
+
+            <!-- Submit -->
+            <div class="flex justify-end pt-4">
+              <p-button
+                label="Save Changes"
+                icon="pi pi-check"
+                type="submit"
+                [loading]="isLoading()"
+                [disabled]="!isFormValid() || isLoading()" />
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- Security Card -->
+    <div class="card mb-2 md:mb-4">
+      <div class="flex items-center gap-2 mb-4">
+        <i class="pi pi-lock text-primary"></i>
+        <span class="font-semibold text-color">Security</span>
+      </div>
+      <form (ngSubmit)="onChangePassword()" class="flex flex-col gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <!-- Current Password -->
+          <div class="flex flex-col gap-2">
+            <label for="currentPassword" class="font-medium text-color">Current Password *</label>
+            <p-password
+              id="currentPassword"
+              name="currentPassword"
+              [ngModel]="passwordModel().currentPassword"
+              (ngModelChange)="updatePasswordField('currentPassword', $event)"
+              [feedback]="false"
+              [toggleMask]="true"
+              placeholder="Enter current password"
+              styleClass="w-full"
+              inputStyleClass="w-full" />
+          </div>
+
+          <!-- New Password -->
+          <div class="flex flex-col gap-2">
+            <label for="newPassword" class="font-medium text-color">New Password *</label>
+            <p-password
+              id="newPassword"
+              name="newPassword"
+              [ngModel]="passwordModel().newPassword"
+              (ngModelChange)="updatePasswordField('newPassword', $event)"
+              [feedback]="true"
+              [toggleMask]="true"
+              placeholder="Min 6 characters"
+              styleClass="w-full"
+              inputStyleClass="w-full" />
+          </div>
+
+          <!-- Confirm Password -->
+          <div class="flex flex-col gap-2">
+            <label for="confirmPassword" class="font-medium text-color">Confirm Password *</label>
+            <p-password
+              id="confirmPassword"
+              name="confirmPassword"
+              [ngModel]="passwordModel().confirmPassword"
+              (ngModelChange)="updatePasswordField('confirmPassword', $event)"
+              [feedback]="false"
+              [toggleMask]="true"
+              placeholder="Confirm new password"
+              styleClass="w-full"
+              inputStyleClass="w-full" />
+            @if (!passwordsMatch()) {
+              <small class="text-danger">Passwords do not match</small>
+            }
+          </div>
+        </div>
+
+        <!-- Submit -->
+        <div class="flex justify-end">
+          <p-button
+            label="Change Password"
+            icon="pi pi-key"
+            type="submit"
+            [loading]="isPasswordLoading()"
+            [disabled]="!isPasswordFormValid() || isPasswordLoading()" />
+        </div>
+      </form>
+    </div>
+
+    <!-- Company & Permissions Row (50/50 on desktop, stacked on mobile) -->
+    @if (showBottomRow()) {
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4 flex-1">
+        <!-- Company/Branch Info -->
+        @if (showCompanySection()) {
+        <div class="card h-48 md:h-56 flex flex-col">
+          <div class="flex items-center gap-2 mb-4">
+            <i class="pi pi-building text-primary"></i>
+            <span class="font-semibold text-color">Company & Branch</span>
+          </div>
+          <div class="flex flex-col gap-4 flex-1 overflow-auto">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+                <i class="pi pi-briefcase text-primary"></i>
+              </div>
+              <div>
+                <div class="text-sm text-muted-color">Company</div>
+                <div class="font-medium text-color">{{ companyName() || 'Not assigned' }}</div>
+              </div>
+            </div>
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0">
+                <i class="pi pi-map-marker text-success"></i>
+              </div>
+              <div>
+                <div class="text-sm text-muted-color">Branch</div>
+                <div class="font-medium text-color">{{ branchName() || 'Not assigned' }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- Permissions -->
+      @if (showPermissionsSection()) {
+        <div class="card h-48 md:h-56 flex flex-col">
+          <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center gap-2">
+              <i class="pi pi-shield text-primary"></i>
+              <span class="font-semibold text-color">My Permissions</span>
+            </div>
+            <p-tag value="Read-only" severity="secondary" />
+          </div>
+          <div class="flex flex-col gap-4 flex-1 overflow-auto">
+            <!-- Roles -->
+            @if (showRoles()) {
+              <div>
+                <div class="text-sm text-muted-color mb-2 flex items-center gap-2">
+                  <i class="pi pi-users"></i> Roles
+                </div>
+                @if (isLoadingPermissions()) {
+                  <p-skeleton height="1.5rem" styleClass="mb-2" />
+                } @else if (userRoles().length === 0) {
+                  <span class="text-muted-color text-sm">No roles assigned</span>
+                } @else {
+                  <div class="flex flex-wrap gap-2">
+                    @for (role of userRoles(); track role.id) {
+                      <p-tag [value]="role.name" severity="info" />
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            <!-- Actions -->
+            @if (showActions()) {
+              <div>
+                <div class="text-sm text-muted-color mb-2 flex items-center gap-2">
+                  <i class="pi pi-bolt"></i> Direct Actions
+                </div>
+                @if (isLoadingPermissions()) {
+                  <p-skeleton height="1.5rem" styleClass="mb-2" />
+                } @else if (userActions().length === 0) {
+                  <span class="text-muted-color text-sm">No actions assigned</span>
+                } @else {
+                  <div class="flex flex-wrap gap-2">
+                    @for (action of userActions(); track action.id) {
+                      <p-tag [value]="action.name" severity="success" />
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: i6.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: FileUploaderComponent, selector: "lib-file-uploader", inputs: ["uploadFile", "acceptTypes", "multiple", "maxFiles", "maxSizeMb", "uploadOptions", "disabled", "showPreview", "autoUpload"], outputs: ["fileUploaded", "filesUploaded", "onError", "fileSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ProfilePageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-profile-page',
+                    standalone: true,
+                    imports: [AngularModule, PrimeModule, FormField, FileUploaderComponent],
+                    template: `
+    <!-- Page Header -->
+    <div class="mb-4 md:mb-6">
+      <h1 class="text-2xl font-bold text-color mb-2">My Profile</h1>
+      <p class="text-muted-color">Manage your account settings and preferences.</p>
+    </div>
+
+    <!-- Profile Form Card (full width) -->
+    <div class="card mb-2 md:mb-4">
+      <div class="flex flex-col md:flex-row gap-4 md:gap-6">
+        <!-- Avatar Section -->
+        <div class="flex flex-col items-center gap-4 md:w-72 lg:w-80 md:border-r md:border-surface-200 md:pr-6">
+          @if (profilePictureUrl()) {
+            <p-avatar
+              [image]="profilePictureUrl()!"
+              size="xlarge"
+              shape="circle"
+              styleClass="w-28 h-28" />
+          } @else {
+            <p-avatar
+              [label]="userInitials()"
+              size="xlarge"
+              shape="circle"
+              styleClass="w-28 h-28 text-3xl bg-primary text-primary-contrast" />
+          }
+          <div class="text-center">
+            <div class="font-semibold text-color">{{ userName() }}</div>
+            <div class="text-muted-color text-sm">{{ userEmail() }}</div>
+          </div>
+          <!-- Upload section - only show if storage is enabled and provider is available -->
+          @if (showUploadSection()) {
+            <lib-file-uploader
+              [uploadFile]="uploadFileFn"
+              [acceptTypes]="['image/*']"
+              [multiple]="false"
+              [maxSizeMb]="5"
+              [showPreview]="false"
+              (fileUploaded)="onProfilePictureUploaded($event)"
+              class="w-full" />
+          } @else {
+            <div class="w-full p-3 bg-surface-100 rounded-lg text-center">
+              <i class="pi pi-info-circle text-muted-color mr-2"></i>
+              <span class="text-sm text-muted-color">Storage feature not enabled</span>
+            </div>
+          }
+        </div>
+
+        <!-- Form Section -->
+        <div class="flex-1">
+          <form (ngSubmit)="onSubmit()" class="flex flex-col gap-4">
+            <!-- Email (read-only) -->
+            <div class="flex flex-col gap-2">
+              <label class="font-medium text-color">Email</label>
+              <input
+                pInputText
+                [value]="userEmail()"
+                disabled
+                class="bg-surface-50" />
+            </div>
+
+            <!-- Name -->
+            <div class="flex flex-col gap-2">
+              <label for="name" class="font-medium text-color">Name *</label>
+              <input
+                pInputText
+                id="name"
+                [formField]="formTree.name"
+                placeholder="Your full name" />
+            </div>
+
+            <!-- Phone -->
+            <div class="flex flex-col gap-2">
+              <label for="phone" class="font-medium text-color">Phone</label>
+              <input
+                pInputText
+                id="phone"
+                [formField]="formTree.phone"
+                placeholder="+1 234 567 8900" />
+            </div>
+
+            <!-- Submit -->
+            <div class="flex justify-end pt-4">
+              <p-button
+                label="Save Changes"
+                icon="pi pi-check"
+                type="submit"
+                [loading]="isLoading()"
+                [disabled]="!isFormValid() || isLoading()" />
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <!-- Security Card -->
+    <div class="card mb-2 md:mb-4">
+      <div class="flex items-center gap-2 mb-4">
+        <i class="pi pi-lock text-primary"></i>
+        <span class="font-semibold text-color">Security</span>
+      </div>
+      <form (ngSubmit)="onChangePassword()" class="flex flex-col gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <!-- Current Password -->
+          <div class="flex flex-col gap-2">
+            <label for="currentPassword" class="font-medium text-color">Current Password *</label>
+            <p-password
+              id="currentPassword"
+              name="currentPassword"
+              [ngModel]="passwordModel().currentPassword"
+              (ngModelChange)="updatePasswordField('currentPassword', $event)"
+              [feedback]="false"
+              [toggleMask]="true"
+              placeholder="Enter current password"
+              styleClass="w-full"
+              inputStyleClass="w-full" />
+          </div>
+
+          <!-- New Password -->
+          <div class="flex flex-col gap-2">
+            <label for="newPassword" class="font-medium text-color">New Password *</label>
+            <p-password
+              id="newPassword"
+              name="newPassword"
+              [ngModel]="passwordModel().newPassword"
+              (ngModelChange)="updatePasswordField('newPassword', $event)"
+              [feedback]="true"
+              [toggleMask]="true"
+              placeholder="Min 6 characters"
+              styleClass="w-full"
+              inputStyleClass="w-full" />
+          </div>
+
+          <!-- Confirm Password -->
+          <div class="flex flex-col gap-2">
+            <label for="confirmPassword" class="font-medium text-color">Confirm Password *</label>
+            <p-password
+              id="confirmPassword"
+              name="confirmPassword"
+              [ngModel]="passwordModel().confirmPassword"
+              (ngModelChange)="updatePasswordField('confirmPassword', $event)"
+              [feedback]="false"
+              [toggleMask]="true"
+              placeholder="Confirm new password"
+              styleClass="w-full"
+              inputStyleClass="w-full" />
+            @if (!passwordsMatch()) {
+              <small class="text-danger">Passwords do not match</small>
+            }
+          </div>
+        </div>
+
+        <!-- Submit -->
+        <div class="flex justify-end">
+          <p-button
+            label="Change Password"
+            icon="pi pi-key"
+            type="submit"
+            [loading]="isPasswordLoading()"
+            [disabled]="!isPasswordFormValid() || isPasswordLoading()" />
+        </div>
+      </form>
+    </div>
+
+    <!-- Company & Permissions Row (50/50 on desktop, stacked on mobile) -->
+    @if (showBottomRow()) {
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4 flex-1">
+        <!-- Company/Branch Info -->
+        @if (showCompanySection()) {
+        <div class="card h-48 md:h-56 flex flex-col">
+          <div class="flex items-center gap-2 mb-4">
+            <i class="pi pi-building text-primary"></i>
+            <span class="font-semibold text-color">Company & Branch</span>
+          </div>
+          <div class="flex flex-col gap-4 flex-1 overflow-auto">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+                <i class="pi pi-briefcase text-primary"></i>
+              </div>
+              <div>
+                <div class="text-sm text-muted-color">Company</div>
+                <div class="font-medium text-color">{{ companyName() || 'Not assigned' }}</div>
+              </div>
+            </div>
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0">
+                <i class="pi pi-map-marker text-success"></i>
+              </div>
+              <div>
+                <div class="text-sm text-muted-color">Branch</div>
+                <div class="font-medium text-color">{{ branchName() || 'Not assigned' }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- Permissions -->
+      @if (showPermissionsSection()) {
+        <div class="card h-48 md:h-56 flex flex-col">
+          <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center gap-2">
+              <i class="pi pi-shield text-primary"></i>
+              <span class="font-semibold text-color">My Permissions</span>
+            </div>
+            <p-tag value="Read-only" severity="secondary" />
+          </div>
+          <div class="flex flex-col gap-4 flex-1 overflow-auto">
+            <!-- Roles -->
+            @if (showRoles()) {
+              <div>
+                <div class="text-sm text-muted-color mb-2 flex items-center gap-2">
+                  <i class="pi pi-users"></i> Roles
+                </div>
+                @if (isLoadingPermissions()) {
+                  <p-skeleton height="1.5rem" styleClass="mb-2" />
+                } @else if (userRoles().length === 0) {
+                  <span class="text-muted-color text-sm">No roles assigned</span>
+                } @else {
+                  <div class="flex flex-wrap gap-2">
+                    @for (role of userRoles(); track role.id) {
+                      <p-tag [value]="role.name" severity="info" />
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            <!-- Actions -->
+            @if (showActions()) {
+              <div>
+                <div class="text-sm text-muted-color mb-2 flex items-center gap-2">
+                  <i class="pi pi-bolt"></i> Direct Actions
+                </div>
+                @if (isLoadingPermissions()) {
+                  <p-skeleton height="1.5rem" styleClass="mb-2" />
+                } @else if (userActions().length === 0) {
+                  <span class="text-muted-color text-sm">No actions assigned</span>
+                } @else {
+                  <div class="flex flex-wrap gap-2">
+                    @for (action of userActions(); track action.id) {
+                      <p-tag [value]="action.name" severity="success" />
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      }
+      </div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+var profilePage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ProfilePageComponent: ProfilePageComponent
+});
+
+class RegisterPageComponent {
+    destroyRef = inject(DestroyRef);
+    appConfig = inject(APP_CONFIG);
+    messageService = inject(MessageService);
+    authApi = inject(AuthApiService);
+    authState = inject(AuthStateService);
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    returnUrl = input('', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), ...(ngDevMode ? [{ debugName: "companyFeatureEnabled" }] : []));
+    userFormModel = signal({
+        name: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+        phone: '',
+    }, ...(ngDevMode ? [{ debugName: "userFormModel" }] : []));
+    userForm = form(this.userFormModel, (f) => {
+        required(f.name, { message: 'Name is required' });
+        minLength(f.name, 2, { message: 'Name must be at least 2 characters' });
+        required(f.email, { message: 'Email is required' });
+        email(f.email, { message: 'Please enter a valid email address' });
+        required(f.password, { message: 'Password is required' });
+        minLength(f.password, 6, { message: 'Password must be at least 6 characters' });
+        required(f.confirmPassword, { message: 'Please confirm your password' });
+    });
+    companyFormModel = signal({
+        createNewCompany: false,
+        companySlug: '',
+        branchSlug: '',
+        newCompanyName: '',
+        newCompanyPhone: '',
+        newCompanyAddress: '',
+    }, ...(ngDevMode ? [{ debugName: "companyFormModel" }] : []));
+    companyForm = form(this.companyFormModel, (f) => { });
     passwordsMatch = computed(() => {
         const model = this.userFormModel();
         return model.password === model.confirmPassword;
     }, ...(ngDevMode ? [{ debugName: "passwordsMatch" }] : []));
-    /** Check if form is valid */
     isFormValid = computed(() => {
         const userModel = this.userFormModel();
-        // User validation
         const userValid = userModel.name.trim().length >= 2 &&
             userModel.email.includes('@') &&
             userModel.password.length >= 6 &&
             userModel.confirmPassword.length > 0 &&
             this.passwordsMatch();
-        if (!isCompanyFeatureEnabled(this.appConfig)) {
+        if (!isCompanyFeatureEnabled(this.appConfig))
             return userValid;
-        }
         const companyModel = this.companyFormModel();
-        // Company validation
         if (companyModel.createNewCompany) {
             return userValid && companyModel.newCompanyName.trim().length > 0;
         }
         return userValid;
     }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
-    // ============================================
-    // Event Handlers
-    // ============================================
+    ngOnInit() {
+        const companySlug = this.route.snapshot.queryParamMap.get('companySlug');
+        if (companySlug) {
+            this.companyFormModel.update((model) => ({ ...model, companySlug }));
+        }
+    }
     onCreateCompanyToggle() {
         const currentValue = this.companyFormModel().createNewCompany;
-        // Reset fields when toggling
         if (!currentValue) {
-            // Toggling to create new company
             this.companyFormModel.update((model) => ({
                 ...model,
                 createNewCompany: true,
@@ -3699,7 +4845,6 @@ class RegisterPageComponent {
             }));
         }
         else {
-            // Toggling to join existing company
             this.companyFormModel.update((model) => ({
                 ...model,
                 createNewCompany: false,
@@ -3727,7 +4872,6 @@ class RegisterPageComponent {
             password: userModel.password,
             phone: userModel.phone || undefined,
         };
-        // Add company fields if company feature enabled
         if (isCompanyFeatureEnabled(this.appConfig)) {
             if (companyModel.createNewCompany) {
                 registrationData.newCompanyName =
@@ -3744,13 +4888,21 @@ class RegisterPageComponent {
         }
         this.authApi
             .register(registrationData)
-            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (response) => {
                 this.isLoading.set(false);
-                // Backend returns RegistrationResponse directly (not wrapped)
-                if (response && response.accessToken) {
-                    // Set auth state with registration response
+                if (response.requiresEmailVerification) {
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: 'Account Created',
+                        detail: 'Please check your email to verify your account.',
+                        life: 5000,
+                    });
+                    this.router.navigate(['/auth/login']);
+                    return;
+                }
+                if (response.accessToken) {
                     this.authState.setLoginState({
                         accessToken: response.accessToken,
                         refreshToken: response.refreshToken,
@@ -3766,21 +4918,13 @@ class RegisterPageComponent {
                     });
                     this.authState.navigateAfterLogin(this.returnUrl());
                 }
-                else {
-                    this.messageService.add({
-                        severity: 'error',
-                        summary: 'Registration Failed',
-                        detail: 'Unable to create account. Please try again.',
-                    });
-                }
             },
             error: (error) => {
                 this.isLoading.set(false);
                 this.messageService.add({
                     severity: 'error',
                     summary: 'Registration Failed',
-                    detail: error.error?.message ||
-                        'Unable to create account. Please try again.',
+                    detail: error.error?.message || 'Unable to create account. Please try again.',
                 });
             },
         });
@@ -3812,7 +4956,6 @@ class RegisterPageComponent {
             </div>
 
             <form (ngSubmit)="onSubmit()">
-              <!-- User Information -->
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                 <div>
                   <label for="name" class="block font-medium mb-2"
@@ -3888,14 +5031,13 @@ class RegisterPageComponent {
                     autocomplete="new-password"
                   />
                   @if (!passwordsMatch() && userFormModel().confirmPassword) {
-                  <small class="text-red-500 block mt-2"
+                  <small class="text-danger block mt-2"
                     >Passwords do not match</small
                   >
                   }
                 </div>
               </div>
 
-              <!-- Company Feature Section -->
               @if (companyFeatureEnabled()) {
               <div
                 class="border-t pt-6 mt-6"
@@ -3923,9 +5065,7 @@ class RegisterPageComponent {
                   </label>
                 </div>
 
-                <!-- Fixed height container to prevent height changes -->
                 @if (!companyFormModel().createNewCompany) {
-                <!-- Join Existing Company -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                   <div>
                     <label for="companySlug" class="block font-medium mb-2"
@@ -3957,7 +5097,6 @@ class RegisterPageComponent {
                   </div>
                 </div>
                 } @else {
-                <!-- Create New Company -->
                 <div class="mb-4">
                   <label for="newCompanyName" class="block font-medium mb-2"
                     >Company Name *</label
@@ -4004,7 +5143,6 @@ class RegisterPageComponent {
               </div>
               }
 
-              <!-- Submit -->
               <p-button
                 label="Create Account"
                 styleClass="w-full mt-4"
@@ -4027,7 +5165,7 @@ class RegisterPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RegisterPageComponent, decorators: [{
             type: Component,
@@ -4061,7 +5199,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             </div>
 
             <form (ngSubmit)="onSubmit()">
-              <!-- User Information -->
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                 <div>
                   <label for="name" class="block font-medium mb-2"
@@ -4137,14 +5274,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     autocomplete="new-password"
                   />
                   @if (!passwordsMatch() && userFormModel().confirmPassword) {
-                  <small class="text-red-500 block mt-2"
+                  <small class="text-danger block mt-2"
                     >Passwords do not match</small
                   >
                   }
                 </div>
               </div>
 
-              <!-- Company Feature Section -->
               @if (companyFeatureEnabled()) {
               <div
                 class="border-t pt-6 mt-6"
@@ -4172,9 +5308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                   </label>
                 </div>
 
-                <!-- Fixed height container to prevent height changes -->
                 @if (!companyFormModel().createNewCompany) {
-                <!-- Join Existing Company -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                   <div>
                     <label for="companySlug" class="block font-medium mb-2"
@@ -4192,97 +5326,402 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     >
                   </div>
 
-                  <div>
-                    <label for="branchSlug" class="block font-medium mb-2"
-                      >Branch Code</label
-                    >
-                    <input
-                      pInputText
-                      id="branchSlug"
-                      [formField]="companyForm.branchSlug"
-                      placeholder="Branch code (optional)"
-                      class="w-full"
-                    />
+                  <div>
+                    <label for="branchSlug" class="block font-medium mb-2"
+                      >Branch Code</label
+                    >
+                    <input
+                      pInputText
+                      id="branchSlug"
+                      [formField]="companyForm.branchSlug"
+                      placeholder="Branch code (optional)"
+                      class="w-full"
+                    />
+                  </div>
+                </div>
+                } @else {
+                <div class="mb-4">
+                  <label for="newCompanyName" class="block font-medium mb-2"
+                    >Company Name *</label
+                  >
+                  <input
+                    pInputText
+                    id="newCompanyName"
+                    [formField]="companyForm.newCompanyName"
+                    placeholder="Your company name"
+                    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"
+                      >Company Phone</label
+                    >
+                    <input
+                      pInputText
+                      id="newCompanyPhone"
+                      [formField]="companyForm.newCompanyPhone"
+                      placeholder="Company phone"
+                      class="w-full"
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      for="newCompanyAddress"
+                      class="block font-medium mb-2"
+                      >Address</label
+                    >
+                    <input
+                      pInputText
+                      id="newCompanyAddress"
+                      [formField]="companyForm.newCompanyAddress"
+                      placeholder="Company address"
+                      class="w-full"
+                    />
+                  </div>
+                </div>
+                }
+              </div>
+              }
+
+              <p-button
+                label="Create Account"
+                styleClass="w-full mt-4"
+                type="submit"
+                [loading]="isLoading()"
+                [disabled]="!isFormValid() || isLoading()"
+              />
+
+              <div class="flex items-center justify-center mt-4 gap-2">
+                <span class="font-medium">Already have an account?</span>
+                <a
+                  routerLink="/auth/login"
+                  class="font-semibold text-primary cursor-pointer"
+                >
+                  Sign In
+                </a>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
+
+var registerPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    RegisterPageComponent: RegisterPageComponent
+});
+
+class ResetPasswordPageComponent {
+    destroyRef = inject(DestroyRef);
+    route = inject(ActivatedRoute);
+    messageService = inject(MessageService);
+    authApi = inject(AuthApiService);
+    token = '';
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    pageState = signal('form', ...(ngDevMode ? [{ debugName: "pageState" }] : []));
+    formModel = signal({ newPassword: '', confirmPassword: '' }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    resetForm = form(this.formModel, (f) => {
+        required(f.newPassword, { message: 'New password is required' });
+        minLength(f.newPassword, 6, { message: 'Password must be at least 6 characters' });
+        required(f.confirmPassword, { message: 'Please confirm your password' });
+    });
+    passwordMismatch = computed(() => {
+        const model = this.formModel();
+        return model.confirmPassword.length > 0 && model.newPassword !== model.confirmPassword;
+    }, ...(ngDevMode ? [{ debugName: "passwordMismatch" }] : []));
+    canSubmit = computed(() => this.resetForm().valid() && !this.passwordMismatch(), ...(ngDevMode ? [{ debugName: "canSubmit" }] : []));
+    ngOnInit() {
+        this.route.queryParams.pipe(take(1)).subscribe((params) => {
+            this.token = params['token'] || '';
+            if (!this.token) {
+                this.pageState.set('invalid-token');
+            }
+        });
+    }
+    onSubmit() {
+        if (!this.canSubmit()) {
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Validation Error',
+                detail: 'Please fill in all fields correctly.',
+            });
+            return;
+        }
+        this.isLoading.set(true);
+        const newPassword = this.formModel().newPassword;
+        this.authApi
+            .resetPassword(this.token, newPassword)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => {
+                this.isLoading.set(false);
+                this.messageService.add({
+                    severity: 'success',
+                    summary: 'Success',
+                    detail: 'Your password has been reset successfully.',
+                });
+                this.pageState.set('success');
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                const message = error.error?.message || 'Failed to reset password';
+                if (message.toLowerCase().includes('expired') || message.toLowerCase().includes('invalid')) {
+                    this.pageState.set('invalid-token');
+                }
+                else {
+                    this.messageService.add({
+                        severity: 'error',
+                        summary: 'Error',
+                        detail: message,
+                    });
+                }
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ResetPasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ResetPasswordPageComponent, isStandalone: true, selector: "lib-reset-password-page", 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(--p-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-16 px-12"
+            style="border-radius: var(--p-content-border-radius); background: var(--p-content-background);">
+
+            @switch (pageState()) {
+              @case ('form') {
+                <div class="text-center mb-8">
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Reset Password
+                  </div>
+                  <span class="text-muted-color font-medium">
+                    Enter your new password below.
+                  </span>
+                </div>
+
+                <form (ngSubmit)="onSubmit()">
+                  <label for="newPassword" class="block text-lg font-medium mb-2" style="color: var(--p-content-color);">
+                    New Password
+                  </label>
+                  <input
+                    pInputText
+                    id="newPassword"
+                    type="password"
+                    placeholder="Enter new password"
+                    class="w-full md:w-[25rem] mb-4"
+                    [formField]="resetForm.newPassword"
+                    autocomplete="new-password" />
+
+                  <label for="confirmPassword" class="block text-lg font-medium mb-2" style="color: var(--p-content-color);">
+                    Confirm Password
+                  </label>
+                  <input
+                    pInputText
+                    id="confirmPassword"
+                    type="password"
+                    placeholder="Confirm new password"
+                    class="w-full md:w-[25rem] mb-2"
+                    [formField]="resetForm.confirmPassword"
+                    autocomplete="new-password" />
+
+                  @if (passwordMismatch()) {
+                    <small class="text-danger block mb-4">Passwords do not match</small>
+                  }
+
+                  <p-button
+                    label="Reset Password"
+                    styleClass="w-full mt-4 mb-4"
+                    type="submit"
+                    [loading]="isLoading()"
+                    [disabled]="!canSubmit() || isLoading()" />
+
+                  <div class="flex items-center justify-center gap-2">
+                    <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                      Back to Sign In
+                    </a>
+                  </div>
+                </form>
+              }
+
+              @case ('success') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-check-circle text-6xl text-success"></i>
+                  </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Password Reset Successful
+                  </div>
+                  <p class="text-muted-color font-medium mb-6">
+                    Your password has been reset successfully.
+                    You can now sign in with your new password.
+                  </p>
+                  <a routerLink="/auth/login">
+                    <p-button label="Sign In" styleClass="w-full" />
+                  </a>
+                </div>
+              }
+
+              @case ('invalid-token') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-times-circle text-6xl text-danger"></i>
+                  </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Invalid or Expired Link
+                  </div>
+                  <p class="text-muted-color font-medium mb-6">
+                    This password reset link is invalid or has expired.
+                    Please request a new one.
+                  </p>
+                  <a routerLink="/auth/forgot-password">
+                    <p-button label="Request New Link" styleClass="w-full mb-4" />
+                  </a>
+                  <div class="mt-4">
+                    <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                      Back to Sign In
+                    </a>
+                  </div>
+                </div>
+              }
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-reset-password-page',
+                    standalone: true,
+                    imports: [AngularModule, PrimeModule, FormField, AppFloatingConfigurator],
+                    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(--p-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-16 px-12"
+            style="border-radius: var(--p-content-border-radius); background: var(--p-content-background);">
+
+            @switch (pageState()) {
+              @case ('form') {
+                <div class="text-center mb-8">
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Reset Password
                   </div>
+                  <span class="text-muted-color font-medium">
+                    Enter your new password below.
+                  </span>
                 </div>
-                } @else {
-                <!-- Create New Company -->
-                <div class="mb-4">
-                  <label for="newCompanyName" class="block font-medium mb-2"
-                    >Company Name *</label
-                  >
+
+                <form (ngSubmit)="onSubmit()">
+                  <label for="newPassword" class="block text-lg font-medium mb-2" style="color: var(--p-content-color);">
+                    New Password
+                  </label>
                   <input
                     pInputText
-                    id="newCompanyName"
-                    [formField]="companyForm.newCompanyName"
-                    placeholder="Your company name"
-                    class="w-full"
-                  />
-                </div>
+                    id="newPassword"
+                    type="password"
+                    placeholder="Enter new password"
+                    class="w-full md:w-[25rem] mb-4"
+                    [formField]="resetForm.newPassword"
+                    autocomplete="new-password" />
 
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                  <div>
-                    <label for="newCompanyPhone" class="block font-medium mb-2"
-                      >Company Phone</label
-                    >
-                    <input
-                      pInputText
-                      id="newCompanyPhone"
-                      [formField]="companyForm.newCompanyPhone"
-                      placeholder="Company phone"
-                      class="w-full"
-                    />
+                  <label for="confirmPassword" class="block text-lg font-medium mb-2" style="color: var(--p-content-color);">
+                    Confirm Password
+                  </label>
+                  <input
+                    pInputText
+                    id="confirmPassword"
+                    type="password"
+                    placeholder="Confirm new password"
+                    class="w-full md:w-[25rem] mb-2"
+                    [formField]="resetForm.confirmPassword"
+                    autocomplete="new-password" />
+
+                  @if (passwordMismatch()) {
+                    <small class="text-danger block mb-4">Passwords do not match</small>
+                  }
+
+                  <p-button
+                    label="Reset Password"
+                    styleClass="w-full mt-4 mb-4"
+                    type="submit"
+                    [loading]="isLoading()"
+                    [disabled]="!canSubmit() || isLoading()" />
+
+                  <div class="flex items-center justify-center gap-2">
+                    <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                      Back to Sign In
+                    </a>
                   </div>
+                </form>
+              }
 
-                  <div>
-                    <label
-                      for="newCompanyAddress"
-                      class="block font-medium mb-2"
-                      >Address</label
-                    >
-                    <input
-                      pInputText
-                      id="newCompanyAddress"
-                      [formField]="companyForm.newCompanyAddress"
-                      placeholder="Company address"
-                      class="w-full"
-                    />
+              @case ('success') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-check-circle text-6xl text-success"></i>
                   </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Password Reset Successful
+                  </div>
+                  <p class="text-muted-color font-medium mb-6">
+                    Your password has been reset successfully.
+                    You can now sign in with your new password.
+                  </p>
+                  <a routerLink="/auth/login">
+                    <p-button label="Sign In" styleClass="w-full" />
+                  </a>
                 </div>
-                }
-              </div>
               }
 
-              <!-- Submit -->
-              <p-button
-                label="Create Account"
-                styleClass="w-full mt-4"
-                type="submit"
-                [loading]="isLoading()"
-                [disabled]="!isFormValid() || isLoading()"
-              />
-
-              <div class="flex items-center justify-center mt-4 gap-2">
-                <span class="font-medium">Already have an account?</span>
-                <a
-                  routerLink="/auth/login"
-                  class="font-semibold text-primary cursor-pointer"
-                >
-                  Sign In
-                </a>
-              </div>
-            </form>
+              @case ('invalid-token') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-times-circle text-6xl text-danger"></i>
+                  </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Invalid or Expired Link
+                  </div>
+                  <p class="text-muted-color font-medium mb-6">
+                    This password reset link is invalid or has expired.
+                    Please request a new one.
+                  </p>
+                  <a routerLink="/auth/forgot-password">
+                    <p-button label="Request New Link" styleClass="w-full mb-4" />
+                  </a>
+                  <div class="mt-4">
+                    <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                      Back to Sign In
+                    </a>
+                  </div>
+                </div>
+              }
+            }
           </div>
         </div>
       </div>
     </div>
   `,
                 }]
-        }], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
+        }] });
 
-var registerPage_component = /*#__PURE__*/Object.freeze({
+var resetPasswordPage_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    RegisterPageComponent: RegisterPageComponent
+    ResetPasswordPageComponent: ResetPasswordPageComponent
 });
 
 /**
@@ -4567,8 +6006,8 @@ class UserFormComponent {
 
         <!-- Company Info (when company feature enabled) -->
         @if (companyFeatureEnabled() && !isEditMode()) {
-          <div class="md:col-span-2 p-3 bg-blue-50 rounded-lg border border-blue-200">
-            <div class="flex items-center gap-2 text-blue-700">
+          <div class="md:col-span-2 p-3 bg-primary/10 rounded-lg border border-primary/20">
+            <div class="flex items-center gap-2 text-primary">
               <i class="pi pi-info-circle"></i>
               <span class="text-sm">
                 User will be automatically assigned to
@@ -4596,7 +6035,7 @@ class UserFormComponent {
         </div>
       </form>
     </p-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserFormComponent, decorators: [{
             type: Component,
@@ -4677,8 +6116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
         <!-- Company Info (when company feature enabled) -->
         @if (companyFeatureEnabled() && !isEditMode()) {
-          <div class="md:col-span-2 p-3 bg-blue-50 rounded-lg border border-blue-200">
-            <div class="flex items-center gap-2 text-blue-700">
+          <div class="md:col-span-2 p-3 bg-primary/10 rounded-lg border border-primary/20">
+            <div class="flex items-center gap-2 text-primary">
               <i class="pi pi-info-circle"></i>
               <span class="text-sm">
                 User will be automatically assigned to
@@ -4889,7 +6328,7 @@ class UserCompanyPermissionDialogComponent {
           [disabled]="isSaving()" />
       </ng-template>
     </p-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i6.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i6$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserCompanyPermissionDialogComponent, decorators: [{
             type: Component,
@@ -5194,7 +6633,7 @@ class UserBranchPermissionDialogComponent {
           [disabled]="isSaving()" />
       </ng-template>
     </p-dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i7.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i6.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i5$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i6$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserBranchPermissionDialogComponent, decorators: [{
             type: Component,
@@ -5460,7 +6899,7 @@ class UserListComponent {
         (closed)="showBranchDialog.set(false)"
         (permissionsChanged)="loadUsers()" />
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i4$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: UserCompanyPermissionDialogComponent, selector: "lib-user-company-permission-dialog", inputs: ["visible", "user"], outputs: ["closed", "permissionsChanged"] }, { kind: "component", type: UserBranchPermissionDialogComponent, selector: "lib-user-branch-permission-dialog", inputs: ["visible", "user"], outputs: ["closed", "permissionsChanged"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i4$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: UserCompanyPermissionDialogComponent, selector: "lib-user-company-permission-dialog", inputs: ["visible", "user"], outputs: ["closed", "permissionsChanged"] }, { kind: "component", type: UserBranchPermissionDialogComponent, selector: "lib-user-branch-permission-dialog", inputs: ["visible", "user"], outputs: ["closed", "permissionsChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
@@ -5587,6 +7026,375 @@ var userList_component = /*#__PURE__*/Object.freeze({
     UserListComponent: UserListComponent
 });
 
+const VERIFY_EMAIL_KEY = makeStateKey('verify-email-result');
+class VerifyEmailPageComponent {
+    platformId = inject(PLATFORM_ID);
+    transferState = inject(TransferState);
+    destroyRef = inject(DestroyRef);
+    route = inject(ActivatedRoute);
+    messageService = inject(MessageService);
+    authApi = inject(AuthApiService);
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    pageState = signal('verifying', ...(ngDevMode ? [{ debugName: "pageState" }] : []));
+    resendSuccess = signal(false, ...(ngDevMode ? [{ debugName: "resendSuccess" }] : []));
+    submittedEmail = signal('', ...(ngDevMode ? [{ debugName: "submittedEmail" }] : []));
+    resendFormModel = signal({ email: '' }, ...(ngDevMode ? [{ debugName: "resendFormModel" }] : []));
+    resendForm = form(this.resendFormModel, (f) => {
+        required(f.email, { message: 'Email is required' });
+        email(f.email, { message: 'Please enter a valid email address' });
+    });
+    isResendFormValid = computed(() => this.resendForm().valid(), ...(ngDevMode ? [{ debugName: "isResendFormValid" }] : []));
+    ngOnInit() {
+        this.route.queryParams.pipe(take(1)).subscribe((params) => {
+            const token = params['token'] || '';
+            if (!token) {
+                this.pageState.set('resend');
+                return;
+            }
+            // Check if we already have result from SSR (avoid duplicate API call)
+            const cachedResult = this.transferState.get(VERIFY_EMAIL_KEY, null);
+            if (cachedResult) {
+                this.transferState.remove(VERIFY_EMAIL_KEY);
+                this.handleVerificationResult(cachedResult === 'success');
+                return;
+            }
+            this.verifyEmail(token);
+        });
+    }
+    verifyEmail(token) {
+        this.authApi
+            .verifyEmail(token)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => {
+                // Store result for browser hydration (SSR only)
+                if (!isPlatformBrowser(this.platformId)) {
+                    this.transferState.set(VERIFY_EMAIL_KEY, 'success');
+                }
+                this.handleVerificationResult(true);
+            },
+            error: () => {
+                if (!isPlatformBrowser(this.platformId)) {
+                    this.transferState.set(VERIFY_EMAIL_KEY, 'error');
+                }
+                this.handleVerificationResult(false);
+            },
+        });
+    }
+    handleVerificationResult(success) {
+        if (success) {
+            this.pageState.set('success');
+            if (isPlatformBrowser(this.platformId)) {
+                this.messageService.add({
+                    severity: 'success',
+                    summary: 'Success',
+                    detail: 'Your email has been verified successfully.',
+                });
+            }
+        }
+        else {
+            this.pageState.set('invalid-token');
+        }
+    }
+    showResendForm() {
+        this.pageState.set('resend');
+        this.resendSuccess.set(false);
+    }
+    onResend() {
+        if (!this.isResendFormValid()) {
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Validation Error',
+                detail: 'Please enter a valid email address.',
+            });
+            return;
+        }
+        this.isLoading.set(true);
+        const email = this.resendFormModel().email;
+        this.authApi
+            .resendVerification(email)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => this.handleResendComplete(email),
+            error: () => this.handleResendComplete(email),
+        });
+    }
+    handleResendComplete(email) {
+        this.isLoading.set(false);
+        this.messageService.add({
+            severity: 'success',
+            summary: 'Email Sent',
+            detail: 'If the email exists, a verification link has been sent.',
+        });
+        this.submittedEmail.set(email);
+        this.resendSuccess.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerifyEmailPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: VerifyEmailPageComponent, isStandalone: true, selector: "lib-verify-email-page", 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(--p-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-16 px-12"
+            style="border-radius: var(--p-content-border-radius); background: var(--p-content-background);">
+
+            @switch (pageState()) {
+              @case ('verifying') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-spin pi-spinner text-8xl text-primary"></i>
+                  </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Verifying Email
+                  </div>
+                  <p class="text-muted-color font-medium">
+                    Please wait while we verify your email address...
+                  </p>
+                </div>
+              }
+
+              @case ('success') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-check-circle text-8xl text-success"></i>
+                  </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Email Verified
+                  </div>
+                  <p class="text-muted-color font-medium mb-6">
+                    Your email address has been verified successfully.
+                    You can now access all features of your account.
+                  </p>
+                  <a routerLink="/auth/login">
+                    <p-button label="Sign In" styleClass="w-full" />
+                  </a>
+                </div>
+              }
+
+              @case ('invalid-token') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-times-circle text-8xl text-danger"></i>
+                  </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Verification Failed
+                  </div>
+                  <p class="text-muted-color font-medium mb-6">
+                    This verification link is invalid or has expired.
+                  </p>
+                  <p-button
+                    label="Resend Verification Email"
+                    styleClass="w-full mb-4"
+                    (onClick)="showResendForm()" />
+                  <div class="mt-4">
+                    <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                      Back to Sign In
+                    </a>
+                  </div>
+                </div>
+              }
+
+              @case ('resend') {
+                <div class="text-center mb-8">
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Resend Verification
+                  </div>
+                  <span class="text-muted-color font-medium">
+                    Enter your email to receive a new verification link.
+                  </span>
+                </div>
+
+                @if (!resendSuccess()) {
+                  <form (ngSubmit)="onResend()">
+                    <label for="email" class="block text-lg font-medium mb-2" style="color: var(--p-content-color);">
+                      Email
+                    </label>
+                    <input
+                      pInputText
+                      id="email"
+                      type="email"
+                      placeholder="Enter your email address"
+                      class="w-full md:w-[25rem] mb-6"
+                      [formField]="resendForm.email"
+                      autocomplete="email" />
+
+                    <p-button
+                      label="Resend Verification"
+                      styleClass="w-full mb-4"
+                      type="submit"
+                      [loading]="isLoading()"
+                      [disabled]="!isResendFormValid() || isLoading()" />
+
+                    <div class="flex items-center justify-center gap-2">
+                      <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                        Back to Sign In
+                      </a>
+                    </div>
+                  </form>
+                } @else {
+                  <div class="text-center">
+                    <div class="flex justify-center mb-6">
+                      <i class="pi pi-envelope text-8xl text-primary"></i>
+                    </div>
+                    <p class="text-muted-color font-medium mb-6">
+                      We've sent a new verification link to <strong>{{ submittedEmail() }}</strong>.
+                      Please check your inbox.
+                    </p>
+                    <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                      Back to Sign In
+                    </a>
+                  </div>
+                }
+              }
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: VerifyEmailPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-verify-email-page',
+                    standalone: true,
+                    imports: [AngularModule, PrimeModule, FormField, AppFloatingConfigurator],
+                    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(--p-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-16 px-12"
+            style="border-radius: var(--p-content-border-radius); background: var(--p-content-background);">
+
+            @switch (pageState()) {
+              @case ('verifying') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-spin pi-spinner text-8xl text-primary"></i>
+                  </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Verifying Email
+                  </div>
+                  <p class="text-muted-color font-medium">
+                    Please wait while we verify your email address...
+                  </p>
+                </div>
+              }
+
+              @case ('success') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-check-circle text-8xl text-success"></i>
+                  </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Email Verified
+                  </div>
+                  <p class="text-muted-color font-medium mb-6">
+                    Your email address has been verified successfully.
+                    You can now access all features of your account.
+                  </p>
+                  <a routerLink="/auth/login">
+                    <p-button label="Sign In" styleClass="w-full" />
+                  </a>
+                </div>
+              }
+
+              @case ('invalid-token') {
+                <div class="text-center">
+                  <div class="flex justify-center mb-6">
+                    <i class="pi pi-times-circle text-8xl text-danger"></i>
+                  </div>
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Verification Failed
+                  </div>
+                  <p class="text-muted-color font-medium mb-6">
+                    This verification link is invalid or has expired.
+                  </p>
+                  <p-button
+                    label="Resend Verification Email"
+                    styleClass="w-full mb-4"
+                    (onClick)="showResendForm()" />
+                  <div class="mt-4">
+                    <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                      Back to Sign In
+                    </a>
+                  </div>
+                </div>
+              }
+
+              @case ('resend') {
+                <div class="text-center mb-8">
+                  <div class="text-3xl font-medium mb-4" style="color: var(--p-content-color);">
+                    Resend Verification
+                  </div>
+                  <span class="text-muted-color font-medium">
+                    Enter your email to receive a new verification link.
+                  </span>
+                </div>
+
+                @if (!resendSuccess()) {
+                  <form (ngSubmit)="onResend()">
+                    <label for="email" class="block text-lg font-medium mb-2" style="color: var(--p-content-color);">
+                      Email
+                    </label>
+                    <input
+                      pInputText
+                      id="email"
+                      type="email"
+                      placeholder="Enter your email address"
+                      class="w-full md:w-[25rem] mb-6"
+                      [formField]="resendForm.email"
+                      autocomplete="email" />
+
+                    <p-button
+                      label="Resend Verification"
+                      styleClass="w-full mb-4"
+                      type="submit"
+                      [loading]="isLoading()"
+                      [disabled]="!isResendFormValid() || isLoading()" />
+
+                    <div class="flex items-center justify-center gap-2">
+                      <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                        Back to Sign In
+                      </a>
+                    </div>
+                  </form>
+                } @else {
+                  <div class="text-center">
+                    <div class="flex justify-center mb-6">
+                      <i class="pi pi-envelope text-8xl text-primary"></i>
+                    </div>
+                    <p class="text-muted-color font-medium mb-6">
+                      We've sent a new verification link to <strong>{{ submittedEmail() }}</strong>.
+                      Please check your inbox.
+                    </p>
+                    <a routerLink="/auth/login" class="font-semibold text-primary cursor-pointer">
+                      Back to Sign In
+                    </a>
+                  </div>
+                }
+              }
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+
+var verifyEmailPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    VerifyEmailPageComponent: VerifyEmailPageComponent
+});
+
 // =============================================================================
 // @flusys/ng-auth - Authentication Package
 // =============================================================================
@@ -5596,5 +7404,5 @@ var userList_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { ADMINISTRATION_ROUTES, AUTH_ENDPOINTS, AUTH_ROUTES, AdministrationPageComponent, AuthApiService, AuthCompanyApiProviderAdapter, AuthInitService, AuthLayoutApiAdapter, AuthLayoutStateAdapter, AuthStateService, AuthUserPermissionProviderAdapter, AuthUserProviderAdapter, BranchApiService, BranchFormComponent, BranchListComponent, CompanyApiService, CompanyFormComponent, CompanyListComponent, LoginPageComponent, RegisterPageComponent, TokenRefreshStateService, UserApiService, UserBranchPermissionDialogComponent, UserCompanyPermissionDialogComponent, UserFormComponent, UserListComponent, UserPermissionApiService, authGuard, authInterceptor, companyFeatureGuard, guestGuard, isAuthEndpoint, isCompanySelectionResponse, isEndpoint, isLoginResponse, provideAuthLayoutIntegration, provideAuthProviders, tokenRefreshInterceptor };
+export { ADMINISTRATION_ROUTES, AUTH_ENDPOINTS, AUTH_ROUTES, AdministrationPageComponent, AuthApiService, AuthCompanyApiProviderAdapter, AuthInitService, AuthLayoutApiAdapter, AuthLayoutStateAdapter, AuthStateService, AuthUserPermissionProviderAdapter, AuthUserProviderAdapter, BranchApiService, BranchFormComponent, BranchListComponent, CompanyApiService, CompanyFormComponent, CompanyListComponent, ForgotPasswordPageComponent, LoginPageComponent, PROFILE_ROUTES, ProfilePageComponent, RegisterPageComponent, ResetPasswordPageComponent, TokenRefreshStateService, UserApiService, UserBranchPermissionDialogComponent, UserCompanyPermissionDialogComponent, UserFormComponent, UserListComponent, UserPermissionApiService, VerifyEmailPageComponent, authGuard, authInterceptor, companyFeatureGuard, guestGuard, isAuthEndpoint, isCompanySelectionResponse, isEmailVerificationRequired, isEndpoint, isLoginResponse, provideAuthLayoutIntegration, provideAuthProviders, tokenRefreshInterceptor };
 //# sourceMappingURL=flusys-ng-auth.mjs.map