@noatgnu/cupcake-core 1.0.0

package/fesm2022/noatgnu-cupcake-core.mjs

@@ -0,0 +1,2684 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, computed, Component, effect, NgModule } from '@angular/core';
+import * as i1 from '@angular/common/http';
+import { HttpClient, HttpParams, provideHttpClient, withInterceptors, HttpClientModule } from '@angular/common/http';
+import { BehaviorSubject, map, tap, throwError, catchError, take, switchMap, filter, debounceTime, distinctUntilChanged } from 'rxjs';
+import { map as map$1 } from 'rxjs/operators';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import * as i1$1 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, FormsModule, NonNullableFormBuilder } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbAlert, NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i2$2 from 'ngx-color/sketch';
+import { ColorSketchModule } from 'ngx-color/sketch';
+
+var ResourceType;
+(function (ResourceType) {
+    ResourceType["METADATA_TABLE"] = "metadata_table";
+    ResourceType["METADATA_TABLE_TEMPLATE"] = "metadata_table_template";
+    ResourceType["METADATA_COLUMN_TEMPLATE"] = "metadata_column_template";
+    ResourceType["FILE"] = "file";
+    ResourceType["DATASET"] = "dataset";
+    ResourceType["SCHEMA"] = "schema";
+})(ResourceType || (ResourceType = {}));
+const ResourceTypeLabels = {
+    [ResourceType.METADATA_TABLE]: 'Metadata Table',
+    [ResourceType.METADATA_TABLE_TEMPLATE]: 'Metadata Table Template',
+    [ResourceType.METADATA_COLUMN_TEMPLATE]: 'Metadata Column Template',
+    [ResourceType.FILE]: 'File',
+    [ResourceType.DATASET]: 'Dataset',
+    [ResourceType.SCHEMA]: 'Schema'
+};
+var ResourceVisibility;
+(function (ResourceVisibility) {
+    ResourceVisibility["PRIVATE"] = "private";
+    ResourceVisibility["GROUP"] = "group";
+    ResourceVisibility["PUBLIC"] = "public";
+})(ResourceVisibility || (ResourceVisibility = {}));
+const ResourceVisibilityLabels = {
+    [ResourceVisibility.PRIVATE]: 'Private',
+    [ResourceVisibility.GROUP]: 'Lab Group',
+    [ResourceVisibility.PUBLIC]: 'Public'
+};
+var ResourceRole;
+(function (ResourceRole) {
+    ResourceRole["OWNER"] = "owner";
+    ResourceRole["ADMIN"] = "admin";
+    ResourceRole["EDITOR"] = "editor";
+    ResourceRole["VIEWER"] = "viewer";
+})(ResourceRole || (ResourceRole = {}));
+const ResourceRoleLabels = {
+    [ResourceRole.OWNER]: 'Owner',
+    [ResourceRole.ADMIN]: 'Administrator',
+    [ResourceRole.EDITOR]: 'Editor',
+    [ResourceRole.VIEWER]: 'Viewer'
+};
+var InvitationStatus;
+(function (InvitationStatus) {
+    InvitationStatus["PENDING"] = "pending";
+    InvitationStatus["ACCEPTED"] = "accepted";
+    InvitationStatus["REJECTED"] = "rejected";
+    InvitationStatus["EXPIRED"] = "expired";
+    InvitationStatus["CANCELLED"] = "cancelled";
+})(InvitationStatus || (InvitationStatus = {}));
+const InvitationStatusLabels = {
+    [InvitationStatus.PENDING]: 'Pending',
+    [InvitationStatus.ACCEPTED]: 'Accepted',
+    [InvitationStatus.REJECTED]: 'Rejected',
+    [InvitationStatus.EXPIRED]: 'Expired',
+    [InvitationStatus.CANCELLED]: 'Cancelled'
+};
+
+/**
+ * CUPCAKE Core (CCC) - Models barrel export
+ * User management, lab groups, and core functionality interfaces
+ */
+// Base types and enums
+
+const CUPCAKE_CORE_CONFIG = new InjectionToken('CUPCAKE_CORE_CONFIG');
+class AuthService {
+    http = inject(HttpClient);
+    config = inject(CUPCAKE_CORE_CONFIG);
+    apiUrl = this.config.apiUrl;
+    currentUserSubject = new BehaviorSubject(null);
+    currentUser$ = this.currentUserSubject.asObservable();
+    isAuthenticatedSubject = new BehaviorSubject(this.hasValidTokenOnInit());
+    isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
+    constructor() {
+        this.initializeAuthState();
+        if (typeof window !== 'undefined') {
+            window.addEventListener('tokenRefreshed', () => {
+                this.updateAuthStateAfterRefresh();
+            });
+            window.addEventListener('authCleared', () => {
+                this.clearAuthData();
+            });
+        }
+    }
+    hasValidTokenOnInit() {
+        if (typeof window === 'undefined')
+            return false;
+        const token = localStorage.getItem('ccvAccessToken');
+        if (!token)
+            return false;
+        try {
+            const payload = JSON.parse(atob(token.split('.')[1]));
+            const now = Math.floor(Date.now() / 1000);
+            return payload.exp > now;
+        }
+        catch {
+            return false;
+        }
+    }
+    initializeAuthState() {
+        const token = this.getAccessToken();
+        const refreshToken = this.getRefreshToken();
+        if (token && !this.isTokenExpired(token)) {
+            this.isAuthenticatedSubject.next(true);
+            // Try to get basic user info from token first (for immediate display)
+            const user = this.getUserFromToken();
+            if (user) {
+                this.currentUserSubject.next(user);
+            }
+            // Then fetch complete user profile from backend to ensure we have latest data
+            this.fetchUserProfile().subscribe({
+                next: (fullUser) => {
+                    // Profile fetched successfully
+                },
+                error: (error) => {
+                    // Don't clear auth state on profile fetch failure - user might still be authenticated
+                }
+            });
+        }
+        else if (refreshToken && token && this.isTokenExpired(token)) {
+            // Token is expired but we have refresh token
+            // Don't try to refresh here - let the interceptor handle it when needed
+            // Just clear the auth state for now but keep the tokens
+            this.isAuthenticatedSubject.next(false);
+            this.currentUserSubject.next(null);
+        }
+        else if (refreshToken && !token) {
+            // We have refresh token but no access token
+            // Keep the refresh token, clear auth state
+            this.isAuthenticatedSubject.next(false);
+            this.currentUserSubject.next(null);
+        }
+        else {
+            // No tokens at all, just set auth state to false without clearing
+            // (tokens might be missing for other reasons, let auth guard handle redirect)
+            this.isAuthenticatedSubject.next(false);
+            this.currentUserSubject.next(null);
+        }
+    }
+    isTokenExpired(token) {
+        try {
+            const payload = JSON.parse(atob(token.split('.')[1]));
+            const now = Math.floor(Date.now() / 1000);
+            return payload.exp < now;
+        }
+        catch {
+            return true;
+        }
+    }
+    getUserFromToken() {
+        const token = this.getAccessToken();
+        if (!token)
+            return null;
+        try {
+            const payload = JSON.parse(atob(token.split('.')[1]));
+            return {
+                id: payload.user_id,
+                username: payload.username || '',
+                email: payload.email || '',
+                firstName: payload.first_name || '',
+                lastName: payload.last_name || '',
+                isStaff: payload.is_staff || false,
+                isSuperuser: payload.is_superuser || false,
+                isActive: payload.is_active || true,
+                dateJoined: payload.date_joined || '',
+                lastLogin: payload.last_login || null,
+                hasOrcid: payload.orcid_id ? true : false,
+                orcidId: payload.orcid_id
+            };
+        }
+        catch {
+            return null;
+        }
+    }
+    initiateORCIDLogin() {
+        return this.http.get(`${this.apiUrl}/auth/orcid/login/`)
+            .pipe(map(response => ({
+            authorizationUrl: response.authorization_url,
+            state: response.state
+        })));
+    }
+    handleORCIDCallback(code, state) {
+        const params = new URLSearchParams({ code, state });
+        return this.http.get(`${this.apiUrl}/auth/orcid/callback/?${params}`)
+            .pipe(tap(response => this.setAuthData(response)));
+    }
+    exchangeORCIDToken(accessToken, orcidId) {
+        return this.http.post(`${this.apiUrl}/auth/orcid/token/`, {
+            access_token: accessToken,
+            orcid_id: orcidId
+        }).pipe(tap(response => this.setAuthData(response)));
+    }
+    login(username, password) {
+        return this.http.post(`${this.apiUrl}/auth/login/`, {
+            username,
+            password
+        }).pipe(tap(response => this.setAuthData(response)));
+    }
+    logout() {
+        const refreshToken = this.getRefreshToken();
+        const payload = refreshToken ? { refresh: refreshToken } : {};
+        return this.http.post(`${this.apiUrl}/auth/logout/`, payload)
+            .pipe(tap(() => this.clearAuthData()));
+    }
+    checkAuthStatus() {
+        return this.http.get(`${this.apiUrl}/auth/status/`)
+            .pipe(tap(status => {
+            if (status.authenticated && status.user) {
+                this.currentUserSubject.next(status.user);
+                this.isAuthenticatedSubject.next(true);
+            }
+            else {
+                this.clearAuthData();
+            }
+        }));
+    }
+    fetchUserProfile() {
+        return this.http.get(`${this.apiUrl}/auth/profile/`)
+            .pipe(tap(response => {
+            this.currentUserSubject.next(response.user);
+            this.isAuthenticatedSubject.next(true);
+        }), map(response => response.user));
+    }
+    getCurrentUser() {
+        return this.currentUserSubject.value;
+    }
+    isAuthenticated() {
+        return this.isAuthenticatedSubject.value;
+    }
+    getAccessToken() {
+        return localStorage.getItem('ccvAccessToken');
+    }
+    getRefreshToken() {
+        return localStorage.getItem('ccvRefreshToken');
+    }
+    setAuthData(response) {
+        const accessToken = response.accessToken || response.access_token || response.access;
+        const refreshToken = response.refreshToken || response.refresh_token || response.refresh;
+        localStorage.setItem('ccvAccessToken', accessToken);
+        localStorage.setItem('ccvRefreshToken', refreshToken);
+        this.currentUserSubject.next(response.user);
+        this.isAuthenticatedSubject.next(true);
+    }
+    tryRefreshToken() {
+        const refreshToken = this.getRefreshToken();
+        if (!refreshToken) {
+            this.clearAuthData();
+            return throwError(() => new Error('No refresh token available'));
+        }
+        return this.http.post(`${this.apiUrl}/auth/token/refresh/`, {
+            refresh: refreshToken
+        }).pipe(tap((response) => {
+            localStorage.setItem('ccvAccessToken', response.access);
+            this.isAuthenticatedSubject.next(true);
+            // Try to get basic user info from new token first (for immediate display)
+            const user = this.getUserFromToken();
+            if (user) {
+                this.currentUserSubject.next(user);
+            }
+            // Fetch complete user profile from backend after successful token refresh
+            this.fetchUserProfile().subscribe({
+                next: (fullUser) => {
+                    // Profile fetched successfully
+                },
+                error: (error) => {
+                    // Failed to fetch user profile after token refresh
+                }
+            });
+        }), catchError((error) => {
+            // Refresh failed, clear all auth data
+            this.clearAuthData();
+            return throwError(() => error);
+        }));
+    }
+    refreshToken() {
+        const refreshToken = this.getRefreshToken();
+        if (!refreshToken) {
+            throw new Error('No refresh token available');
+        }
+        return this.http.post(`${this.apiUrl}/auth/token/refresh/`, {
+            refresh: refreshToken
+        }).pipe(tap(response => {
+            localStorage.setItem('ccvAccessToken', response.access);
+            this.isAuthenticatedSubject.next(true);
+            // Fetch complete user profile from backend after successful token refresh
+            this.fetchUserProfile().subscribe({
+                next: (fullUser) => {
+                    // Profile fetched successfully
+                },
+                error: (error) => {
+                    // Failed to fetch user profile after token refresh
+                }
+            });
+        }));
+    }
+    updateAuthStateAfterRefresh() {
+        const token = this.getAccessToken();
+        if (token && !this.isTokenExpired(token)) {
+            this.isAuthenticatedSubject.next(true);
+            // Try to get basic user info from new token first (for immediate display)
+            const user = this.getUserFromToken();
+            if (user) {
+                this.currentUserSubject.next(user);
+            }
+            // Fetch complete user profile from backend after token refresh
+            this.fetchUserProfile().subscribe({
+                next: (fullUser) => {
+                    // Profile fetched successfully
+                },
+                error: (error) => {
+                    // Don't clear auth state on profile fetch failure - token refresh was successful
+                }
+            });
+        }
+    }
+    clearAuthData() {
+        localStorage.removeItem('ccvAccessToken');
+        localStorage.removeItem('ccvRefreshToken');
+        this.currentUserSubject.next(null);
+        this.isAuthenticatedSubject.next(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AuthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ResourceService {
+    convertLegacyVisibility(isPublic, isDefault = false) {
+        if (isDefault || isPublic) {
+            return ResourceVisibility.PUBLIC;
+        }
+        return ResourceVisibility.PRIVATE;
+    }
+    convertToLegacyVisibility(visibility) {
+        return visibility === ResourceVisibility.PUBLIC;
+    }
+    getVisibilityLabel(visibility) {
+        switch (visibility) {
+            case ResourceVisibility.PRIVATE:
+                return 'Private';
+            case ResourceVisibility.GROUP:
+                return 'Lab Group';
+            case ResourceVisibility.PUBLIC:
+                return 'Public';
+            default:
+                return 'Unknown';
+        }
+    }
+    getRoleLabel(role) {
+        switch (role) {
+            case ResourceRole.OWNER:
+                return 'Owner';
+            case ResourceRole.ADMIN:
+                return 'Administrator';
+            case ResourceRole.EDITOR:
+                return 'Editor';
+            case ResourceRole.VIEWER:
+                return 'Viewer';
+            default:
+                return 'Unknown';
+        }
+    }
+    canPerformAction(resource, action) {
+        switch (action) {
+            case 'view':
+                return resource.canView ?? true;
+            case 'edit':
+                return resource.canEdit ?? false;
+            case 'delete':
+                return resource.canDelete ?? false;
+            case 'share':
+                // Share permission is based on ownership or admin role
+                // This would typically require checking permissions via API
+                return resource.canEdit ?? false;
+            default:
+                return false;
+        }
+    }
+    getVisibilityOptions() {
+        return [
+            {
+                value: ResourceVisibility.PRIVATE,
+                label: 'Private',
+                description: 'Only you can access this resource'
+            },
+            {
+                value: ResourceVisibility.GROUP,
+                label: 'Lab Group',
+                description: 'Members of your lab group can access this resource'
+            },
+            {
+                value: ResourceVisibility.PUBLIC,
+                label: 'Public',
+                description: 'All users can access this resource'
+            }
+        ];
+    }
+    getRoleOptions() {
+        return [
+            {
+                value: ResourceRole.VIEWER,
+                label: 'Viewer',
+                description: 'Can view the resource'
+            },
+            {
+                value: ResourceRole.EDITOR,
+                label: 'Editor',
+                description: 'Can view and edit the resource'
+            },
+            {
+                value: ResourceRole.ADMIN,
+                label: 'Administrator',
+                description: 'Can view, edit, and manage permissions'
+            },
+            {
+                value: ResourceRole.OWNER,
+                label: 'Owner',
+                description: 'Full control over the resource'
+            }
+        ];
+    }
+    transformLegacyResource(legacyData) {
+        const transformed = { ...legacyData };
+        if (legacyData.creator !== undefined) {
+            transformed.owner = legacyData.creator;
+            delete transformed.creator;
+        }
+        if (legacyData.creator_username !== undefined) {
+            transformed.ownerUsername = legacyData.creator_username;
+            delete transformed.creator_username;
+        }
+        if (legacyData.is_public !== undefined) {
+            transformed.visibility = this.convertLegacyVisibility(legacyData.is_public, legacyData.is_default);
+            delete transformed.is_public;
+        }
+        if (transformed.visibility === undefined) {
+            transformed.visibility = ResourceVisibility.PRIVATE;
+        }
+        if (transformed.isActive === undefined) {
+            transformed.isActive = true;
+        }
+        if (transformed.isLocked === undefined) {
+            transformed.isLocked = false;
+        }
+        return transformed;
+    }
+    prepareForAPI(resourceData) {
+        const prepared = { ...resourceData };
+        if (prepared.owner !== undefined) {
+            prepared.creator = prepared.owner;
+            delete prepared.owner;
+        }
+        if (prepared.ownerUsername !== undefined) {
+            prepared.creator_username = prepared.ownerUsername;
+            delete prepared.ownerUsername;
+        }
+        if (prepared.visibility !== undefined) {
+            prepared.is_public = this.convertToLegacyVisibility(prepared.visibility);
+            delete prepared.visibility;
+        }
+        return prepared;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ResourceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ResourceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ResourceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ApiService {
+    http;
+    config = inject(CUPCAKE_CORE_CONFIG);
+    apiUrl = this.config.apiUrl;
+    resourceService = inject(ResourceService);
+    constructor(http) {
+        this.http = http;
+    }
+    // ===== SYSTEMATIC CASE TRANSFORMATION METHODS =====
+    /**
+     * Transform camelCase object to snake_case for API requests
+     */
+    transformToSnakeCase(obj) {
+        if (obj === null || typeof obj !== 'object') {
+            return obj;
+        }
+        if (Array.isArray(obj)) {
+            return obj.map(item => this.transformToSnakeCase(item));
+        }
+        const transformed = {};
+        Object.entries(obj).forEach(([key, value]) => {
+            // Convert camelCase to snake_case
+            const snakeKey = key.replace(/([A-Z])/g, '_$1').toLowerCase();
+            transformed[snakeKey] = this.transformToSnakeCase(value);
+        });
+        return transformed;
+    }
+    /**
+     * Transform snake_case object to camelCase for TypeScript interfaces
+     */
+    transformToCamelCase(obj) {
+        if (obj === null || typeof obj !== 'object') {
+            return obj;
+        }
+        if (Array.isArray(obj)) {
+            return obj.map(item => this.transformToCamelCase(item));
+        }
+        const transformed = {};
+        Object.entries(obj).forEach(([key, value]) => {
+            // Convert snake_case to camelCase
+            const camelKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+            transformed[camelKey] = this.transformToCamelCase(value);
+        });
+        return transformed;
+    }
+    /**
+     * Make HTTP GET request with automatic snake_case to camelCase transformation
+     */
+    get(url, options) {
+        return this.http.get(url, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    /**
+     * Make HTTP POST request with automatic camelCase to snake_case transformation
+     */
+    post(url, body, options) {
+        const transformedBody = this.transformToSnakeCase(body);
+        return this.http.post(url, transformedBody, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    /**
+     * Make HTTP PUT request with automatic camelCase to snake_case transformation
+     */
+    put(url, body, options) {
+        const transformedBody = this.transformToSnakeCase(body);
+        return this.http.put(url, transformedBody, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    /**
+     * Make HTTP PATCH request with automatic camelCase to snake_case transformation
+     */
+    patch(url, body, options) {
+        const transformedBody = this.transformToSnakeCase(body);
+        return this.http.patch(url, transformedBody, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    /**
+     * Make HTTP DELETE request with automatic snake_case to camelCase transformation
+     */
+    delete(url, options) {
+        return this.http.delete(url, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    // USER PROFILE
+    getUserProfile() {
+        return this.http.get(`${this.apiUrl}/auth/profile/`);
+    }
+    // ===================================================================
+    // SITE CONFIGURATION METHODS
+    // ===================================================================
+    getSiteConfig() {
+        return this.http.get(`${this.apiUrl}/site_config/`);
+    }
+    updateSiteConfig(id, config) {
+        return this.http.patch(`${this.apiUrl}/site_config/${id}/`, config);
+    }
+    // ===================================================================
+    // USER MANAGEMENT METHODS
+    // ===================================================================
+    // Admin-only user management
+    getUsers(params) {
+        let httpParams = new HttpParams();
+        if (params?.isStaff !== undefined)
+            httpParams = httpParams.set('is_staff', params.isStaff.toString());
+        if (params?.isActive !== undefined)
+            httpParams = httpParams.set('is_active', params.isActive.toString());
+        if (params?.search)
+            httpParams = httpParams.set('search', params.search);
+        if (params?.page)
+            httpParams = httpParams.set('page', params.page.toString());
+        if (params?.pageSize)
+            httpParams = httpParams.set('page_size', params.pageSize.toString());
+        return this.http.get(`${this.apiUrl}/users/`, { params: httpParams });
+    }
+    getUser(id) {
+        return this.http.get(`${this.apiUrl}/users/${id}/`);
+    }
+    createUser(userData) {
+        return this.http.post(`${this.apiUrl}/users/admin_create/`, userData);
+    }
+    updateUser(id, userData) {
+        return this.http.patch(`${this.apiUrl}/users/${id}/`, userData);
+    }
+    deleteUser(id) {
+        return this.http.delete(`${this.apiUrl}/users/${id}/`);
+    }
+    // Public user registration
+    registerUser(userData) {
+        return this.http.post(`${this.apiUrl}/users/register/`, userData);
+    }
+    // Authentication configuration
+    getAuthConfig() {
+        return this.http.get(`${this.apiUrl}/users/auth_config/`);
+    }
+    getRegistrationStatus() {
+        return this.http.get(`${this.apiUrl}/users/registration_status/`);
+    }
+    // ===================================================================
+    // PASSWORD MANAGEMENT METHODS
+    // ===================================================================
+    // User password change (authenticated user)
+    changePassword(passwordData) {
+        return this.http.post(`${this.apiUrl}/users/change_password/`, passwordData);
+    }
+    // User profile update
+    updateProfile(profileData) {
+        return this.http.post(`${this.apiUrl}/users/update_profile/`, profileData);
+    }
+    // Email change with verification
+    requestEmailChange(emailData) {
+        return this.http.post(`${this.apiUrl}/users/request_email_change/`, emailData);
+    }
+    confirmEmailChange(confirmData) {
+        return this.http.post(`${this.apiUrl}/users/confirm_email_change/`, confirmData);
+    }
+    // Admin password reset
+    resetUserPassword(userId, passwordData) {
+        const apiData = {
+            user_id: passwordData.userId,
+            new_password: passwordData.newPassword,
+            confirm_password: passwordData.confirmPassword,
+            force_password_change: passwordData.forcePasswordChange,
+            reason: passwordData.reason
+        };
+        return this.http.post(`${this.apiUrl}/users/${userId}/reset_password/`, apiData);
+    }
+    // Password reset request (forgot password)
+    requestPasswordReset(resetData) {
+        return this.http.post(`${this.apiUrl}/users/request_password_reset/`, resetData);
+    }
+    // Confirm password reset with token
+    confirmPasswordReset(confirmData) {
+        return this.http.post(`${this.apiUrl}/users/confirm_password_reset/`, confirmData);
+    }
+    // ===================================================================
+    // ACCOUNT LINKING METHODS
+    // ===================================================================
+    // Link ORCID to current user account
+    linkOrcid(orcidData) {
+        return this.http.post(`${this.apiUrl}/users/link_orcid/`, orcidData);
+    }
+    // Unlink ORCID from current user account
+    unlinkOrcid() {
+        return this.http.delete(`${this.apiUrl}/users/unlink_orcid/`);
+    }
+    // Detect duplicate accounts
+    detectDuplicateAccounts(searchData) {
+        return this.http.post(`${this.apiUrl}/users/detect_duplicates/`, searchData);
+    }
+    // Request account merge
+    requestAccountMerge(mergeData) {
+        return this.http.post(`${this.apiUrl}/users/request_merge/`, mergeData);
+    }
+    // ANNOTATION MANAGEMENT
+    getAnnotationFolders(params) {
+        let httpParams = new HttpParams();
+        if (params) {
+            Object.keys(params).forEach(key => {
+                const value = params[key];
+                if (value !== undefined && value !== null) {
+                    httpParams = httpParams.set(key, value.toString());
+                }
+            });
+        }
+        return this.http.get(`${this.apiUrl}/annotation-folders/`, { params: httpParams }).pipe(map$1(response => ({
+            ...response,
+            results: response.results.map((folder) => this.resourceService.transformLegacyResource(folder))
+        })));
+    }
+    getAnnotationFolder(id) {
+        return this.http.get(`${this.apiUrl}/annotation-folders/${id}/`).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    createAnnotationFolder(folderData) {
+        const preparedData = this.resourceService.prepareForAPI(folderData);
+        return this.http.post(`${this.apiUrl}/annotation-folders/`, preparedData).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    updateAnnotationFolder(id, folderData) {
+        const preparedData = this.resourceService.prepareForAPI(folderData);
+        return this.http.patch(`${this.apiUrl}/annotation-folders/${id}/`, preparedData).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    deleteAnnotationFolder(id) {
+        return this.http.delete(`${this.apiUrl}/annotation-folders/${id}/`);
+    }
+    getAnnotations(params) {
+        let httpParams = new HttpParams();
+        if (params) {
+            Object.keys(params).forEach(key => {
+                const value = params[key];
+                if (value !== undefined && value !== null) {
+                    httpParams = httpParams.set(key, value.toString());
+                }
+            });
+        }
+        return this.http.get(`${this.apiUrl}/annotations/`, { params: httpParams }).pipe(map$1(response => ({
+            ...response,
+            results: response.results.map((annotation) => this.resourceService.transformLegacyResource(annotation))
+        })));
+    }
+    getAnnotation(id) {
+        return this.http.get(`${this.apiUrl}/annotations/${id}/`).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    createAnnotation(annotationData) {
+        const formData = new FormData();
+        Object.keys(annotationData).forEach(key => {
+            const value = annotationData[key];
+            if (value !== undefined && value !== null) {
+                if (key === 'file' && value instanceof File) {
+                    formData.append(key, value);
+                }
+                else {
+                    formData.append(key, value.toString());
+                }
+            }
+        });
+        return this.http.post(`${this.apiUrl}/annotations/`, formData).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    updateAnnotation(id, annotationData) {
+        const preparedData = this.resourceService.prepareForAPI(annotationData);
+        return this.http.patch(`${this.apiUrl}/annotations/${id}/`, preparedData).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    deleteAnnotation(id) {
+        return this.http.delete(`${this.apiUrl}/annotations/${id}/`);
+    }
+    // RESOURCE PERMISSIONS
+    getResourcePermissions(params) {
+        let httpParams = new HttpParams();
+        if (params) {
+            Object.keys(params).forEach(key => {
+                const value = params[key];
+                if (value !== undefined && value !== null) {
+                    httpParams = httpParams.set(key, value.toString());
+                }
+            });
+        }
+        return this.http.get(`${this.apiUrl}/resource-permissions/`, { params: httpParams }).pipe(map$1(response => ({
+            ...response,
+            results: response.results.map((permission) => this.resourceService.transformLegacyResource(permission))
+        })));
+    }
+    getResourcePermission(id) {
+        return this.http.get(`${this.apiUrl}/resource-permissions/${id}/`).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    createResourcePermission(permissionData) {
+        const preparedData = this.resourceService.prepareForAPI(permissionData);
+        return this.http.post(`${this.apiUrl}/resource-permissions/`, preparedData).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    updateResourcePermission(id, permissionData) {
+        const preparedData = this.resourceService.prepareForAPI(permissionData);
+        return this.http.patch(`${this.apiUrl}/resource-permissions/${id}/`, preparedData).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    deleteResourcePermission(id) {
+        return this.http.delete(`${this.apiUrl}/resource-permissions/${id}/`);
+    }
+    createBulkPermissions(bulkData) {
+        const preparedData = this.resourceService.prepareForAPI(bulkData);
+        return this.http.post(`${this.apiUrl}/resource-permissions/bulk_create/`, preparedData).pipe(map$1(response => ({
+            ...response,
+            created: response.created.map((permission) => this.resourceService.transformLegacyResource(permission))
+        })));
+    }
+    getResourcePermissionsByResource(resourceContentType, resourceObjectId) {
+        const httpParams = new HttpParams()
+            .set('resourceContentType', resourceContentType.toString())
+            .set('resourceObjectId', resourceObjectId.toString());
+        return this.http.get(`${this.apiUrl}/resource-permissions/by_resource/`, { params: httpParams }).pipe(map$1(permissions => permissions.map(permission => this.resourceService.transformLegacyResource(permission))));
+    }
+    // REMOTE HOST MANAGEMENT
+    getRemoteHosts(params) {
+        let httpParams = new HttpParams();
+        if (params) {
+            Object.keys(params).forEach(key => {
+                const value = params[key];
+                if (value !== undefined && value !== null) {
+                    httpParams = httpParams.set(key, value.toString());
+                }
+            });
+        }
+        return this.http.get(`${this.apiUrl}/remote-hosts/`, { params: httpParams }).pipe(map$1(response => ({
+            ...response,
+            results: response.results.map((host) => this.resourceService.transformLegacyResource(host))
+        })));
+    }
+    getRemoteHost(id) {
+        return this.http.get(`${this.apiUrl}/remote-hosts/${id}/`).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    createRemoteHost(hostData) {
+        const preparedData = this.resourceService.prepareForAPI(hostData);
+        return this.http.post(`${this.apiUrl}/remote-hosts/`, preparedData).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    updateRemoteHost(id, hostData) {
+        const preparedData = this.resourceService.prepareForAPI(hostData);
+        return this.http.patch(`${this.apiUrl}/remote-hosts/${id}/`, preparedData).pipe(map$1(response => this.resourceService.transformLegacyResource(response)));
+    }
+    deleteRemoteHost(id) {
+        return this.http.delete(`${this.apiUrl}/remote-hosts/${id}/`);
+    }
+    testRemoteHostConnection(id) {
+        return this.http.post(`${this.apiUrl}/remote-hosts/${id}/test_connection/`, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ApiService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+/**
+ * Base API service with systematic case transformation
+ * All other API services should extend this to get automatic snake_case <-> camelCase conversion
+ */
+class BaseApiService {
+    http = inject(HttpClient);
+    config = inject(CUPCAKE_CORE_CONFIG);
+    apiUrl = this.config.apiUrl;
+    // ===== SYSTEMATIC CASE TRANSFORMATION METHODS =====
+    /**
+     * Transform camelCase object to snake_case for API requests
+     */
+    transformToSnakeCase(obj) {
+        if (obj === null || typeof obj !== 'object') {
+            return obj;
+        }
+        if (Array.isArray(obj)) {
+            return obj.map(item => this.transformToSnakeCase(item));
+        }
+        const transformed = {};
+        Object.entries(obj).forEach(([key, value]) => {
+            // Convert camelCase to snake_case
+            const snakeKey = key.replace(/([A-Z])/g, '_$1').toLowerCase();
+            transformed[snakeKey] = this.transformToSnakeCase(value);
+        });
+        return transformed;
+    }
+    /**
+     * Transform snake_case object to camelCase for TypeScript interfaces
+     */
+    transformToCamelCase(obj) {
+        if (obj === null || typeof obj !== 'object') {
+            return obj;
+        }
+        if (Array.isArray(obj)) {
+            return obj.map(item => this.transformToCamelCase(item));
+        }
+        const transformed = {};
+        Object.entries(obj).forEach(([key, value]) => {
+            // Convert snake_case to camelCase
+            const camelKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+            transformed[camelKey] = this.transformToCamelCase(value);
+        });
+        return transformed;
+    }
+    // ===== HTTP METHODS WITH AUTOMATIC TRANSFORMATION =====
+    /**
+     * Make HTTP GET request with automatic snake_case to camelCase transformation
+     */
+    get(url, options) {
+        return this.http.get(url, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    /**
+     * Make HTTP POST request with automatic camelCase to snake_case transformation
+     */
+    post(url, body, options) {
+        const transformedBody = this.transformToSnakeCase(body);
+        return this.http.post(url, transformedBody, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    /**
+     * Make HTTP PUT request with automatic camelCase to snake_case transformation
+     */
+    put(url, body, options) {
+        const transformedBody = this.transformToSnakeCase(body);
+        return this.http.put(url, transformedBody, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    /**
+     * Make HTTP PATCH request with automatic camelCase to snake_case transformation
+     */
+    patch(url, body, options) {
+        const transformedBody = this.transformToSnakeCase(body);
+        return this.http.patch(url, transformedBody, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    /**
+     * Make HTTP DELETE request with automatic snake_case to camelCase transformation
+     */
+    delete(url, options) {
+        return this.http.delete(url, options).pipe(map$1(response => this.transformToCamelCase(response)));
+    }
+    /**
+     * Build HttpParams from query parameters object with automatic case transformation
+     */
+    buildHttpParams(params) {
+        let httpParams = new HttpParams();
+        if (params) {
+            // Transform to snake_case before creating params
+            const transformedParams = this.transformToSnakeCase(params);
+            Object.entries(transformedParams).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    httpParams = httpParams.set(key, value.toString());
+                }
+            });
+        }
+        return httpParams;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BaseApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BaseApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BaseApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SiteConfigService extends BaseApiService {
+    defaultConfig = {
+        siteName: 'CUPCAKE Vanilla',
+        showPoweredBy: true,
+        primaryColor: '#1976d2',
+        allowUserRegistration: false,
+        enableOrcidLogin: false,
+        installedApps: {},
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
+    };
+    configSubject = new BehaviorSubject(this.defaultConfig);
+    config$ = this.configSubject.asObservable();
+    constructor() {
+        super();
+        this.loadConfig();
+    }
+    loadConfig() {
+        const savedConfig = localStorage.getItem('site_config');
+        if (savedConfig) {
+            try {
+                const config = JSON.parse(savedConfig);
+                this.configSubject.next({ ...this.defaultConfig, ...config });
+            }
+            catch (error) {
+                // Invalid config, use defaults
+            }
+        }
+        this.fetchConfigFromBackend().subscribe({
+            next: (config) => {
+                this.configSubject.next({ ...this.defaultConfig, ...config });
+                localStorage.setItem('site_config', JSON.stringify(config));
+            },
+            error: () => {
+                // Continue with current config
+            }
+        });
+    }
+    fetchConfigFromBackend() {
+        return this.get(`${this.apiUrl}/site-config/public/`);
+    }
+    getCurrentConfig() {
+        return this.get(`${this.apiUrl}/site-config/current/`);
+    }
+    updateConfig(config) {
+        return this.put(`${this.apiUrl}/site-config/update_config/`, config);
+    }
+    getSiteName() {
+        return this.configSubject.value.siteName;
+    }
+    shouldShowPoweredBy() {
+        return this.configSubject.value.showPoweredBy !== false;
+    }
+    getLogoUrl() {
+        const config = this.configSubject.value;
+        return config.logoImage || config.logoUrl || null;
+    }
+    getPrimaryColor() {
+        return this.configSubject.value.primaryColor || '#1976d2';
+    }
+    isRegistrationEnabled() {
+        return this.configSubject.value.allowUserRegistration === true;
+    }
+    isOrcidLoginEnabled() {
+        return this.configSubject.value.enableOrcidLogin === true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SiteConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SiteConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SiteConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ToastService {
+    toastsSignal = signal([], ...(ngDevMode ? [{ debugName: "toastsSignal" }] : []));
+    // Public readonly signal for components to subscribe to
+    toasts = this.toastsSignal.asReadonly();
+    show(message, type = 'info', duration = 5000) {
+        const id = this.generateId();
+        const toast = {
+            id,
+            message,
+            type,
+            duration,
+            dismissible: true
+        };
+        this.toastsSignal.update(toasts => [...toasts, toast]);
+        // Auto-remove after duration
+        if (duration > 0) {
+            setTimeout(() => {
+                this.remove(id);
+            }, duration);
+        }
+    }
+    success(message, duration = 5000) {
+        this.show(message, 'success', duration);
+    }
+    error(message, duration = 8000) {
+        this.show(message, 'error', duration);
+    }
+    warning(message, duration = 6000) {
+        this.show(message, 'warning', duration);
+    }
+    info(message, duration = 5000) {
+        this.show(message, 'info', duration);
+    }
+    remove(id) {
+        this.toastsSignal.update(toasts => toasts.filter(toast => toast.id !== id));
+    }
+    clear() {
+        this.toastsSignal.set([]);
+    }
+    generateId() {
+        return Math.random().toString(36).substring(2) + Date.now().toString(36);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class UserManagementService {
+    apiService = inject(ApiService);
+    authService = inject(AuthService);
+    usersSubject = new BehaviorSubject([]);
+    users$ = this.usersSubject.asObservable();
+    totalUsersSubject = new BehaviorSubject(0);
+    totalUsers$ = this.totalUsersSubject.asObservable();
+    constructor() { }
+    getUserProfile() {
+        return this.apiService.getUserProfile();
+    }
+    updateProfile(profileData) {
+        return this.apiService.updateProfile(profileData);
+    }
+    changePassword(passwordData) {
+        return this.apiService.changePassword(passwordData);
+    }
+    requestEmailChange(emailData) {
+        return this.apiService.requestEmailChange(emailData);
+    }
+    getUsers(params) {
+        return this.apiService.getUsers(params);
+    }
+    getUser(id) {
+        return this.apiService.getUser(id);
+    }
+    createUser(userData) {
+        return this.apiService.createUser(userData);
+    }
+    updateUser(id, userData) {
+        return this.apiService.updateUser(id, userData);
+    }
+    deleteUser(id) {
+        return this.apiService.deleteUser(id);
+    }
+    resetUserPassword(userId, passwordData) {
+        return this.apiService.resetUserPassword(userId, passwordData);
+    }
+    getUserDisplayName(user) {
+        if (!user)
+            return '';
+        if (user.firstName || user.lastName) {
+            return `${user.firstName} ${user.lastName}`.trim();
+        }
+        return user.username || user.email || 'User';
+    }
+    formatDate(dateString) {
+        return dateString ? new Date(dateString).toLocaleDateString() : 'Never';
+    }
+    isCurrentUserAdmin() {
+        const user = this.authService.getCurrentUser();
+        return user?.isStaff || false;
+    }
+    isCurrentUserSuperuser() {
+        const user = this.authService.getCurrentUser();
+        return user?.isSuperuser || false;
+    }
+    updateUsersState(users, total) {
+        this.usersSubject.next(users);
+        this.totalUsersSubject.next(total);
+    }
+    getCurrentUsers() {
+        return this.usersSubject.getValue();
+    }
+    getCurrentTotalUsers() {
+        return this.totalUsersSubject.getValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserManagementService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserManagementService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class LabGroupService extends BaseApiService {
+    // LAB GROUPS
+    getLabGroups(params) {
+        const httpParams = this.buildHttpParams(params);
+        return this.get(`${this.apiUrl}/lab-groups/`, { params: httpParams });
+    }
+    getMyLabGroups(params) {
+        const httpParams = this.buildHttpParams(params);
+        return this.get(`${this.apiUrl}/lab-groups/my_groups/`, { params: httpParams });
+    }
+    createLabGroup(labGroup) {
+        return this.post(`${this.apiUrl}/lab-groups/`, labGroup);
+    }
+    updateLabGroup(id, labGroup) {
+        return this.patch(`${this.apiUrl}/lab-groups/${id}/`, labGroup);
+    }
+    deleteLabGroup(id) {
+        return this.delete(`${this.apiUrl}/lab-groups/${id}/`);
+    }
+    getLabGroupMembers(id) {
+        return this.get(`${this.apiUrl}/lab-groups/${id}/members/`);
+    }
+    inviteUserToLabGroup(id, invitation) {
+        return this.post(`${this.apiUrl}/lab-groups/${id}/invite_user/`, invitation);
+    }
+    leaveLabGroup(id) {
+        return this.post(`${this.apiUrl}/lab-groups/${id}/leave/`, {});
+    }
+    removeMemberFromLabGroup(id, userId) {
+        return this.post(`${this.apiUrl}/lab-groups/${id}/remove_member/`, { userId });
+    }
+    // LAB GROUP INVITATIONS
+    getLabGroupInvitations(params) {
+        const httpParams = this.buildHttpParams(params);
+        return this.get(`${this.apiUrl}/lab-group-invitations/`, { params: httpParams });
+    }
+    getMyPendingInvitations() {
+        return this.get(`${this.apiUrl}/lab-group-invitations/my_pending_invitations/`);
+    }
+    acceptLabGroupInvitation(id) {
+        return this.post(`${this.apiUrl}/lab-group-invitations/${id}/accept_invitation/`, {});
+    }
+    rejectLabGroupInvitation(id) {
+        return this.post(`${this.apiUrl}/lab-group-invitations/${id}/reject_invitation/`, {});
+    }
+    cancelLabGroupInvitation(id) {
+        return this.post(`${this.apiUrl}/lab-group-invitations/${id}/cancel_invitation/`, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabGroupService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabGroupService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabGroupService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+const authGuard = (route, state) => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    return authService.isAuthenticated$.pipe(take(1), map(isAuthenticated => {
+        if (isAuthenticated) {
+            return true;
+        }
+        router.navigate(['/login'], {
+            queryParams: { returnUrl: state.url }
+        });
+        return false;
+    }));
+};
+
+const adminGuard = (route, state) => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const user = authService.getCurrentUser();
+    if (!user) {
+        router.navigate(['/login']);
+        return false;
+    }
+    if (!user.isStaff) {
+        router.navigate(['/metadata']);
+        return false;
+    }
+    return true;
+};
+
+// Global flag to prevent multiple simultaneous token refresh attempts
+let isRefreshing = false;
+// Subject to coordinate requests waiting for token refresh
+const refreshTokenSubject = new BehaviorSubject(null);
+const authInterceptor = (req, next) => {
+    const router = inject(Router);
+    const http = inject(HttpClient);
+    const config = inject(CUPCAKE_CORE_CONFIG);
+    if (req.url.includes('/auth/login/') ||
+        req.url.includes('/auth/token/') ||
+        req.url.includes('/auth/orcid/') ||
+        req.url.includes('/auth/register/') ||
+        req.url.includes('/site-config/public/')) {
+        return next(req);
+    }
+    const token = localStorage.getItem('ccvAccessToken');
+    let authReq = req;
+    if (token) {
+        authReq = addTokenToRequest(req, token);
+    }
+    return next(authReq).pipe(catchError((error) => {
+        if (error.status === 401) {
+            return handle401Error(authReq, next, http, router, config);
+        }
+        return throwError(() => error);
+    }));
+};
+function addTokenToRequest(request, token) {
+    return request.clone({
+        setHeaders: {
+            Authorization: `Bearer ${token}`
+        }
+    });
+}
+function handle401Error(request, next, http, router, config) {
+    if (!isRefreshing) {
+        isRefreshing = true;
+        refreshTokenSubject.next(null);
+        const refreshToken = localStorage.getItem('ccvRefreshToken');
+        if (refreshToken) {
+            return http.post(`${config.apiUrl}/auth/token/refresh/`, {
+                refresh: refreshToken
+            }).pipe(switchMap((tokenResponse) => {
+                isRefreshing = false;
+                // Update stored tokens
+                localStorage.setItem('ccvAccessToken', tokenResponse.access);
+                refreshTokenSubject.next(tokenResponse.access);
+                // Notify AuthService that token was refreshed
+                if (typeof window !== 'undefined') {
+                    window.dispatchEvent(new CustomEvent('tokenRefreshed'));
+                }
+                // Retry the original request with new token
+                return next(addTokenToRequest(request, tokenResponse.access));
+            }), catchError((refreshError) => {
+                // Refresh failed, clear tokens and redirect to login
+                isRefreshing = false;
+                localStorage.removeItem('ccvAccessToken');
+                localStorage.removeItem('ccvRefreshToken');
+                refreshTokenSubject.next(null);
+                // Notify AuthService that auth was cleared
+                if (typeof window !== 'undefined') {
+                    window.dispatchEvent(new CustomEvent('authCleared'));
+                }
+                router.navigate(['/login'], {
+                    queryParams: { returnUrl: router.url }
+                });
+                return throwError(() => refreshError);
+            }));
+        }
+        else {
+            // No refresh token, clear storage and redirect
+            isRefreshing = false;
+            localStorage.removeItem('ccvAccessToken');
+            localStorage.removeItem('ccvRefreshToken');
+            // Notify AuthService that auth was cleared
+            if (typeof window !== 'undefined') {
+                window.dispatchEvent(new CustomEvent('authCleared'));
+            }
+            router.navigate(['/login'], {
+                queryParams: { returnUrl: router.url }
+            });
+            return throwError(() => new Error('No refresh token available'));
+        }
+    }
+    else {
+        // If refresh is in progress, wait for it to complete
+        return refreshTokenSubject.pipe(filter((token) => token !== null), take(1), switchMap((token) => {
+            return next(addTokenToRequest(request, token));
+        }));
+    }
+}
+
+class LoginComponent {
+    authService = inject(AuthService);
+    fb = inject(FormBuilder);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    siteConfigService = inject(SiteConfigService);
+    apiService = inject(ApiService);
+    loginForm;
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    success = signal(null, ...(ngDevMode ? [{ debugName: "success" }] : []));
+    // Observable for site configuration
+    siteConfig$ = this.siteConfigService.config$;
+    // Auth configuration signals
+    authConfig = signal(null, ...(ngDevMode ? [{ debugName: "authConfig" }] : []));
+    registrationStatus = signal(null, ...(ngDevMode ? [{ debugName: "registrationStatus" }] : []));
+    constructor() {
+        this.loginForm = this.fb.group({
+            username: ['', [Validators.required]],
+            password: ['', [Validators.required]]
+        });
+    }
+    returnUrl = '/';
+    ngOnInit() {
+        // Load auth configuration
+        this.loadAuthConfig();
+        // Get return URL from query params
+        this.route.queryParams.subscribe(params => {
+            this.returnUrl = params['returnUrl'] || '/';
+            // Check for ORCID callback parameters
+            if (params['code'] && params['state']) {
+                this.handleORCIDCallback(params['code'], params['state']);
+            }
+            else if (params['error']) {
+                this.error.set(`ORCID authentication failed: ${params['error']}`);
+            }
+            // Check for registration success message
+            if (params['registered'] === 'true') {
+                this.success.set('Registration successful! You can now log in with your credentials.');
+                if (params['username']) {
+                    this.loginForm.patchValue({ username: params['username'] });
+                }
+            }
+        });
+        // Subscribe to authentication state changes to handle token refresh scenarios
+        this.authService.isAuthenticated$.subscribe(isAuthenticated => {
+            if (isAuthenticated) {
+                this.router.navigate([this.returnUrl]);
+            }
+        });
+    }
+    /**
+     * Load authentication configuration to determine available login options
+     */
+    loadAuthConfig() {
+        this.apiService.getAuthConfig().subscribe({
+            next: (config) => {
+                this.authConfig.set(config);
+            },
+            error: (error) => {
+                console.warn('Could not load auth config:', error);
+                // Use defaults if config loading fails
+                this.authConfig.set({
+                    registrationEnabled: false,
+                    orcidLoginEnabled: false,
+                    regularLoginEnabled: true
+                });
+            }
+        });
+        this.apiService.getRegistrationStatus().subscribe({
+            next: (status) => {
+                this.registrationStatus.set(status);
+            },
+            error: (error) => {
+                console.warn('Could not load registration status:', error);
+            }
+        });
+    }
+    /**
+     * Handle traditional username/password login
+     */
+    onSubmit() {
+        if (this.loginForm.valid) {
+            this.loading.set(true);
+            this.error.set(null);
+            const { username, password } = this.loginForm.value;
+            this.authService.login(username, password).subscribe({
+                next: (response) => {
+                    this.success.set('Login successful!');
+                    setTimeout(() => {
+                        this.router.navigate([this.returnUrl]);
+                    }, 1000);
+                },
+                error: (error) => {
+                    this.loading.set(false);
+                    this.error.set(error.error?.detail || 'Login failed. Please check your credentials.');
+                }
+            });
+        }
+    }
+    /**
+     * Initiate ORCID OAuth login
+     */
+    loginWithORCID() {
+        this.loading.set(true);
+        this.error.set(null);
+        this.authService.initiateORCIDLogin().subscribe({
+            next: (response) => {
+                sessionStorage.setItem('orcid_state', response.state);
+                window.location.href = response.authorizationUrl;
+            },
+            error: (error) => {
+                this.loading.set(false);
+                this.error.set(error.error?.error || 'Failed to initiate ORCID login.');
+            }
+        });
+    }
+    /**
+     * Handle ORCID OAuth callback
+     */
+    handleORCIDCallback(code, state) {
+        this.loading.set(true);
+        this.error.set(null);
+        const storedState = sessionStorage.getItem('orcid_state');
+        if (storedState !== state) {
+            this.error.set('Invalid state parameter. Possible security issue.');
+            this.loading.set(false);
+            return;
+        }
+        sessionStorage.removeItem('orcid_state');
+        this.authService.handleORCIDCallback(code, state).subscribe({
+            next: (response) => {
+                this.success.set(`Welcome, ${response.user.firstName || response.user.username}!`);
+                setTimeout(() => {
+                    this.router.navigate([this.returnUrl]);
+                }, 1000);
+            },
+            error: (error) => {
+                this.loading.set(false);
+                this.error.set(error.error?.error || 'ORCID authentication failed.');
+            }
+        });
+    }
+    /**
+     * Clear error message
+     */
+    clearError() {
+        this.error.set(null);
+    }
+    /**
+     * Clear success message
+     */
+    clearSuccess() {
+        this.success.set(null);
+    }
+    /**
+     * Computed signals for UI display logic
+     */
+    shouldShowOrcidLogin = computed(() => this.authConfig()?.orcidLoginEnabled === true, ...(ngDevMode ? [{ debugName: "shouldShowOrcidLogin" }] : []));
+    shouldShowRegistration = computed(() => this.registrationStatus()?.registrationEnabled === true, ...(ngDevMode ? [{ debugName: "shouldShowRegistration" }] : []));
+    shouldShowRegularLogin = computed(() => this.authConfig()?.regularLoginEnabled !== false, ...(ngDevMode ? [{ debugName: "shouldShowRegularLogin" }] : []));
+    registrationMessage = computed(() => this.registrationStatus()?.message || 'Registration is currently enabled', ...(ngDevMode ? [{ debugName: "registrationMessage" }] : []));
+    /**
+     * Navigate to registration page
+     */
+    goToRegister() {
+        this.router.navigate(['/register'], {
+            queryParams: { returnUrl: this.returnUrl }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LoginComponent, isStandalone: true, selector: "app-login", ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"login-wrapper\">\r\n      <div class=\"card\">\r\n        <div class=\"card-body\">\r\n          @if (siteConfig$ | async; as config) {\r\n            <h3 class=\"card-title text-center mb-4\">\r\n              <i class=\"bi bi-flask me-2\"></i>{{ config.siteName }}\r\n            </h3>\r\n          }\r\n\r\n          <!-- Success Alert -->\r\n          @if (success()) {\r\n            <ngb-alert type=\"success\" (closed)=\"clearSuccess()\" [dismissible]=\"true\">\r\n              {{ success() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <!-- Error Alert -->\r\n          @if (error()) {\r\n            <ngb-alert type=\"danger\" (closed)=\"clearError()\" [dismissible]=\"true\">\r\n              {{ error() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <!-- ORCID Login Section -->\r\n          @if (shouldShowOrcidLogin()) {\r\n            <div class=\"mb-4\">\r\n              <button \r\n                type=\"button\" \r\n                class=\"btn btn-primary w-100 mb-3\"\r\n                [disabled]=\"loading()\"\r\n                (click)=\"loginWithORCID()\">\r\n                @if (loading()) {\r\n                  <span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>\r\n                }\r\n                <i class=\"bi bi-person-badge me-2\"></i>\r\n                Login with ORCID\r\n              </button>\r\n              <p class=\"text-muted text-center small\">\r\n                Sign in with your ORCID account for seamless access\r\n              </p>\r\n            </div>\r\n          }\r\n\r\n          <!-- Divider -->\r\n          @if (shouldShowOrcidLogin() && shouldShowRegularLogin()) {\r\n            <div class=\"text-center mb-4\">\r\n              <span class=\"text-muted\">or</span>\r\n            </div>\r\n          }\r\n\r\n          <!-- Traditional Login Form -->\r\n          @if (shouldShowRegularLogin()) {\r\n            <form [formGroup]=\"loginForm\" (ngSubmit)=\"onSubmit()\">\r\n              <div class=\"mb-3\">\r\n                <label for=\"username\" class=\"form-label\">Username</label>\r\n                <div class=\"input-group\">\r\n                  <span class=\"input-group-text\">\r\n                    <i class=\"bi bi-person\"></i>\r\n                  </span>\r\n                  <input \r\n                    type=\"text\" \r\n                    class=\"form-control\" \r\n                    id=\"username\"\r\n                    formControlName=\"username\"\r\n                    [class.is-invalid]=\"loginForm.get('username')?.invalid && loginForm.get('username')?.touched\"\r\n                    placeholder=\"Enter your username\">\r\n                </div>\r\n                @if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {\r\n                  <div class=\"invalid-feedback d-block\">\r\n                    Username is required\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <label for=\"password\" class=\"form-label\">Password</label>\r\n                <div class=\"input-group\">\r\n                  <span class=\"input-group-text\">\r\n                    <i class=\"bi bi-lock\"></i>\r\n                  </span>\r\n                  <input \r\n                    type=\"password\" \r\n                    class=\"form-control\" \r\n                    id=\"password\"\r\n                    formControlName=\"password\"\r\n                    [class.is-invalid]=\"loginForm.get('password')?.invalid && loginForm.get('password')?.touched\"\r\n                    placeholder=\"Enter your password\">\r\n                </div>\r\n                @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {\r\n                  <div class=\"invalid-feedback d-block\">\r\n                    Password is required\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <button \r\n                type=\"submit\" \r\n                class=\"btn btn-outline-primary w-100\"\r\n                [disabled]=\"loginForm.invalid || loading()\">\r\n                @if (loading()) {\r\n                  <span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>\r\n                }\r\n                <i class=\"bi bi-box-arrow-in-right me-2\"></i>\r\n                Sign In\r\n              </button>\r\n            </form>\r\n          }\r\n\r\n          <!-- Registration Information -->\r\n          @if (shouldShowRegistration()) {\r\n            <div class=\"mt-4 text-center\">\r\n              <div class=\"alert alert-info py-2\" role=\"alert\">\r\n                <i class=\"bi bi-person-plus me-1\"></i>\r\n                <strong>New Users:</strong> {{ registrationMessage() }}\r\n                <div class=\"mt-2\">\r\n                  <button type=\"button\" class=\"btn btn-outline-primary btn-sm\" (click)=\"goToRegister()\">\r\n                    <i class=\"bi bi-person-plus me-1\"></i>Create Account\r\n                  </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                  <small class=\"text-muted\">\r\n                    @if (shouldShowOrcidLogin()) {\r\n                      <span>You can also sign in with ORCID to create an account</span>\r\n                    }\r\n                  </small>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Additional Information -->\r\n          @if (siteConfig$ | async; as config) {\r\n            <div class=\"mt-4 text-center\">\r\n              <p class=\"text-muted small\">\r\n                {{ config.siteName }} - Scientific Metadata Management\r\n              </p>\r\n              @if (shouldShowOrcidLogin() && !shouldShowRegistration()) {\r\n                <p class=\"text-muted small\">\r\n                  <i class=\"bi bi-info-circle me-1\"></i>\r\n                  New users can sign in directly with ORCID\r\n                </p>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: [".container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:none;overflow:auto}.login-wrapper{width:100%;max-width:450px}.card{border:none;border-radius:12px;box-shadow:0 8px 24px var(--cupcake-shadow);background:var(--cupcake-card-bg);backdrop-filter:blur(10px);width:100%}.card-body{padding:2rem}.card-title{color:var(--cupcake-text);font-weight:600}.btn-primary{background:linear-gradient(135deg,var(--cupcake-primary) 0%,var(--cupcake-primary-dark) 100%);border:none;border-radius:8px;padding:12px;font-weight:500;transition:all .3s ease}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--cupcake-primary-rgb),.3)}.btn-outline-primary{border-radius:8px;padding:12px;font-weight:500;transition:all .3s ease}.btn-outline-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--cupcake-primary-rgb),.2)}.input-group-text{background:var(--cupcake-bg-tertiary);border-color:var(--cupcake-border);color:var(--cupcake-text-muted)}.form-control{border-radius:0 8px 8px 0;transition:all .3s ease}.form-control:focus{box-shadow:0 0 0 .2rem rgba(var(--cupcake-primary-rgb),.15);border-color:var(--cupcake-primary)}.input-group-text:first-child{border-radius:8px 0 0 8px}.spinner-border-sm{width:1rem;height:1rem}ngb-alert{border-radius:8px;border:none}ngb-alert.alert-success{background:var(--bs-success-bg-subtle, rgba(25, 135, 84, .1));color:var(--bs-success-text-emphasis, #0f5132);border:1px solid var(--bs-success-border-subtle, rgba(25, 135, 84, .2))}ngb-alert.alert-danger{background:var(--bs-danger-bg-subtle, rgba(220, 53, 69, .1));color:var(--bs-danger-text-emphasis, #842029);border:1px solid var(--bs-danger-border-subtle, rgba(220, 53, 69, .2))}:root[data-bs-theme=dark] ngb-alert.alert-success,.dark-mode ngb-alert.alert-success{background:#19875426;color:#75b798;border:1px solid rgba(25,135,84,.3)}:root[data-bs-theme=dark] ngb-alert.alert-danger,.dark-mode ngb-alert.alert-danger{background:#dc354526;color:#ea868f;border:1px solid rgba(220,53,69,.3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-login', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbAlert], template: "<div class=\"container\">\r\n  <div class=\"login-wrapper\">\r\n      <div class=\"card\">\r\n        <div class=\"card-body\">\r\n          @if (siteConfig$ | async; as config) {\r\n            <h3 class=\"card-title text-center mb-4\">\r\n              <i class=\"bi bi-flask me-2\"></i>{{ config.siteName }}\r\n            </h3>\r\n          }\r\n\r\n          <!-- Success Alert -->\r\n          @if (success()) {\r\n            <ngb-alert type=\"success\" (closed)=\"clearSuccess()\" [dismissible]=\"true\">\r\n              {{ success() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <!-- Error Alert -->\r\n          @if (error()) {\r\n            <ngb-alert type=\"danger\" (closed)=\"clearError()\" [dismissible]=\"true\">\r\n              {{ error() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <!-- ORCID Login Section -->\r\n          @if (shouldShowOrcidLogin()) {\r\n            <div class=\"mb-4\">\r\n              <button \r\n                type=\"button\" \r\n                class=\"btn btn-primary w-100 mb-3\"\r\n                [disabled]=\"loading()\"\r\n                (click)=\"loginWithORCID()\">\r\n                @if (loading()) {\r\n                  <span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>\r\n                }\r\n                <i class=\"bi bi-person-badge me-2\"></i>\r\n                Login with ORCID\r\n              </button>\r\n              <p class=\"text-muted text-center small\">\r\n                Sign in with your ORCID account for seamless access\r\n              </p>\r\n            </div>\r\n          }\r\n\r\n          <!-- Divider -->\r\n          @if (shouldShowOrcidLogin() && shouldShowRegularLogin()) {\r\n            <div class=\"text-center mb-4\">\r\n              <span class=\"text-muted\">or</span>\r\n            </div>\r\n          }\r\n\r\n          <!-- Traditional Login Form -->\r\n          @if (shouldShowRegularLogin()) {\r\n            <form [formGroup]=\"loginForm\" (ngSubmit)=\"onSubmit()\">\r\n              <div class=\"mb-3\">\r\n                <label for=\"username\" class=\"form-label\">Username</label>\r\n                <div class=\"input-group\">\r\n                  <span class=\"input-group-text\">\r\n                    <i class=\"bi bi-person\"></i>\r\n                  </span>\r\n                  <input \r\n                    type=\"text\" \r\n                    class=\"form-control\" \r\n                    id=\"username\"\r\n                    formControlName=\"username\"\r\n                    [class.is-invalid]=\"loginForm.get('username')?.invalid && loginForm.get('username')?.touched\"\r\n                    placeholder=\"Enter your username\">\r\n                </div>\r\n                @if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {\r\n                  <div class=\"invalid-feedback d-block\">\r\n                    Username is required\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <label for=\"password\" class=\"form-label\">Password</label>\r\n                <div class=\"input-group\">\r\n                  <span class=\"input-group-text\">\r\n                    <i class=\"bi bi-lock\"></i>\r\n                  </span>\r\n                  <input \r\n                    type=\"password\" \r\n                    class=\"form-control\" \r\n                    id=\"password\"\r\n                    formControlName=\"password\"\r\n                    [class.is-invalid]=\"loginForm.get('password')?.invalid && loginForm.get('password')?.touched\"\r\n                    placeholder=\"Enter your password\">\r\n                </div>\r\n                @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {\r\n                  <div class=\"invalid-feedback d-block\">\r\n                    Password is required\r\n                  </div>\r\n                }\r\n              </div>\r\n\r\n              <button \r\n                type=\"submit\" \r\n                class=\"btn btn-outline-primary w-100\"\r\n                [disabled]=\"loginForm.invalid || loading()\">\r\n                @if (loading()) {\r\n                  <span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>\r\n                }\r\n                <i class=\"bi bi-box-arrow-in-right me-2\"></i>\r\n                Sign In\r\n              </button>\r\n            </form>\r\n          }\r\n\r\n          <!-- Registration Information -->\r\n          @if (shouldShowRegistration()) {\r\n            <div class=\"mt-4 text-center\">\r\n              <div class=\"alert alert-info py-2\" role=\"alert\">\r\n                <i class=\"bi bi-person-plus me-1\"></i>\r\n                <strong>New Users:</strong> {{ registrationMessage() }}\r\n                <div class=\"mt-2\">\r\n                  <button type=\"button\" class=\"btn btn-outline-primary btn-sm\" (click)=\"goToRegister()\">\r\n                    <i class=\"bi bi-person-plus me-1\"></i>Create Account\r\n                  </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                  <small class=\"text-muted\">\r\n                    @if (shouldShowOrcidLogin()) {\r\n                      <span>You can also sign in with ORCID to create an account</span>\r\n                    }\r\n                  </small>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Additional Information -->\r\n          @if (siteConfig$ | async; as config) {\r\n            <div class=\"mt-4 text-center\">\r\n              <p class=\"text-muted small\">\r\n                {{ config.siteName }} - Scientific Metadata Management\r\n              </p>\r\n              @if (shouldShowOrcidLogin() && !shouldShowRegistration()) {\r\n                <p class=\"text-muted small\">\r\n                  <i class=\"bi bi-info-circle me-1\"></i>\r\n                  New users can sign in directly with ORCID\r\n                </p>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: [".container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:none;overflow:auto}.login-wrapper{width:100%;max-width:450px}.card{border:none;border-radius:12px;box-shadow:0 8px 24px var(--cupcake-shadow);background:var(--cupcake-card-bg);backdrop-filter:blur(10px);width:100%}.card-body{padding:2rem}.card-title{color:var(--cupcake-text);font-weight:600}.btn-primary{background:linear-gradient(135deg,var(--cupcake-primary) 0%,var(--cupcake-primary-dark) 100%);border:none;border-radius:8px;padding:12px;font-weight:500;transition:all .3s ease}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--cupcake-primary-rgb),.3)}.btn-outline-primary{border-radius:8px;padding:12px;font-weight:500;transition:all .3s ease}.btn-outline-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--cupcake-primary-rgb),.2)}.input-group-text{background:var(--cupcake-bg-tertiary);border-color:var(--cupcake-border);color:var(--cupcake-text-muted)}.form-control{border-radius:0 8px 8px 0;transition:all .3s ease}.form-control:focus{box-shadow:0 0 0 .2rem rgba(var(--cupcake-primary-rgb),.15);border-color:var(--cupcake-primary)}.input-group-text:first-child{border-radius:8px 0 0 8px}.spinner-border-sm{width:1rem;height:1rem}ngb-alert{border-radius:8px;border:none}ngb-alert.alert-success{background:var(--bs-success-bg-subtle, rgba(25, 135, 84, .1));color:var(--bs-success-text-emphasis, #0f5132);border:1px solid var(--bs-success-border-subtle, rgba(25, 135, 84, .2))}ngb-alert.alert-danger{background:var(--bs-danger-bg-subtle, rgba(220, 53, 69, .1));color:var(--bs-danger-text-emphasis, #842029);border:1px solid var(--bs-danger-border-subtle, rgba(220, 53, 69, .2))}:root[data-bs-theme=dark] ngb-alert.alert-success,.dark-mode ngb-alert.alert-success{background:#19875426;color:#75b798;border:1px solid rgba(25,135,84,.3)}:root[data-bs-theme=dark] ngb-alert.alert-danger,.dark-mode ngb-alert.alert-danger{background:#dc354526;color:#ea868f;border:1px solid rgba(220,53,69,.3)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class RegisterComponent {
+    apiService = inject(ApiService);
+    fb = inject(FormBuilder);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    siteConfigService = inject(SiteConfigService);
+    registrationForm;
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    success = signal(null, ...(ngDevMode ? [{ debugName: "success" }] : []));
+    // Observable for site configuration
+    siteConfig$ = this.siteConfigService.config$;
+    // Registration status signals
+    registrationStatus = signal(null, ...(ngDevMode ? [{ debugName: "registrationStatus" }] : []));
+    registrationEnabled = signal(false, ...(ngDevMode ? [{ debugName: "registrationEnabled" }] : []));
+    returnUrl = '/login';
+    constructor() {
+        this.registrationForm = this.fb.group({
+            username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(150)]],
+            email: ['', [Validators.required, Validators.email, Validators.maxLength(254)]],
+            firstName: ['', [Validators.required, Validators.maxLength(30)]],
+            lastName: ['', [Validators.required, Validators.maxLength(30)]],
+            password: ['', [Validators.required, Validators.minLength(8)]],
+            confirmPassword: ['', [Validators.required]]
+        }, { validators: this.passwordMatchValidator });
+    }
+    ngOnInit() {
+        // Check registration status
+        this.checkRegistrationStatus();
+        // Get return URL from query params
+        this.route.queryParams.subscribe(params => {
+            this.returnUrl = params['returnUrl'] || '/login';
+        });
+    }
+    /**
+     * Check if registration is enabled
+     */
+    checkRegistrationStatus() {
+        this.apiService.getRegistrationStatus().subscribe({
+            next: (status) => {
+                this.registrationStatus.set(status);
+                this.registrationEnabled.set(status.registrationEnabled);
+                if (!this.registrationEnabled()) {
+                    this.error.set(status.message || 'Registration is currently disabled');
+                }
+            },
+            error: (error) => {
+                this.error.set('Unable to check registration status. Please try again later.');
+            }
+        });
+    }
+    /**
+     * Custom validator to check if passwords match
+     */
+    passwordMatchValidator(form) {
+        const password = form.get('password');
+        const confirmPassword = form.get('confirmPassword');
+        if (password && confirmPassword && password.value !== confirmPassword.value) {
+            return { passwordMismatch: true };
+        }
+        return null;
+    }
+    /**
+     * Handle form submission
+     */
+    onSubmit() {
+        if (this.registrationForm.valid && this.registrationEnabled()) {
+            this.loading.set(true);
+            this.error.set(null);
+            const registrationData = {
+                username: this.registrationForm.get('username')?.value,
+                email: this.registrationForm.get('email')?.value,
+                firstName: this.registrationForm.get('firstName')?.value,
+                lastName: this.registrationForm.get('lastName')?.value,
+                password: this.registrationForm.get('password')?.value,
+                passwordConfirm: this.registrationForm.get('confirmPassword')?.value
+            };
+            this.apiService.registerUser(registrationData).subscribe({
+                next: (response) => {
+                    this.loading.set(false);
+                    this.success.set(response.message || 'Registration successful! You can now log in with your credentials.');
+                    // Redirect to login after successful registration
+                    setTimeout(() => {
+                        this.router.navigate(['/login'], {
+                            queryParams: {
+                                returnUrl: this.returnUrl,
+                                registered: 'true',
+                                username: registrationData.username
+                            }
+                        });
+                    }, 2000);
+                },
+                error: (error) => {
+                    this.loading.set(false);
+                    // Handle specific validation errors
+                    if (error.error && typeof error.error === 'object') {
+                        const errors = [];
+                        for (const [field, messages] of Object.entries(error.error)) {
+                            if (Array.isArray(messages)) {
+                                errors.push(`${field}: ${messages.join(', ')}`);
+                            }
+                            else {
+                                errors.push(`${field}: ${messages}`);
+                            }
+                        }
+                        this.error.set(errors.join('\n'));
+                    }
+                    else {
+                        this.error.set(error.error?.message || error.message || 'Registration failed. Please try again.');
+                    }
+                }
+            });
+        }
+    }
+    /**
+     * Navigate back to login
+     */
+    goToLogin() {
+        this.router.navigate(['/login'], {
+            queryParams: { returnUrl: this.returnUrl }
+        });
+    }
+    /**
+     * Clear error message
+     */
+    clearError() {
+        this.error.set(null);
+    }
+    /**
+     * Clear success message
+     */
+    clearSuccess() {
+        this.success.set(null);
+    }
+    /**
+     * Get field error message
+     */
+    getFieldErrorMessage(fieldName) {
+        const field = this.registrationForm.get(fieldName);
+        if (field && field.invalid && field.touched) {
+            if (field.errors?.['required']) {
+                return `${this.getFieldDisplayName(fieldName)} is required`;
+            }
+            if (field.errors?.['email']) {
+                return 'Please enter a valid email address';
+            }
+            if (field.errors?.['minlength']) {
+                const requiredLength = field.errors?.['minlength'].requiredLength;
+                return `${this.getFieldDisplayName(fieldName)} must be at least ${requiredLength} characters`;
+            }
+            if (field.errors?.['maxlength']) {
+                const requiredLength = field.errors?.['maxlength'].requiredLength;
+                return `${this.getFieldDisplayName(fieldName)} must be no more than ${requiredLength} characters`;
+            }
+        }
+        if (fieldName === 'confirmPassword' && this.registrationForm.errors?.['passwordMismatch'] && field?.touched) {
+            return 'Passwords do not match';
+        }
+        return null;
+    }
+    /**
+     * Get user-friendly field display name
+     */
+    getFieldDisplayName(fieldName) {
+        const displayNames = {
+            username: 'Username',
+            email: 'Email',
+            firstName: 'First name',
+            lastName: 'Last name',
+            password: 'Password',
+            confirmPassword: 'Confirm password'
+        };
+        return displayNames[fieldName] || fieldName;
+    }
+    /**
+     * Check if a field has errors and should display error styling
+     */
+    hasFieldError(fieldName) {
+        const field = this.registrationForm.get(fieldName);
+        if (fieldName === 'confirmPassword') {
+            return (field?.invalid && field?.touched) ||
+                (this.registrationForm.errors?.['passwordMismatch'] && field?.touched) || false;
+        }
+        return field?.invalid && field?.touched || false;
+    }
+    /**
+     * Computed signals for UI display logic
+     */
+    isRegistrationDisabled = computed(() => !this.registrationEnabled(), ...(ngDevMode ? [{ debugName: "isRegistrationDisabled" }] : []));
+    canSubmitForm = computed(() => {
+        return this.registrationForm.valid && this.registrationEnabled() && !this.loading();
+    }, ...(ngDevMode ? [{ debugName: "canSubmitForm" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RegisterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: RegisterComponent, isStandalone: true, selector: "app-register", ngImport: i0, template: "<div class=\"container\">\n  <div class=\"register-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if (siteConfig$ | async; as config) {\n          <h3 class=\"card-title text-center mb-4\">\n            <i class=\"bi bi-person-plus me-2\"></i>Create Account - {{ config.siteName }}\n          </h3>\n        }\n\n        <!-- Success Alert -->\n        @if (success()) {\n          <ngb-alert type=\"success\" (closed)=\"clearSuccess()\" [dismissible]=\"true\">\n            <i class=\"bi bi-check-circle me-2\"></i>{{ success() }}\n          </ngb-alert>\n        }\n\n        <!-- Error Alert -->\n        @if (error()) {\n          <ngb-alert type=\"danger\" (closed)=\"clearError()\" [dismissible]=\"true\">\n            <i class=\"bi bi-exclamation-triangle me-2\"></i>\n            <span [innerHTML]=\"error()?.replace('\\n', '<br>') || ''\"></span>\n          </ngb-alert>\n        }\n\n        <!-- Registration Disabled Message -->\n        @if (!registrationEnabled() && !loading()) {\n          <div class=\"alert alert-warning text-center\">\n            <i class=\"bi bi-info-circle me-2\"></i>\n            <strong>Registration Unavailable</strong>\n            <div class=\"mt-2\">\n              {{ registrationStatus()?.message || 'Registration is currently disabled' }}\n            </div>\n            <div class=\"mt-3\">\n              <button type=\"button\" class=\"btn btn-outline-primary\" (click)=\"goToLogin()\">\n                <i class=\"bi bi-arrow-left me-1\"></i>Back to Login\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Registration Form -->\n        @if (registrationEnabled()) {\n          <form [formGroup]=\"registrationForm\" (ngSubmit)=\"onSubmit()\">\n          <!-- Username -->\n          <div class=\"mb-3\">\n            <label for=\"username\" class=\"form-label\">Username <span class=\"text-danger\">*</span></label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n              <input \n                type=\"text\" \n                class=\"form-control\" \n                id=\"username\"\n                formControlName=\"username\"\n                [class.is-invalid]=\"hasFieldError('username')\"\n                placeholder=\"Choose a username\">\n            </div>\n            @if (getFieldErrorMessage('username')) {\n              <div class=\"invalid-feedback d-block\">\n                {{ getFieldErrorMessage('username') }}\n              </div>\n            }\n            <div class=\"form-text\">\n              Username must be 3-150 characters. Only letters, numbers, and @/./+/-/_ allowed.\n            </div>\n          </div>\n\n          <!-- Email -->\n          <div class=\"mb-3\">\n            <label for=\"email\" class=\"form-label\">Email Address <span class=\"text-danger\">*</span></label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-envelope\"></i>\n              </span>\n              <input \n                type=\"email\" \n                class=\"form-control\" \n                id=\"email\"\n                formControlName=\"email\"\n                [class.is-invalid]=\"hasFieldError('email')\"\n                placeholder=\"Enter your email address\">\n            </div>\n            @if (getFieldErrorMessage('email')) {\n              <div class=\"invalid-feedback d-block\">\n                {{ getFieldErrorMessage('email') }}\n              </div>\n            }\n          </div>\n\n          <!-- First Name and Last Name -->\n          <div class=\"row\">\n            <div class=\"col-md-6 mb-3\">\n              <label for=\"first_name\" class=\"form-label\">First Name <span class=\"text-danger\">*</span></label>\n              <input \n                type=\"text\" \n                class=\"form-control\" \n                id=\"first_name\"\n                formControlName=\"firstName\"\n                [class.is-invalid]=\"hasFieldError('firstName')\"\n                placeholder=\"First name\">\n              @if (getFieldErrorMessage('firstName')) {\n                <div class=\"invalid-feedback d-block\">\n                  {{ getFieldErrorMessage('firstName') }}\n                </div>\n              }\n            </div>\n            <div class=\"col-md-6 mb-3\">\n              <label for=\"last_name\" class=\"form-label\">Last Name <span class=\"text-danger\">*</span></label>\n              <input \n                type=\"text\" \n                class=\"form-control\" \n                id=\"last_name\"\n                formControlName=\"lastName\"\n                [class.is-invalid]=\"hasFieldError('lastName')\"\n                placeholder=\"Last name\">\n              @if (getFieldErrorMessage('lastName')) {\n                <div class=\"invalid-feedback d-block\">\n                  {{ getFieldErrorMessage('lastName') }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Password -->\n          <div class=\"mb-3\">\n            <label for=\"password\" class=\"form-label\">Password <span class=\"text-danger\">*</span></label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-lock\"></i>\n              </span>\n              <input \n                type=\"password\" \n                class=\"form-control\" \n                id=\"password\"\n                formControlName=\"password\"\n                [class.is-invalid]=\"hasFieldError('password')\"\n                placeholder=\"Create a password\">\n            </div>\n            @if (getFieldErrorMessage('password')) {\n              <div class=\"invalid-feedback d-block\">\n                {{ getFieldErrorMessage('password') }}\n              </div>\n            }\n            <div class=\"form-text\">\n              Password must be at least 8 characters long.\n            </div>\n          </div>\n\n          <!-- Confirm Password -->\n          <div class=\"mb-4\">\n            <label for=\"confirm_password\" class=\"form-label\">Confirm Password <span class=\"text-danger\">*</span></label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-lock-fill\"></i>\n              </span>\n              <input \n                type=\"password\" \n                class=\"form-control\" \n                id=\"confirm_password\"\n                formControlName=\"confirmPassword\"\n                [class.is-invalid]=\"hasFieldError('confirmPassword')\"\n                placeholder=\"Confirm your password\">\n            </div>\n            @if (getFieldErrorMessage('confirmPassword')) {\n              <div class=\"invalid-feedback d-block\">\n                {{ getFieldErrorMessage('confirmPassword') }}\n              </div>\n            }\n          </div>\n\n          <!-- Submit Button -->\n          <div class=\"d-grid gap-2 mb-3\">\n            <button \n              type=\"submit\" \n              class=\"btn btn-primary\"\n              [disabled]=\"registrationForm.invalid || loading() || !registrationEnabled()\">\n              @if (loading()) {\n                <span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>\n              }\n              @if (!loading()) {\n                <i class=\"bi bi-person-plus me-2\"></i>\n              }\n              Create Account\n            </button>\n          </div>\n\n          <!-- Back to Login -->\n          <div class=\"text-center\">\n            <p class=\"text-muted small mb-2\">Already have an account?</p>\n            <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"goToLogin()\">\n              <i class=\"bi bi-arrow-left me-1\"></i>Back to Login\n            </button>\n          </div>\n          </form>\n        }\n\n        <!-- Additional Information -->\n        @if (siteConfig$ | async; as config) {\n          <div class=\"mt-4 text-center\">\n            <p class=\"text-muted small\">\n              {{ config.siteName }} - Scientific Metadata Management\n            </p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}.register-wrapper{width:100%;max-width:500px}.card{border:none;border-radius:1rem;box-shadow:0 .5rem 1rem #00000026}.card-body{padding:3rem}.card-title{font-size:1.5rem;font-weight:600;color:var(--bs-primary)}.form-control{border-radius:.5rem;border:1px solid var(--bs-border-color);padding:.75rem 1rem}.form-control:focus{border-color:var(--bs-primary);box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25)}.input-group-text{border-radius:.5rem 0 0 .5rem;background:var(--bs-light);border:1px solid var(--bs-border-color)}.input-group-text i{color:var(--bs-secondary)}.input-group .form-control{border-radius:0 .5rem .5rem 0}.btn{border-radius:.5rem;padding:.75rem 1.5rem;font-weight:500;transition:all .2s ease-in-out}.btn-primary{background:linear-gradient(135deg,var(--bs-primary) 0%,color-mix(in srgb,var(--bs-primary) 80%,black) 100%);border:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 .25rem .5rem rgba(var(--bs-primary-rgb),.3)}.btn-primary:disabled{transform:none;box-shadow:none}.alert{border-radius:.75rem;border:none}.alert.alert-success{background:rgba(var(--bs-success-rgb),.1);color:var(--bs-success);border-left:4px solid var(--bs-success)}.alert.alert-danger{background:rgba(var(--bs-danger-rgb),.1);color:var(--bs-danger);border-left:4px solid var(--bs-danger)}.alert.alert-warning{background:rgba(var(--bs-warning-rgb),.1);color:var(--bs-warning-emphasis);border-left:4px solid var(--bs-warning)}.invalid-feedback{font-size:.875rem;color:var(--bs-danger)}.form-text{font-size:.8rem;color:var(--bs-secondary)}@media (max-width: 576px){.card-body{padding:2rem 1.5rem}.card-title{font-size:1.25rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RegisterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-register', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbAlert], template: "<div class=\"container\">\n  <div class=\"register-wrapper\">\n    <div class=\"card\">\n      <div class=\"card-body\">\n        @if (siteConfig$ | async; as config) {\n          <h3 class=\"card-title text-center mb-4\">\n            <i class=\"bi bi-person-plus me-2\"></i>Create Account - {{ config.siteName }}\n          </h3>\n        }\n\n        <!-- Success Alert -->\n        @if (success()) {\n          <ngb-alert type=\"success\" (closed)=\"clearSuccess()\" [dismissible]=\"true\">\n            <i class=\"bi bi-check-circle me-2\"></i>{{ success() }}\n          </ngb-alert>\n        }\n\n        <!-- Error Alert -->\n        @if (error()) {\n          <ngb-alert type=\"danger\" (closed)=\"clearError()\" [dismissible]=\"true\">\n            <i class=\"bi bi-exclamation-triangle me-2\"></i>\n            <span [innerHTML]=\"error()?.replace('\\n', '<br>') || ''\"></span>\n          </ngb-alert>\n        }\n\n        <!-- Registration Disabled Message -->\n        @if (!registrationEnabled() && !loading()) {\n          <div class=\"alert alert-warning text-center\">\n            <i class=\"bi bi-info-circle me-2\"></i>\n            <strong>Registration Unavailable</strong>\n            <div class=\"mt-2\">\n              {{ registrationStatus()?.message || 'Registration is currently disabled' }}\n            </div>\n            <div class=\"mt-3\">\n              <button type=\"button\" class=\"btn btn-outline-primary\" (click)=\"goToLogin()\">\n                <i class=\"bi bi-arrow-left me-1\"></i>Back to Login\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Registration Form -->\n        @if (registrationEnabled()) {\n          <form [formGroup]=\"registrationForm\" (ngSubmit)=\"onSubmit()\">\n          <!-- Username -->\n          <div class=\"mb-3\">\n            <label for=\"username\" class=\"form-label\">Username <span class=\"text-danger\">*</span></label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n              <input \n                type=\"text\" \n                class=\"form-control\" \n                id=\"username\"\n                formControlName=\"username\"\n                [class.is-invalid]=\"hasFieldError('username')\"\n                placeholder=\"Choose a username\">\n            </div>\n            @if (getFieldErrorMessage('username')) {\n              <div class=\"invalid-feedback d-block\">\n                {{ getFieldErrorMessage('username') }}\n              </div>\n            }\n            <div class=\"form-text\">\n              Username must be 3-150 characters. Only letters, numbers, and @/./+/-/_ allowed.\n            </div>\n          </div>\n\n          <!-- Email -->\n          <div class=\"mb-3\">\n            <label for=\"email\" class=\"form-label\">Email Address <span class=\"text-danger\">*</span></label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-envelope\"></i>\n              </span>\n              <input \n                type=\"email\" \n                class=\"form-control\" \n                id=\"email\"\n                formControlName=\"email\"\n                [class.is-invalid]=\"hasFieldError('email')\"\n                placeholder=\"Enter your email address\">\n            </div>\n            @if (getFieldErrorMessage('email')) {\n              <div class=\"invalid-feedback d-block\">\n                {{ getFieldErrorMessage('email') }}\n              </div>\n            }\n          </div>\n\n          <!-- First Name and Last Name -->\n          <div class=\"row\">\n            <div class=\"col-md-6 mb-3\">\n              <label for=\"first_name\" class=\"form-label\">First Name <span class=\"text-danger\">*</span></label>\n              <input \n                type=\"text\" \n                class=\"form-control\" \n                id=\"first_name\"\n                formControlName=\"firstName\"\n                [class.is-invalid]=\"hasFieldError('firstName')\"\n                placeholder=\"First name\">\n              @if (getFieldErrorMessage('firstName')) {\n                <div class=\"invalid-feedback d-block\">\n                  {{ getFieldErrorMessage('firstName') }}\n                </div>\n              }\n            </div>\n            <div class=\"col-md-6 mb-3\">\n              <label for=\"last_name\" class=\"form-label\">Last Name <span class=\"text-danger\">*</span></label>\n              <input \n                type=\"text\" \n                class=\"form-control\" \n                id=\"last_name\"\n                formControlName=\"lastName\"\n                [class.is-invalid]=\"hasFieldError('lastName')\"\n                placeholder=\"Last name\">\n              @if (getFieldErrorMessage('lastName')) {\n                <div class=\"invalid-feedback d-block\">\n                  {{ getFieldErrorMessage('lastName') }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Password -->\n          <div class=\"mb-3\">\n            <label for=\"password\" class=\"form-label\">Password <span class=\"text-danger\">*</span></label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-lock\"></i>\n              </span>\n              <input \n                type=\"password\" \n                class=\"form-control\" \n                id=\"password\"\n                formControlName=\"password\"\n                [class.is-invalid]=\"hasFieldError('password')\"\n                placeholder=\"Create a password\">\n            </div>\n            @if (getFieldErrorMessage('password')) {\n              <div class=\"invalid-feedback d-block\">\n                {{ getFieldErrorMessage('password') }}\n              </div>\n            }\n            <div class=\"form-text\">\n              Password must be at least 8 characters long.\n            </div>\n          </div>\n\n          <!-- Confirm Password -->\n          <div class=\"mb-4\">\n            <label for=\"confirm_password\" class=\"form-label\">Confirm Password <span class=\"text-danger\">*</span></label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-lock-fill\"></i>\n              </span>\n              <input \n                type=\"password\" \n                class=\"form-control\" \n                id=\"confirm_password\"\n                formControlName=\"confirmPassword\"\n                [class.is-invalid]=\"hasFieldError('confirmPassword')\"\n                placeholder=\"Confirm your password\">\n            </div>\n            @if (getFieldErrorMessage('confirmPassword')) {\n              <div class=\"invalid-feedback d-block\">\n                {{ getFieldErrorMessage('confirmPassword') }}\n              </div>\n            }\n          </div>\n\n          <!-- Submit Button -->\n          <div class=\"d-grid gap-2 mb-3\">\n            <button \n              type=\"submit\" \n              class=\"btn btn-primary\"\n              [disabled]=\"registrationForm.invalid || loading() || !registrationEnabled()\">\n              @if (loading()) {\n                <span class=\"spinner-border spinner-border-sm me-2\" aria-hidden=\"true\"></span>\n              }\n              @if (!loading()) {\n                <i class=\"bi bi-person-plus me-2\"></i>\n              }\n              Create Account\n            </button>\n          </div>\n\n          <!-- Back to Login -->\n          <div class=\"text-center\">\n            <p class=\"text-muted small mb-2\">Already have an account?</p>\n            <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"goToLogin()\">\n              <i class=\"bi bi-arrow-left me-1\"></i>Back to Login\n            </button>\n          </div>\n          </form>\n        }\n\n        <!-- Additional Information -->\n        @if (siteConfig$ | async; as config) {\n          <div class=\"mt-4 text-center\">\n            <p class=\"text-muted small\">\n              {{ config.siteName }} - Scientific Metadata Management\n            </p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}.register-wrapper{width:100%;max-width:500px}.card{border:none;border-radius:1rem;box-shadow:0 .5rem 1rem #00000026}.card-body{padding:3rem}.card-title{font-size:1.5rem;font-weight:600;color:var(--bs-primary)}.form-control{border-radius:.5rem;border:1px solid var(--bs-border-color);padding:.75rem 1rem}.form-control:focus{border-color:var(--bs-primary);box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25)}.input-group-text{border-radius:.5rem 0 0 .5rem;background:var(--bs-light);border:1px solid var(--bs-border-color)}.input-group-text i{color:var(--bs-secondary)}.input-group .form-control{border-radius:0 .5rem .5rem 0}.btn{border-radius:.5rem;padding:.75rem 1.5rem;font-weight:500;transition:all .2s ease-in-out}.btn-primary{background:linear-gradient(135deg,var(--bs-primary) 0%,color-mix(in srgb,var(--bs-primary) 80%,black) 100%);border:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 .25rem .5rem rgba(var(--bs-primary-rgb),.3)}.btn-primary:disabled{transform:none;box-shadow:none}.alert{border-radius:.75rem;border:none}.alert.alert-success{background:rgba(var(--bs-success-rgb),.1);color:var(--bs-success);border-left:4px solid var(--bs-success)}.alert.alert-danger{background:rgba(var(--bs-danger-rgb),.1);color:var(--bs-danger);border-left:4px solid var(--bs-danger)}.alert.alert-warning{background:rgba(var(--bs-warning-rgb),.1);color:var(--bs-warning-emphasis);border-left:4px solid var(--bs-warning)}.invalid-feedback{font-size:.875rem;color:var(--bs-danger)}.form-text{font-size:.8rem;color:var(--bs-secondary)}@media (max-width: 576px){.card-body{padding:2rem 1.5rem}.card-title{font-size:1.25rem}}\n"] }]
+        }], ctorParameters: () => [] });
+
+class UserManagementComponent {
+    fb = inject(FormBuilder);
+    userManagementService = inject(UserManagementService);
+    authService = inject(AuthService);
+    modalService = inject(NgbModal);
+    // Data
+    users = signal([], ...(ngDevMode ? [{ debugName: "users" }] : []));
+    totalUsers = signal(0, ...(ngDevMode ? [{ debugName: "totalUsers" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    // Search and filters
+    searchForm;
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    staffFilter = signal('', ...(ngDevMode ? [{ debugName: "staffFilter" }] : []));
+    activeFilter = signal('', ...(ngDevMode ? [{ debugName: "activeFilter" }] : []));
+    // Pagination
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    // UI state
+    selectedUser = signal(null, ...(ngDevMode ? [{ debugName: "selectedUser" }] : []));
+    isCreatingUser = signal(false, ...(ngDevMode ? [{ debugName: "isCreatingUser" }] : []));
+    isUpdatingUser = signal(false, ...(ngDevMode ? [{ debugName: "isUpdatingUser" }] : []));
+    isDeletingUser = signal(false, ...(ngDevMode ? [{ debugName: "isDeletingUser" }] : []));
+    isResettingPassword = signal(false, ...(ngDevMode ? [{ debugName: "isResettingPassword" }] : []));
+    // Messages
+    successMessage = signal('', ...(ngDevMode ? [{ debugName: "successMessage" }] : []));
+    errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    // Make Math available in template
+    Math = Math;
+    // Computed signals
+    totalPages = computed(() => Math.ceil(this.totalUsers() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    pages = computed(() => {
+        const total = this.totalPages();
+        const current = this.currentPage();
+        const pages = [];
+        // Show up to 5 pages around current page
+        const start = Math.max(1, current - 2);
+        const end = Math.min(total, current + 2);
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }, ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    showingFrom = computed(() => ((this.currentPage() - 1) * this.pageSize()) + 1, ...(ngDevMode ? [{ debugName: "showingFrom" }] : []));
+    showingTo = computed(() => Math.min(this.currentPage() * this.pageSize(), this.totalUsers()), ...(ngDevMode ? [{ debugName: "showingTo" }] : []));
+    hasResults = computed(() => this.users().length > 0, ...(ngDevMode ? [{ debugName: "hasResults" }] : []));
+    canGoToPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "canGoToPreviousPage" }] : []));
+    canGoToNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "canGoToNextPage" }] : []));
+    // Additional computed signals for UI state
+    isAnyActionInProgress = computed(() => this.isCreatingUser() ||
+        this.isUpdatingUser() ||
+        this.isDeletingUser() ||
+        this.isResettingPassword(), ...(ngDevMode ? [{ debugName: "isAnyActionInProgress" }] : []));
+    selectedUserDisplayName = computed(() => {
+        const user = this.selectedUser();
+        return user ? this.getUserDisplayName(user) : '';
+    }, ...(ngDevMode ? [{ debugName: "selectedUserDisplayName" }] : []));
+    // Computed signal for modal states
+    hasSelectedUser = computed(() => this.selectedUser() !== null, ...(ngDevMode ? [{ debugName: "hasSelectedUser" }] : []));
+    // Computed signals for form states
+    canCreateUser = computed(() => !this.isCreatingUser(), ...(ngDevMode ? [{ debugName: "canCreateUser" }] : []));
+    canUpdateUser = computed(() => !this.isUpdatingUser(), ...(ngDevMode ? [{ debugName: "canUpdateUser" }] : []));
+    canResetPassword = computed(() => !this.isResettingPassword(), ...(ngDevMode ? [{ debugName: "canResetPassword" }] : []));
+    constructor() {
+        this.searchForm = this.fb.group({
+            search: [''],
+            isStaff: [''],
+            isActive: ['']
+        });
+    }
+    ngOnInit() {
+        this.loadUsers();
+        // Subscribe to search form changes with debounce
+        this.searchForm.valueChanges.pipe(debounceTime(300)).subscribe((values) => {
+            this.searchTerm.set(values.search || '');
+            this.staffFilter.set(values.isStaff || '');
+            this.activeFilter.set(values.isActive || '');
+            this.currentPage.set(1);
+        });
+    }
+    loadUsers() {
+        this.isLoading.set(true);
+        this.errorMessage.set('');
+        const searchParams = {
+            search: this.searchTerm() || undefined,
+            isStaff: this.staffFilter() !== '' ? this.staffFilter() === 'true' : undefined,
+            isActive: this.activeFilter() !== '' ? this.activeFilter() === 'true' : undefined,
+            page: this.currentPage(),
+            pageSize: this.pageSize()
+        };
+        this.userManagementService.getUsers(searchParams).subscribe({
+            next: (response) => {
+                this.users.set(response.results);
+                this.totalUsers.set(response.count);
+                this.isLoading.set(false);
+            },
+            error: (error) => {
+                this.errorMessage.set('Failed to load users');
+                this.isLoading.set(false);
+            }
+        });
+    }
+    openCreateUserModal(content) {
+        this.selectedUser.set(null);
+        this.modalService.open(content, { size: 'lg' });
+    }
+    openEditUserModal(content, user) {
+        this.selectedUser.set(user);
+        this.modalService.open(content, { size: 'lg' });
+    }
+    openPasswordResetModal(content, user) {
+        this.selectedUser.set(user);
+        this.modalService.open(content);
+    }
+    createUser(userData) {
+        this.isCreatingUser.set(true);
+        this.errorMessage.set('');
+        this.userManagementService.createUser(userData).subscribe({
+            next: (response) => {
+                this.successMessage.set(`User ${userData.username} created successfully`);
+                this.loadUsers();
+                this.isCreatingUser.set(false);
+                this.modalService.dismissAll();
+            },
+            error: (error) => {
+                this.errorMessage.set(error.error?.message || 'Failed to create user');
+                this.isCreatingUser.set(false);
+            }
+        });
+    }
+    updateUser(userId, userData) {
+        this.isUpdatingUser.set(true);
+        this.errorMessage.set('');
+        this.userManagementService.updateUser(userId, userData).subscribe({
+            next: (updatedUser) => {
+                this.successMessage.set(`User ${updatedUser.username} updated successfully`);
+                this.loadUsers();
+                this.isUpdatingUser.set(false);
+                this.modalService.dismissAll();
+            },
+            error: (error) => {
+                this.errorMessage.set(error.error?.message || 'Failed to update user');
+                this.isUpdatingUser.set(false);
+            }
+        });
+    }
+    deleteUser(user) {
+        if (!user.id)
+            return;
+        if (confirm(`Are you sure you want to delete user "${user.username}"? This action cannot be undone.`)) {
+            this.isDeletingUser.set(true);
+            this.errorMessage.set('');
+            this.userManagementService.deleteUser(user.id).subscribe({
+                next: () => {
+                    this.successMessage.set(`User ${user.username} deleted successfully`);
+                    this.loadUsers();
+                    this.isDeletingUser.set(false);
+                },
+                error: (error) => {
+                    this.errorMessage.set(error.error?.message || 'Failed to delete user');
+                    this.isDeletingUser.set(false);
+                }
+            });
+        }
+    }
+    resetUserPassword(userId, passwordData) {
+        this.isResettingPassword.set(true);
+        this.errorMessage.set('');
+        this.userManagementService.resetUserPassword(userId, passwordData).subscribe({
+            next: (response) => {
+                this.successMessage.set(response.message || 'Password reset successfully');
+                this.isResettingPassword.set(false);
+                this.modalService.dismissAll();
+            },
+            error: (error) => {
+                this.errorMessage.set(error.error?.message || 'Failed to reset password');
+                this.isResettingPassword.set(false);
+            }
+        });
+    }
+    toggleUserStatus(user) {
+        if (!user.id)
+            return;
+        const newStatus = !user.isActive;
+        const action = newStatus ? 'activate' : 'deactivate';
+        if (confirm(`Are you sure you want to ${action} user "${user.username}"?`)) {
+            this.updateUser(user.id, { isActive: newStatus });
+        }
+    }
+    toggleStaffStatus(user) {
+        if (!user.id)
+            return;
+        const newStatus = !user.isStaff;
+        const action = newStatus ? 'grant staff privileges to' : 'revoke staff privileges from';
+        if (confirm(`Are you sure you want to ${action} user "${user.username}"?`)) {
+            this.updateUser(user.id, { isStaff: newStatus });
+        }
+    }
+    onPageChange(page) {
+        this.currentPage.set(page);
+        this.loadUsers();
+    }
+    clearMessages() {
+        this.successMessage.set('');
+        this.errorMessage.set('');
+    }
+    formatDate(dateString) {
+        return this.userManagementService.formatDate(dateString);
+    }
+    getUserDisplayName(user) {
+        return this.userManagementService.getUserDisplayName(user);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: UserManagementComponent, isStandalone: true, selector: "app-user-management", ngImport: i0, template: "<div class=\"user-management-container\">\n  <!-- Header Section -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <h4 class=\"mb-0\">\n            <i class=\"bi bi-people-fill me-2 text-primary\"></i>User Management\n          </h4>\n          <span class=\"badge bg-primary ms-3\">{{ totalUsers() }} users</span>\n        </div>\n\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-primary btn-sm\"\n            (click)=\"openCreateUserModal(createUserModal)\"\n            [disabled]=\"isLoading()\">\n            <i class=\"bi bi-person-plus me-1\"></i>Create User\n          </button>\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"users-content p-4\">\n    <!-- Search and Filters Section -->\n    <div class=\"card mb-4\">\n      <div class=\"card-header\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-search me-2\"></i>Search & Filters\n        </h5>\n      </div>\n      <div class=\"card-body\">\n        <form [formGroup]=\"searchForm\" class=\"row g-3\">\n          <div class=\"col-md-4\">\n            <label for=\"search\" class=\"form-label\">Search</label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-search\"></i>\n              </span>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"search\"\n                formControlName=\"search\"\n                placeholder=\"Search by username, email, or name\">\n            </div>\n          </div>\n\n          <div class=\"col-md-4\">\n            <label for=\"isStaff\" class=\"form-label\">Staff Status</label>\n            <select class=\"form-select\" id=\"isStaff\" formControlName=\"isStaff\">\n              <option value=\"\">All Users</option>\n              <option value=\"true\">Staff Only</option>\n              <option value=\"false\">Regular Users</option>\n            </select>\n          </div>\n\n          <div class=\"col-md-4\">\n            <label for=\"isActive\" class=\"form-label\">Account Status</label>\n            <select class=\"form-select\" id=\"isActive\" formControlName=\"isActive\">\n              <option value=\"\">All Accounts</option>\n              <option value=\"true\">Active Only</option>\n              <option value=\"false\">Inactive Only</option>\n            </select>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- Success/Error Messages -->\n    @if (successMessage()) {\n      <div class=\"alert alert-success alert-dismissible\">\n        <i class=\"bi bi-check-circle me-2\"></i>{{ successMessage() }}\n        <button type=\"button\" class=\"btn-close\" (click)=\"clearMessages()\"></button>\n      </div>\n    }\n\n    @if (errorMessage()) {\n      <div class=\"alert alert-danger alert-dismissible\">\n        <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ errorMessage() }}\n        <button type=\"button\" class=\"btn-close\" (click)=\"clearMessages()\"></button>\n      </div>\n    }\n\n    <!-- Users Table -->\n    <div class=\"card\">\n      <div class=\"card-header d-flex justify-content-between align-items-center\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-table me-2\"></i>Users\n          <span class=\"badge bg-primary ms-2\">{{ users().length }}</span>\n        </h5>\n        @if (isLoading()) {\n          <div class=\"spinner-border spinner-border-sm text-primary\">\n            <span class=\"visually-hidden\">Loading...</span>\n          </div>\n        }\n      </div>\n      <div class=\"card-body p-0\">\n        @if (hasResults()) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-hover mb-0\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th>User</th>\n                  <th>Contact</th>\n                  <th>Status</th>\n                  <th>Joined</th>\n                  <th>Last Login</th>\n                  <th class=\"text-end\">Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (user of users(); track user.id) {\n                  <tr>\n                    <td>\n                      <div class=\"d-flex align-items-center\">\n                        <div>\n                          <div class=\"fw-semibold\">{{ getUserDisplayName(user) }}</div>\n                          <small class=\"text-muted\">@{{ user.username }}</small>\n                        </div>\n                      </div>\n                    </td>\n                    <td>\n                      <div>{{ user.email }}</div>\n                    </td>\n                    <td>\n                      <div class=\"d-flex gap-1 flex-wrap\">\n                        @if (user.isActive) {\n                          <span class=\"badge bg-success\">Active</span>\n                        } @else {\n                          <span class=\"badge bg-danger\">Inactive</span>\n                        }\n                        @if (user.isStaff) {\n                          <span class=\"badge bg-warning\">Staff</span>\n                        }\n                      </div>\n                    </td>\n                    <td>{{ formatDate(user.dateJoined) }}</td>\n                    <td>{{ formatDate(user.lastLogin) }}</td>\n                    <td class=\"text-end\">\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-outline-primary\"\n                          (click)=\"openEditUserModal(editUserModal, user)\"\n                          title=\"Edit user\">\n                          <i class=\"bi bi-pencil\"></i>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-outline-warning\"\n                          (click)=\"openPasswordResetModal(passwordResetModal, user)\"\n                          title=\"Reset password\">\n                          <i class=\"bi bi-shield-lock\"></i>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"btn\"\n                          [class]=\"user.isActive ? 'btn-outline-secondary' : 'btn-outline-success'\"\n                          (click)=\"toggleUserStatus(user)\"\n                          [title]=\"user.isActive ? 'Deactivate user' : 'Activate user'\">\n                          <i class=\"bi\" [class]=\"user.isActive ? 'bi-person-dash' : 'bi-person-check'\"></i>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"btn\"\n                          [class]=\"user.isStaff ? 'btn-outline-secondary' : 'btn-outline-info'\"\n                          (click)=\"toggleStaffStatus(user)\"\n                          [title]=\"user.isStaff ? 'Remove staff privileges' : 'Grant staff privileges'\">\n                          <i class=\"bi\" [class]=\"user.isStaff ? 'bi-person-x' : 'bi-person-badge'\"></i>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-outline-danger\"\n                          (click)=\"deleteUser(user)\"\n                          title=\"Delete user\">\n                          <i class=\"bi bi-trash\"></i>\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n\n          <!-- Pagination -->\n          @if (totalPages() > 1) {\n            <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n              <div class=\"text-muted\">\n                Showing {{ showingFrom() }} to {{ showingTo() }} of {{ totalUsers() }} users\n              </div>\n              <nav>\n                <ul class=\"pagination pagination-sm mb-0\">\n                  <li class=\"page-item\" [class.disabled]=\"!canGoToPreviousPage()\">\n                    <button class=\"page-link\" (click)=\"onPageChange(currentPage() - 1)\" [disabled]=\"!canGoToPreviousPage()\">\n                      <i class=\"bi bi-chevron-left\"></i>\n                    </button>\n                  </li>\n                  @for (page of pages(); track page) {\n                    <li class=\"page-item\" [class.active]=\"page === currentPage()\">\n                      <button class=\"page-link\" (click)=\"onPageChange(page)\">{{ page }}</button>\n                    </li>\n                  }\n                  <li class=\"page-item\" [class.disabled]=\"!canGoToNextPage()\">\n                    <button class=\"page-link\" (click)=\"onPageChange(currentPage() + 1)\" [disabled]=\"!canGoToNextPage()\">\n                      <i class=\"bi bi-chevron-right\"></i>\n                    </button>\n                  </li>\n                </ul>\n              </nav>\n            </div>\n          }\n        } @else {\n          <div class=\"text-center p-4\">\n            <i class=\"bi bi-people display-4 text-muted\"></i>\n            <p class=\"text-muted mt-2\">No users found</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Create User Modal -->\n<ng-template #createUserModal let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">\n      <i class=\"bi bi-person-plus me-2\"></i>Create User\n    </h4>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <form #createForm=\"ngForm\" (ngSubmit)=\"createUser(createForm.value)\">\n      <div class=\"row g-3\">\n        <div class=\"col-md-6\">\n          <label for=\"createUsername\" class=\"form-label\">Username</label>\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"createUsername\"\n            name=\"username\"\n            ngModel\n            required\n            #usernameField=\"ngModel\">\n          @if (usernameField.invalid && usernameField.touched) {\n            <div class=\"text-danger small\">Username is required</div>\n          }\n        </div>\n        <div class=\"col-md-6\">\n          <label for=\"createEmail\" class=\"form-label\">Email</label>\n          <input\n            type=\"email\"\n            class=\"form-control\"\n            id=\"createEmail\"\n            name=\"email\"\n            ngModel\n            required\n            email\n            #emailField=\"ngModel\">\n          @if (emailField.invalid && emailField.touched) {\n            <div class=\"text-danger small\">Valid email is required</div>\n          }\n        </div>\n      </div>\n      <div class=\"row g-3 mt-1\">\n        <div class=\"col-md-6\">\n          <label for=\"createFirstName\" class=\"form-label\">First Name</label>\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"createFirstName\"\n            name=\"firstName\"\n            ngModel\n            required\n            #firstNameField=\"ngModel\">\n          @if (firstNameField.invalid && firstNameField.touched) {\n            <div class=\"text-danger small\">First name is required</div>\n          }\n        </div>\n        <div class=\"col-md-6\">\n          <label for=\"createLastName\" class=\"form-label\">Last Name</label>\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"createLastName\"\n            name=\"lastName\"\n            ngModel\n            required\n            #lastNameField=\"ngModel\">\n          @if (lastNameField.invalid && lastNameField.touched) {\n            <div class=\"text-danger small\">Last name is required</div>\n          }\n        </div>\n      </div>\n      <div class=\"row g-3 mt-1\">\n        <div class=\"col-md-6\">\n          <label for=\"createPassword\" class=\"form-label\">Password</label>\n          <input\n            type=\"password\"\n            class=\"form-control\"\n            id=\"createPassword\"\n            name=\"password\"\n            ngModel\n            required\n            minlength=\"8\"\n            #passwordField=\"ngModel\">\n          @if (passwordField.invalid && passwordField.touched) {\n            <div class=\"text-danger small\">Password must be at least 8 characters</div>\n          }\n        </div>\n        <div class=\"col-md-6\">\n          <label for=\"createPasswordConfirm\" class=\"form-label\">Confirm Password</label>\n          <input\n            type=\"password\"\n            class=\"form-control\"\n            id=\"createPasswordConfirm\"\n            name=\"password_confirm\"\n            ngModel\n            required\n            #passwordConfirmField=\"ngModel\">\n          @if (passwordConfirmField.invalid && passwordConfirmField.touched) {\n            <div class=\"text-danger small\">Password confirmation is required</div>\n          }\n        </div>\n      </div>\n      <div class=\"row g-3 mt-1\">\n        <div class=\"col-md-6\">\n          <div class=\"form-check\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"createIsStaff\"\n              name=\"isStaff\"\n              ngModel>\n            <label class=\"form-check-label\" for=\"createIsStaff\">\n              Staff privileges\n            </label>\n          </div>\n        </div>\n        <div class=\"col-md-6\">\n          <div class=\"form-check\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"createIsActive\"\n              name=\"isActive\"\n              ngModel\n              checked>\n            <label class=\"form-check-label\" for=\"createIsActive\">\n              Active account\n            </label>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"modal.dismiss()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"createUser(createForm.value)\"\n      [disabled]=\"createForm.invalid || !canCreateUser()\">\n      @if (isCreatingUser()) {\n        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n      }\n      <i class=\"bi bi-person-plus me-1\"></i>Create User\n    </button>\n  </div>\n</ng-template>\n\n<!-- Edit User Modal -->\n<ng-template #editUserModal let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">\n      <i class=\"bi bi-pencil me-2\"></i>Edit User\n    </h4>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    @if (hasSelectedUser()) {\n      <form #editForm=\"ngForm\" id=\"editUserForm\" (ngSubmit)=\"updateUser(selectedUser()!.id!, editForm.value)\">\n        <div class=\"row g-3\">\n          <div class=\"col-md-6\">\n            <label for=\"editUsername\" class=\"form-label\">Username</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"editUsername\"\n              name=\"username\"\n              [ngModel]=\"selectedUser()!.username\"\n              required\n              #editUsernameField=\"ngModel\">\n            @if (editUsernameField.invalid && editUsernameField.touched) {\n              <div class=\"text-danger small\">Username is required</div>\n            }\n          </div>\n          <div class=\"col-md-6\">\n            <label for=\"editEmail\" class=\"form-label\">Email</label>\n            <input\n              type=\"email\"\n              class=\"form-control\"\n              id=\"editEmail\"\n              name=\"email\"\n              [ngModel]=\"selectedUser()!.email\"\n              required\n              email\n              #editEmailField=\"ngModel\">\n            @if (editEmailField.invalid && editEmailField.touched) {\n              <div class=\"text-danger small\">Valid email is required</div>\n            }\n          </div>\n        </div>\n        <div class=\"row g-3 mt-1\">\n          <div class=\"col-md-6\">\n            <label for=\"editFirstName\" class=\"form-label\">First Name</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"editFirstName\"\n              name=\"firstName\"\n              [ngModel]=\"selectedUser()!.firstName\"\n              required\n              #editFirstNameField=\"ngModel\">\n            @if (editFirstNameField.invalid && editFirstNameField.touched) {\n              <div class=\"text-danger small\">First name is required</div>\n            }\n          </div>\n          <div class=\"col-md-6\">\n            <label for=\"editLastName\" class=\"form-label\">Last Name</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"editLastName\"\n              name=\"lastName\"\n              [ngModel]=\"selectedUser()!.lastName\"\n              required\n              #editLastNameField=\"ngModel\">\n            @if (editLastNameField.invalid && editLastNameField.touched) {\n              <div class=\"text-danger small\">Last name is required</div>\n            }\n          </div>\n        </div>\n        <div class=\"row g-3 mt-1\">\n          <div class=\"col-md-6\">\n            <div class=\"form-check\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"editIsStaff\"\n                name=\"isStaff\"\n                [ngModel]=\"selectedUser()!.isStaff\">\n              <label class=\"form-check-label\" for=\"editIsStaff\">\n                Staff privileges\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"form-check\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"editIsActive\"\n                name=\"isActive\"\n                [ngModel]=\"selectedUser()!.isActive\">\n              <label class=\"form-check-label\" for=\"editIsActive\">\n                Active account\n              </label>\n            </div>\n          </div>\n        </div>\n      </form>\n    }\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"modal.dismiss()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    @if (hasSelectedUser()) {\n      <button\n        type=\"submit\"\n        class=\"btn btn-primary\"\n        form=\"editUserForm\"\n        [disabled]=\"!canUpdateUser()\">\n        @if (isUpdatingUser()) {\n          <span class=\"spinner-border spinner-border-sm me-2\"></span>\n        }\n        <i class=\"bi bi-check-circle me-1\"></i>Update User\n      </button>\n    }\n  </div>\n</ng-template>\n\n<!-- Password Reset Modal -->\n<ng-template #passwordResetModal let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">\n      <i class=\"bi bi-shield-lock me-2\"></i>Reset Password\n    </h4>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    @if (hasSelectedUser()) {\n      <div class=\"alert alert-warning\">\n        <i class=\"bi bi-exclamation-triangle me-2\"></i>\n        You are about to reset the password for user <strong>{{ selectedUserDisplayName() }}</strong>.\n      </div>\n      \n      <form #resetForm=\"ngForm\" id=\"resetPasswordForm\" (ngSubmit)=\"resetUserPassword(selectedUser()!.id!, resetForm.value)\">\n        <div class=\"mb-3\">\n          <label for=\"resetNewPassword\" class=\"form-label\">New Password</label>\n          <input\n            type=\"password\"\n            class=\"form-control\"\n            id=\"resetNewPassword\"\n            name=\"new_password\"\n            ngModel\n            required\n            minlength=\"8\"\n            #resetPasswordField=\"ngModel\">\n          @if (resetPasswordField.invalid && resetPasswordField.touched) {\n            <div class=\"text-danger small\">Password must be at least 8 characters</div>\n          }\n        </div>\n        <div class=\"mb-3\">\n          <label for=\"resetConfirmPassword\" class=\"form-label\">Confirm Password</label>\n          <input\n            type=\"password\"\n            class=\"form-control\"\n            id=\"resetConfirmPassword\"\n            name=\"confirm_password\"\n            ngModel\n            required\n            #resetConfirmField=\"ngModel\">\n          @if (resetConfirmField.invalid && resetConfirmField.touched) {\n            <div class=\"text-danger small\">Password confirmation is required</div>\n          }\n        </div>\n        <div class=\"mb-3\">\n          <div class=\"form-check\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"forcePasswordChange\"\n              name=\"force_password_change\"\n              ngModel>\n            <label class=\"form-check-label\" for=\"forcePasswordChange\">\n              Force user to change password on next login\n            </label>\n          </div>\n        </div>\n        <div class=\"mb-3\">\n          <label for=\"resetReason\" class=\"form-label\">Reason (optional)</label>\n          <textarea\n            class=\"form-control\"\n            id=\"resetReason\"\n            name=\"reason\"\n            ngModel\n            rows=\"2\"\n            placeholder=\"Optional reason for password reset\"></textarea>\n        </div>\n      </form>\n    }\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"modal.dismiss()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    @if (hasSelectedUser()) {\n      <button\n        type=\"submit\"\n        class=\"btn btn-warning\"\n        form=\"resetPasswordForm\"\n        [disabled]=\"!canResetPassword()\">\n        @if (isResettingPassword()) {\n          <span class=\"spinner-border spinner-border-sm me-2\"></span>\n        }\n        <i class=\"bi bi-shield-lock me-1\"></i>Reset Password\n      </button>\n    }\n  </div>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { 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]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgbModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserManagementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-management', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, NgbModule], template: "<div class=\"user-management-container\">\n  <!-- Header Section -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <h4 class=\"mb-0\">\n            <i class=\"bi bi-people-fill me-2 text-primary\"></i>User Management\n          </h4>\n          <span class=\"badge bg-primary ms-3\">{{ totalUsers() }} users</span>\n        </div>\n\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-primary btn-sm\"\n            (click)=\"openCreateUserModal(createUserModal)\"\n            [disabled]=\"isLoading()\">\n            <i class=\"bi bi-person-plus me-1\"></i>Create User\n          </button>\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"users-content p-4\">\n    <!-- Search and Filters Section -->\n    <div class=\"card mb-4\">\n      <div class=\"card-header\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-search me-2\"></i>Search & Filters\n        </h5>\n      </div>\n      <div class=\"card-body\">\n        <form [formGroup]=\"searchForm\" class=\"row g-3\">\n          <div class=\"col-md-4\">\n            <label for=\"search\" class=\"form-label\">Search</label>\n            <div class=\"input-group\">\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-search\"></i>\n              </span>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"search\"\n                formControlName=\"search\"\n                placeholder=\"Search by username, email, or name\">\n            </div>\n          </div>\n\n          <div class=\"col-md-4\">\n            <label for=\"isStaff\" class=\"form-label\">Staff Status</label>\n            <select class=\"form-select\" id=\"isStaff\" formControlName=\"isStaff\">\n              <option value=\"\">All Users</option>\n              <option value=\"true\">Staff Only</option>\n              <option value=\"false\">Regular Users</option>\n            </select>\n          </div>\n\n          <div class=\"col-md-4\">\n            <label for=\"isActive\" class=\"form-label\">Account Status</label>\n            <select class=\"form-select\" id=\"isActive\" formControlName=\"isActive\">\n              <option value=\"\">All Accounts</option>\n              <option value=\"true\">Active Only</option>\n              <option value=\"false\">Inactive Only</option>\n            </select>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- Success/Error Messages -->\n    @if (successMessage()) {\n      <div class=\"alert alert-success alert-dismissible\">\n        <i class=\"bi bi-check-circle me-2\"></i>{{ successMessage() }}\n        <button type=\"button\" class=\"btn-close\" (click)=\"clearMessages()\"></button>\n      </div>\n    }\n\n    @if (errorMessage()) {\n      <div class=\"alert alert-danger alert-dismissible\">\n        <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ errorMessage() }}\n        <button type=\"button\" class=\"btn-close\" (click)=\"clearMessages()\"></button>\n      </div>\n    }\n\n    <!-- Users Table -->\n    <div class=\"card\">\n      <div class=\"card-header d-flex justify-content-between align-items-center\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-table me-2\"></i>Users\n          <span class=\"badge bg-primary ms-2\">{{ users().length }}</span>\n        </h5>\n        @if (isLoading()) {\n          <div class=\"spinner-border spinner-border-sm text-primary\">\n            <span class=\"visually-hidden\">Loading...</span>\n          </div>\n        }\n      </div>\n      <div class=\"card-body p-0\">\n        @if (hasResults()) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-hover mb-0\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th>User</th>\n                  <th>Contact</th>\n                  <th>Status</th>\n                  <th>Joined</th>\n                  <th>Last Login</th>\n                  <th class=\"text-end\">Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (user of users(); track user.id) {\n                  <tr>\n                    <td>\n                      <div class=\"d-flex align-items-center\">\n                        <div>\n                          <div class=\"fw-semibold\">{{ getUserDisplayName(user) }}</div>\n                          <small class=\"text-muted\">@{{ user.username }}</small>\n                        </div>\n                      </div>\n                    </td>\n                    <td>\n                      <div>{{ user.email }}</div>\n                    </td>\n                    <td>\n                      <div class=\"d-flex gap-1 flex-wrap\">\n                        @if (user.isActive) {\n                          <span class=\"badge bg-success\">Active</span>\n                        } @else {\n                          <span class=\"badge bg-danger\">Inactive</span>\n                        }\n                        @if (user.isStaff) {\n                          <span class=\"badge bg-warning\">Staff</span>\n                        }\n                      </div>\n                    </td>\n                    <td>{{ formatDate(user.dateJoined) }}</td>\n                    <td>{{ formatDate(user.lastLogin) }}</td>\n                    <td class=\"text-end\">\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-outline-primary\"\n                          (click)=\"openEditUserModal(editUserModal, user)\"\n                          title=\"Edit user\">\n                          <i class=\"bi bi-pencil\"></i>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-outline-warning\"\n                          (click)=\"openPasswordResetModal(passwordResetModal, user)\"\n                          title=\"Reset password\">\n                          <i class=\"bi bi-shield-lock\"></i>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"btn\"\n                          [class]=\"user.isActive ? 'btn-outline-secondary' : 'btn-outline-success'\"\n                          (click)=\"toggleUserStatus(user)\"\n                          [title]=\"user.isActive ? 'Deactivate user' : 'Activate user'\">\n                          <i class=\"bi\" [class]=\"user.isActive ? 'bi-person-dash' : 'bi-person-check'\"></i>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"btn\"\n                          [class]=\"user.isStaff ? 'btn-outline-secondary' : 'btn-outline-info'\"\n                          (click)=\"toggleStaffStatus(user)\"\n                          [title]=\"user.isStaff ? 'Remove staff privileges' : 'Grant staff privileges'\">\n                          <i class=\"bi\" [class]=\"user.isStaff ? 'bi-person-x' : 'bi-person-badge'\"></i>\n                        </button>\n                        <button\n                          type=\"button\"\n                          class=\"btn btn-outline-danger\"\n                          (click)=\"deleteUser(user)\"\n                          title=\"Delete user\">\n                          <i class=\"bi bi-trash\"></i>\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n\n          <!-- Pagination -->\n          @if (totalPages() > 1) {\n            <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n              <div class=\"text-muted\">\n                Showing {{ showingFrom() }} to {{ showingTo() }} of {{ totalUsers() }} users\n              </div>\n              <nav>\n                <ul class=\"pagination pagination-sm mb-0\">\n                  <li class=\"page-item\" [class.disabled]=\"!canGoToPreviousPage()\">\n                    <button class=\"page-link\" (click)=\"onPageChange(currentPage() - 1)\" [disabled]=\"!canGoToPreviousPage()\">\n                      <i class=\"bi bi-chevron-left\"></i>\n                    </button>\n                  </li>\n                  @for (page of pages(); track page) {\n                    <li class=\"page-item\" [class.active]=\"page === currentPage()\">\n                      <button class=\"page-link\" (click)=\"onPageChange(page)\">{{ page }}</button>\n                    </li>\n                  }\n                  <li class=\"page-item\" [class.disabled]=\"!canGoToNextPage()\">\n                    <button class=\"page-link\" (click)=\"onPageChange(currentPage() + 1)\" [disabled]=\"!canGoToNextPage()\">\n                      <i class=\"bi bi-chevron-right\"></i>\n                    </button>\n                  </li>\n                </ul>\n              </nav>\n            </div>\n          }\n        } @else {\n          <div class=\"text-center p-4\">\n            <i class=\"bi bi-people display-4 text-muted\"></i>\n            <p class=\"text-muted mt-2\">No users found</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Create User Modal -->\n<ng-template #createUserModal let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">\n      <i class=\"bi bi-person-plus me-2\"></i>Create User\n    </h4>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <form #createForm=\"ngForm\" (ngSubmit)=\"createUser(createForm.value)\">\n      <div class=\"row g-3\">\n        <div class=\"col-md-6\">\n          <label for=\"createUsername\" class=\"form-label\">Username</label>\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"createUsername\"\n            name=\"username\"\n            ngModel\n            required\n            #usernameField=\"ngModel\">\n          @if (usernameField.invalid && usernameField.touched) {\n            <div class=\"text-danger small\">Username is required</div>\n          }\n        </div>\n        <div class=\"col-md-6\">\n          <label for=\"createEmail\" class=\"form-label\">Email</label>\n          <input\n            type=\"email\"\n            class=\"form-control\"\n            id=\"createEmail\"\n            name=\"email\"\n            ngModel\n            required\n            email\n            #emailField=\"ngModel\">\n          @if (emailField.invalid && emailField.touched) {\n            <div class=\"text-danger small\">Valid email is required</div>\n          }\n        </div>\n      </div>\n      <div class=\"row g-3 mt-1\">\n        <div class=\"col-md-6\">\n          <label for=\"createFirstName\" class=\"form-label\">First Name</label>\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"createFirstName\"\n            name=\"firstName\"\n            ngModel\n            required\n            #firstNameField=\"ngModel\">\n          @if (firstNameField.invalid && firstNameField.touched) {\n            <div class=\"text-danger small\">First name is required</div>\n          }\n        </div>\n        <div class=\"col-md-6\">\n          <label for=\"createLastName\" class=\"form-label\">Last Name</label>\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"createLastName\"\n            name=\"lastName\"\n            ngModel\n            required\n            #lastNameField=\"ngModel\">\n          @if (lastNameField.invalid && lastNameField.touched) {\n            <div class=\"text-danger small\">Last name is required</div>\n          }\n        </div>\n      </div>\n      <div class=\"row g-3 mt-1\">\n        <div class=\"col-md-6\">\n          <label for=\"createPassword\" class=\"form-label\">Password</label>\n          <input\n            type=\"password\"\n            class=\"form-control\"\n            id=\"createPassword\"\n            name=\"password\"\n            ngModel\n            required\n            minlength=\"8\"\n            #passwordField=\"ngModel\">\n          @if (passwordField.invalid && passwordField.touched) {\n            <div class=\"text-danger small\">Password must be at least 8 characters</div>\n          }\n        </div>\n        <div class=\"col-md-6\">\n          <label for=\"createPasswordConfirm\" class=\"form-label\">Confirm Password</label>\n          <input\n            type=\"password\"\n            class=\"form-control\"\n            id=\"createPasswordConfirm\"\n            name=\"password_confirm\"\n            ngModel\n            required\n            #passwordConfirmField=\"ngModel\">\n          @if (passwordConfirmField.invalid && passwordConfirmField.touched) {\n            <div class=\"text-danger small\">Password confirmation is required</div>\n          }\n        </div>\n      </div>\n      <div class=\"row g-3 mt-1\">\n        <div class=\"col-md-6\">\n          <div class=\"form-check\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"createIsStaff\"\n              name=\"isStaff\"\n              ngModel>\n            <label class=\"form-check-label\" for=\"createIsStaff\">\n              Staff privileges\n            </label>\n          </div>\n        </div>\n        <div class=\"col-md-6\">\n          <div class=\"form-check\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"createIsActive\"\n              name=\"isActive\"\n              ngModel\n              checked>\n            <label class=\"form-check-label\" for=\"createIsActive\">\n              Active account\n            </label>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"modal.dismiss()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"createUser(createForm.value)\"\n      [disabled]=\"createForm.invalid || !canCreateUser()\">\n      @if (isCreatingUser()) {\n        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n      }\n      <i class=\"bi bi-person-plus me-1\"></i>Create User\n    </button>\n  </div>\n</ng-template>\n\n<!-- Edit User Modal -->\n<ng-template #editUserModal let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">\n      <i class=\"bi bi-pencil me-2\"></i>Edit User\n    </h4>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    @if (hasSelectedUser()) {\n      <form #editForm=\"ngForm\" id=\"editUserForm\" (ngSubmit)=\"updateUser(selectedUser()!.id!, editForm.value)\">\n        <div class=\"row g-3\">\n          <div class=\"col-md-6\">\n            <label for=\"editUsername\" class=\"form-label\">Username</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"editUsername\"\n              name=\"username\"\n              [ngModel]=\"selectedUser()!.username\"\n              required\n              #editUsernameField=\"ngModel\">\n            @if (editUsernameField.invalid && editUsernameField.touched) {\n              <div class=\"text-danger small\">Username is required</div>\n            }\n          </div>\n          <div class=\"col-md-6\">\n            <label for=\"editEmail\" class=\"form-label\">Email</label>\n            <input\n              type=\"email\"\n              class=\"form-control\"\n              id=\"editEmail\"\n              name=\"email\"\n              [ngModel]=\"selectedUser()!.email\"\n              required\n              email\n              #editEmailField=\"ngModel\">\n            @if (editEmailField.invalid && editEmailField.touched) {\n              <div class=\"text-danger small\">Valid email is required</div>\n            }\n          </div>\n        </div>\n        <div class=\"row g-3 mt-1\">\n          <div class=\"col-md-6\">\n            <label for=\"editFirstName\" class=\"form-label\">First Name</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"editFirstName\"\n              name=\"firstName\"\n              [ngModel]=\"selectedUser()!.firstName\"\n              required\n              #editFirstNameField=\"ngModel\">\n            @if (editFirstNameField.invalid && editFirstNameField.touched) {\n              <div class=\"text-danger small\">First name is required</div>\n            }\n          </div>\n          <div class=\"col-md-6\">\n            <label for=\"editLastName\" class=\"form-label\">Last Name</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"editLastName\"\n              name=\"lastName\"\n              [ngModel]=\"selectedUser()!.lastName\"\n              required\n              #editLastNameField=\"ngModel\">\n            @if (editLastNameField.invalid && editLastNameField.touched) {\n              <div class=\"text-danger small\">Last name is required</div>\n            }\n          </div>\n        </div>\n        <div class=\"row g-3 mt-1\">\n          <div class=\"col-md-6\">\n            <div class=\"form-check\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"editIsStaff\"\n                name=\"isStaff\"\n                [ngModel]=\"selectedUser()!.isStaff\">\n              <label class=\"form-check-label\" for=\"editIsStaff\">\n                Staff privileges\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"form-check\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"editIsActive\"\n                name=\"isActive\"\n                [ngModel]=\"selectedUser()!.isActive\">\n              <label class=\"form-check-label\" for=\"editIsActive\">\n                Active account\n              </label>\n            </div>\n          </div>\n        </div>\n      </form>\n    }\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"modal.dismiss()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    @if (hasSelectedUser()) {\n      <button\n        type=\"submit\"\n        class=\"btn btn-primary\"\n        form=\"editUserForm\"\n        [disabled]=\"!canUpdateUser()\">\n        @if (isUpdatingUser()) {\n          <span class=\"spinner-border spinner-border-sm me-2\"></span>\n        }\n        <i class=\"bi bi-check-circle me-1\"></i>Update User\n      </button>\n    }\n  </div>\n</ng-template>\n\n<!-- Password Reset Modal -->\n<ng-template #passwordResetModal let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\">\n      <i class=\"bi bi-shield-lock me-2\"></i>Reset Password\n    </h4>\n    <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    @if (hasSelectedUser()) {\n      <div class=\"alert alert-warning\">\n        <i class=\"bi bi-exclamation-triangle me-2\"></i>\n        You are about to reset the password for user <strong>{{ selectedUserDisplayName() }}</strong>.\n      </div>\n      \n      <form #resetForm=\"ngForm\" id=\"resetPasswordForm\" (ngSubmit)=\"resetUserPassword(selectedUser()!.id!, resetForm.value)\">\n        <div class=\"mb-3\">\n          <label for=\"resetNewPassword\" class=\"form-label\">New Password</label>\n          <input\n            type=\"password\"\n            class=\"form-control\"\n            id=\"resetNewPassword\"\n            name=\"new_password\"\n            ngModel\n            required\n            minlength=\"8\"\n            #resetPasswordField=\"ngModel\">\n          @if (resetPasswordField.invalid && resetPasswordField.touched) {\n            <div class=\"text-danger small\">Password must be at least 8 characters</div>\n          }\n        </div>\n        <div class=\"mb-3\">\n          <label for=\"resetConfirmPassword\" class=\"form-label\">Confirm Password</label>\n          <input\n            type=\"password\"\n            class=\"form-control\"\n            id=\"resetConfirmPassword\"\n            name=\"confirm_password\"\n            ngModel\n            required\n            #resetConfirmField=\"ngModel\">\n          @if (resetConfirmField.invalid && resetConfirmField.touched) {\n            <div class=\"text-danger small\">Password confirmation is required</div>\n          }\n        </div>\n        <div class=\"mb-3\">\n          <div class=\"form-check\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"forcePasswordChange\"\n              name=\"force_password_change\"\n              ngModel>\n            <label class=\"form-check-label\" for=\"forcePasswordChange\">\n              Force user to change password on next login\n            </label>\n          </div>\n        </div>\n        <div class=\"mb-3\">\n          <label for=\"resetReason\" class=\"form-label\">Reason (optional)</label>\n          <textarea\n            class=\"form-control\"\n            id=\"resetReason\"\n            name=\"reason\"\n            ngModel\n            rows=\"2\"\n            placeholder=\"Optional reason for password reset\"></textarea>\n        </div>\n      </form>\n    }\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"modal.dismiss()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    @if (hasSelectedUser()) {\n      <button\n        type=\"submit\"\n        class=\"btn btn-warning\"\n        form=\"resetPasswordForm\"\n        [disabled]=\"!canResetPassword()\">\n        @if (isResettingPassword()) {\n          <span class=\"spinner-border spinner-border-sm me-2\"></span>\n        }\n        <i class=\"bi bi-shield-lock me-1\"></i>Reset Password\n      </button>\n    }\n  </div>\n</ng-template>" }]
+        }], ctorParameters: () => [] });
+
+class LabGroupsComponent {
+    // Inject services using modern inject() syntax
+    fb = inject(NonNullableFormBuilder);
+    labGroupService = inject(LabGroupService);
+    modalService = inject(NgbModal);
+    toastService = inject(ToastService);
+    // Forms
+    searchForm;
+    createGroupForm;
+    inviteForm;
+    // Signals for reactive state management
+    searchParams = signal({
+        search: '',
+        limit: 10,
+        offset: 0
+    }, ...(ngDevMode ? [{ debugName: "searchParams" }] : []));
+    // State signals
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    isCreatingGroup = signal(false, ...(ngDevMode ? [{ debugName: "isCreatingGroup" }] : []));
+    isInviting = signal(false, ...(ngDevMode ? [{ debugName: "isInviting" }] : []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    // Data signals
+    labGroupsData = signal({ count: 0, results: [] }, ...(ngDevMode ? [{ debugName: "labGroupsData" }] : []));
+    selectedGroup = signal(null, ...(ngDevMode ? [{ debugName: "selectedGroup" }] : []));
+    groupMembers = signal([], ...(ngDevMode ? [{ debugName: "groupMembers" }] : []));
+    pendingInvitations = signal([], ...(ngDevMode ? [{ debugName: "pendingInvitations" }] : []));
+    // UI state
+    showCreateForm = signal(false, ...(ngDevMode ? [{ debugName: "showCreateForm" }] : []));
+    showInviteForm = signal(false, ...(ngDevMode ? [{ debugName: "showInviteForm" }] : []));
+    selectedGroupForMembers = signal(null, ...(ngDevMode ? [{ debugName: "selectedGroupForMembers" }] : []));
+    // Computed values
+    hasLabGroups = computed(() => this.labGroupsData().results.length > 0, ...(ngDevMode ? [{ debugName: "hasLabGroups" }] : []));
+    showPagination = computed(() => this.labGroupsData().count > this.pageSize(), ...(ngDevMode ? [{ debugName: "showPagination" }] : []));
+    totalPages = computed(() => Math.ceil(this.labGroupsData().count / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    hasSearchValue = computed(() => (this.searchForm?.get('search')?.value || '').trim().length > 0, ...(ngDevMode ? [{ debugName: "hasSearchValue" }] : []));
+    hasGroupMembers = computed(() => this.groupMembers().length > 0, ...(ngDevMode ? [{ debugName: "hasGroupMembers" }] : []));
+    hasPendingInvitations = computed(() => this.pendingInvitations().length > 0, ...(ngDevMode ? [{ debugName: "hasPendingInvitations" }] : []));
+    canInviteToCurrentGroup = computed(() => this.selectedGroupForMembers()?.canInvite || false, ...(ngDevMode ? [{ debugName: "canInviteToCurrentGroup" }] : []));
+    canManageCurrentGroup = computed(() => this.selectedGroupForMembers()?.canManage || false, ...(ngDevMode ? [{ debugName: "canManageCurrentGroup" }] : []));
+    currentGroupName = computed(() => this.selectedGroupForMembers()?.name || '', ...(ngDevMode ? [{ debugName: "currentGroupName" }] : []));
+    groupMembersCount = computed(() => this.groupMembers().length, ...(ngDevMode ? [{ debugName: "groupMembersCount" }] : []));
+    pendingInvitationsCount = computed(() => this.pendingInvitations().length, ...(ngDevMode ? [{ debugName: "pendingInvitationsCount" }] : []));
+    constructor() {
+        this.searchForm = this.fb.group({
+            search: ['']
+        });
+        this.createGroupForm = this.fb.group({
+            name: ['', [Validators.required, Validators.minLength(2)]],
+            description: [''],
+            allowMemberInvites: [true]
+        });
+        this.inviteForm = this.fb.group({
+            invitedEmail: ['', [Validators.required, Validators.email]],
+            message: ['']
+        });
+        // Effect to automatically reload lab groups when search params change
+        effect(() => {
+            const params = this.searchParams();
+            this.loadLabGroupsWithParams(params);
+        }, { allowSignalWrites: true });
+    }
+    ngOnInit() {
+        this.setupSearch();
+        this.loadInitialData();
+    }
+    loadInitialData() {
+        this.searchParams.set({
+            search: '',
+            limit: this.pageSize(),
+            offset: 0
+        });
+    }
+    setupSearch() {
+        this.searchForm.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe(formValue => {
+            this.currentPage.set(1);
+            this.searchParams.set({
+                search: formValue.search?.trim() || '',
+                limit: this.pageSize(),
+                offset: 0
+            });
+        });
+    }
+    loadLabGroupsWithParams(params) {
+        this.isLoading.set(true);
+        this.labGroupService.getLabGroups({
+            search: params.search || undefined,
+            limit: params.limit,
+            offset: params.offset
+        }).subscribe({
+            next: (response) => {
+                this.isLoading.set(false);
+                this.totalItems.set(response.count);
+                this.labGroupsData.set(response);
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                this.labGroupsData.set({ count: 0, results: [] });
+                console.error('Error loading lab groups:', error);
+            }
+        });
+    }
+    onPageChange(page) {
+        this.currentPage.set(page);
+        this.searchParams.update(params => ({
+            ...params,
+            offset: (page - 1) * this.pageSize()
+        }));
+    }
+    toggleCreateForm() {
+        this.showCreateForm.update(show => !show);
+        if (!this.showCreateForm()) {
+            this.createGroupForm.reset({
+                name: '',
+                description: '',
+                allowMemberInvites: true
+            });
+        }
+    }
+    createLabGroup() {
+        if (this.createGroupForm.valid) {
+            this.isCreatingGroup.set(true);
+            const formValue = this.createGroupForm.value;
+            this.labGroupService.createLabGroup(formValue).subscribe({
+                next: (newGroup) => {
+                    this.isCreatingGroup.set(false);
+                    this.toastService.success(`Lab group "${newGroup.name}" created successfully!`);
+                    this.toggleCreateForm();
+                    this.refreshLabGroups();
+                },
+                error: (error) => {
+                    this.isCreatingGroup.set(false);
+                    const errorMsg = error?.error?.detail || error?.message || 'Failed to create lab group. Please try again.';
+                    this.toastService.error(errorMsg);
+                    console.error('Error creating lab group:', error);
+                }
+            });
+        }
+    }
+    viewGroupMembers(group) {
+        this.selectedGroupForMembers.set(group);
+        this.loadGroupMembers(group.id);
+        this.loadPendingInvitations(group.id);
+    }
+    loadGroupMembers(groupId) {
+        this.labGroupService.getLabGroupMembers(groupId).subscribe({
+            next: (members) => {
+                this.groupMembers.set(members);
+            },
+            error: (error) => {
+                this.groupMembers.set([]);
+                console.error('Error loading group members:', error);
+            }
+        });
+    }
+    loadPendingInvitations(groupId) {
+        this.labGroupService.getLabGroupInvitations({
+            labGroup: groupId,
+            status: 'pending'
+        }).subscribe({
+            next: (response) => {
+                this.pendingInvitations.set(response.results);
+            },
+            error: (error) => {
+                this.pendingInvitations.set([]);
+                console.error('Error loading pending invitations:', error);
+            }
+        });
+    }
+    toggleInviteForm() {
+        this.showInviteForm.update(show => !show);
+        if (!this.showInviteForm()) {
+            this.inviteForm.reset();
+        }
+    }
+    inviteMember() {
+        if (this.inviteForm.valid && this.selectedGroupForMembers()) {
+            this.isInviting.set(true);
+            const groupId = this.selectedGroupForMembers().id;
+            const inviteData = {
+                labGroup: groupId,
+                invitedEmail: this.inviteForm.value.invitedEmail,
+                message: this.inviteForm.value.message || undefined
+            };
+            this.labGroupService.inviteUserToLabGroup(groupId, inviteData).subscribe({
+                next: (invitation) => {
+                    this.isInviting.set(false);
+                    this.toastService.success(`Invitation sent to ${invitation.invitedEmail}!`);
+                    this.toggleInviteForm();
+                    this.loadPendingInvitations(groupId);
+                },
+                error: (error) => {
+                    this.isInviting.set(false);
+                    const errorMsg = error?.error?.detail || error?.message || 'Failed to send invitation. Please try again.';
+                    this.toastService.error(errorMsg);
+                    console.error('Error sending invitation:', error);
+                }
+            });
+        }
+    }
+    removeMember(userId) {
+        const group = this.selectedGroupForMembers();
+        if (!group)
+            return;
+        const confirmMessage = `Are you sure you want to remove this member from "${group.name}"?`;
+        if (confirm(confirmMessage)) {
+            this.labGroupService.removeMemberFromLabGroup(group.id, userId).subscribe({
+                next: (response) => {
+                    this.loadGroupMembers(group.id);
+                    this.toastService.success('Member removed successfully!');
+                },
+                error: (error) => {
+                    const errorMsg = error?.error?.detail || error?.message || 'Failed to remove member. Please try again.';
+                    this.toastService.error(errorMsg);
+                    console.error('Error removing member:', error);
+                }
+            });
+        }
+    }
+    cancelInvitation(invitationId) {
+        const confirmMessage = 'Are you sure you want to cancel this invitation?';
+        if (confirm(confirmMessage)) {
+            this.labGroupService.cancelLabGroupInvitation(invitationId).subscribe({
+                next: (response) => {
+                    const group = this.selectedGroupForMembers();
+                    if (group) {
+                        this.loadPendingInvitations(group.id);
+                    }
+                    this.toastService.success('Invitation cancelled successfully!');
+                },
+                error: (error) => {
+                    const errorMsg = error?.error?.detail || error?.message || 'Failed to cancel invitation. Please try again.';
+                    this.toastService.error(errorMsg);
+                    console.error('Error cancelling invitation:', error);
+                }
+            });
+        }
+    }
+    leaveGroup(group) {
+        const confirmMessage = `Are you sure you want to leave "${group.name}"?`;
+        if (confirm(confirmMessage)) {
+            this.labGroupService.leaveLabGroup(group.id).subscribe({
+                next: (response) => {
+                    this.refreshLabGroups();
+                    this.selectedGroupForMembers.set(null);
+                    this.toastService.success(`Successfully left "${group.name}"!`);
+                },
+                error: (error) => {
+                    const errorMsg = error?.error?.detail || error?.message || 'Failed to leave group. Please try again.';
+                    this.toastService.error(errorMsg);
+                    console.error('Error leaving group:', error);
+                }
+            });
+        }
+    }
+    deleteGroup(group) {
+        const confirmMessage = `Are you sure you want to delete the lab group "${group.name}"?\n\nThis action cannot be undone.`;
+        if (confirm(confirmMessage)) {
+            this.labGroupService.deleteLabGroup(group.id).subscribe({
+                next: () => {
+                    this.refreshLabGroups();
+                    this.selectedGroupForMembers.set(null);
+                    this.toastService.success(`Lab group "${group.name}" deleted successfully!`);
+                },
+                error: (error) => {
+                    const errorMsg = error?.error?.detail || error?.message || 'Failed to delete lab group. Please try again.';
+                    this.toastService.error(errorMsg);
+                    console.error('Error deleting group:', error);
+                }
+            });
+        }
+    }
+    refreshLabGroups() {
+        this.searchParams.update(params => ({ ...params }));
+    }
+    closeGroupDetails() {
+        this.selectedGroupForMembers.set(null);
+        this.groupMembers.set([]);
+        this.pendingInvitations.set([]);
+        this.showInviteForm.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabGroupsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LabGroupsComponent, isStandalone: true, selector: "app-lab-groups", ngImport: i0, template: "<div class=\"lab-groups-container\">\n  <!-- Header Section -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <h4 class=\"navbar-brand m-0 fw-bold\">\n            <i class=\"bi bi-people me-2\"></i>Lab Groups\n          </h4>\n        </div>\n        <div class=\"d-flex gap-2\">\n          <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"toggleCreateForm()\">\n            <i class=\"bi bi-plus me-1\"></i>New Lab Group\n          </button>\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"groups-content p-4\">\n    <!-- Create Group Form -->\n    @if (showCreateForm()) {\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <h5 class=\"mb-0\">\n            <i class=\"bi bi-plus-circle me-2\"></i>Create New Lab Group\n          </h5>\n        </div>\n        <div class=\"card-body\">\n          <form [formGroup]=\"createGroupForm\" (ngSubmit)=\"createLabGroup()\" class=\"row g-3\">\n            <div class=\"col-md-6\">\n              <div class=\"form-floating\">\n                <input \n                  type=\"text\" \n                  class=\"form-control\" \n                  id=\"groupName\" \n                  formControlName=\"name\"\n                  [class.is-invalid]=\"createGroupForm.get('name')?.invalid && createGroupForm.get('name')?.touched\"\n                  placeholder=\"Group name\">\n                <label for=\"groupName\">Group Name *</label>\n              </div>\n              @if (createGroupForm.get('name')?.invalid && createGroupForm.get('name')?.touched) {\n                <div class=\"invalid-feedback\">\n                  @if (createGroupForm.get('name')?.errors?.['required']) {\n                    Group name is required\n                  }\n                  @if (createGroupForm.get('name')?.errors?.['minlength']) {\n                    Group name must be at least 2 characters\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"col-md-6\">\n              <div class=\"form-check form-switch mt-3\">\n                <input \n                  class=\"form-check-input\" \n                  type=\"checkbox\" \n                  id=\"allowInvites\" \n                  formControlName=\"allowMemberInvites\">\n                <label class=\"form-check-label\" for=\"allowInvites\">\n                  <i class=\"bi bi-envelope me-1\"></i>Allow members to invite others\n                </label>\n              </div>\n            </div>\n            <div class=\"col-12\">\n              <div class=\"form-floating\">\n                <textarea \n                  class=\"form-control\" \n                  id=\"groupDescription\" \n                  formControlName=\"description\"\n                  style=\"height: 100px\"\n                  placeholder=\"Description\"></textarea>\n                <label for=\"groupDescription\">Description (optional)</label>\n              </div>\n            </div>\n            <div class=\"col-12\">\n              <div class=\"d-flex gap-2\">\n                <button \n                  type=\"submit\" \n                  class=\"btn btn-primary\"\n                  [disabled]=\"createGroupForm.invalid || isCreatingGroup()\">\n                  @if (isCreatingGroup()) {\n                    <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\"></span>\n                  }\n                  Create Group\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"toggleCreateForm()\">\n                  Cancel\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </div>\n    }\n\n    <!-- Search & Filters Section -->\n    <div class=\"card mb-4\">\n      <div class=\"card-header\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-search me-2\"></i>Search & Filters\n        </h5>\n      </div>\n      <div class=\"card-body\">\n        <form [formGroup]=\"searchForm\" class=\"row g-3\">\n          <div class=\"col-md-12\">\n            <div class=\"form-floating\">\n              <input \n                type=\"search\" \n                class=\"form-control\" \n                id=\"groupSearch\" \n                formControlName=\"search\"\n                placeholder=\"Search groups...\">\n              <label for=\"groupSearch\">\n                <i class=\"bi bi-search me-1\"></i>Search Groups\n              </label>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- Groups List -->\n    <div class=\"card\">\n      <div class=\"card-header d-flex justify-content-between align-items-center\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-people me-2\"></i>Lab Groups\n          <span class=\"badge bg-primary ms-2\">{{ labGroupsData().count }}</span>\n        </h5>\n        @if (isLoading()) {\n          <div class=\"spinner-border spinner-border-sm text-primary\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n          </div>\n        }\n      </div>\n      <div class=\"card-body p-0\">\n        @if (hasLabGroups()) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-hover mb-0\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th scope=\"col\"><i class=\"bi bi-tag me-1\"></i>Group Name</th>\n                  <th scope=\"col\"><i class=\"bi bi-person me-1\"></i>Creator</th>\n                  <th scope=\"col\"><i class=\"bi bi-people me-1\"></i>Members</th>\n                  <th scope=\"col\"><i class=\"bi bi-check-circle me-1\"></i>Status</th>\n                  <th scope=\"col\"><i class=\"bi bi-calendar me-1\"></i>Created</th>\n                  <th scope=\"col\" style=\"width: 120px;\"><i class=\"bi bi-gear me-1\"></i>Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (group of labGroupsData().results; track group.id) {\n                  <tr>\n                    <td>\n                      <strong>{{ group.name }}</strong>\n                      @if (group.description) {\n                        <br><small class=\"text-muted\">{{ group.description }}</small>\n                      }\n                    </td>\n                    <td>{{ group.creatorName || 'Unknown' }}</td>\n                    <td>\n                      <span class=\"badge bg-info\">{{ group.memberCount }}</span>\n                    </td>\n                    <td>\n                      @if (group.isActive) {\n                        <span class=\"badge bg-success\">Active</span>\n                      } @else {\n                        <span class=\"badge bg-secondary\">Inactive</span>\n                      }\n                    </td>\n                    <td>\n                      <small>{{ group.createdAt | date:'short' }}</small>\n                    </td>\n                    <td>\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-info\" \n                          (click)=\"viewGroupMembers(group)\"\n                          title=\"View members\">\n                          <i class=\"bi bi-people\"></i>\n                        </button>\n                        @if (group.isMember && !group.isCreator) {\n                          <button \n                            type=\"button\"\n                            class=\"btn btn-outline-warning\" \n                            (click)=\"leaveGroup(group)\"\n                            title=\"Leave group\">\n                            <i class=\"bi bi-box-arrow-right\"></i>\n                          </button>\n                        }\n                        @if (group.canManage) {\n                          <button \n                            type=\"button\"\n                            class=\"btn btn-outline-danger\" \n                            (click)=\"deleteGroup(group)\"\n                            title=\"Delete group\">\n                            <i class=\"bi bi-trash\"></i>\n                          </button>\n                        }\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n\n          <!-- Pagination -->\n          @if (showPagination()) {\n            <div class=\"d-flex justify-content-center mt-3 p-3\">\n              <ngb-pagination\n                [collectionSize]=\"labGroupsData().count\"\n                [page]=\"currentPage()\"\n                [pageSize]=\"pageSize()\"\n                [maxSize]=\"5\"\n                [boundaryLinks]=\"true\"\n                [rotate]=\"true\"\n                (pageChange)=\"onPageChange($event)\"\n                class=\"pagination-sm\">\n              </ngb-pagination>\n            </div>\n          }\n        } @else {\n          <div class=\"text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-people display-1 mb-3\"></i>\n              <h5>No Lab Groups Found</h5>\n              <p>\n                @if (hasSearchValue()) {\n                  Try adjusting your search criteria or create a new lab group.\n                } @else {\n                  Get started by creating your first lab group.\n                }\n              </p>\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"toggleCreateForm()\">\n                <i class=\"bi bi-plus me-1\"></i>Create First Lab Group\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Group Members Modal -->\n@if (selectedGroupForMembers()) {\n  <div class=\"modal-backdrop fade show\"></div>\n  <div class=\"modal fade show d-block\" tabindex=\"-1\">\n    <div class=\"modal-dialog modal-lg\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h5 class=\"modal-title\">\n            <i class=\"bi bi-people me-2\"></i>{{ currentGroupName() }} - Members\n          </h5>\n          <button type=\"button\" class=\"btn-close\" (click)=\"closeGroupDetails()\"></button>\n        </div>\n        <div class=\"modal-body\">\n          <!-- Invite Form -->\n          @if (canInviteToCurrentGroup()) {\n            <div class=\"card mb-4\">\n              <div class=\"card-header d-flex justify-content-between align-items-center\">\n                <h6 class=\"mb-0\">\n                  <i class=\"bi bi-envelope me-2\"></i>Invite Member\n                </h6>\n                <button \n                  type=\"button\"\n                  class=\"btn btn-sm btn-outline-primary\" \n                  (click)=\"toggleInviteForm()\">\n                  @if (showInviteForm()) {\n                    Cancel\n                  } @else {\n                    <i class=\"bi bi-plus me-1\"></i>Invite\n                  }\n                </button>\n              </div>\n              @if (showInviteForm()) {\n                <div class=\"card-body\">\n                  <form [formGroup]=\"inviteForm\" (ngSubmit)=\"inviteMember()\" class=\"row g-3\">\n                    <div class=\"col-md-8\">\n                      <div class=\"form-floating\">\n                        <input \n                          type=\"email\" \n                          class=\"form-control\" \n                          id=\"inviteEmail\" \n                          formControlName=\"invitedEmail\"\n                          [class.is-invalid]=\"inviteForm.get('invitedEmail')?.invalid && inviteForm.get('invitedEmail')?.touched\"\n                          placeholder=\"Email address\">\n                        <label for=\"inviteEmail\">Email Address *</label>\n                      </div>\n                      @if (inviteForm.get('invitedEmail')?.invalid && inviteForm.get('invitedEmail')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          @if (inviteForm.get('invitedEmail')?.errors?.['required']) {\n                            Email is required\n                          }\n                          @if (inviteForm.get('invitedEmail')?.errors?.['email']) {\n                            Please enter a valid email address\n                          }\n                        </div>\n                      }\n                    </div>\n                    <div class=\"col-md-4\">\n                      <button \n                        type=\"submit\" \n                        class=\"btn btn-primary w-100 h-100\"\n                        [disabled]=\"inviteForm.invalid || isInviting()\">\n                        @if (isInviting()) {\n                          <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\"></span>\n                        }\n                        Send Invite\n                      </button>\n                    </div>\n                    <div class=\"col-12\">\n                      <div class=\"form-floating\">\n                        <textarea \n                          class=\"form-control\" \n                          id=\"inviteMessage\" \n                          formControlName=\"message\"\n                          style=\"height: 80px\"\n                          placeholder=\"Message\"></textarea>\n                        <label for=\"inviteMessage\">Message (optional)</label>\n                      </div>\n                    </div>\n                  </form>\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Current Members -->\n          <div class=\"card mb-3\">\n            <div class=\"card-header\">\n              <h6 class=\"mb-0\">\n                <i class=\"bi bi-people me-2\"></i>Current Members ({{ groupMembersCount() }})\n              </h6>\n            </div>\n            <div class=\"card-body p-0\">\n              @if (hasGroupMembers()) {\n                <div class=\"list-group list-group-flush\">\n                  @for (member of groupMembers(); track member.id) {\n                    <div class=\"list-group-item d-flex justify-content-between align-items-center\">\n                      <div>\n                        <strong>{{ member.firstName }} {{ member.lastName }}</strong>\n                        <br>\n                        <small class=\"text-muted\">{{ member.email }}</small>\n                        @if (selectedGroupForMembers() && member.id === selectedGroupForMembers()!.creator) {\n                          <span class=\"badge bg-warning ms-2\">Creator</span>\n                        }\n                      </div>\n                      @if (canManageCurrentGroup() && selectedGroupForMembers() && member.id !== selectedGroupForMembers()!.creator) {\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger btn-sm\" \n                          (click)=\"removeMember(member.id)\"\n                          title=\"Remove member\">\n                          <i class=\"bi bi-person-dash\"></i>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div class=\"text-center py-3 text-muted\">\n                  <i class=\"bi bi-people fs-4 mb-2\"></i>\n                  <div>No members found</div>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Pending Invitations -->\n          @if (hasPendingInvitations()) {\n            <div class=\"card\">\n              <div class=\"card-header\">\n                <h6 class=\"mb-0\">\n                  <i class=\"bi bi-clock me-2\"></i>Pending Invitations ({{ pendingInvitationsCount() }})\n                </h6>\n              </div>\n              <div class=\"card-body p-0\">\n                <div class=\"list-group list-group-flush\">\n                  @for (invitation of pendingInvitations(); track invitation.id) {\n                    <div class=\"list-group-item d-flex justify-content-between align-items-center\">\n                      <div>\n                        <strong>{{ invitation.invitedEmail }}</strong>\n                        <br>\n                        <small class=\"text-muted\">\n                          Invited by {{ invitation.inviterName }} on {{ invitation.createdAt | date:'short' }}\n                        </small>\n                        @if (invitation.message) {\n                          <br>\n                          <small class=\"text-info\">{{ invitation.message }}</small>\n                        }\n                      </div>\n                      @if (canManageCurrentGroup()) {\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger btn-sm\" \n                          (click)=\"cancelInvitation(invitation.id)\"\n                          title=\"Cancel invitation\">\n                          <i class=\"bi bi-x-circle\"></i>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeGroupDetails()\">\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}", styles: [".lab-groups-container .groups-content{max-width:1200px;margin:0 auto}@media (max-width: 768px){.lab-groups-container .groups-content{padding:1rem!important}.lab-groups-container .btn-group{flex-direction:column;width:100%}.lab-groups-container .btn-group .btn{border-radius:.25rem!important;margin-bottom:.25rem}.lab-groups-container .modal-dialog{margin:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "component", type: i2$1.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabGroupsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-lab-groups', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"lab-groups-container\">\n  <!-- Header Section -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <h4 class=\"navbar-brand m-0 fw-bold\">\n            <i class=\"bi bi-people me-2\"></i>Lab Groups\n          </h4>\n        </div>\n        <div class=\"d-flex gap-2\">\n          <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"toggleCreateForm()\">\n            <i class=\"bi bi-plus me-1\"></i>New Lab Group\n          </button>\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"groups-content p-4\">\n    <!-- Create Group Form -->\n    @if (showCreateForm()) {\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <h5 class=\"mb-0\">\n            <i class=\"bi bi-plus-circle me-2\"></i>Create New Lab Group\n          </h5>\n        </div>\n        <div class=\"card-body\">\n          <form [formGroup]=\"createGroupForm\" (ngSubmit)=\"createLabGroup()\" class=\"row g-3\">\n            <div class=\"col-md-6\">\n              <div class=\"form-floating\">\n                <input \n                  type=\"text\" \n                  class=\"form-control\" \n                  id=\"groupName\" \n                  formControlName=\"name\"\n                  [class.is-invalid]=\"createGroupForm.get('name')?.invalid && createGroupForm.get('name')?.touched\"\n                  placeholder=\"Group name\">\n                <label for=\"groupName\">Group Name *</label>\n              </div>\n              @if (createGroupForm.get('name')?.invalid && createGroupForm.get('name')?.touched) {\n                <div class=\"invalid-feedback\">\n                  @if (createGroupForm.get('name')?.errors?.['required']) {\n                    Group name is required\n                  }\n                  @if (createGroupForm.get('name')?.errors?.['minlength']) {\n                    Group name must be at least 2 characters\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"col-md-6\">\n              <div class=\"form-check form-switch mt-3\">\n                <input \n                  class=\"form-check-input\" \n                  type=\"checkbox\" \n                  id=\"allowInvites\" \n                  formControlName=\"allowMemberInvites\">\n                <label class=\"form-check-label\" for=\"allowInvites\">\n                  <i class=\"bi bi-envelope me-1\"></i>Allow members to invite others\n                </label>\n              </div>\n            </div>\n            <div class=\"col-12\">\n              <div class=\"form-floating\">\n                <textarea \n                  class=\"form-control\" \n                  id=\"groupDescription\" \n                  formControlName=\"description\"\n                  style=\"height: 100px\"\n                  placeholder=\"Description\"></textarea>\n                <label for=\"groupDescription\">Description (optional)</label>\n              </div>\n            </div>\n            <div class=\"col-12\">\n              <div class=\"d-flex gap-2\">\n                <button \n                  type=\"submit\" \n                  class=\"btn btn-primary\"\n                  [disabled]=\"createGroupForm.invalid || isCreatingGroup()\">\n                  @if (isCreatingGroup()) {\n                    <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\"></span>\n                  }\n                  Create Group\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"toggleCreateForm()\">\n                  Cancel\n                </button>\n              </div>\n            </div>\n          </form>\n        </div>\n      </div>\n    }\n\n    <!-- Search & Filters Section -->\n    <div class=\"card mb-4\">\n      <div class=\"card-header\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-search me-2\"></i>Search & Filters\n        </h5>\n      </div>\n      <div class=\"card-body\">\n        <form [formGroup]=\"searchForm\" class=\"row g-3\">\n          <div class=\"col-md-12\">\n            <div class=\"form-floating\">\n              <input \n                type=\"search\" \n                class=\"form-control\" \n                id=\"groupSearch\" \n                formControlName=\"search\"\n                placeholder=\"Search groups...\">\n              <label for=\"groupSearch\">\n                <i class=\"bi bi-search me-1\"></i>Search Groups\n              </label>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- Groups List -->\n    <div class=\"card\">\n      <div class=\"card-header d-flex justify-content-between align-items-center\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-people me-2\"></i>Lab Groups\n          <span class=\"badge bg-primary ms-2\">{{ labGroupsData().count }}</span>\n        </h5>\n        @if (isLoading()) {\n          <div class=\"spinner-border spinner-border-sm text-primary\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n          </div>\n        }\n      </div>\n      <div class=\"card-body p-0\">\n        @if (hasLabGroups()) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-hover mb-0\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th scope=\"col\"><i class=\"bi bi-tag me-1\"></i>Group Name</th>\n                  <th scope=\"col\"><i class=\"bi bi-person me-1\"></i>Creator</th>\n                  <th scope=\"col\"><i class=\"bi bi-people me-1\"></i>Members</th>\n                  <th scope=\"col\"><i class=\"bi bi-check-circle me-1\"></i>Status</th>\n                  <th scope=\"col\"><i class=\"bi bi-calendar me-1\"></i>Created</th>\n                  <th scope=\"col\" style=\"width: 120px;\"><i class=\"bi bi-gear me-1\"></i>Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (group of labGroupsData().results; track group.id) {\n                  <tr>\n                    <td>\n                      <strong>{{ group.name }}</strong>\n                      @if (group.description) {\n                        <br><small class=\"text-muted\">{{ group.description }}</small>\n                      }\n                    </td>\n                    <td>{{ group.creatorName || 'Unknown' }}</td>\n                    <td>\n                      <span class=\"badge bg-info\">{{ group.memberCount }}</span>\n                    </td>\n                    <td>\n                      @if (group.isActive) {\n                        <span class=\"badge bg-success\">Active</span>\n                      } @else {\n                        <span class=\"badge bg-secondary\">Inactive</span>\n                      }\n                    </td>\n                    <td>\n                      <small>{{ group.createdAt | date:'short' }}</small>\n                    </td>\n                    <td>\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-info\" \n                          (click)=\"viewGroupMembers(group)\"\n                          title=\"View members\">\n                          <i class=\"bi bi-people\"></i>\n                        </button>\n                        @if (group.isMember && !group.isCreator) {\n                          <button \n                            type=\"button\"\n                            class=\"btn btn-outline-warning\" \n                            (click)=\"leaveGroup(group)\"\n                            title=\"Leave group\">\n                            <i class=\"bi bi-box-arrow-right\"></i>\n                          </button>\n                        }\n                        @if (group.canManage) {\n                          <button \n                            type=\"button\"\n                            class=\"btn btn-outline-danger\" \n                            (click)=\"deleteGroup(group)\"\n                            title=\"Delete group\">\n                            <i class=\"bi bi-trash\"></i>\n                          </button>\n                        }\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n\n          <!-- Pagination -->\n          @if (showPagination()) {\n            <div class=\"d-flex justify-content-center mt-3 p-3\">\n              <ngb-pagination\n                [collectionSize]=\"labGroupsData().count\"\n                [page]=\"currentPage()\"\n                [pageSize]=\"pageSize()\"\n                [maxSize]=\"5\"\n                [boundaryLinks]=\"true\"\n                [rotate]=\"true\"\n                (pageChange)=\"onPageChange($event)\"\n                class=\"pagination-sm\">\n              </ngb-pagination>\n            </div>\n          }\n        } @else {\n          <div class=\"text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-people display-1 mb-3\"></i>\n              <h5>No Lab Groups Found</h5>\n              <p>\n                @if (hasSearchValue()) {\n                  Try adjusting your search criteria or create a new lab group.\n                } @else {\n                  Get started by creating your first lab group.\n                }\n              </p>\n              <button type=\"button\" class=\"btn btn-primary\" (click)=\"toggleCreateForm()\">\n                <i class=\"bi bi-plus me-1\"></i>Create First Lab Group\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Group Members Modal -->\n@if (selectedGroupForMembers()) {\n  <div class=\"modal-backdrop fade show\"></div>\n  <div class=\"modal fade show d-block\" tabindex=\"-1\">\n    <div class=\"modal-dialog modal-lg\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h5 class=\"modal-title\">\n            <i class=\"bi bi-people me-2\"></i>{{ currentGroupName() }} - Members\n          </h5>\n          <button type=\"button\" class=\"btn-close\" (click)=\"closeGroupDetails()\"></button>\n        </div>\n        <div class=\"modal-body\">\n          <!-- Invite Form -->\n          @if (canInviteToCurrentGroup()) {\n            <div class=\"card mb-4\">\n              <div class=\"card-header d-flex justify-content-between align-items-center\">\n                <h6 class=\"mb-0\">\n                  <i class=\"bi bi-envelope me-2\"></i>Invite Member\n                </h6>\n                <button \n                  type=\"button\"\n                  class=\"btn btn-sm btn-outline-primary\" \n                  (click)=\"toggleInviteForm()\">\n                  @if (showInviteForm()) {\n                    Cancel\n                  } @else {\n                    <i class=\"bi bi-plus me-1\"></i>Invite\n                  }\n                </button>\n              </div>\n              @if (showInviteForm()) {\n                <div class=\"card-body\">\n                  <form [formGroup]=\"inviteForm\" (ngSubmit)=\"inviteMember()\" class=\"row g-3\">\n                    <div class=\"col-md-8\">\n                      <div class=\"form-floating\">\n                        <input \n                          type=\"email\" \n                          class=\"form-control\" \n                          id=\"inviteEmail\" \n                          formControlName=\"invitedEmail\"\n                          [class.is-invalid]=\"inviteForm.get('invitedEmail')?.invalid && inviteForm.get('invitedEmail')?.touched\"\n                          placeholder=\"Email address\">\n                        <label for=\"inviteEmail\">Email Address *</label>\n                      </div>\n                      @if (inviteForm.get('invitedEmail')?.invalid && inviteForm.get('invitedEmail')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          @if (inviteForm.get('invitedEmail')?.errors?.['required']) {\n                            Email is required\n                          }\n                          @if (inviteForm.get('invitedEmail')?.errors?.['email']) {\n                            Please enter a valid email address\n                          }\n                        </div>\n                      }\n                    </div>\n                    <div class=\"col-md-4\">\n                      <button \n                        type=\"submit\" \n                        class=\"btn btn-primary w-100 h-100\"\n                        [disabled]=\"inviteForm.invalid || isInviting()\">\n                        @if (isInviting()) {\n                          <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\"></span>\n                        }\n                        Send Invite\n                      </button>\n                    </div>\n                    <div class=\"col-12\">\n                      <div class=\"form-floating\">\n                        <textarea \n                          class=\"form-control\" \n                          id=\"inviteMessage\" \n                          formControlName=\"message\"\n                          style=\"height: 80px\"\n                          placeholder=\"Message\"></textarea>\n                        <label for=\"inviteMessage\">Message (optional)</label>\n                      </div>\n                    </div>\n                  </form>\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Current Members -->\n          <div class=\"card mb-3\">\n            <div class=\"card-header\">\n              <h6 class=\"mb-0\">\n                <i class=\"bi bi-people me-2\"></i>Current Members ({{ groupMembersCount() }})\n              </h6>\n            </div>\n            <div class=\"card-body p-0\">\n              @if (hasGroupMembers()) {\n                <div class=\"list-group list-group-flush\">\n                  @for (member of groupMembers(); track member.id) {\n                    <div class=\"list-group-item d-flex justify-content-between align-items-center\">\n                      <div>\n                        <strong>{{ member.firstName }} {{ member.lastName }}</strong>\n                        <br>\n                        <small class=\"text-muted\">{{ member.email }}</small>\n                        @if (selectedGroupForMembers() && member.id === selectedGroupForMembers()!.creator) {\n                          <span class=\"badge bg-warning ms-2\">Creator</span>\n                        }\n                      </div>\n                      @if (canManageCurrentGroup() && selectedGroupForMembers() && member.id !== selectedGroupForMembers()!.creator) {\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger btn-sm\" \n                          (click)=\"removeMember(member.id)\"\n                          title=\"Remove member\">\n                          <i class=\"bi bi-person-dash\"></i>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div class=\"text-center py-3 text-muted\">\n                  <i class=\"bi bi-people fs-4 mb-2\"></i>\n                  <div>No members found</div>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Pending Invitations -->\n          @if (hasPendingInvitations()) {\n            <div class=\"card\">\n              <div class=\"card-header\">\n                <h6 class=\"mb-0\">\n                  <i class=\"bi bi-clock me-2\"></i>Pending Invitations ({{ pendingInvitationsCount() }})\n                </h6>\n              </div>\n              <div class=\"card-body p-0\">\n                <div class=\"list-group list-group-flush\">\n                  @for (invitation of pendingInvitations(); track invitation.id) {\n                    <div class=\"list-group-item d-flex justify-content-between align-items-center\">\n                      <div>\n                        <strong>{{ invitation.invitedEmail }}</strong>\n                        <br>\n                        <small class=\"text-muted\">\n                          Invited by {{ invitation.inviterName }} on {{ invitation.createdAt | date:'short' }}\n                        </small>\n                        @if (invitation.message) {\n                          <br>\n                          <small class=\"text-info\">{{ invitation.message }}</small>\n                        }\n                      </div>\n                      @if (canManageCurrentGroup()) {\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger btn-sm\" \n                          (click)=\"cancelInvitation(invitation.id)\"\n                          title=\"Cancel invitation\">\n                          <i class=\"bi bi-x-circle\"></i>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeGroupDetails()\">\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}", styles: [".lab-groups-container .groups-content{max-width:1200px;margin:0 auto}@media (max-width: 768px){.lab-groups-container .groups-content{padding:1rem!important}.lab-groups-container .btn-group{flex-direction:column;width:100%}.lab-groups-container .btn-group .btn{border-radius:.25rem!important;margin-bottom:.25rem}.lab-groups-container .modal-dialog{margin:.5rem}}\n"] }]
+        }], ctorParameters: () => [] });
+
+class UserProfileComponent {
+    fb = inject(FormBuilder);
+    userManagementService = inject(UserManagementService);
+    authService = inject(AuthService);
+    // User data
+    currentUser = signal(null, ...(ngDevMode ? [{ debugName: "currentUser" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    // Forms
+    profileForm;
+    passwordForm;
+    emailChangeForm;
+    // UI state
+    activeTab = signal('profile', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    isUpdatingProfile = signal(false, ...(ngDevMode ? [{ debugName: "isUpdatingProfile" }] : []));
+    isChangingPassword = signal(false, ...(ngDevMode ? [{ debugName: "isChangingPassword" }] : []));
+    isChangingEmail = signal(false, ...(ngDevMode ? [{ debugName: "isChangingEmail" }] : []));
+    // Success/error messages
+    profileMessage = signal('', ...(ngDevMode ? [{ debugName: "profileMessage" }] : []));
+    passwordMessage = signal('', ...(ngDevMode ? [{ debugName: "passwordMessage" }] : []));
+    emailMessage = signal('', ...(ngDevMode ? [{ debugName: "emailMessage" }] : []));
+    errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    // Computed signals for derived values
+    fullName = computed(() => {
+        const user = this.currentUser();
+        return user ? `${user.firstName} ${user.lastName}`.trim() : '';
+    }, ...(ngDevMode ? [{ debugName: "fullName" }] : []));
+    isStaff = computed(() => this.currentUser()?.isStaff || false, ...(ngDevMode ? [{ debugName: "isStaff" }] : []));
+    joinDate = computed(() => {
+        const user = this.currentUser();
+        return user?.dateJoined ? new Date(user.dateJoined).toLocaleDateString() : '';
+    }, ...(ngDevMode ? [{ debugName: "joinDate" }] : []));
+    lastLogin = computed(() => {
+        const user = this.currentUser();
+        return user?.lastLogin ? new Date(user.lastLogin).toLocaleDateString() : 'Never';
+    }, ...(ngDevMode ? [{ debugName: "lastLogin" }] : []));
+    constructor() {
+        this.profileForm = this.fb.group({
+            firstName: ['', [Validators.required, Validators.maxLength(30)]],
+            lastName: ['', [Validators.required, Validators.maxLength(30)]],
+            currentPassword: ['', [Validators.required]]
+        });
+        this.passwordForm = this.fb.group({
+            currentPassword: ['', [Validators.required]],
+            newPassword: ['', [Validators.required, Validators.minLength(8)]],
+            confirmPassword: ['', [Validators.required]]
+        }, { validators: this.passwordMatchValidator });
+        this.emailChangeForm = this.fb.group({
+            newEmail: ['', [Validators.required, Validators.email]],
+            currentPassword: ['', [Validators.required]]
+        });
+    }
+    ngOnInit() {
+        this.loadUserProfile();
+    }
+    loadUserProfile() {
+        this.isLoading.set(true);
+        this.userManagementService.getUserProfile().subscribe({
+            next: (response) => {
+                this.currentUser.set(response.user);
+                this.profileForm.patchValue({
+                    firstName: response.user.firstName,
+                    lastName: response.user.lastName
+                });
+                this.isLoading.set(false);
+            },
+            error: (error) => {
+                this.errorMessage.set('Failed to load user profile');
+                this.isLoading.set(false);
+            }
+        });
+    }
+    updateProfile() {
+        if (this.profileForm.valid) {
+            this.isUpdatingProfile.set(true);
+            this.profileMessage.set('');
+            this.errorMessage.set('');
+            const profileData = {
+                firstName: this.profileForm.get('firstName')?.value,
+                lastName: this.profileForm.get('lastName')?.value,
+                currentPassword: this.profileForm.get('currentPassword')?.value
+            };
+            this.userManagementService.updateProfile(profileData).subscribe({
+                next: (response) => {
+                    this.profileMessage.set('Profile updated successfully');
+                    this.currentUser.set(response.user);
+                    this.profileForm.get('currentPassword')?.setValue('');
+                    this.isUpdatingProfile.set(false);
+                },
+                error: (error) => {
+                    this.errorMessage.set(error.error?.message || 'Failed to update profile');
+                    this.isUpdatingProfile.set(false);
+                }
+            });
+        }
+    }
+    changePassword() {
+        if (this.passwordForm.valid) {
+            this.isChangingPassword.set(true);
+            this.passwordMessage.set('');
+            this.errorMessage.set('');
+            const passwordData = {
+                currentPassword: this.passwordForm.get('currentPassword')?.value,
+                newPassword: this.passwordForm.get('newPassword')?.value,
+                confirmPassword: this.passwordForm.get('confirmPassword')?.value
+            };
+            this.userManagementService.changePassword(passwordData).subscribe({
+                next: (response) => {
+                    this.passwordMessage.set('Password changed successfully');
+                    this.passwordForm.reset();
+                    this.isChangingPassword.set(false);
+                },
+                error: (error) => {
+                    this.errorMessage.set(error.error?.message || 'Failed to change password');
+                    this.isChangingPassword.set(false);
+                }
+            });
+        }
+    }
+    requestEmailChange() {
+        if (this.emailChangeForm.valid) {
+            this.isChangingEmail.set(true);
+            this.emailMessage.set('');
+            this.errorMessage.set('');
+            const emailData = {
+                newEmail: this.emailChangeForm.get('newEmail')?.value,
+                currentPassword: this.emailChangeForm.get('currentPassword')?.value
+            };
+            this.userManagementService.requestEmailChange(emailData).subscribe({
+                next: (response) => {
+                    this.emailMessage.set(`Verification email sent to ${response.new_email}. Please check your inbox and follow the instructions.`);
+                    this.emailChangeForm.reset();
+                    this.isChangingEmail.set(false);
+                },
+                error: (error) => {
+                    this.errorMessage.set(error.error?.message || 'Failed to request email change');
+                    this.isChangingEmail.set(false);
+                }
+            });
+        }
+    }
+    setActiveTab(tab) {
+        this.activeTab.set(tab);
+        // Clear messages when switching tabs
+        this.profileMessage.set('');
+        this.passwordMessage.set('');
+        this.emailMessage.set('');
+        this.errorMessage.set('');
+    }
+    passwordMatchValidator(form) {
+        const newPassword = form.get('newPassword');
+        const confirmPassword = form.get('confirmPassword');
+        if (newPassword && confirmPassword && newPassword.value !== confirmPassword.value) {
+            return { passwordMismatch: true };
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: UserProfileComponent, isStandalone: true, selector: "app-user-profile", ngImport: i0, template: "<div class=\"user-profile-container\">\n  <!-- Header Section -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <h4 class=\"mb-0\">\n            <i class=\"bi bi-person-circle me-2 text-primary\"></i>User Profile\n          </h4>\n          @if (isStaff()) {\n            <span class=\"badge bg-warning ms-3\">Staff</span>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"profile-content p-4\">\n    @if (isLoading()) {\n      <div class=\"text-center\">\n        <div class=\"spinner-border text-primary me-2\"></div>\n        <span>Loading profile...</span>\n      </div>\n    } @else {\n      <!-- User Info Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <h5 class=\"mb-0\">\n            <i class=\"bi bi-info-circle me-2\"></i>Account Information\n          </h5>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Full Name:</small>\n              <div class=\"fw-semibold\">{{ fullName() }}</div>\n            </div>\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Username:</small>\n              <div class=\"fw-semibold\">{{ currentUser()?.username }}</div>\n            </div>\n          </div>\n          <div class=\"row mt-3\">\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Email:</small>\n              <div class=\"fw-semibold\">{{ currentUser()?.email }}</div>\n            </div>\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Account Status:</small>\n              <div>\n                @if (currentUser()?.isActive) {\n                  <span class=\"badge bg-success\">Active</span>\n                } @else {\n                  <span class=\"badge bg-danger\">Inactive</span>\n                }\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-3\">\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Member Since:</small>\n              <div class=\"fw-semibold\">{{ joinDate() }}</div>\n            </div>\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Last Login:</small>\n              <div class=\"fw-semibold\">{{ lastLogin() }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Navigation Tabs -->\n      <ul ngbNav #profileNav=\"ngbNav\" [activeId]=\"activeTab()\" (activeIdChange)=\"setActiveTab($event)\" class=\"nav-tabs\">\n        <li [ngbNavItem]=\"'profile'\">\n          <button ngbNavLink (click)=\"setActiveTab('profile')\">\n            <i class=\"bi bi-person me-1\"></i>Profile Settings\n          </button>\n          <ng-template ngbNavContent>\n            <div class=\"mt-4\">\n              <!-- Profile Update Form -->\n              <div class=\"card\">\n                <div class=\"card-header\">\n                  <h6 class=\"mb-0\">\n                    <i class=\"bi bi-pencil-square me-2\"></i>Update Profile Information\n                  </h6>\n                </div>\n                <div class=\"card-body\">\n                  <form [formGroup]=\"profileForm\" (ngSubmit)=\"updateProfile()\">\n                    <div class=\"row g-3\">\n                      <div class=\"col-md-6\">\n                        <label for=\"firstName\" class=\"form-label\">First Name</label>\n                        <input\n                          type=\"text\"\n                          class=\"form-control\"\n                          id=\"firstName\"\n                          formControlName=\"firstName\"\n                          [class.is-invalid]=\"profileForm.get('firstName')?.invalid && profileForm.get('firstName')?.touched\">\n                        @if (profileForm.get('firstName')?.invalid && profileForm.get('firstName')?.touched) {\n                          <div class=\"invalid-feedback\">\n                            First name is required (max 30 characters)\n                          </div>\n                        }\n                      </div>\n                      <div class=\"col-md-6\">\n                        <label for=\"lastName\" class=\"form-label\">Last Name</label>\n                        <input\n                          type=\"text\"\n                          class=\"form-control\"\n                          id=\"lastName\"\n                          formControlName=\"lastName\"\n                          [class.is-invalid]=\"profileForm.get('lastName')?.invalid && profileForm.get('lastName')?.touched\">\n                        @if (profileForm.get('lastName')?.invalid && profileForm.get('lastName')?.touched) {\n                          <div class=\"invalid-feedback\">\n                            Last name is required (max 30 characters)\n                          </div>\n                        }\n                      </div>\n                    </div>\n                    <div class=\"mt-3\">\n                      <label for=\"currentPassword\" class=\"form-label\">Current Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"currentPassword\"\n                        formControlName=\"currentPassword\"\n                        placeholder=\"Enter your current password to confirm changes\"\n                        [class.is-invalid]=\"profileForm.get('currentPassword')?.invalid && profileForm.get('currentPassword')?.touched\">\n                      @if (profileForm.get('currentPassword')?.invalid && profileForm.get('currentPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Current password is required to update profile\n                        </div>\n                      }\n                    </div>\n\n                    @if (profileMessage()) {\n                      <div class=\"alert alert-success mt-3\">\n                        <i class=\"bi bi-check-circle me-2\"></i>{{ profileMessage() }}\n                      </div>\n                    }\n\n                    <div class=\"mt-3\">\n                      <button\n                        type=\"submit\"\n                        class=\"btn btn-primary\"\n                        [disabled]=\"profileForm.invalid || isUpdatingProfile()\">\n                        @if (isUpdatingProfile()) {\n                          <span class=\"spinner-border spinner-border-sm me-2\"></span>\n                        }\n                        <i class=\"bi bi-check-circle me-1\"></i>\n                        Update Profile\n                      </button>\n                    </div>\n                  </form>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </li>\n\n        <li [ngbNavItem]=\"'password'\">\n          <button ngbNavLink (click)=\"setActiveTab('password')\">\n            <i class=\"bi bi-shield-lock me-1\"></i>Change Password\n          </button>\n          <ng-template ngbNavContent>\n            <div class=\"mt-4\">\n              <!-- Password Change Form -->\n              <div class=\"card\">\n                <div class=\"card-header\">\n                  <h6 class=\"mb-0\">\n                    <i class=\"bi bi-shield-lock me-2\"></i>Change Password\n                  </h6>\n                </div>\n                <div class=\"card-body\">\n                  <form [formGroup]=\"passwordForm\" (ngSubmit)=\"changePassword()\">\n                    <div class=\"mb-3\">\n                      <label for=\"currentPasswordChange\" class=\"form-label\">Current Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"currentPasswordChange\"\n                        formControlName=\"currentPassword\"\n                        [class.is-invalid]=\"passwordForm.get('currentPassword')?.invalid && passwordForm.get('currentPassword')?.touched\">\n                      @if (passwordForm.get('currentPassword')?.invalid && passwordForm.get('currentPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Current password is required\n                        </div>\n                      }\n                    </div>\n                    <div class=\"mb-3\">\n                      <label for=\"newPassword\" class=\"form-label\">New Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"newPassword\"\n                        formControlName=\"newPassword\"\n                        [class.is-invalid]=\"passwordForm.get('newPassword')?.invalid && passwordForm.get('newPassword')?.touched\">\n                      @if (passwordForm.get('newPassword')?.invalid && passwordForm.get('newPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Password must be at least 8 characters long\n                        </div>\n                      }\n                    </div>\n                    <div class=\"mb-3\">\n                      <label for=\"confirmPassword\" class=\"form-label\">Confirm New Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"confirmPassword\"\n                        formControlName=\"confirmPassword\"\n                        [class.is-invalid]=\"(passwordForm.get('confirmPassword')?.invalid || passwordForm.hasError('passwordMismatch')) && passwordForm.get('confirmPassword')?.touched\">\n                      @if (passwordForm.get('confirmPassword')?.invalid && passwordForm.get('confirmPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Please confirm your new password\n                        </div>\n                      }\n                      @if (passwordForm.hasError('passwordMismatch') && passwordForm.get('confirmPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Passwords do not match\n                        </div>\n                      }\n                    </div>\n\n                    @if (passwordMessage()) {\n                      <div class=\"alert alert-success\">\n                        <i class=\"bi bi-check-circle me-2\"></i>{{ passwordMessage() }}\n                      </div>\n                    }\n\n                    <button\n                      type=\"submit\"\n                      class=\"btn btn-primary\"\n                      [disabled]=\"passwordForm.invalid || isChangingPassword()\">\n                      @if (isChangingPassword()) {\n                        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n                      }\n                      <i class=\"bi bi-shield-check me-1\"></i>\n                      Change Password\n                    </button>\n                  </form>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </li>\n\n        <li [ngbNavItem]=\"'email'\">\n          <button ngbNavLink (click)=\"setActiveTab('email')\">\n            <i class=\"bi bi-envelope me-1\"></i>Change Email\n          </button>\n          <ng-template ngbNavContent>\n            <div class=\"mt-4\">\n              <!-- Email Change Form -->\n              <div class=\"card\">\n                <div class=\"card-header\">\n                  <h6 class=\"mb-0\">\n                    <i class=\"bi bi-envelope me-2\"></i>Change Email Address\n                  </h6>\n                </div>\n                <div class=\"card-body\">\n                  <div class=\"alert alert-info\">\n                    <i class=\"bi bi-info-circle me-2\"></i>\n                    Changing your email will require verification. You'll receive a confirmation email at your new address.\n                  </div>\n                  \n                  <form [formGroup]=\"emailChangeForm\" (ngSubmit)=\"requestEmailChange()\">\n                    <div class=\"mb-3\">\n                      <label for=\"currentEmail\" class=\"form-label\">Current Email</label>\n                      <input\n                        type=\"email\"\n                        class=\"form-control\"\n                        id=\"currentEmail\"\n                        [value]=\"currentUser()?.email\"\n                        readonly>\n                    </div>\n                    <div class=\"mb-3\">\n                      <label for=\"newEmail\" class=\"form-label\">New Email</label>\n                      <input\n                        type=\"email\"\n                        class=\"form-control\"\n                        id=\"newEmail\"\n                        formControlName=\"newEmail\"\n                        [class.is-invalid]=\"emailChangeForm.get('newEmail')?.invalid && emailChangeForm.get('newEmail')?.touched\">\n                      @if (emailChangeForm.get('newEmail')?.invalid && emailChangeForm.get('newEmail')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Please enter a valid email address\n                        </div>\n                      }\n                    </div>\n                    <div class=\"mb-3\">\n                      <label for=\"passwordEmailChange\" class=\"form-label\">Current Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"passwordEmailChange\"\n                        formControlName=\"currentPassword\"\n                        [class.is-invalid]=\"emailChangeForm.get('currentPassword')?.invalid && emailChangeForm.get('currentPassword')?.touched\">\n                      @if (emailChangeForm.get('currentPassword')?.invalid && emailChangeForm.get('currentPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Current password is required\n                        </div>\n                      }\n                    </div>\n\n                    @if (emailMessage()) {\n                      <div class=\"alert alert-success\">\n                        <i class=\"bi bi-check-circle me-2\"></i>{{ emailMessage() }}\n                      </div>\n                    }\n\n                    <button\n                      type=\"submit\"\n                      class=\"btn btn-primary\"\n                      [disabled]=\"emailChangeForm.invalid || isChangingEmail()\">\n                      @if (isChangingEmail()) {\n                        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n                      }\n                      <i class=\"bi bi-envelope-check me-1\"></i>\n                      Request Email Change\n                    </button>\n                  </form>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </li>\n      </ul>\n\n      <div [ngbNavOutlet]=\"profileNav\" class=\"mt-3\"></div>\n\n      <!-- Error Messages -->\n      @if (errorMessage()) {\n        <div class=\"alert alert-danger mt-3\">\n          <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ errorMessage() }}\n        </div>\n      }\n    }\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2$1.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$1.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$1.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$1.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$1.NgbNavLinkButton, selector: "button[ngbNavLink]" }, { kind: "directive", type: i2$1.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$1.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: UserProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-profile', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"user-profile-container\">\n  <!-- Header Section -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <h4 class=\"mb-0\">\n            <i class=\"bi bi-person-circle me-2 text-primary\"></i>User Profile\n          </h4>\n          @if (isStaff()) {\n            <span class=\"badge bg-warning ms-3\">Staff</span>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"profile-content p-4\">\n    @if (isLoading()) {\n      <div class=\"text-center\">\n        <div class=\"spinner-border text-primary me-2\"></div>\n        <span>Loading profile...</span>\n      </div>\n    } @else {\n      <!-- User Info Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <h5 class=\"mb-0\">\n            <i class=\"bi bi-info-circle me-2\"></i>Account Information\n          </h5>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Full Name:</small>\n              <div class=\"fw-semibold\">{{ fullName() }}</div>\n            </div>\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Username:</small>\n              <div class=\"fw-semibold\">{{ currentUser()?.username }}</div>\n            </div>\n          </div>\n          <div class=\"row mt-3\">\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Email:</small>\n              <div class=\"fw-semibold\">{{ currentUser()?.email }}</div>\n            </div>\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Account Status:</small>\n              <div>\n                @if (currentUser()?.isActive) {\n                  <span class=\"badge bg-success\">Active</span>\n                } @else {\n                  <span class=\"badge bg-danger\">Inactive</span>\n                }\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-3\">\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Member Since:</small>\n              <div class=\"fw-semibold\">{{ joinDate() }}</div>\n            </div>\n            <div class=\"col-md-6\">\n              <small class=\"text-muted\">Last Login:</small>\n              <div class=\"fw-semibold\">{{ lastLogin() }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Navigation Tabs -->\n      <ul ngbNav #profileNav=\"ngbNav\" [activeId]=\"activeTab()\" (activeIdChange)=\"setActiveTab($event)\" class=\"nav-tabs\">\n        <li [ngbNavItem]=\"'profile'\">\n          <button ngbNavLink (click)=\"setActiveTab('profile')\">\n            <i class=\"bi bi-person me-1\"></i>Profile Settings\n          </button>\n          <ng-template ngbNavContent>\n            <div class=\"mt-4\">\n              <!-- Profile Update Form -->\n              <div class=\"card\">\n                <div class=\"card-header\">\n                  <h6 class=\"mb-0\">\n                    <i class=\"bi bi-pencil-square me-2\"></i>Update Profile Information\n                  </h6>\n                </div>\n                <div class=\"card-body\">\n                  <form [formGroup]=\"profileForm\" (ngSubmit)=\"updateProfile()\">\n                    <div class=\"row g-3\">\n                      <div class=\"col-md-6\">\n                        <label for=\"firstName\" class=\"form-label\">First Name</label>\n                        <input\n                          type=\"text\"\n                          class=\"form-control\"\n                          id=\"firstName\"\n                          formControlName=\"firstName\"\n                          [class.is-invalid]=\"profileForm.get('firstName')?.invalid && profileForm.get('firstName')?.touched\">\n                        @if (profileForm.get('firstName')?.invalid && profileForm.get('firstName')?.touched) {\n                          <div class=\"invalid-feedback\">\n                            First name is required (max 30 characters)\n                          </div>\n                        }\n                      </div>\n                      <div class=\"col-md-6\">\n                        <label for=\"lastName\" class=\"form-label\">Last Name</label>\n                        <input\n                          type=\"text\"\n                          class=\"form-control\"\n                          id=\"lastName\"\n                          formControlName=\"lastName\"\n                          [class.is-invalid]=\"profileForm.get('lastName')?.invalid && profileForm.get('lastName')?.touched\">\n                        @if (profileForm.get('lastName')?.invalid && profileForm.get('lastName')?.touched) {\n                          <div class=\"invalid-feedback\">\n                            Last name is required (max 30 characters)\n                          </div>\n                        }\n                      </div>\n                    </div>\n                    <div class=\"mt-3\">\n                      <label for=\"currentPassword\" class=\"form-label\">Current Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"currentPassword\"\n                        formControlName=\"currentPassword\"\n                        placeholder=\"Enter your current password to confirm changes\"\n                        [class.is-invalid]=\"profileForm.get('currentPassword')?.invalid && profileForm.get('currentPassword')?.touched\">\n                      @if (profileForm.get('currentPassword')?.invalid && profileForm.get('currentPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Current password is required to update profile\n                        </div>\n                      }\n                    </div>\n\n                    @if (profileMessage()) {\n                      <div class=\"alert alert-success mt-3\">\n                        <i class=\"bi bi-check-circle me-2\"></i>{{ profileMessage() }}\n                      </div>\n                    }\n\n                    <div class=\"mt-3\">\n                      <button\n                        type=\"submit\"\n                        class=\"btn btn-primary\"\n                        [disabled]=\"profileForm.invalid || isUpdatingProfile()\">\n                        @if (isUpdatingProfile()) {\n                          <span class=\"spinner-border spinner-border-sm me-2\"></span>\n                        }\n                        <i class=\"bi bi-check-circle me-1\"></i>\n                        Update Profile\n                      </button>\n                    </div>\n                  </form>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </li>\n\n        <li [ngbNavItem]=\"'password'\">\n          <button ngbNavLink (click)=\"setActiveTab('password')\">\n            <i class=\"bi bi-shield-lock me-1\"></i>Change Password\n          </button>\n          <ng-template ngbNavContent>\n            <div class=\"mt-4\">\n              <!-- Password Change Form -->\n              <div class=\"card\">\n                <div class=\"card-header\">\n                  <h6 class=\"mb-0\">\n                    <i class=\"bi bi-shield-lock me-2\"></i>Change Password\n                  </h6>\n                </div>\n                <div class=\"card-body\">\n                  <form [formGroup]=\"passwordForm\" (ngSubmit)=\"changePassword()\">\n                    <div class=\"mb-3\">\n                      <label for=\"currentPasswordChange\" class=\"form-label\">Current Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"currentPasswordChange\"\n                        formControlName=\"currentPassword\"\n                        [class.is-invalid]=\"passwordForm.get('currentPassword')?.invalid && passwordForm.get('currentPassword')?.touched\">\n                      @if (passwordForm.get('currentPassword')?.invalid && passwordForm.get('currentPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Current password is required\n                        </div>\n                      }\n                    </div>\n                    <div class=\"mb-3\">\n                      <label for=\"newPassword\" class=\"form-label\">New Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"newPassword\"\n                        formControlName=\"newPassword\"\n                        [class.is-invalid]=\"passwordForm.get('newPassword')?.invalid && passwordForm.get('newPassword')?.touched\">\n                      @if (passwordForm.get('newPassword')?.invalid && passwordForm.get('newPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Password must be at least 8 characters long\n                        </div>\n                      }\n                    </div>\n                    <div class=\"mb-3\">\n                      <label for=\"confirmPassword\" class=\"form-label\">Confirm New Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"confirmPassword\"\n                        formControlName=\"confirmPassword\"\n                        [class.is-invalid]=\"(passwordForm.get('confirmPassword')?.invalid || passwordForm.hasError('passwordMismatch')) && passwordForm.get('confirmPassword')?.touched\">\n                      @if (passwordForm.get('confirmPassword')?.invalid && passwordForm.get('confirmPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Please confirm your new password\n                        </div>\n                      }\n                      @if (passwordForm.hasError('passwordMismatch') && passwordForm.get('confirmPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Passwords do not match\n                        </div>\n                      }\n                    </div>\n\n                    @if (passwordMessage()) {\n                      <div class=\"alert alert-success\">\n                        <i class=\"bi bi-check-circle me-2\"></i>{{ passwordMessage() }}\n                      </div>\n                    }\n\n                    <button\n                      type=\"submit\"\n                      class=\"btn btn-primary\"\n                      [disabled]=\"passwordForm.invalid || isChangingPassword()\">\n                      @if (isChangingPassword()) {\n                        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n                      }\n                      <i class=\"bi bi-shield-check me-1\"></i>\n                      Change Password\n                    </button>\n                  </form>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </li>\n\n        <li [ngbNavItem]=\"'email'\">\n          <button ngbNavLink (click)=\"setActiveTab('email')\">\n            <i class=\"bi bi-envelope me-1\"></i>Change Email\n          </button>\n          <ng-template ngbNavContent>\n            <div class=\"mt-4\">\n              <!-- Email Change Form -->\n              <div class=\"card\">\n                <div class=\"card-header\">\n                  <h6 class=\"mb-0\">\n                    <i class=\"bi bi-envelope me-2\"></i>Change Email Address\n                  </h6>\n                </div>\n                <div class=\"card-body\">\n                  <div class=\"alert alert-info\">\n                    <i class=\"bi bi-info-circle me-2\"></i>\n                    Changing your email will require verification. You'll receive a confirmation email at your new address.\n                  </div>\n                  \n                  <form [formGroup]=\"emailChangeForm\" (ngSubmit)=\"requestEmailChange()\">\n                    <div class=\"mb-3\">\n                      <label for=\"currentEmail\" class=\"form-label\">Current Email</label>\n                      <input\n                        type=\"email\"\n                        class=\"form-control\"\n                        id=\"currentEmail\"\n                        [value]=\"currentUser()?.email\"\n                        readonly>\n                    </div>\n                    <div class=\"mb-3\">\n                      <label for=\"newEmail\" class=\"form-label\">New Email</label>\n                      <input\n                        type=\"email\"\n                        class=\"form-control\"\n                        id=\"newEmail\"\n                        formControlName=\"newEmail\"\n                        [class.is-invalid]=\"emailChangeForm.get('newEmail')?.invalid && emailChangeForm.get('newEmail')?.touched\">\n                      @if (emailChangeForm.get('newEmail')?.invalid && emailChangeForm.get('newEmail')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Please enter a valid email address\n                        </div>\n                      }\n                    </div>\n                    <div class=\"mb-3\">\n                      <label for=\"passwordEmailChange\" class=\"form-label\">Current Password</label>\n                      <input\n                        type=\"password\"\n                        class=\"form-control\"\n                        id=\"passwordEmailChange\"\n                        formControlName=\"currentPassword\"\n                        [class.is-invalid]=\"emailChangeForm.get('currentPassword')?.invalid && emailChangeForm.get('currentPassword')?.touched\">\n                      @if (emailChangeForm.get('currentPassword')?.invalid && emailChangeForm.get('currentPassword')?.touched) {\n                        <div class=\"invalid-feedback\">\n                          Current password is required\n                        </div>\n                      }\n                    </div>\n\n                    @if (emailMessage()) {\n                      <div class=\"alert alert-success\">\n                        <i class=\"bi bi-check-circle me-2\"></i>{{ emailMessage() }}\n                      </div>\n                    }\n\n                    <button\n                      type=\"submit\"\n                      class=\"btn btn-primary\"\n                      [disabled]=\"emailChangeForm.invalid || isChangingEmail()\">\n                      @if (isChangingEmail()) {\n                        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n                      }\n                      <i class=\"bi bi-envelope-check me-1\"></i>\n                      Request Email Change\n                    </button>\n                  </form>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </li>\n      </ul>\n\n      <div [ngbNavOutlet]=\"profileNav\" class=\"mt-3\"></div>\n\n      <!-- Error Messages -->\n      @if (errorMessage()) {\n        <div class=\"alert alert-danger mt-3\">\n          <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ errorMessage() }}\n        </div>\n      }\n    }\n  </div>\n</div>" }]
+        }], ctorParameters: () => [] });
+
+class SiteConfigComponent {
+    fb = inject(FormBuilder);
+    siteConfigService = inject(SiteConfigService);
+    configForm;
+    // Signals for reactive state management
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    success = signal(null, ...(ngDevMode ? [{ debugName: "success" }] : []));
+    selectedLogoFile = signal(null, ...(ngDevMode ? [{ debugName: "selectedLogoFile" }] : []));
+    currentConfig = signal(null, ...(ngDevMode ? [{ debugName: "currentConfig" }] : []));
+    // Computed signal for preview configuration
+    previewConfig = computed(() => {
+        if (!this.currentConfig())
+            return null;
+        return { ...this.currentConfig(), ...this.configForm.value };
+    }, ...(ngDevMode ? [{ debugName: "previewConfig" }] : []));
+    // Preset colors for the color picker
+    presetColors = [
+        '#1976d2', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50',
+        '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722',
+        '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#607d8b'
+    ];
+    constructor() {
+        this.configForm = this.fb.group({
+            siteName: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(255)]],
+            logoUrl: [''],
+            primaryColor: ['#1976d2', [Validators.pattern(/^#[0-9A-Fa-f]{6}$/)]],
+            showPoweredBy: [true],
+            allowUserRegistration: [false],
+            enableOrcidLogin: [false]
+        });
+    }
+    ngOnInit() {
+        // Load current configuration for admin (authenticated endpoint)
+        this.siteConfigService.getCurrentConfig().subscribe({
+            next: (config) => {
+                this.currentConfig.set(config);
+                this.configForm.patchValue(config);
+            },
+            error: (error) => {
+                this.error.set('Failed to load current configuration.');
+            }
+        });
+    }
+    /**
+     * Update site configuration
+     */
+    onSubmit() {
+        if (this.configForm.valid) {
+            this.loading.set(true);
+            this.error.set(null);
+            this.success.set(null);
+            const config = this.configForm.value;
+            this.siteConfigService.updateConfig(config).subscribe({
+                next: (updatedConfig) => {
+                    this.loading.set(false);
+                    this.success.set('Site configuration updated successfully!');
+                    this.currentConfig.set(updatedConfig);
+                    localStorage.setItem('site_config', JSON.stringify(updatedConfig));
+                    setTimeout(() => {
+                        this.success.set(null);
+                    }, 3000);
+                },
+                error: (error) => {
+                    this.loading.set(false);
+                    this.error.set(error.error?.detail || 'Failed to update site configuration.');
+                    setTimeout(() => {
+                        this.error.set(null);
+                    }, 5000);
+                }
+            });
+        }
+    }
+    /**
+     * Reset form to current configuration
+     */
+    resetForm() {
+        if (this.currentConfig()) {
+            this.configForm.patchValue(this.currentConfig());
+        }
+        this.error.set(null);
+        this.success.set(null);
+    }
+    /**
+     * Handle color change from ngx-color picker
+     */
+    onColorChange(event) {
+        const color = event.color?.hex || event.hex || event;
+        if (color && typeof color === 'string') {
+            this.configForm.get('primaryColor')?.setValue(color);
+            this.configForm.get('primaryColor')?.markAsTouched();
+        }
+    }
+    /**
+     * Get a darker version of the given color for gradients
+     */
+    getDarkerColor(hex) {
+        if (!hex || !hex.startsWith('#')) {
+            return '#1565c0'; // Default darker color
+        }
+        // Remove # and convert to RGB
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        // Darken by 20%
+        const factor = 0.8;
+        const darkR = Math.floor(r * factor);
+        const darkG = Math.floor(g * factor);
+        const darkB = Math.floor(b * factor);
+        // Convert back to hex
+        const toHex = (n) => n.toString(16).padStart(2, '0');
+        return `#${toHex(darkR)}${toHex(darkG)}${toHex(darkB)}`;
+    }
+    /**
+     * Get the current primary color value for styling
+     */
+    getCurrentPrimaryColor() {
+        return this.configForm.get('primaryColor')?.value || '#1976d2';
+    }
+    /**
+     * Clear error message
+     */
+    clearError() {
+        this.error.set(null);
+    }
+    /**
+     * Clear success message
+     */
+    clearSuccess() {
+        this.success.set(null);
+    }
+    /**
+     * Handle logo file selection
+     */
+    onLogoFileSelected(event) {
+        const target = event.target;
+        if (target.files && target.files.length > 0) {
+            const file = target.files[0];
+            // Validate file type
+            const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'];
+            if (!allowedTypes.includes(file.type)) {
+                this.error.set('Please select a valid image file (JPEG, PNG, GIF, or SVG).');
+                this.selectedLogoFile.set(null);
+                target.value = '';
+                return;
+            }
+            // Validate file size (max 5MB)
+            const maxSize = 5 * 1024 * 1024; // 5MB
+            if (file.size > maxSize) {
+                this.error.set('Logo file size must be less than 5MB.');
+                this.selectedLogoFile.set(null);
+                target.value = '';
+                return;
+            }
+            this.selectedLogoFile.set(file);
+            this.error.set(null);
+        }
+    }
+    /**
+     * Remove selected logo file
+     */
+    clearLogoFile() {
+        this.selectedLogoFile.set(null);
+        const fileInput = document.querySelector('input[type="file"]');
+        if (fileInput) {
+            fileInput.value = '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SiteConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SiteConfigComponent, isStandalone: true, selector: "app-site-config", ngImport: i0, template: "<div class=\"site-config-container\">\r\n  <!-- Header Section -->\r\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <h4 class=\"navbar-brand m-0 fw-bold\">\r\n            <i class=\"bi bi-gear me-2\"></i>Site Configuration\r\n          </h4>\r\n        </div>\r\n        <div class=\"d-flex gap-2\">\r\n          <button \r\n            type=\"submit\" \r\n            form=\"configForm\"\r\n            class=\"btn btn-primary btn-sm\"\r\n            [disabled]=\"configForm.invalid || loading()\">\r\n            @if (loading()) {\r\n              <span class=\"spinner-border spinner-border-sm me-1\" aria-hidden=\"true\"></span>\r\n            } @else {\r\n              <i class=\"bi bi-check-lg me-1\"></i>\r\n            }\r\n            Save Configuration\r\n          </button>\r\n          \r\n          <button \r\n            type=\"button\" \r\n            class=\"btn btn-outline-secondary btn-sm\"\r\n            (click)=\"resetForm()\"\r\n            [disabled]=\"loading()\">\r\n            <i class=\"bi bi-arrow-clockwise me-1\"></i>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <div class=\"config-content p-4\">\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-8\">\r\n        <!-- Site Branding Card -->\r\n        <div class=\"card mb-4\">\r\n          <div class=\"card-header\">\r\n            <h5 class=\"mb-0\">\r\n              <i class=\"bi bi-brush me-2\"></i>Site Branding\r\n            </h5>\r\n          </div>\r\n        <div class=\"card-body\">\r\n          <!-- Success Alert -->\r\n          @if (success()) {\r\n            <ngb-alert type=\"success\" (closed)=\"clearSuccess()\" [dismissible]=\"true\">\r\n              <i class=\"bi bi-check-circle me-2\"></i>{{ success() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <!-- Error Alert -->\r\n          @if (error()) {\r\n            <ngb-alert type=\"danger\" (closed)=\"clearError()\" [dismissible]=\"true\">\r\n              <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ error() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <form id=\"configForm\" [formGroup]=\"configForm\" (ngSubmit)=\"onSubmit()\">\r\n            <!-- Site Name -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"site_name\" class=\"form-label\">\r\n                <i class=\"bi bi-building me-1\"></i>\r\n                Site Name <span class=\"text-danger\">*</span>\r\n              </label>\r\n              <input \r\n                type=\"text\" \r\n                class=\"form-control\" \r\n                id=\"site_name\"\r\n                formControlName=\"siteName\"\r\n                [class.is-invalid]=\"configForm.get('siteName')?.invalid && configForm.get('siteName')?.touched\"\r\n                placeholder=\"Enter your site name\">\r\n              @if (configForm.get('siteName')?.invalid && configForm.get('siteName')?.touched) {\r\n                <div class=\"invalid-feedback\">\r\n                  @if (configForm.get('siteName')?.errors?.['required']) {\r\n                    <span>Site name is required</span>\r\n                  }\r\n                  @if (configForm.get('siteName')?.errors?.['minlength']) {\r\n                    <span>Site name must be at least 1 character</span>\r\n                  }\r\n                  @if (configForm.get('siteName')?.errors?.['maxlength']) {\r\n                    <span>Site name must be less than 255 characters</span>\r\n                  }\r\n                </div>\r\n              }\r\n              <div class=\"form-text\">\r\n                This will appear in the navigation bar and login page\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Logo URL -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"logo_url\" class=\"form-label\">\r\n                <i class=\"bi bi-image me-1\"></i>\r\n                Logo URL\r\n              </label>\r\n              <input \r\n                type=\"url\" \r\n                class=\"form-control\" \r\n                id=\"logo_url\"\r\n                formControlName=\"logoUrl\"\r\n                placeholder=\"https://example.com/logo.png\">\r\n              <div class=\"form-text\">\r\n                Optional: URL to your organization's logo\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Logo File Upload -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"logo_file\" class=\"form-label\">\r\n                <i class=\"bi bi-upload me-1\"></i>\r\n                Upload Logo File\r\n              </label>\r\n              <input \r\n                type=\"file\" \r\n                class=\"form-control\" \r\n                id=\"logo_file\"\r\n                accept=\"image/*\"\r\n                (change)=\"onLogoFileSelected($event)\">\r\n              <div class=\"form-text\">\r\n                Upload a logo file (overrides logo URL). Supported: JPEG, PNG, GIF, SVG. Max 5MB.\r\n              </div>\r\n              @if (selectedLogoFile()) {\r\n                <div class=\"mt-2\">\r\n                  <div class=\"alert alert-info py-2\">\r\n                    <i class=\"bi bi-file-image me-1\"></i>\r\n                    Selected: {{ selectedLogoFile()?.name }}\r\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-danger ms-2\" (click)=\"clearLogoFile()\">\r\n                      <i class=\"bi bi-x\"></i>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Primary Color -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"primary_color\" class=\"form-label\">\r\n                <i class=\"bi bi-palette me-1\"></i>\r\n                Primary Color\r\n              </label>\r\n              <div class=\"color-picker-wrapper\">\r\n                <color-sketch\r\n                  [color]=\"configForm.get('primaryColor')?.value\"\r\n                  (onChange)=\"onColorChange($event)\"\r\n                  [presetColors]=\"presetColors\">\r\n                </color-sketch>\r\n              </div>\r\n              @if (configForm.get('primaryColor')?.invalid && configForm.get('primaryColor')?.touched) {\r\n                <div class=\"invalid-feedback\">\r\n                  @if (configForm.get('primaryColor')?.errors?.['pattern']) {\r\n                    <span>Please enter a valid hex color (e.g., #1976d2)</span>\r\n                  }\r\n                </div>\r\n              }\r\n              <div class=\"form-text\">\r\n                Main theme color for navigation and buttons\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Show Powered By -->\r\n            <div class=\"mb-4\">\r\n              <div class=\"form-check\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  id=\"show_powered_by\"\r\n                  formControlName=\"showPoweredBy\">\r\n                <label class=\"form-check-label\" for=\"show_powered_by\">\r\n                  <i class=\"bi bi-lightning-charge me-1\"></i>\r\n                  Show \"Powered by CUPCAKE Vanilla\"\r\n                </label>\r\n              </div>\r\n              <div class=\"form-text\">\r\n                Display a small footer credit (appears on hover in bottom-right corner)\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Authentication Settings Section -->\r\n            <div class=\"mb-4\">\r\n              <h6 class=\"text-muted border-bottom pb-2\">\r\n                <i class=\"bi bi-shield-lock me-2\"></i>Authentication Settings\r\n              </h6>\r\n              \r\n              <!-- Allow User Registration -->\r\n              <div class=\"mb-3\">\r\n                <div class=\"form-check\">\r\n                  <input \r\n                    class=\"form-check-input\" \r\n                    type=\"checkbox\" \r\n                    id=\"allow_user_registration\"\r\n                    formControlName=\"allowUserRegistration\">\r\n                  <label class=\"form-check-label\" for=\"allow_user_registration\">\r\n                    <i class=\"bi bi-person-plus me-1\"></i>\r\n                    Allow Public User Registration\r\n                  </label>\r\n                </div>\r\n                <div class=\"form-text\">\r\n                  When enabled, users can register new accounts without admin approval. \r\n                  The registration API endpoint will be accessible to the public.\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Enable ORCID Login -->\r\n              <div class=\"mb-3\">\r\n                <div class=\"form-check\">\r\n                  <input \r\n                    class=\"form-check-input\" \r\n                    type=\"checkbox\" \r\n                    id=\"enable_orcid_login\"\r\n                    formControlName=\"enableOrcidLogin\">\r\n                  <label class=\"form-check-label\" for=\"enable_orcid_login\">\r\n                    <i class=\"bi bi-person-badge me-1\"></i>\r\n                    Enable ORCID OAuth Login\r\n                  </label>\r\n                </div>\r\n                <div class=\"form-text\">\r\n                  Allow users to log in using their ORCID account. \r\n                  Requires ORCID OAuth configuration in server settings.\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n          </form>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"col-lg-4\">\r\n        <!-- Preview Panel -->\r\n        <div class=\"card mb-4\">\r\n          <div class=\"card-header\">\r\n            <h5 class=\"mb-0\">\r\n              <i class=\"bi bi-eye me-2\"></i>Preview\r\n            </h5>\r\n          </div>\r\n        <div class=\"card-body\">\r\n          <div class=\"preview-navbar mb-3\" \r\n               [style.background]=\"'linear-gradient(135deg, ' + (configForm.get('primaryColor')?.value || '#1976d2') + ' 0%, ' + getDarkerColor(configForm.get('primaryColor')?.value || '#1976d2') + ' 100%)'\">\r\n            <div class=\"preview-nav\">\r\n              <span class=\"preview-brand\">\r\n                @if (configForm.get('logoUrl')?.value) {\r\n                  <img [src]=\"configForm.get('logoUrl')?.value\" alt=\"Logo\" style=\"height: 20px; width: auto;\" class=\"me-2\">\r\n                } @else {\r\n                  <i class=\"bi bi-flask me-2\"></i>\r\n                }\r\n                {{ configForm.get('siteName')?.value || 'Your Site Name' }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n          \r\n          <div class=\"preview-login-card\">\r\n            <h6 class=\"text-center mb-3\">\r\n              @if (configForm.get('logoUrl')?.value) {\r\n                <img [src]=\"configForm.get('logoUrl')?.value\" alt=\"Logo\" style=\"height: 24px; width: auto;\" class=\"me-2\">\r\n              } @else {\r\n                <i class=\"bi bi-flask me-2\"></i>\r\n              }\r\n              {{ configForm.get('siteName')?.value || 'Your Site Name' }}\r\n            </h6>\r\n            @if (configForm.get('enableOrcidLogin')?.value) {\r\n              <div class=\"preview-button mb-2\"\r\n                   [style.background]=\"'linear-gradient(135deg, ' + (configForm.get('primaryColor')?.value || '#1976d2') + ' 0%, ' + getDarkerColor(configForm.get('primaryColor')?.value || '#1976d2') + ' 100%)'\">\r\n                <i class=\"bi bi-person-badge me-2\"></i>\r\n                Login with ORCID\r\n              </div>\r\n            }\r\n            <div class=\"preview-button mb-2\"\r\n                 [style.background]=\"'linear-gradient(135deg, ' + (configForm.get('primaryColor')?.value || '#1976d2') + ' 0%, ' + getDarkerColor(configForm.get('primaryColor')?.value || '#1976d2') + ' 100%)'\">\r\n              <i class=\"bi bi-box-arrow-in-right me-2\"></i>\r\n              Regular Login\r\n            </div>\r\n            @if (configForm.get('allowUserRegistration')?.value) {\r\n              <div class=\"text-center mb-2\">\r\n                <small class=\"text-muted\">\r\n                  <i class=\"bi bi-person-plus me-1\"></i>\r\n                  Don't have an account? <a href=\"#\" class=\"text-decoration-none\">Register here</a>\r\n                </small>\r\n              </div>\r\n            }\r\n            <div class=\"text-center\">\r\n              <small class=\"text-muted\">\r\n                {{ configForm.get('siteName')?.value || 'Your Site Name' }} - Scientific Metadata Management\r\n              </small>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mt-3\">\r\n            <h6 class=\"text-muted\">Authentication Status:</h6>\r\n            <ul class=\"list-unstyled small text-muted mb-0\">\r\n              <li>\r\n                <i class=\"bi bi-check-circle-fill text-success me-1\"></i>\r\n                Regular login: Always enabled\r\n              </li>\r\n              <li>\r\n                @if (configForm.get('enableOrcidLogin')?.value) {\r\n                  <i class=\"bi bi-check-circle-fill text-success me-1\"></i>\r\n                  ORCID login: Enabled\r\n                } @else {\r\n                  <i class=\"bi bi-x-circle-fill text-danger me-1\"></i>\r\n                  ORCID login: Disabled\r\n                }\r\n              </li>\r\n              <li>\r\n                @if (configForm.get('allowUserRegistration')?.value) {\r\n                  <i class=\"bi bi-check-circle-fill text-success me-1\"></i>\r\n                  Public registration: Enabled\r\n                } @else {\r\n                  <i class=\"bi bi-x-circle-fill text-danger me-1\"></i>\r\n                  Public registration: Disabled\r\n                }\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          @if (configForm.get('showPoweredBy')?.value) {\r\n            <div class=\"mt-3\">\r\n              <small class=\"text-muted\">\r\n                <i class=\"bi bi-lightning-charge me-1\"></i>\r\n                Footer: \"Powered by CUPCAKE Vanilla\" will appear on hover\r\n              </small>\r\n            </div>\r\n          }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".color-picker-wrapper ::ng-deep .sketch-picker{background:var(--bs-body-bg)!important;border:1px solid var(--bs-border-color)!important;box-shadow:0 .5rem 1rem #00000026!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-controls .sketch-picker-color-wrap .sketch-picker-active{border:2px solid var(--bs-border-color)!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-fields{background:var(--bs-body-bg)!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-fields .sketch-picker-field input{background:var(--bs-body-bg)!important;border:1px solid var(--bs-border-color)!important;color:var(--bs-body-color)!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-fields .sketch-picker-field input:focus{border-color:var(--bs-primary)!important;box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.25)!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-fields .sketch-picker-field label{color:var(--bs-body-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NgbAlert, selector: "ngb-alert", inputs: ["animation", "dismissible", "type"], outputs: ["closed"], exportAs: ["ngbAlert"] }, { kind: "ngmodule", type: ColorSketchModule }, { kind: "component", type: i2$2.SketchComponent, selector: "color-sketch", inputs: ["disableAlpha", "presetColors", "width"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SiteConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-site-config', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbAlert, ColorSketchModule], template: "<div class=\"site-config-container\">\r\n  <!-- Header Section -->\r\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <h4 class=\"navbar-brand m-0 fw-bold\">\r\n            <i class=\"bi bi-gear me-2\"></i>Site Configuration\r\n          </h4>\r\n        </div>\r\n        <div class=\"d-flex gap-2\">\r\n          <button \r\n            type=\"submit\" \r\n            form=\"configForm\"\r\n            class=\"btn btn-primary btn-sm\"\r\n            [disabled]=\"configForm.invalid || loading()\">\r\n            @if (loading()) {\r\n              <span class=\"spinner-border spinner-border-sm me-1\" aria-hidden=\"true\"></span>\r\n            } @else {\r\n              <i class=\"bi bi-check-lg me-1\"></i>\r\n            }\r\n            Save Configuration\r\n          </button>\r\n          \r\n          <button \r\n            type=\"button\" \r\n            class=\"btn btn-outline-secondary btn-sm\"\r\n            (click)=\"resetForm()\"\r\n            [disabled]=\"loading()\">\r\n            <i class=\"bi bi-arrow-clockwise me-1\"></i>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <div class=\"config-content p-4\">\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-8\">\r\n        <!-- Site Branding Card -->\r\n        <div class=\"card mb-4\">\r\n          <div class=\"card-header\">\r\n            <h5 class=\"mb-0\">\r\n              <i class=\"bi bi-brush me-2\"></i>Site Branding\r\n            </h5>\r\n          </div>\r\n        <div class=\"card-body\">\r\n          <!-- Success Alert -->\r\n          @if (success()) {\r\n            <ngb-alert type=\"success\" (closed)=\"clearSuccess()\" [dismissible]=\"true\">\r\n              <i class=\"bi bi-check-circle me-2\"></i>{{ success() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <!-- Error Alert -->\r\n          @if (error()) {\r\n            <ngb-alert type=\"danger\" (closed)=\"clearError()\" [dismissible]=\"true\">\r\n              <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ error() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <form id=\"configForm\" [formGroup]=\"configForm\" (ngSubmit)=\"onSubmit()\">\r\n            <!-- Site Name -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"site_name\" class=\"form-label\">\r\n                <i class=\"bi bi-building me-1\"></i>\r\n                Site Name <span class=\"text-danger\">*</span>\r\n              </label>\r\n              <input \r\n                type=\"text\" \r\n                class=\"form-control\" \r\n                id=\"site_name\"\r\n                formControlName=\"siteName\"\r\n                [class.is-invalid]=\"configForm.get('siteName')?.invalid && configForm.get('siteName')?.touched\"\r\n                placeholder=\"Enter your site name\">\r\n              @if (configForm.get('siteName')?.invalid && configForm.get('siteName')?.touched) {\r\n                <div class=\"invalid-feedback\">\r\n                  @if (configForm.get('siteName')?.errors?.['required']) {\r\n                    <span>Site name is required</span>\r\n                  }\r\n                  @if (configForm.get('siteName')?.errors?.['minlength']) {\r\n                    <span>Site name must be at least 1 character</span>\r\n                  }\r\n                  @if (configForm.get('siteName')?.errors?.['maxlength']) {\r\n                    <span>Site name must be less than 255 characters</span>\r\n                  }\r\n                </div>\r\n              }\r\n              <div class=\"form-text\">\r\n                This will appear in the navigation bar and login page\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Logo URL -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"logo_url\" class=\"form-label\">\r\n                <i class=\"bi bi-image me-1\"></i>\r\n                Logo URL\r\n              </label>\r\n              <input \r\n                type=\"url\" \r\n                class=\"form-control\" \r\n                id=\"logo_url\"\r\n                formControlName=\"logoUrl\"\r\n                placeholder=\"https://example.com/logo.png\">\r\n              <div class=\"form-text\">\r\n                Optional: URL to your organization's logo\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Logo File Upload -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"logo_file\" class=\"form-label\">\r\n                <i class=\"bi bi-upload me-1\"></i>\r\n                Upload Logo File\r\n              </label>\r\n              <input \r\n                type=\"file\" \r\n                class=\"form-control\" \r\n                id=\"logo_file\"\r\n                accept=\"image/*\"\r\n                (change)=\"onLogoFileSelected($event)\">\r\n              <div class=\"form-text\">\r\n                Upload a logo file (overrides logo URL). Supported: JPEG, PNG, GIF, SVG. Max 5MB.\r\n              </div>\r\n              @if (selectedLogoFile()) {\r\n                <div class=\"mt-2\">\r\n                  <div class=\"alert alert-info py-2\">\r\n                    <i class=\"bi bi-file-image me-1\"></i>\r\n                    Selected: {{ selectedLogoFile()?.name }}\r\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-danger ms-2\" (click)=\"clearLogoFile()\">\r\n                      <i class=\"bi bi-x\"></i>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Primary Color -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"primary_color\" class=\"form-label\">\r\n                <i class=\"bi bi-palette me-1\"></i>\r\n                Primary Color\r\n              </label>\r\n              <div class=\"color-picker-wrapper\">\r\n                <color-sketch\r\n                  [color]=\"configForm.get('primaryColor')?.value\"\r\n                  (onChange)=\"onColorChange($event)\"\r\n                  [presetColors]=\"presetColors\">\r\n                </color-sketch>\r\n              </div>\r\n              @if (configForm.get('primaryColor')?.invalid && configForm.get('primaryColor')?.touched) {\r\n                <div class=\"invalid-feedback\">\r\n                  @if (configForm.get('primaryColor')?.errors?.['pattern']) {\r\n                    <span>Please enter a valid hex color (e.g., #1976d2)</span>\r\n                  }\r\n                </div>\r\n              }\r\n              <div class=\"form-text\">\r\n                Main theme color for navigation and buttons\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Show Powered By -->\r\n            <div class=\"mb-4\">\r\n              <div class=\"form-check\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  id=\"show_powered_by\"\r\n                  formControlName=\"showPoweredBy\">\r\n                <label class=\"form-check-label\" for=\"show_powered_by\">\r\n                  <i class=\"bi bi-lightning-charge me-1\"></i>\r\n                  Show \"Powered by CUPCAKE Vanilla\"\r\n                </label>\r\n              </div>\r\n              <div class=\"form-text\">\r\n                Display a small footer credit (appears on hover in bottom-right corner)\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Authentication Settings Section -->\r\n            <div class=\"mb-4\">\r\n              <h6 class=\"text-muted border-bottom pb-2\">\r\n                <i class=\"bi bi-shield-lock me-2\"></i>Authentication Settings\r\n              </h6>\r\n              \r\n              <!-- Allow User Registration -->\r\n              <div class=\"mb-3\">\r\n                <div class=\"form-check\">\r\n                  <input \r\n                    class=\"form-check-input\" \r\n                    type=\"checkbox\" \r\n                    id=\"allow_user_registration\"\r\n                    formControlName=\"allowUserRegistration\">\r\n                  <label class=\"form-check-label\" for=\"allow_user_registration\">\r\n                    <i class=\"bi bi-person-plus me-1\"></i>\r\n                    Allow Public User Registration\r\n                  </label>\r\n                </div>\r\n                <div class=\"form-text\">\r\n                  When enabled, users can register new accounts without admin approval. \r\n                  The registration API endpoint will be accessible to the public.\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Enable ORCID Login -->\r\n              <div class=\"mb-3\">\r\n                <div class=\"form-check\">\r\n                  <input \r\n                    class=\"form-check-input\" \r\n                    type=\"checkbox\" \r\n                    id=\"enable_orcid_login\"\r\n                    formControlName=\"enableOrcidLogin\">\r\n                  <label class=\"form-check-label\" for=\"enable_orcid_login\">\r\n                    <i class=\"bi bi-person-badge me-1\"></i>\r\n                    Enable ORCID OAuth Login\r\n                  </label>\r\n                </div>\r\n                <div class=\"form-text\">\r\n                  Allow users to log in using their ORCID account. \r\n                  Requires ORCID OAuth configuration in server settings.\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n          </form>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"col-lg-4\">\r\n        <!-- Preview Panel -->\r\n        <div class=\"card mb-4\">\r\n          <div class=\"card-header\">\r\n            <h5 class=\"mb-0\">\r\n              <i class=\"bi bi-eye me-2\"></i>Preview\r\n            </h5>\r\n          </div>\r\n        <div class=\"card-body\">\r\n          <div class=\"preview-navbar mb-3\" \r\n               [style.background]=\"'linear-gradient(135deg, ' + (configForm.get('primaryColor')?.value || '#1976d2') + ' 0%, ' + getDarkerColor(configForm.get('primaryColor')?.value || '#1976d2') + ' 100%)'\">\r\n            <div class=\"preview-nav\">\r\n              <span class=\"preview-brand\">\r\n                @if (configForm.get('logoUrl')?.value) {\r\n                  <img [src]=\"configForm.get('logoUrl')?.value\" alt=\"Logo\" style=\"height: 20px; width: auto;\" class=\"me-2\">\r\n                } @else {\r\n                  <i class=\"bi bi-flask me-2\"></i>\r\n                }\r\n                {{ configForm.get('siteName')?.value || 'Your Site Name' }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n          \r\n          <div class=\"preview-login-card\">\r\n            <h6 class=\"text-center mb-3\">\r\n              @if (configForm.get('logoUrl')?.value) {\r\n                <img [src]=\"configForm.get('logoUrl')?.value\" alt=\"Logo\" style=\"height: 24px; width: auto;\" class=\"me-2\">\r\n              } @else {\r\n                <i class=\"bi bi-flask me-2\"></i>\r\n              }\r\n              {{ configForm.get('siteName')?.value || 'Your Site Name' }}\r\n            </h6>\r\n            @if (configForm.get('enableOrcidLogin')?.value) {\r\n              <div class=\"preview-button mb-2\"\r\n                   [style.background]=\"'linear-gradient(135deg, ' + (configForm.get('primaryColor')?.value || '#1976d2') + ' 0%, ' + getDarkerColor(configForm.get('primaryColor')?.value || '#1976d2') + ' 100%)'\">\r\n                <i class=\"bi bi-person-badge me-2\"></i>\r\n                Login with ORCID\r\n              </div>\r\n            }\r\n            <div class=\"preview-button mb-2\"\r\n                 [style.background]=\"'linear-gradient(135deg, ' + (configForm.get('primaryColor')?.value || '#1976d2') + ' 0%, ' + getDarkerColor(configForm.get('primaryColor')?.value || '#1976d2') + ' 100%)'\">\r\n              <i class=\"bi bi-box-arrow-in-right me-2\"></i>\r\n              Regular Login\r\n            </div>\r\n            @if (configForm.get('allowUserRegistration')?.value) {\r\n              <div class=\"text-center mb-2\">\r\n                <small class=\"text-muted\">\r\n                  <i class=\"bi bi-person-plus me-1\"></i>\r\n                  Don't have an account? <a href=\"#\" class=\"text-decoration-none\">Register here</a>\r\n                </small>\r\n              </div>\r\n            }\r\n            <div class=\"text-center\">\r\n              <small class=\"text-muted\">\r\n                {{ configForm.get('siteName')?.value || 'Your Site Name' }} - Scientific Metadata Management\r\n              </small>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mt-3\">\r\n            <h6 class=\"text-muted\">Authentication Status:</h6>\r\n            <ul class=\"list-unstyled small text-muted mb-0\">\r\n              <li>\r\n                <i class=\"bi bi-check-circle-fill text-success me-1\"></i>\r\n                Regular login: Always enabled\r\n              </li>\r\n              <li>\r\n                @if (configForm.get('enableOrcidLogin')?.value) {\r\n                  <i class=\"bi bi-check-circle-fill text-success me-1\"></i>\r\n                  ORCID login: Enabled\r\n                } @else {\r\n                  <i class=\"bi bi-x-circle-fill text-danger me-1\"></i>\r\n                  ORCID login: Disabled\r\n                }\r\n              </li>\r\n              <li>\r\n                @if (configForm.get('allowUserRegistration')?.value) {\r\n                  <i class=\"bi bi-check-circle-fill text-success me-1\"></i>\r\n                  Public registration: Enabled\r\n                } @else {\r\n                  <i class=\"bi bi-x-circle-fill text-danger me-1\"></i>\r\n                  Public registration: Disabled\r\n                }\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          @if (configForm.get('showPoweredBy')?.value) {\r\n            <div class=\"mt-3\">\r\n              <small class=\"text-muted\">\r\n                <i class=\"bi bi-lightning-charge me-1\"></i>\r\n                Footer: \"Powered by CUPCAKE Vanilla\" will appear on hover\r\n              </small>\r\n            </div>\r\n          }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".color-picker-wrapper ::ng-deep .sketch-picker{background:var(--bs-body-bg)!important;border:1px solid var(--bs-border-color)!important;box-shadow:0 .5rem 1rem #00000026!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-controls .sketch-picker-color-wrap .sketch-picker-active{border:2px solid var(--bs-border-color)!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-fields{background:var(--bs-body-bg)!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-fields .sketch-picker-field input{background:var(--bs-body-bg)!important;border:1px solid var(--bs-border-color)!important;color:var(--bs-body-color)!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-fields .sketch-picker-field input:focus{border-color:var(--bs-primary)!important;box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.25)!important}.color-picker-wrapper ::ng-deep .sketch-picker .sketch-picker-fields .sketch-picker-field label{color:var(--bs-body-color)!important}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ToastContainerComponent {
+    toastService = inject(ToastService);
+    /**
+     * Signal containing all active toast messages
+     */
+    toasts = this.toastService.toasts;
+    /**
+     * Computed signal that maps toast types to their CSS classes
+     */
+    toastClassMap = computed(() => ({
+        success: 'bg-success text-white',
+        error: 'bg-danger text-white',
+        warning: 'bg-warning text-dark',
+        info: 'bg-primary text-white'
+    }), ...(ngDevMode ? [{ debugName: "toastClassMap" }] : []));
+    /**
+     * Computed signal that maps toast types to their Bootstrap icons
+     */
+    toastIconMap = computed(() => ({
+        success: 'bi-check-circle-fill',
+        error: 'bi-exclamation-triangle-fill',
+        warning: 'bi-exclamation-circle-fill',
+        info: 'bi-info-circle-fill'
+    }), ...(ngDevMode ? [{ debugName: "toastIconMap" }] : []));
+    /**
+     * Removes a toast message from the service
+     */
+    remove(toast) {
+        this.toastService.remove(toast.id);
+    }
+    /**
+     * Gets the CSS class for a toast based on its type
+     */
+    getToastClass(type) {
+        const classMap = this.toastClassMap();
+        return classMap[type] || classMap.info;
+    }
+    /**
+     * Gets the Bootstrap icon class for a toast based on its type
+     */
+    getToastIcon(type) {
+        const iconMap = this.toastIconMap();
+        return iconMap[type] || iconMap.info;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ToastContainerComponent, isStandalone: true, selector: "app-toast-container", ngImport: i0, template: "<div class=\"toast-container position-fixed top-0 end-0 p-3\" style=\"z-index: 1055;\">\n  @for (toast of toasts(); track toast.id) {\n    <ngb-toast \n      [class]=\"getToastClass(toast.type)\"\n      [autohide]=\"true\"\n      [delay]=\"toast.duration || 5000\"\n      (hidden)=\"remove(toast)\">\n      <ng-template ngbToastHeader>\n        <i [class]=\"'bi ' + getToastIcon(toast.type) + ' me-2'\" \n           [attr.aria-hidden]=\"true\"></i>\n        <strong class=\"me-auto\">\n          {{ toast.type | titlecase }}\n        </strong>\n      </ng-template>\n      {{ toast.message }}\n    </ngb-toast>\n  } @empty {\n    <!-- No toasts to display -->\n  }\n</div>\n", styles: [".toast-container{max-width:400px}.toast-container .toast{margin-bottom:.5rem;border:none;box-shadow:0 .5rem 1rem #00000026}.toast-container .toast .toast-header{border-bottom:1px solid rgba(255,255,255,.1)}.toast-container .toast .toast-header .btn-close-white{filter:invert(1) grayscale(100%) brightness(200%)}.toast-container .toast .toast-body{font-size:.875rem}[data-bs-theme=dark] .toast-container .toast.bg-warning{color:var(--bs-dark)!important}[data-bs-theme=dark] .toast-container .toast.bg-warning .toast-header{border-bottom-color:#0000001a}[data-bs-theme=dark] .toast-container .toast.bg-warning .toast-header .btn-close{filter:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgbModule }, { kind: "component", type: i2$1.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "directive", type: i2$1.NgbToastHeader, selector: "[ngbToastHeader]" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-toast-container', standalone: true, imports: [CommonModule, NgbModule], template: "<div class=\"toast-container position-fixed top-0 end-0 p-3\" style=\"z-index: 1055;\">\n  @for (toast of toasts(); track toast.id) {\n    <ngb-toast \n      [class]=\"getToastClass(toast.type)\"\n      [autohide]=\"true\"\n      [delay]=\"toast.duration || 5000\"\n      (hidden)=\"remove(toast)\">\n      <ng-template ngbToastHeader>\n        <i [class]=\"'bi ' + getToastIcon(toast.type) + ' me-2'\" \n           [attr.aria-hidden]=\"true\"></i>\n        <strong class=\"me-auto\">\n          {{ toast.type | titlecase }}\n        </strong>\n      </ng-template>\n      {{ toast.message }}\n    </ngb-toast>\n  } @empty {\n    <!-- No toasts to display -->\n  }\n</div>\n", styles: [".toast-container{max-width:400px}.toast-container .toast{margin-bottom:.5rem;border:none;box-shadow:0 .5rem 1rem #00000026}.toast-container .toast .toast-header{border-bottom:1px solid rgba(255,255,255,.1)}.toast-container .toast .toast-header .btn-close-white{filter:invert(1) grayscale(100%) brightness(200%)}.toast-container .toast .toast-body{font-size:.875rem}[data-bs-theme=dark] .toast-container .toast.bg-warning{color:var(--bs-dark)!important}[data-bs-theme=dark] .toast-container .toast.bg-warning .toast-header{border-bottom-color:#0000001a}[data-bs-theme=dark] .toast-container .toast.bg-warning .toast-header .btn-close{filter:none}\n"] }]
+        }] });
+
+// Auth components
+
+class CupcakeCoreModule {
+    static forRoot(config) {
+        return {
+            ngModule: CupcakeCoreModule,
+            providers: [
+                { provide: CUPCAKE_CORE_CONFIG, useValue: config },
+                provideHttpClient(withInterceptors([authInterceptor]))
+            ]
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CupcakeCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: CupcakeCoreModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            HttpClientModule,
+            RouterModule,
+            NgbModule,
+            // Standalone components
+            LoginComponent,
+            RegisterComponent,
+            ToastContainerComponent], exports: [LoginComponent,
+            RegisterComponent,
+            ToastContainerComponent,
+            // Re-export modules that consumers might need
+            CommonModule,
+            ReactiveFormsModule,
+            NgbModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CupcakeCoreModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            HttpClientModule,
+            RouterModule,
+            NgbModule,
+            // Standalone components
+            LoginComponent,
+            RegisterComponent,
+            ToastContainerComponent, 
+            // Re-export modules that consumers might need
+            CommonModule,
+            ReactiveFormsModule,
+            NgbModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CupcakeCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        HttpClientModule,
+                        RouterModule,
+                        NgbModule,
+                        // Standalone components
+                        LoginComponent,
+                        RegisterComponent,
+                        ToastContainerComponent
+                    ],
+                    exports: [
+                        LoginComponent,
+                        RegisterComponent,
+                        ToastContainerComponent,
+                        // Re-export modules that consumers might need
+                        CommonModule,
+                        ReactiveFormsModule,
+                        NgbModule
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of cupcake-core
+ */
+// Models
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApiService, AuthService, BaseApiService, CUPCAKE_CORE_CONFIG, CupcakeCoreModule, InvitationStatus, InvitationStatusLabels, LabGroupService, LabGroupsComponent, LoginComponent, RegisterComponent, ResourceRole, ResourceRoleLabels, ResourceService, ResourceType, ResourceTypeLabels, ResourceVisibility, ResourceVisibilityLabels, SiteConfigComponent, SiteConfigService, ToastContainerComponent, ToastService, UserManagementComponent, UserManagementService, UserProfileComponent, adminGuard, authGuard, authInterceptor };
+//# sourceMappingURL=noatgnu-cupcake-core.mjs.map