@progalaxyelabs/ngx-stonescriptphp-client 1.1.1 → 1.2.0

package/fesm2022/progalaxyelabs-ngx-stonescriptphp-client.mjs

@@ -0,0 +1,1467 @@
+import * as i0 from '@angular/core';
+import { Injectable, Inject, NgModule, Input, Component } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+class ApiResponse {
+    status;
+    data;
+    message;
+    constructor(status, data = {}, message = '') {
+        this.status = status;
+        this.data = data;
+        this.message = message;
+    }
+    onOk(callback) {
+        if (this.status === 'ok') {
+            callback(this.data);
+        }
+        return this;
+    }
+    onNotOk(callback) {
+        if (this.status === 'not ok') {
+            callback(this.message, this.data);
+        }
+        return this;
+    }
+    onError(callback) {
+        if (this.status === 'error') {
+            callback();
+        }
+        return this;
+    }
+    isSuccess() {
+        return this.status === 'ok';
+    }
+    isError() {
+        return this.status === 'error' || this.status === 'not ok';
+    }
+    getData() {
+        return this.data || null;
+    }
+    getError() {
+        return this.message || 'Unknown error';
+    }
+    getStatus() {
+        return this.status;
+    }
+    getMessage() {
+        return this.message;
+    }
+}
+
+class TokenService {
+    accessToken = '';
+    refreshToken = '';
+    lsAccessTokenKey = 'progalaxyapi_access_token';
+    lsRefreshTokenKey = 'progalaxyapi_refresh_token';
+    constructor() { }
+    setTokens(accessToken, refreshToken) {
+        this.accessToken = accessToken;
+        this.refreshToken = refreshToken;
+        localStorage.setItem(this.lsAccessTokenKey, accessToken);
+        localStorage.setItem(this.lsRefreshTokenKey, refreshToken);
+    }
+    setAccessToken(accessToken) {
+        this.accessToken = accessToken;
+        localStorage.setItem(this.lsAccessTokenKey, accessToken);
+    }
+    setRefreshToken(refreshToken) {
+        this.refreshToken = refreshToken;
+        localStorage.setItem(this.lsRefreshTokenKey, refreshToken);
+    }
+    getAccessToken() {
+        if (this.accessToken) {
+            return this.accessToken;
+        }
+        const storedAccessToken = localStorage.getItem(this.lsAccessTokenKey);
+        if (storedAccessToken) {
+            return storedAccessToken;
+        }
+        else {
+            return '';
+        }
+    }
+    getRefreshToken() {
+        if (this.refreshToken) {
+            return this.refreshToken;
+        }
+        const storedRefreshToken = localStorage.getItem(this.lsRefreshTokenKey);
+        if (storedRefreshToken) {
+            return storedRefreshToken;
+        }
+        else {
+            return '';
+        }
+    }
+    clear() {
+        this.accessToken = '';
+        this.refreshToken = '';
+        localStorage.removeItem(this.lsAccessTokenKey);
+        localStorage.removeItem(this.lsRefreshTokenKey);
+    }
+    /**
+     * Check if there is a valid (non-empty) access token
+     * @returns True if access token exists and is not empty
+     */
+    hasValidAccessToken() {
+        const token = this.getAccessToken();
+        return token !== null && token !== '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TokenService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TokenService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @deprecated Use boolean directly. Kept for backward compatibility.
+ */
+var VerifyStatus;
+(function (VerifyStatus) {
+    VerifyStatus["initialized"] = "initialized";
+    VerifyStatus["yes"] = "yes";
+    VerifyStatus["no"] = "no";
+})(VerifyStatus || (VerifyStatus = {}));
+class SigninStatusService {
+    status;
+    constructor() {
+        this.status = new BehaviorSubject(false);
+    }
+    signedOut() {
+        this.status.next(false);
+    }
+    signedIn() {
+        this.status.next(true);
+    }
+    /**
+     * Set signin status
+     * @param isSignedIn - True if user is signed in, false otherwise
+     */
+    setSigninStatus(isSignedIn) {
+        this.status.next(isSignedIn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SigninStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SigninStatusService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SigninStatusService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class MyEnvironmentModel {
+    production = true;
+    /**
+     * Platform code identifier (e.g., 'progalaxy', 'hr', 'admin')
+     * Used for multi-tenant authentication
+     */
+    platformCode = '';
+    /**
+     * Accounts platform URL for centralized authentication
+     * @example 'https://accounts.progalaxyelabs.com'
+     */
+    accountsUrl = '';
+    firebase = {
+        projectId: '',
+        appId: '',
+        databaseURL: '',
+        storageBucket: '',
+        locationId: '',
+        apiKey: '',
+        authDomain: '',
+        messagingSenderId: '',
+        measurementId: ''
+    };
+    apiServer = { host: '' };
+    chatServer = { host: '' };
+    /**
+     * Authentication configuration
+     * @default { mode: 'cookie', refreshEndpoint: '/auth/refresh', useCsrf: true }
+     */
+    auth = {
+        mode: 'cookie',
+        refreshEndpoint: '/auth/refresh',
+        useCsrf: true,
+        refreshTokenCookieName: 'refresh_token',
+        csrfTokenCookieName: 'csrf_token',
+        csrfHeaderName: 'X-CSRF-Token'
+    };
+}
+
+/**
+ * CSRF Token Service
+ *
+ * Manages CSRF tokens for cookie-based authentication.
+ * Reads CSRF token from cookies and provides it for request headers.
+ */
+class CsrfService {
+    /**
+     * Get CSRF token from cookie
+     */
+    getCsrfToken(cookieName = 'csrf_token') {
+        const cookies = document.cookie.split(';');
+        for (const cookie of cookies) {
+            const [name, value] = cookie.trim().split('=');
+            if (name === cookieName) {
+                return decodeURIComponent(value);
+            }
+        }
+        return null;
+    }
+    /**
+     * Check if CSRF token exists
+     */
+    hasCsrfToken(cookieName = 'csrf_token') {
+        return this.getCsrfToken(cookieName) !== null;
+    }
+    /**
+     * Clear CSRF token (for logout)
+     * Note: Client-side deletion is limited for httpOnly cookies
+     */
+    clearCsrfToken(cookieName = 'csrf_token') {
+        // Can only clear non-httpOnly cookies
+        document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CsrfService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CsrfService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CsrfService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ApiConnectionService {
+    tokens;
+    signinStatus;
+    environment;
+    csrf;
+    host = ''; // contains trailing slash
+    accessToken = '';
+    authConfig;
+    constructor(tokens, signinStatus, environment, csrf) {
+        this.tokens = tokens;
+        this.signinStatus = signinStatus;
+        this.environment = environment;
+        this.csrf = csrf;
+        this.host = environment.apiServer.host;
+        // Set default auth config based on mode
+        this.authConfig = {
+            mode: environment.auth?.mode || 'cookie',
+            refreshEndpoint: environment.auth?.refreshEndpoint,
+            useCsrf: environment.auth?.useCsrf,
+            refreshTokenCookieName: environment.auth?.refreshTokenCookieName || 'refresh_token',
+            csrfTokenCookieName: environment.auth?.csrfTokenCookieName || 'csrf_token',
+            csrfHeaderName: environment.auth?.csrfHeaderName || 'X-CSRF-Token'
+        };
+        // Set default refresh endpoint based on mode if not specified
+        if (!this.authConfig.refreshEndpoint) {
+            this.authConfig.refreshEndpoint = this.authConfig.mode === 'cookie'
+                ? '/auth/refresh'
+                : '/user/refresh_access';
+        }
+        // Set default CSRF setting based on mode if not specified
+        if (this.authConfig.useCsrf === undefined) {
+            this.authConfig.useCsrf = this.authConfig.mode === 'cookie';
+        }
+    }
+    async request(url, options, data) {
+        try {
+            if (data !== null) {
+                const body = JSON.stringify(data);
+                if (body) {
+                    options.body = body;
+                }
+                else {
+                    options.body = {};
+                }
+            }
+            const accessTokenIncluded = this.includeAccessToken(options);
+            let response = await fetch(url, options);
+            if ((response.status === 401) && accessTokenIncluded) {
+                response = await this.refreshAccessTokenAndRetry(url, options, response);
+            }
+            if (response.ok) {
+                const json = await (response.json());
+                return (new ApiResponse(json.status, json.data, json.message));
+            }
+            if (response.status === 401) {
+                this.signinStatus.signedOut();
+            }
+            return this.handleError(response);
+        }
+        catch (error) {
+            return this.handleError(error);
+        }
+    }
+    handleError(error) {
+        console.error(`Backend returned code ${error.status}, ` +
+            `full error: `, error);
+        return new ApiResponse('error');
+    }
+    async get(endpoint, queryParamsObj) {
+        const url = this.host + endpoint.replace(/^\/+/, '') + this.buildQueryString(queryParamsObj);
+        const fetchOptions = {
+            mode: 'cors',
+            redirect: 'error'
+        };
+        return this.request(url, fetchOptions, null);
+    }
+    async post(pathWithQueryParams, data) {
+        const url = this.host + pathWithQueryParams.replace(/^\/+/, '');
+        const fetchOptions = {
+            method: 'POST',
+            mode: 'cors',
+            redirect: 'error',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        };
+        return this.request(url, fetchOptions, data);
+    }
+    async put(pathWithQueryParams, data) {
+        const url = this.host + pathWithQueryParams.replace(/^\/+/, '');
+        const fetchOptions = {
+            method: 'PUT',
+            mode: 'cors',
+            redirect: 'error',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        };
+        return this.request(url, fetchOptions, data);
+    }
+    async patch(pathWithQueryParams, data) {
+        const url = this.host + pathWithQueryParams.replace(/^\/+/, '');
+        const fetchOptions = {
+            method: 'PATCH',
+            mode: 'cors',
+            redirect: 'error',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        };
+        return this.request(url, fetchOptions, data);
+    }
+    async delete(endpoint, queryParamsObj) {
+        const url = this.host + endpoint.replace(/^\/+/, '') + this.buildQueryString(queryParamsObj);
+        const fetchOptions = {
+            method: 'DELETE',
+            mode: 'cors',
+            redirect: 'error'
+        };
+        return this.request(url, fetchOptions, null);
+    }
+    // async postFormWithFiles(pathWithQueryParams: string, formData: FormData): Promise<ApiResponse | null> {
+    //     const url = this.host + pathWithQueryParams.replace(/^\/+/, '')
+    //     try {
+    //         const fetchOptions: RequestInit = {
+    //             method: 'POST',
+    //             mode: 'cors',
+    //             redirect: 'error',
+    //             body: formData
+    //         }
+    //         const accessTokenIncluded = this.includeAccessToken(fetchOptions)
+    //         let response: Response = await fetch(url, fetchOptions)
+    //         if ((response.status === 401) && accessTokenIncluded) {
+    //             response = await this.refreshAccessTokenAndRetry(url, fetchOptions, response)
+    //         }
+    //         if (response.ok) {
+    //             return ((await (response.json()) as ApiResponse))
+    //         }
+    //         return this.handleError(response)
+    //     } catch (error) {
+    //         return this.handleError(error)
+    //     }
+    // }
+    includeAccessToken(options) {
+        this.accessToken = this.tokens.getAccessToken();
+        if (!this.accessToken) {
+            return false;
+        }
+        if (!options.headers) {
+            options.headers = {};
+        }
+        options.headers['Authorization'] = 'Bearer ' + this.accessToken;
+        return true;
+    }
+    async refreshAccessTokenAndRetry(url, fetchOptions, response) {
+        const refreshStatusOk = await this.refreshAccessToken();
+        if (!refreshStatusOk) {
+            return response;
+        }
+        fetchOptions.headers['Authorization'] = 'Bearer ' + this.accessToken;
+        response = await fetch(url, fetchOptions);
+        return response;
+    }
+    async refreshAccessToken() {
+        if (this.authConfig.mode === 'none') {
+            return false;
+        }
+        if (this.authConfig.mode === 'cookie') {
+            return await this.refreshAccessTokenCookieMode();
+        }
+        else {
+            return await this.refreshAccessTokenBodyMode();
+        }
+    }
+    /**
+     * Refresh access token using cookie-based auth (StoneScriptPHP v2.1.x default)
+     */
+    async refreshAccessTokenCookieMode() {
+        try {
+            const refreshTokenUrl = this.host + this.authConfig.refreshEndpoint.replace(/^\/+/, '');
+            const headers = {
+                'Content-Type': 'application/json'
+            };
+            // Add CSRF token if enabled
+            if (this.authConfig.useCsrf) {
+                const csrfToken = this.csrf.getCsrfToken(this.authConfig.csrfTokenCookieName);
+                if (!csrfToken) {
+                    console.error('CSRF token not found in cookie');
+                    return false;
+                }
+                headers[this.authConfig.csrfHeaderName] = csrfToken;
+            }
+            let refreshTokenResponse = await fetch(refreshTokenUrl, {
+                method: 'POST',
+                mode: 'cors',
+                credentials: 'include', // Important: send cookies
+                redirect: 'error',
+                headers: headers
+            });
+            if (!refreshTokenResponse.ok) {
+                this.accessToken = '';
+                this.tokens.clear();
+                return false;
+            }
+            let refreshAccessData = await refreshTokenResponse.json();
+            if (!refreshAccessData || refreshAccessData.status !== 'ok') {
+                return false;
+            }
+            // Extract access token from response
+            const newAccessToken = refreshAccessData.data?.access_token || refreshAccessData.access_token;
+            if (!newAccessToken) {
+                console.error('No access token in refresh response');
+                return false;
+            }
+            // Store new access token (refresh token is in httpOnly cookie)
+            this.tokens.setAccessToken(newAccessToken);
+            this.accessToken = newAccessToken;
+            return true;
+        }
+        catch (error) {
+            console.error('Token refresh failed (cookie mode):', error);
+            this.accessToken = '';
+            this.tokens.clear();
+            return false;
+        }
+    }
+    /**
+     * Refresh access token using body-based auth (legacy mode)
+     */
+    async refreshAccessTokenBodyMode() {
+        try {
+            const refreshToken = this.tokens.getRefreshToken();
+            if (!refreshToken) {
+                return false;
+            }
+            const refreshTokenUrl = this.host + this.authConfig.refreshEndpoint.replace(/^\/+/, '');
+            let refreshTokenResponse = await fetch(refreshTokenUrl, {
+                method: 'POST',
+                mode: 'cors',
+                redirect: 'error',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    access_token: this.accessToken,
+                    refresh_token: refreshToken
+                })
+            });
+            if (!refreshTokenResponse.ok) {
+                this.accessToken = '';
+                this.tokens.clear();
+                return false;
+            }
+            let refreshAccessData = await refreshTokenResponse.json();
+            if (!refreshAccessData) {
+                return false;
+            }
+            const newAccessToken = refreshAccessData.data?.access_token || refreshAccessData.access_token;
+            if (!newAccessToken) {
+                console.error('No access token in refresh response');
+                return false;
+            }
+            this.tokens.setTokens(newAccessToken, refreshToken);
+            this.accessToken = newAccessToken;
+            return true;
+        }
+        catch (error) {
+            console.error('Token refresh failed (body mode):', error);
+            this.accessToken = '';
+            this.tokens.clear();
+            return false;
+        }
+    }
+    buildQueryString(options) {
+        if (options === undefined) {
+            return '';
+        }
+        const array = [];
+        for (let key in options) {
+            if (options.hasOwnProperty(key) && (options[key] !== null) && (options[key] !== undefined)) {
+                array.push(encodeURIComponent(key) + "=" + encodeURIComponent(options[key]));
+            }
+        }
+        const str = array.join('&');
+        if (str !== '') {
+            return '?' + str;
+        }
+        return '';
+    }
+    /**
+     * Upload a drawing (uses upload server if configured, otherwise API server)
+     * @deprecated Platform-specific method - consider moving to platform service
+     */
+    async uploadDrawing(formData) {
+        const uploadHost = this.environment.uploadServer?.host || this.host;
+        const url = uploadHost + 'upload/drawing';
+        const fetchOptions = {
+            method: 'POST',
+            mode: 'cors',
+            redirect: 'error',
+            body: formData
+        };
+        return this.request(url, fetchOptions, null);
+    }
+    /**
+     * Upload an image (uses upload server if configured, otherwise API server)
+     * @deprecated Platform-specific method - consider moving to platform service
+     */
+    async uploadImage(formData) {
+        const uploadHost = this.environment.uploadServer?.host || this.host;
+        const url = uploadHost + 'upload/image';
+        const fetchOptions = {
+            method: 'POST',
+            mode: 'cors',
+            redirect: 'error',
+            body: formData
+        };
+        return this.request(url, fetchOptions, null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApiConnectionService, deps: [{ token: TokenService }, { token: SigninStatusService }, { token: MyEnvironmentModel }, { token: CsrfService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApiConnectionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ApiConnectionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: TokenService }, { type: SigninStatusService }, { type: MyEnvironmentModel }, { type: CsrfService }] });
+
+class AuthService {
+    tokens;
+    signinStatus;
+    environment;
+    // Observable user state
+    userSubject = new BehaviorSubject(null);
+    user$ = this.userSubject.asObservable();
+    constructor(tokens, signinStatus, environment) {
+        this.tokens = tokens;
+        this.signinStatus = signinStatus;
+        this.environment = environment;
+    }
+    /**
+     * Login with email and password
+     */
+    async loginWithEmail(email, password) {
+        try {
+            const response = await fetch(`${this.environment.accountsUrl}/api/auth/login`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include', // Include cookies for refresh token
+                body: JSON.stringify({
+                    email,
+                    password,
+                    platform: this.environment.platformCode
+                })
+            });
+            const data = await response.json();
+            if (data.success && data.access_token) {
+                this.tokens.setAccessToken(data.access_token);
+                this.signinStatus.setSigninStatus(true);
+                this.userSubject.next(data.user);
+                return { success: true, user: data.user };
+            }
+            return {
+                success: false,
+                message: data.message || 'Invalid credentials'
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                message: 'Network error. Please try again.'
+            };
+        }
+    }
+    /**
+     * Login with Google OAuth (popup window)
+     */
+    async loginWithGoogle() {
+        return this.loginWithOAuth('google');
+    }
+    /**
+     * Login with GitHub OAuth (popup window)
+     */
+    async loginWithGitHub() {
+        return this.loginWithOAuth('github');
+    }
+    /**
+     * Login with LinkedIn OAuth (popup window)
+     */
+    async loginWithLinkedIn() {
+        return this.loginWithOAuth('linkedin');
+    }
+    /**
+     * Login with Apple OAuth (popup window)
+     */
+    async loginWithApple() {
+        return this.loginWithOAuth('apple');
+    }
+    /**
+     * Login with Microsoft OAuth (popup window)
+     */
+    async loginWithMicrosoft() {
+        return this.loginWithOAuth('microsoft');
+    }
+    /**
+     * Generic provider-based login (supports all OAuth providers)
+     * @param provider - The provider identifier
+     */
+    async loginWithProvider(provider) {
+        if (provider === 'emailPassword') {
+            throw new Error('Use loginWithEmail() for email/password authentication');
+        }
+        return this.loginWithOAuth(provider);
+    }
+    /**
+     * Generic OAuth login handler
+     * Opens popup window and listens for postMessage
+     */
+    async loginWithOAuth(provider) {
+        return new Promise((resolve) => {
+            const width = 500;
+            const height = 600;
+            const left = (window.screen.width - width) / 2;
+            const top = (window.screen.height - height) / 2;
+            const oauthUrl = `${this.environment.accountsUrl}/oauth/${provider}?` +
+                `platform=${this.environment.platformCode}&` +
+                `mode=popup`;
+            const popup = window.open(oauthUrl, `${provider}_login`, `width=${width},height=${height},left=${left},top=${top}`);
+            if (!popup) {
+                resolve({
+                    success: false,
+                    message: 'Popup blocked. Please allow popups for this site.'
+                });
+                return;
+            }
+            // Listen for message from popup
+            const messageHandler = (event) => {
+                // Verify origin
+                if (event.origin !== new URL(this.environment.accountsUrl).origin) {
+                    return;
+                }
+                if (event.data.type === 'oauth_success') {
+                    this.tokens.setAccessToken(event.data.access_token);
+                    this.signinStatus.setSigninStatus(true);
+                    this.userSubject.next(event.data.user);
+                    window.removeEventListener('message', messageHandler);
+                    popup.close();
+                    resolve({
+                        success: true,
+                        user: event.data.user
+                    });
+                }
+                else if (event.data.type === 'oauth_error') {
+                    window.removeEventListener('message', messageHandler);
+                    popup.close();
+                    resolve({
+                        success: false,
+                        message: event.data.message || 'OAuth login failed'
+                    });
+                }
+            };
+            window.addEventListener('message', messageHandler);
+            // Check if popup was closed manually
+            const checkClosed = setInterval(() => {
+                if (popup.closed) {
+                    clearInterval(checkClosed);
+                    window.removeEventListener('message', messageHandler);
+                    resolve({
+                        success: false,
+                        message: 'Login cancelled'
+                    });
+                }
+            }, 500);
+        });
+    }
+    /**
+     * Register new user
+     */
+    async register(email, password, displayName) {
+        try {
+            const response = await fetch(`${this.environment.accountsUrl}/api/auth/register`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    email,
+                    password,
+                    display_name: displayName,
+                    platform: this.environment.platformCode
+                })
+            });
+            const data = await response.json();
+            if (data.success && data.access_token) {
+                this.tokens.setAccessToken(data.access_token);
+                this.signinStatus.setSigninStatus(true);
+                this.userSubject.next(data.user);
+                return {
+                    success: true,
+                    user: data.user,
+                    message: data.needs_verification ? 'Please verify your email' : undefined
+                };
+            }
+            return {
+                success: false,
+                message: data.message || 'Registration failed'
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                message: 'Network error. Please try again.'
+            };
+        }
+    }
+    /**
+     * Sign out user
+     */
+    async signout() {
+        try {
+            await fetch(`${this.environment.accountsUrl}/api/auth/logout`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+        }
+        catch (error) {
+            console.error('Logout API call failed:', error);
+        }
+        finally {
+            this.tokens.clear();
+            this.signinStatus.setSigninStatus(false);
+            this.userSubject.next(null);
+        }
+    }
+    /**
+     * Check for active session (call on app init)
+     */
+    async checkSession() {
+        if (this.tokens.hasValidAccessToken()) {
+            this.signinStatus.setSigninStatus(true);
+            return true;
+        }
+        // Try to refresh using httpOnly cookie
+        try {
+            const response = await fetch(`${this.environment.accountsUrl}/api/auth/refresh`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            if (!response.ok) {
+                this.signinStatus.setSigninStatus(false);
+                return false;
+            }
+            const data = await response.json();
+            if (data.access_token) {
+                this.tokens.setAccessToken(data.access_token);
+                this.userSubject.next(data.user);
+                this.signinStatus.setSigninStatus(true);
+                return true;
+            }
+            return false;
+        }
+        catch (error) {
+            this.signinStatus.setSigninStatus(false);
+            return false;
+        }
+    }
+    /**
+     * Check if user is authenticated
+     */
+    isAuthenticated() {
+        return this.tokens.hasValidAccessToken();
+    }
+    /**
+     * Get current user (synchronous)
+     */
+    getCurrentUser() {
+        return this.userSubject.value;
+    }
+    // ===== Backward Compatibility Methods =====
+    // These methods are deprecated and maintained for backward compatibility
+    // with existing platform code. New code should use the methods above.
+    /**
+     * @deprecated Use getCurrentUser()?.user_id instead
+     */
+    getUserId() {
+        return this.userSubject.value?.user_id || 0;
+    }
+    /**
+     * @deprecated Use getCurrentUser()?.display_name instead
+     */
+    getUserName() {
+        return this.userSubject.value?.display_name || '';
+    }
+    /**
+     * @deprecated Use getCurrentUser()?.photo_url instead
+     */
+    getPhotoUrl() {
+        return this.userSubject.value?.photo_url || '';
+    }
+    /**
+     * @deprecated Use getCurrentUser()?.display_name instead
+     */
+    getDisplayName() {
+        return this.userSubject.value?.display_name || '';
+    }
+    /**
+     * @deprecated Use `/profile/${getCurrentUser()?.user_id}` instead
+     */
+    getProfileUrl() {
+        const userId = this.userSubject.value?.user_id;
+        return userId ? `/profile/${userId}` : '';
+    }
+    /**
+     * @deprecated Use isAuthenticated() instead
+     */
+    async signin() {
+        return this.isAuthenticated();
+    }
+    /**
+     * @deprecated Use loginWithEmail() instead
+     */
+    async verifyCredentials(email, password) {
+        const result = await this.loginWithEmail(email, password);
+        return result.success;
+    }
+    /**
+     * @deprecated Check user.is_email_verified from getCurrentUser() instead
+     */
+    isSigninEmailValid() {
+        return this.userSubject.value?.is_email_verified || false;
+    }
+    /**
+     * @deprecated No longer needed - dialog is managed by platform
+     */
+    onDialogClose() {
+        // No-op for backward compatibility
+    }
+    /**
+     * @deprecated No longer needed - dialog is managed by platform
+     */
+    closeSocialAuthDialog() {
+        // No-op for backward compatibility
+    }
+    /**
+     * @deprecated Check if user exists by calling /api/auth/check-email endpoint
+     */
+    async getUserProfile(email) {
+        try {
+            const response = await fetch(`${this.environment.accountsUrl}/api/auth/check-email`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email })
+            });
+            const data = await response.json();
+            return data.exists ? data.user : null;
+        }
+        catch (error) {
+            return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AuthService, deps: [{ token: TokenService }, { token: SigninStatusService }, { token: MyEnvironmentModel }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AuthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: TokenService }, { type: SigninStatusService }, { type: MyEnvironmentModel, decorators: [{
+                    type: Inject,
+                    args: [MyEnvironmentModel]
+                }] }] });
+
+class DbService {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DbService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class NgxStoneScriptPhpClientModule {
+    static forRoot(environment) {
+        return {
+            ngModule: NgxStoneScriptPhpClientModule,
+            providers: [
+                { provide: MyEnvironmentModel, useValue: environment }
+            ]
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxStoneScriptPhpClientModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: NgxStoneScriptPhpClientModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxStoneScriptPhpClientModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxStoneScriptPhpClientModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class LoginDialogComponent {
+    auth;
+    /**
+     * REQUIRED: Which authentication providers to show in this dialog
+     * @example ['google', 'linkedin', 'emailPassword']
+     */
+    providers = [];
+    email = '';
+    password = '';
+    error = '';
+    loading = false;
+    oauthProviders = [];
+    constructor(auth) {
+        this.auth = auth;
+    }
+    ngOnInit() {
+        if (!this.providers || this.providers.length === 0) {
+            this.error = 'Configuration Error: No authentication providers specified. Please pass providers to LoginDialogComponent.';
+            throw new Error('LoginDialogComponent requires providers input. Example: dialogRef.componentInstance.providers = [\'google\', \'emailPassword\']');
+        }
+        // Get OAuth providers (excluding emailPassword)
+        this.oauthProviders = this.providers
+            .filter(p => p !== 'emailPassword');
+    }
+    isProviderEnabled(provider) {
+        return this.providers.includes(provider);
+    }
+    getProviderLabel(provider) {
+        const labels = {
+            google: 'Sign in with Google',
+            linkedin: 'Sign in with LinkedIn',
+            apple: 'Sign in with Apple',
+            microsoft: 'Sign in with Microsoft',
+            github: 'Sign in with GitHub',
+            emailPassword: 'Sign in with Email'
+        };
+        return labels[provider];
+    }
+    getProviderIcon(provider) {
+        // Platforms can customize icons via CSS classes: .btn-google, .btn-linkedin, etc.
+        return undefined;
+    }
+    async onEmailLogin() {
+        if (!this.email || !this.password) {
+            this.error = 'Please enter email and password';
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            const result = await this.auth.loginWithEmail(this.email, this.password);
+            if (!result.success) {
+                this.error = result.message || 'Login failed';
+            }
+            // On success, parent component/dialog should close automatically via user$ subscription
+        }
+        catch (err) {
+            this.error = 'An unexpected error occurred';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    async onOAuthLogin(provider) {
+        this.loading = true;
+        this.error = '';
+        try {
+            const result = await this.auth.loginWithProvider(provider);
+            if (!result.success) {
+                this.error = result.message || 'OAuth login failed';
+            }
+            // On success, parent component/dialog should close automatically via user$ subscription
+        }
+        catch (err) {
+            this.error = 'An unexpected error occurred';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    onRegisterClick(event) {
+        event.preventDefault();
+        // Platforms can override this or listen for a custom event
+        // For now, just emit a console message
+        console.log('Register clicked - platform should handle navigation');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoginDialogComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LoginDialogComponent, isStandalone: true, selector: "lib-login-dialog", inputs: { providers: "providers" }, ngImport: i0, template: `
+        <div class="login-dialog">
+            <h2 class="login-title">Sign In</h2>
+
+            <!-- Email/Password Form (if enabled) -->
+            @if (isProviderEnabled('emailPassword')) {
+                <form (ngSubmit)="onEmailLogin()" class="email-form">
+                    <div class="form-group">
+                        <input
+                            [(ngModel)]="email"
+                            name="email"
+                            placeholder="Email"
+                            type="email"
+                            required
+                            class="form-control">
+                    </div>
+                    <div class="form-group">
+                        <input
+                            [(ngModel)]="password"
+                            name="password"
+                            placeholder="Password"
+                            type="password"
+                            required
+                            class="form-control">
+                    </div>
+                    <button
+                        type="submit"
+                        [disabled]="loading"
+                        class="btn btn-primary btn-block">
+                        {{ loading ? 'Signing in...' : getProviderLabel('emailPassword') }}
+                    </button>
+                </form>
+            }
+
+            <!-- Divider if both email and OAuth are present -->
+            @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
+                <div class="divider">
+                    <span>OR</span>
+                </div>
+            }
+
+            <!-- OAuth Providers -->
+            @if (oauthProviders.length > 0) {
+                <div class="oauth-buttons">
+                    @for (provider of oauthProviders; track provider) {
+                        <button
+                            (click)="onOAuthLogin(provider)"
+                            [disabled]="loading"
+                            class="btn btn-oauth btn-{{ provider }}">
+                            @if (getProviderIcon(provider)) {
+                                <span class="oauth-icon">
+                                    {{ getProviderIcon(provider) }}
+                                </span>
+                            }
+                            {{ getProviderLabel(provider) }}
+                        </button>
+                    }
+                </div>
+            }
+
+            <!-- Error Message -->
+            @if (error) {
+                <div class="error-message">
+                    {{ error }}
+                </div>
+            }
+
+            <!-- Loading State -->
+            @if (loading) {
+                <div class="loading-overlay">
+                    <div class="spinner"></div>
+                </div>
+            }
+
+            <!-- Register Link -->
+            <div class="register-link">
+                Don't have an account?
+                <a href="#" (click)="onRegisterClick($event)">Sign up</a>
+            </div>
+        </div>
+    `, isInline: true, styles: [".login-dialog{padding:24px;max-width:400px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.email-form,.form-group{margin-bottom:16px}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.form-control:focus{outline:none;border-color:#4285f4}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background-color:#4285f4;color:#fff}.btn-primary:hover:not(:disabled){background-color:#357ae8}.divider{margin:16px 0;text-align:center;position:relative}.divider:before{content:\"\";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd}.divider span{background:#fff;padding:0 12px;position:relative;color:#666;font-size:12px}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn-oauth{width:100%;background:#fff;color:#333;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:8px}.btn-oauth:hover:not(:disabled){background:#f8f8f8}.btn-google{border-color:#4285f4}.btn-linkedin{border-color:#0077b5}.btn-apple{border-color:#000}.btn-microsoft{border-color:#00a4ef}.btn-github{border-color:#333}.oauth-icon{font-size:18px}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.register-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.register-link a{color:#4285f4;text-decoration:none}.register-link a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoginDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-login-dialog', standalone: true, imports: [CommonModule, FormsModule], template: `
+        <div class="login-dialog">
+            <h2 class="login-title">Sign In</h2>
+
+            <!-- Email/Password Form (if enabled) -->
+            @if (isProviderEnabled('emailPassword')) {
+                <form (ngSubmit)="onEmailLogin()" class="email-form">
+                    <div class="form-group">
+                        <input
+                            [(ngModel)]="email"
+                            name="email"
+                            placeholder="Email"
+                            type="email"
+                            required
+                            class="form-control">
+                    </div>
+                    <div class="form-group">
+                        <input
+                            [(ngModel)]="password"
+                            name="password"
+                            placeholder="Password"
+                            type="password"
+                            required
+                            class="form-control">
+                    </div>
+                    <button
+                        type="submit"
+                        [disabled]="loading"
+                        class="btn btn-primary btn-block">
+                        {{ loading ? 'Signing in...' : getProviderLabel('emailPassword') }}
+                    </button>
+                </form>
+            }
+
+            <!-- Divider if both email and OAuth are present -->
+            @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
+                <div class="divider">
+                    <span>OR</span>
+                </div>
+            }
+
+            <!-- OAuth Providers -->
+            @if (oauthProviders.length > 0) {
+                <div class="oauth-buttons">
+                    @for (provider of oauthProviders; track provider) {
+                        <button
+                            (click)="onOAuthLogin(provider)"
+                            [disabled]="loading"
+                            class="btn btn-oauth btn-{{ provider }}">
+                            @if (getProviderIcon(provider)) {
+                                <span class="oauth-icon">
+                                    {{ getProviderIcon(provider) }}
+                                </span>
+                            }
+                            {{ getProviderLabel(provider) }}
+                        </button>
+                    }
+                </div>
+            }
+
+            <!-- Error Message -->
+            @if (error) {
+                <div class="error-message">
+                    {{ error }}
+                </div>
+            }
+
+            <!-- Loading State -->
+            @if (loading) {
+                <div class="loading-overlay">
+                    <div class="spinner"></div>
+                </div>
+            }
+
+            <!-- Register Link -->
+            <div class="register-link">
+                Don't have an account?
+                <a href="#" (click)="onRegisterClick($event)">Sign up</a>
+            </div>
+        </div>
+    `, styles: [".login-dialog{padding:24px;max-width:400px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.email-form,.form-group{margin-bottom:16px}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.form-control:focus{outline:none;border-color:#4285f4}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background-color:#4285f4;color:#fff}.btn-primary:hover:not(:disabled){background-color:#357ae8}.divider{margin:16px 0;text-align:center;position:relative}.divider:before{content:\"\";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd}.divider span{background:#fff;padding:0 12px;position:relative;color:#666;font-size:12px}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn-oauth{width:100%;background:#fff;color:#333;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:8px}.btn-oauth:hover:not(:disabled){background:#f8f8f8}.btn-google{border-color:#4285f4}.btn-linkedin{border-color:#0077b5}.btn-apple{border-color:#000}.btn-microsoft{border-color:#00a4ef}.btn-github{border-color:#333}.oauth-icon{font-size:18px}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.register-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.register-link a{color:#4285f4;text-decoration:none}.register-link a:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }], propDecorators: { providers: [{
+                type: Input
+            }] } });
+
+class RegisterComponent {
+    auth;
+    displayName = '';
+    email = '';
+    password = '';
+    confirmPassword = '';
+    error = '';
+    success = '';
+    loading = false;
+    constructor(auth) {
+        this.auth = auth;
+    }
+    async onRegister() {
+        // Reset messages
+        this.error = '';
+        this.success = '';
+        // Validate fields
+        if (!this.displayName || !this.email || !this.password || !this.confirmPassword) {
+            this.error = 'Please fill in all fields';
+            return;
+        }
+        if (this.password.length < 8) {
+            this.error = 'Password must be at least 8 characters';
+            return;
+        }
+        if (this.password !== this.confirmPassword) {
+            this.error = 'Passwords do not match';
+            return;
+        }
+        // Validate email format
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(this.email)) {
+            this.error = 'Please enter a valid email address';
+            return;
+        }
+        this.loading = true;
+        try {
+            const result = await this.auth.register(this.email, this.password, this.displayName);
+            if (result.success) {
+                this.success = result.message || 'Account created successfully!';
+                // On success, parent component/dialog should close automatically via user$ subscription
+                // or navigate to email verification page
+            }
+            else {
+                this.error = result.message || 'Registration failed';
+            }
+        }
+        catch (err) {
+            this.error = 'An unexpected error occurred';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    onLoginClick(event) {
+        event.preventDefault();
+        // Platforms can override this or listen for a custom event
+        // For now, just emit a console message
+        console.log('Login clicked - platform should handle navigation');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RegisterComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RegisterComponent, isStandalone: true, selector: "lib-register", ngImport: i0, template: `
+        <div class="register-dialog">
+            <h2 class="register-title">Create Account</h2>
+
+            <form (ngSubmit)="onRegister()" class="register-form">
+                <div class="form-group">
+                    <label for="displayName">Full Name</label>
+                    <input
+                        id="displayName"
+                        [(ngModel)]="displayName"
+                        name="displayName"
+                        placeholder="Enter your full name"
+                        type="text"
+                        required
+                        class="form-control">
+                </div>
+
+                <div class="form-group">
+                    <label for="email">Email</label>
+                    <input
+                        id="email"
+                        [(ngModel)]="email"
+                        name="email"
+                        placeholder="Enter your email"
+                        type="email"
+                        required
+                        class="form-control">
+                </div>
+
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <input
+                        id="password"
+                        [(ngModel)]="password"
+                        name="password"
+                        placeholder="Create a password"
+                        type="password"
+                        required
+                        minlength="8"
+                        class="form-control">
+                    <small class="form-hint">At least 8 characters</small>
+                </div>
+
+                <div class="form-group">
+                    <label for="confirmPassword">Confirm Password</label>
+                    <input
+                        id="confirmPassword"
+                        [(ngModel)]="confirmPassword"
+                        name="confirmPassword"
+                        placeholder="Confirm your password"
+                        type="password"
+                        required
+                        class="form-control">
+                </div>
+
+                <button
+                    type="submit"
+                    [disabled]="loading"
+                    class="btn btn-primary btn-block">
+                    {{ loading ? 'Creating account...' : 'Sign Up' }}
+                </button>
+            </form>
+
+            <!-- Error Message -->
+            @if (error) {
+                <div class="error-message">
+                    {{ error }}
+                </div>
+            }
+
+            <!-- Success Message -->
+            @if (success) {
+                <div class="success-message">
+                    {{ success }}
+                </div>
+            }
+
+            <!-- Loading State -->
+            @if (loading) {
+                <div class="loading-overlay">
+                    <div class="spinner"></div>
+                </div>
+            }
+
+            <!-- Login Link -->
+            <div class="login-link">
+                Already have an account?
+                <a href="#" (click)="onLoginClick($event)">Sign in</a>
+            </div>
+        </div>
+    `, isInline: true, styles: [".register-dialog{padding:24px;max-width:400px;position:relative}.register-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.register-form,.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.form-control:focus{outline:none;border-color:#4285f4}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background-color:#4285f4;color:#fff}.btn-primary:hover:not(:disabled){background-color:#357ae8}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RegisterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-register', standalone: true, imports: [CommonModule, FormsModule], template: `
+        <div class="register-dialog">
+            <h2 class="register-title">Create Account</h2>
+
+            <form (ngSubmit)="onRegister()" class="register-form">
+                <div class="form-group">
+                    <label for="displayName">Full Name</label>
+                    <input
+                        id="displayName"
+                        [(ngModel)]="displayName"
+                        name="displayName"
+                        placeholder="Enter your full name"
+                        type="text"
+                        required
+                        class="form-control">
+                </div>
+
+                <div class="form-group">
+                    <label for="email">Email</label>
+                    <input
+                        id="email"
+                        [(ngModel)]="email"
+                        name="email"
+                        placeholder="Enter your email"
+                        type="email"
+                        required
+                        class="form-control">
+                </div>
+
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <input
+                        id="password"
+                        [(ngModel)]="password"
+                        name="password"
+                        placeholder="Create a password"
+                        type="password"
+                        required
+                        minlength="8"
+                        class="form-control">
+                    <small class="form-hint">At least 8 characters</small>
+                </div>
+
+                <div class="form-group">
+                    <label for="confirmPassword">Confirm Password</label>
+                    <input
+                        id="confirmPassword"
+                        [(ngModel)]="confirmPassword"
+                        name="confirmPassword"
+                        placeholder="Confirm your password"
+                        type="password"
+                        required
+                        class="form-control">
+                </div>
+
+                <button
+                    type="submit"
+                    [disabled]="loading"
+                    class="btn btn-primary btn-block">
+                    {{ loading ? 'Creating account...' : 'Sign Up' }}
+                </button>
+            </form>
+
+            <!-- Error Message -->
+            @if (error) {
+                <div class="error-message">
+                    {{ error }}
+                </div>
+            }
+
+            <!-- Success Message -->
+            @if (success) {
+                <div class="success-message">
+                    {{ success }}
+                </div>
+            }
+
+            <!-- Loading State -->
+            @if (loading) {
+                <div class="loading-overlay">
+                    <div class="spinner"></div>
+                </div>
+            }
+
+            <!-- Login Link -->
+            <div class="login-link">
+                Already have an account?
+                <a href="#" (click)="onLoginClick($event)">Sign in</a>
+            </div>
+        </div>
+    `, styles: [".register-dialog{padding:24px;max-width:400px;position:relative}.register-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.register-form,.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.form-control:focus{outline:none;border-color:#4285f4}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background-color:#4285f4;color:#fff}.btn-primary:hover:not(:disabled){background-color:#357ae8}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }] });
+
+/*
+ * Public API Surface of ngx-stonescriptphp-client
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApiConnectionService, ApiResponse, AuthService, CsrfService, DbService, LoginDialogComponent, MyEnvironmentModel, NgxStoneScriptPhpClientModule, RegisterComponent, SigninStatusService, TokenService, VerifyStatus };
+//# sourceMappingURL=progalaxyelabs-ngx-stonescriptphp-client.mjs.map