@flusys/ng-auth 7.0.1 → 7.1.0

package/fesm2022/flusys-ng-auth.mjs

@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect, PLATFORM_ID, InjectionToken, Component, untracked, viewChild, DestroyRef, input, Injector, output, resource, makeStateKey, TransferState } from '@angular/core';
+import { inject, Injectable, signal, computed, effect, PLATFORM_ID, InjectionToken, Component, untracked, viewChild, DestroyRef, DOCUMENT, input, Injector, output, resource, makeStateKey, TransferState } from '@angular/core';
 import { APP_CONFIG, getServiceUrl, isCompanyFeatureEnabled, isServiceEnabled, isSignUpEnabled, getPermissionMode, getDefaultCompanySlug, getDefaultBranchSlug } from '@flusys/ng-core';
 import { of, timeout, switchMap, map, tap, catchError, shareReplay, finalize, BehaviorSubject, throwError, filter, take, from, forkJoin, firstValueFrom } from 'rxjs';
 import * as i2 from '@angular/router';
 import { Router, RouterOutlet, ActivatedRoute } from '@angular/router';
-import { PlatformService, TranslateService, PermissionValidatorService, ApiResourceService, CookieService, USER_PERMISSIONS, COMPANY_PERMISSIONS, BRANCH_PERMISSIONS, resolveTranslationModule, SHARED_MESSAGES, permissionGuard, USER_PROVIDER, COMPANY_API_PROVIDER, USER_PERMISSION_PROVIDER, AUTH_STATE_PROVIDER, RouterTabsComponent, TranslatePipe, AngularModule, HasPermissionDirective, BaseFormComponent, BaseListComponent, BaseListTemplateDirective, FileUrlService, FILE_PROVIDER, PROFILE_PERMISSION_PROVIDER, FileUploaderComponent } from '@flusys/ng-shared';
+import { PlatformService, TranslateService, PermissionValidatorService, ApiResourceService, CookieService, USER_PERMISSIONS, COMPANY_PERMISSIONS, BRANCH_PERMISSIONS, SOCIAL_AUTH_CONFIG_PERMISSIONS, resolveTranslationModule, SHARED_MESSAGES, permissionGuard, USER_PROVIDER, COMPANY_API_PROVIDER, USER_PERMISSION_PROVIDER, AUTH_STATE_PROVIDER, RouterTabsComponent, TranslatePipe, AngularModule, HasPermissionDirective, BaseFormComponent, BaseListComponent, BaseListTemplateDirective, FileUrlService, FILE_PROVIDER, PROFILE_PERMISSION_PROVIDER, FileUploaderComponent } from '@flusys/ng-shared';
 import { map as map$1, catchError as catchError$1, tap as tap$1 } from 'rxjs/operators';
 import * as i2$1 from '@angular/common';
 import { isPlatformBrowser } from '@angular/common';
@@ -16,6 +16,20 @@ import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { form, required, FormField, email, minLength } from '@angular/forms/signals';
 import * as i1 from '@angular/forms';
 
+var SocialProviderEnum;
+(function (SocialProviderEnum) {
+    SocialProviderEnum["GOOGLE"] = "google";
+    SocialProviderEnum["FACEBOOK"] = "facebook";
+    SocialProviderEnum["LINKEDIN"] = "linkedin";
+    SocialProviderEnum["MICROSOFT"] = "microsoft";
+})(SocialProviderEnum || (SocialProviderEnum = {}));
+const SOCIAL_PROVIDERS = [
+    SocialProviderEnum.GOOGLE,
+    SocialProviderEnum.FACEBOOK,
+    SocialProviderEnum.LINKEDIN,
+    SocialProviderEnum.MICROSOFT,
+];
+
 // ─── Type guards ───────────────────────────────────────────────────────────────
 function isEmailVerificationRequired(response) {
     return !!response.data && 'requiresEmailVerification' in response.data && response.data.requiresEmailVerification === true;
@@ -326,6 +340,10 @@ class AuthInitService {
             this._initialized.set(true);
             return of(true);
         }
+        if (this.authState.requiresCompanySelection()) {
+            this._initialized.set(true);
+            return of(false);
+        }
         if (this._initialized()) {
             return of(this.authState.isAuthenticated());
         }
@@ -419,6 +437,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Authentication API Endpoints
+ *
+ * Centralized endpoint definitions to prevent inconsistencies across interceptors
+ * and services. All auth-related endpoints should be referenced from here.
+ */
+const AUTH_ENDPOINTS = {
+    LOGIN: '/auth/login',
+    LOGOUT: '/auth/logout',
+    REFRESH: '/auth/refresh',
+    REGISTER: '/auth/register',
+    ME: '/auth/me',
+    SELECT: '/auth/select',
+    SWITCH_COMPANY: '/auth/switch-company',
+    CHANGE_PASSWORD: '/auth/change-password',
+    VERIFY_EMAIL: '/auth/verify-email',
+    FORGOT_PASSWORD: '/auth/forgot-password',
+    RESET_PASSWORD: '/auth/reset-password',
+    RESEND_VERIFICATION: '/auth/resend-verification',
+    SOCIAL_CALLBACK: '/auth/social/callback',
+};
+/** Check if a URL matches a specific endpoint */
+function isEndpoint(url, endpoint) {
+    return url.includes(endpoint);
+}
+
+/** Round-trips the pre-login returnUrl through the OAuth redirect, which cannot carry it itself. */
+const SOCIAL_RETURN_URL_KEY = 'flusys_social_return_url';
+class SocialAuthApiService {
+    appConfig = inject(APP_CONFIG);
+    http = inject(HttpClient);
+    platform = inject(PlatformService);
+    baseUrl = getServiceUrl(this.appConfig, 'auth');
+    get redirectUri() {
+        if (this.platform.isServer)
+            return '';
+        return `${window.location.origin}${AUTH_ENDPOINTS.SOCIAL_CALLBACK}`;
+    }
+    /** Called before redirecting to the provider, so the callback page can resume where the user left off. */
+    saveReturnUrl(returnUrl) {
+        if (this.platform.isServer)
+            return;
+        if (returnUrl)
+            sessionStorage.setItem(SOCIAL_RETURN_URL_KEY, returnUrl);
+        else
+            sessionStorage.removeItem(SOCIAL_RETURN_URL_KEY);
+    }
+    /** Reads and clears the returnUrl saved by {@link saveReturnUrl}. */
+    consumeReturnUrl() {
+        if (this.platform.isServer)
+            return '';
+        const returnUrl = sessionStorage.getItem(SOCIAL_RETURN_URL_KEY) ?? '';
+        sessionStorage.removeItem(SOCIAL_RETURN_URL_KEY);
+        return returnUrl;
+    }
+    getProviders() {
+        return this.http.post(`${this.baseUrl}/social/providers`, { redirectUri: this.redirectUri });
+    }
+    authorize(provider) {
+        return this.http.post(`${this.baseUrl}/social/authorize`, { provider, redirectUri: this.redirectUri });
+    }
+    callback(request) {
+        return this.http.post(`${this.baseUrl}/social/callback`, request);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialAuthApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialAuthApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialAuthApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SocialAuthConfigApiService extends ApiResourceService {
+    constructor() {
+        super('social-config', 'auth');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialAuthConfigApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialAuthConfigApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialAuthConfigApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * Token Refresh State Service
  * Manages token refresh state for SSR-safe request queuing.
@@ -518,31 +620,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-/**
- * Authentication API Endpoints
- *
- * Centralized endpoint definitions to prevent inconsistencies across interceptors
- * and services. All auth-related endpoints should be referenced from here.
- */
-const AUTH_ENDPOINTS = {
-    LOGIN: '/auth/login',
-    LOGOUT: '/auth/logout',
-    REFRESH: '/auth/refresh',
-    REGISTER: '/auth/register',
-    ME: '/auth/me',
-    SELECT: '/auth/select',
-    SWITCH_COMPANY: '/auth/switch-company',
-    CHANGE_PASSWORD: '/auth/change-password',
-    VERIFY_EMAIL: '/auth/verify-email',
-    FORGOT_PASSWORD: '/auth/forgot-password',
-    RESET_PASSWORD: '/auth/reset-password',
-    RESEND_VERIFICATION: '/auth/resend-verification',
-};
-/** Check if a URL matches a specific endpoint */
-function isEndpoint(url, endpoint) {
-    return url.includes(endpoint);
-}
-
 function isValidReturnUrl(url) {
     if (typeof url !== 'string' || !url)
         return false;
@@ -618,6 +695,7 @@ const COOKIE_ENDPOINTS = [
     AUTH_ENDPOINTS.SELECT,
     AUTH_ENDPOINTS.SWITCH_COMPANY,
     AUTH_ENDPOINTS.VERIFY_EMAIL,
+    AUTH_ENDPOINTS.SOCIAL_CALLBACK,
 ];
 /**
  * Auth Interceptor - Adds auth headers and cookie credentials to requests
@@ -666,11 +744,13 @@ function tokenRefreshInterceptor(req, next) {
     const isLoginRequest = isEndpoint(req.url, AUTH_ENDPOINTS.LOGIN);
     const isSelectRequest = isEndpoint(req.url, AUTH_ENDPOINTS.SELECT);
     const isRegisterRequest = isEndpoint(req.url, AUTH_ENDPOINTS.REGISTER);
+    const isSocialCallbackRequest = isEndpoint(req.url, AUTH_ENDPOINTS.SOCIAL_CALLBACK);
     // Don't intercept auth-related endpoints
     if (isRefreshRequest ||
         isLoginRequest ||
         isSelectRequest ||
-        isRegisterRequest) {
+        isRegisterRequest ||
+        isSocialCallbackRequest) {
         return next(req);
     }
     // PROACTIVE REFRESH: Check if token is expired or expiring soon
@@ -1005,6 +1085,47 @@ const AUTH_MESSAGES = {
     'administrative.user.no.users': 'No users found',
     'administrative.user.details': 'User Details',
     'administrative.user.delete.title': 'Delete User',
+    // Social sign-in API keys
+    'auth.social.providers.success': 'Social providers retrieved successfully',
+    'auth.social.authorize.success': 'Authorization URL generated successfully',
+    'auth.social.login.success': 'Signed in successfully',
+    'auth.social.provider.disabled': 'Social sign-in with {{provider}} is not enabled',
+    'auth.social.provider.not.configured': 'Social sign-in with {{provider}} is missing its client credentials',
+    'auth.social.state.invalid': 'Social sign-in session is invalid or has expired',
+    'auth.social.redirect.uri.mismatch': 'Redirect URI does not match the one the sign-in started with',
+    'auth.social.exchange.failed': 'Social sign-in with {{provider}} failed',
+    'auth.social.profile.incomplete': '{{provider}} did not return an account identifier',
+    'auth.social.account.not.linked': 'No account is linked to this {{provider}} profile',
+    'auth.social.company.required': 'No account is linked to this {{provider}} profile. Please sign up manually and join or create a company first, then social sign-in will work.',
+    'auth.social.email.required': '{{provider}} did not share an email address',
+    'auth.social.email.not.verified': '{{provider}} has not verified this email address',
+    // components/social-login-buttons.component.ts
+    'auth.social.continue.with': 'or continue with',
+    'auth.social.provider.google': 'Google',
+    'auth.social.provider.facebook': 'Facebook',
+    'auth.social.provider.linkedin': 'LinkedIn',
+    'auth.social.provider.microsoft': 'Microsoft',
+    // pages/social-callback/social-callback-page.component.ts
+    'auth.social.signing.in': 'Signing you in...',
+    'auth.social.failed': 'Social sign-in failed',
+    // pages/social-config/social-config-page.component.ts (API keys)
+    'social.config.provider.already.configured': 'Social provider "{{provider}}" is already configured',
+    'social.config.credentials.required': 'Client ID and client secret are required for {{provider}}',
+    'social.config.title': 'Social Config',
+    'social.config.subtitle': 'Enable the providers users may sign in with, and hold their credentials',
+    'social.config.redirect.uri': 'Redirect URI',
+    'social.config.client.id': 'Client ID',
+    'social.config.client.secret': 'Client Secret',
+    'social.config.client.secret.unchanged': 'Unchanged - leave blank to keep the saved secret',
+    'social.config.tenant.id': 'Directory (tenant) ID',
+    'social.config.tenant.id.example': 'common',
+    'social.config.scopes': 'Scopes',
+    'social.config.scopes.placeholder': 'Leave blank to use the provider defaults',
+    'social.config.save.success': 'Social sign-in settings saved',
+    'social.config.provider.hint.google': 'Google Cloud console, OAuth 2.0 client ID',
+    'social.config.provider.hint.facebook': 'Meta for Developers, Facebook Login app',
+    'social.config.provider.hint.linkedin': 'LinkedIn developers, Sign In with LinkedIn',
+    'social.config.provider.hint.microsoft': 'Microsoft Entra ID, app registration',
 };
 
 /**
@@ -1027,6 +1148,9 @@ function resolveAdministrationDefaultTab() {
         permissionValidator.hasPermission(BRANCH_PERMISSIONS.READ)) {
         return 'branch';
     }
+    if (permissionValidator.hasPermission(SOCIAL_AUTH_CONFIG_PERMISSIONS.READ)) {
+        return 'social-config';
+    }
     return 'users';
 }
 /**
@@ -1065,6 +1189,10 @@ const AUTH_ROUTES = [
                 loadComponent: () => Promise.resolve().then(function () { return resetPasswordPage_component; }).then((m) => m.ResetPasswordPageComponent),
                 canActivate: [emailFeatureGuard, guestGuard],
             },
+            {
+                path: 'social/callback',
+                loadComponent: () => Promise.resolve().then(function () { return socialCallbackPage_component; }).then((m) => m.SocialCallbackPageComponent),
+            },
             {
                 path: 'verify-email',
                 loadComponent: () => Promise.resolve().then(function () { return verifyEmailPage_component; }).then((m) => m.VerifyEmailPageComponent),
@@ -1158,6 +1286,12 @@ const ADMINISTRATION_ROUTES = [
                     },
                 ],
             },
+            // Social sign-in provider credentials tab
+            {
+                path: 'social-config',
+                canActivate: [permissionGuard(SOCIAL_AUTH_CONFIG_PERMISSIONS.READ)],
+                loadComponent: () => Promise.resolve().then(function () { return socialConfigPage_component; }).then((m) => m.SocialConfigPageComponent),
+            },
             // Default redirect to the first tab the user has permission to see
             {
                 path: '',
@@ -1513,6 +1647,7 @@ function validateEmail(email, config) {
  * - Users (always visible) - includes permission management via dialogs
  * - Companies (only if company feature enabled)
  * - Branches (only if company feature enabled)
+ * - Social Config (social sign-in provider credentials)
  */
 class AdministrationPageComponent {
     appConfig = inject(APP_CONFIG);
@@ -1543,6 +1678,13 @@ class AdministrationPageComponent {
             permission: BRANCH_PERMISSIONS.READ,
             requiresCompanyFeature: true,
         },
+        {
+            id: 'social-config',
+            labelKey: 'social.config.title',
+            icon: 'key',
+            route: 'social-config',
+            permission: SOCIAL_AUTH_CONFIG_PERMISSIONS.READ,
+        },
     ];
     /** Check if company feature is enabled */
     companyFeatureEnabled = computed(() => isCompanyFeatureEnabled(this.appConfig), /* @ts-ignore */
@@ -1922,6 +2064,7 @@ class BranchFormComponent {
         <div class="flex justify-end gap-4 md:col-span-2 pt-4">
           <button
             fButton
+            type="button"
             severity="secondary"
             [outlined]="true"
             (click)="navigateToList()"
@@ -2064,6 +2207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         <div class="flex justify-end gap-4 md:col-span-2 pt-4">
           <button
             fButton
+            type="button"
             severity="secondary"
             [outlined]="true"
             (click)="navigateToList()"
@@ -3004,6 +3148,240 @@ var forgotPasswordPage_component = /*#__PURE__*/Object.freeze({
     ForgotPasswordPageComponent: ForgotPasswordPageComponent
 });
 
+class SocialLoginButtonsComponent {
+    destroyRef = inject(DestroyRef);
+    socialApi = inject(SocialAuthApiService);
+    messageService = inject(MessageService);
+    platform = inject(PlatformService);
+    document = inject(DOCUMENT);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    returnUrl = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "returnUrl" }] : /* istanbul ignore next */ []));
+    providerEnum = SocialProviderEnum;
+    _providers = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_providers" }] : /* istanbul ignore next */ []));
+    providers = this._providers.asReadonly();
+    _pendingProvider = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pendingProvider" }] : /* istanbul ignore next */ []));
+    pendingProvider = this._pendingProvider.asReadonly();
+    showLabels = computed(() => this.providers().length <= 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    layoutClass = computed(() => {
+        switch (this.providers().length) {
+            case 1:
+                return 'grid grid-cols-1';
+            case 2:
+                return 'grid grid-cols-2 gap-3';
+            default:
+                return 'flex flex-wrap justify-center gap-3';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (this.platform.isServer)
+            return;
+        this.socialApi
+            .getProviders()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => this._providers.set(response.data ?? []),
+            error: () => this._providers.set([]),
+        });
+    }
+    onSelect(provider) {
+        this._pendingProvider.set(provider);
+        this.socialApi.saveReturnUrl(this.returnUrl());
+        this.socialApi
+            .authorize(provider)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                const url = response.data?.authorizationUrl;
+                if (!url) {
+                    this._pendingProvider.set(null);
+                    return;
+                }
+                this.redirectTo(url);
+            },
+            error: (error) => {
+                this._pendingProvider.set(null);
+                const messageKey = error?.error?.messageKey;
+                this.messageService.add({
+                    severity: 'error',
+                    summary: this.translate('auth.login.title'),
+                    detail: messageKey
+                        ? this.translate(messageKey, { provider })
+                        : error?.error?.message,
+                });
+            },
+        });
+    }
+    redirectTo(url) {
+        this.document.location.assign(url);
+    }
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialLoginButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SocialLoginButtonsComponent, isStandalone: true, selector: "lib-social-login-buttons", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (providers().length) {
+      <div class="mt-6">
+        <div class="flex items-center gap-3 mb-4">
+          <span class="flex-1 h-px bg-surface-200 dark:bg-surface-700"></span>
+          <span class="text-muted-color text-sm">{{
+            'auth.social.continue.with' | translate
+          }}</span>
+          <span class="flex-1 h-px bg-surface-200 dark:bg-surface-700"></span>
+        </div>
+
+        <div [class]="layoutClass()">
+          @for (info of providers(); track info.provider) {
+            <button
+              fButton
+              type="button"
+              severity="secondary"
+              [outlined]="true"
+              [class]="showLabels() ? 'w-full' : 'shrink-0'"
+              [attr.aria-label]="
+                showLabels()
+                  ? null
+                  : ('auth.social.provider.' + info.provider | translate)
+              "
+              [attr.title]="
+                showLabels()
+                  ? null
+                  : ('auth.social.provider.' + info.provider | translate)
+              "
+              [disabled]="pendingProvider() !== null && pendingProvider() !== info.provider"
+              [loading]="pendingProvider() === info.provider"
+              (click)="onSelect(info.provider)"
+            >
+              @if (pendingProvider() !== info.provider) {
+                @switch (info.provider) {
+                  @case (providerEnum.GOOGLE) {
+                    <svg class="shrink-0" width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
+                      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
+                      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 3-2.26 5.54-4.78 7.25l7.73 6c4.51-4.18 7.09-10.36 7.09-17.72z" />
+                      <path fill="#FBBC05" d="M10.53 28.59A14.5 14.5 0 0 1 9.77 24c0-1.6.29-3.14.76-4.59l-7.98-6.19A23.94 23.94 0 0 0 0 24c0 3.88.93 7.54 2.56 10.78l7.97-6.19z" />
+                      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
+                    </svg>
+                  }
+                  @case (providerEnum.FACEBOOK) {
+                    <svg class="shrink-0" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+                      <path fill="#1877F2" d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.96h-1.51c-1.49 0-1.96.93-1.96 1.88v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z" />
+                    </svg>
+                  }
+                  @case (providerEnum.LINKEDIN) {
+                    <svg class="shrink-0" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+                      <path fill="#0A66C2" d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05a3.74 3.74 0 0 1 3.37-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .78 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .78 23.2 0 22.22 0z" />
+                    </svg>
+                  }
+                  @case (providerEnum.MICROSOFT) {
+                    <svg class="shrink-0" width="18" height="18" viewBox="0 0 23 23" aria-hidden="true">
+                      <path fill="#F25022" d="M0 0h11v11H0z" />
+                      <path fill="#7FBA00" d="M12 0h11v11H12z" />
+                      <path fill="#00A4EF" d="M0 12h11v11H0z" />
+                      <path fill="#FFB900" d="M12 12h11v11H12z" />
+                    </svg>
+                  }
+                }
+              }
+              @if (showLabels()) {
+                <span>{{
+                  'auth.social.provider.' + info.provider | translate
+                }}</span>
+              }
+            </button>
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialLoginButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-social-login-buttons',
+                    imports: [UiModule, TranslatePipe],
+                    template: `
+    @if (providers().length) {
+      <div class="mt-6">
+        <div class="flex items-center gap-3 mb-4">
+          <span class="flex-1 h-px bg-surface-200 dark:bg-surface-700"></span>
+          <span class="text-muted-color text-sm">{{
+            'auth.social.continue.with' | translate
+          }}</span>
+          <span class="flex-1 h-px bg-surface-200 dark:bg-surface-700"></span>
+        </div>
+
+        <div [class]="layoutClass()">
+          @for (info of providers(); track info.provider) {
+            <button
+              fButton
+              type="button"
+              severity="secondary"
+              [outlined]="true"
+              [class]="showLabels() ? 'w-full' : 'shrink-0'"
+              [attr.aria-label]="
+                showLabels()
+                  ? null
+                  : ('auth.social.provider.' + info.provider | translate)
+              "
+              [attr.title]="
+                showLabels()
+                  ? null
+                  : ('auth.social.provider.' + info.provider | translate)
+              "
+              [disabled]="pendingProvider() !== null && pendingProvider() !== info.provider"
+              [loading]="pendingProvider() === info.provider"
+              (click)="onSelect(info.provider)"
+            >
+              @if (pendingProvider() !== info.provider) {
+                @switch (info.provider) {
+                  @case (providerEnum.GOOGLE) {
+                    <svg class="shrink-0" width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
+                      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
+                      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 3-2.26 5.54-4.78 7.25l7.73 6c4.51-4.18 7.09-10.36 7.09-17.72z" />
+                      <path fill="#FBBC05" d="M10.53 28.59A14.5 14.5 0 0 1 9.77 24c0-1.6.29-3.14.76-4.59l-7.98-6.19A23.94 23.94 0 0 0 0 24c0 3.88.93 7.54 2.56 10.78l7.97-6.19z" />
+                      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
+                    </svg>
+                  }
+                  @case (providerEnum.FACEBOOK) {
+                    <svg class="shrink-0" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+                      <path fill="#1877F2" d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.96h-1.51c-1.49 0-1.96.93-1.96 1.88v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z" />
+                    </svg>
+                  }
+                  @case (providerEnum.LINKEDIN) {
+                    <svg class="shrink-0" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
+                      <path fill="#0A66C2" d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05a3.74 3.74 0 0 1 3.37-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .78 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .78 23.2 0 22.22 0z" />
+                    </svg>
+                  }
+                  @case (providerEnum.MICROSOFT) {
+                    <svg class="shrink-0" width="18" height="18" viewBox="0 0 23 23" aria-hidden="true">
+                      <path fill="#F25022" d="M0 0h11v11H0z" />
+                      <path fill="#7FBA00" d="M12 0h11v11H12z" />
+                      <path fill="#00A4EF" d="M0 12h11v11H0z" />
+                      <path fill="#FFB900" d="M12 12h11v11H12z" />
+                    </svg>
+                  }
+                }
+              }
+              @if (showLabels()) {
+                <span>{{
+                  'auth.social.provider.' + info.provider | translate
+                }}</span>
+              }
+            </button>
+          }
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
+
 class LoginPageComponent {
     destroyRef = inject(DestroyRef);
     appConfig = inject(APP_CONFIG);
@@ -3029,6 +3407,8 @@ class LoginPageComponent {
     ...(ngDevMode ? [{ debugName: "unverifiedEmail" }] : /* istanbul ignore next */ []));
     savedUserName = signal(this.authState.getSavedUserName(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "savedUserName" }] : /* istanbul ignore next */ []));
+    welcomeBackText = computed(() => this.translate('auth.login.welcome.back', { name: this.savedUserName() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "welcomeBackText" }] : /* istanbul ignore next */ []));
     loginFormModel = signal({
         email: '',
         password: '',
@@ -3379,12 +3759,12 @@ class LoginPageComponent {
             <!-- Step 1: Credentials -->
             @if (currentStep() === 'credentials') {
               <div class="text-center mb-8">
-                <div class="text-3xl font-medium mb-4 text-color">
+                <div
+                  class="text-3xl font-medium mb-4 text-color truncate"
+                  [title]="savedUserName() ? welcomeBackText() : null"
+                >
                   @if (savedUserName()) {
-                    {{
-                      'auth.login.welcome.back'
-                        | translate: { name: savedUserName()! }
-                    }}
+                    {{ welcomeBackText() }}
                   } @else {
                     {{ 'auth.login.welcome' | translate }}
                   }
@@ -3465,6 +3845,8 @@ class LoginPageComponent {
                   <span pButtonLabel>{{ 'auth.login.sign.in' | translate }}</span>
                 </button>
 
+                <lib-social-login-buttons [returnUrl]="returnUrl()" />
+
                 @if (signUpEnabled()) {
                   <div class="flex items-center justify-center mt-4 gap-2">
                     <span class="font-medium">{{
@@ -3596,7 +3978,7 @@ class LoginPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "directive", type: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.PasswordComponent, selector: "f-password", inputs: ["toggleMask", "feedback", "disabled", "placeholder", "inputId", "invalid", "touched", "inputStyleClass", "styleClass", "style", "ariaDescribedby", "autocomplete", "variant", "size", "fluid", "appendTo", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "mediumRegex", "strongRegex"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: i1$1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "directive", type: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.PasswordComponent, selector: "f-password", inputs: ["toggleMask", "feedback", "disabled", "placeholder", "inputId", "invalid", "touched", "inputStyleClass", "styleClass", "style", "ariaDescribedby", "autocomplete", "variant", "size", "fluid", "appendTo", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "mediumRegex", "strongRegex"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: i1$1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }, { kind: "component", type: SocialLoginButtonsComponent, selector: "lib-social-login-buttons", inputs: ["returnUrl"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LoginPageComponent, decorators: [{
             type: Component,
@@ -3605,6 +3987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     imports: [UiModule, AngularModule,
                         FormField,
                         AppFloatingConfigurator,
+                        SocialLoginButtonsComponent,
                         TranslatePipe,],
                     template: `
     <app-floating-configurator />
@@ -3658,12 +4041,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             <!-- Step 1: Credentials -->
             @if (currentStep() === 'credentials') {
               <div class="text-center mb-8">
-                <div class="text-3xl font-medium mb-4 text-color">
+                <div
+                  class="text-3xl font-medium mb-4 text-color truncate"
+                  [title]="savedUserName() ? welcomeBackText() : null"
+                >
                   @if (savedUserName()) {
-                    {{
-                      'auth.login.welcome.back'
-                        | translate: { name: savedUserName()! }
-                    }}
+                    {{ welcomeBackText() }}
                   } @else {
                     {{ 'auth.login.welcome' | translate }}
                   }
@@ -3744,6 +4127,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   <span pButtonLabel>{{ 'auth.login.sign.in' | translate }}</span>
                 </button>
 
+                <lib-social-login-buttons [returnUrl]="returnUrl()" />
+
                 @if (signUpEnabled()) {
                   <div class="flex items-center justify-center mt-4 gap-2">
                     <span class="font-medium">{{
@@ -7125,6 +7510,542 @@ var resetPasswordPage_component = /*#__PURE__*/Object.freeze({
     ResetPasswordPageComponent: ResetPasswordPageComponent
 });
 
+class SocialCallbackPageComponent {
+    destroyRef = inject(DestroyRef);
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    platform = inject(PlatformService);
+    socialApi = inject(SocialAuthApiService);
+    authState = inject(AuthStateService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    _error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_error" }] : /* istanbul ignore next */ []));
+    errorDetail = computed(() => {
+        const error = this._error();
+        if (!error)
+            return null;
+        return 'key' in error ? this.translate(error.key, error.vars) : error.raw;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorDetail" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (this.platform.isServer)
+            return;
+        this.exchangeCode();
+    }
+    backToLogin() {
+        this.router.navigate(['/auth/login']);
+    }
+    exchangeCode() {
+        const params = this.route.snapshot.queryParamMap;
+        const providerError = params.get('error_description') ?? params.get('error');
+        if (providerError) {
+            this._error.set({ raw: providerError });
+            return;
+        }
+        const code = params.get('code');
+        const state = params.get('state');
+        if (!code || !state) {
+            this._error.set({ key: 'auth.social.state.invalid' });
+            return;
+        }
+        this.socialApi
+            .callback({ code, state, redirectUri: this.socialApi.redirectUri })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (!response.data) {
+                    this._error.set({ key: 'auth.social.failed' });
+                    return;
+                }
+                if (isCompanySelectionResponse(response)) {
+                    this.authState.setSelectionState(response.data);
+                    this.router.navigate(['/auth/login']);
+                    return;
+                }
+                if (isLoginResponse(response)) {
+                    this.authState.setLoginState(response.data);
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: this.translate('shared.success'),
+                        detail: response.messageKey
+                            ? this.translate(response.messageKey)
+                            : (response.message ?? this.translate('auth.login.success')),
+                    });
+                    this.authState.navigateAfterLogin(this.returnUrl());
+                }
+            },
+            error: (error) => {
+                const messageKey = error?.error?.messageKey;
+                if (messageKey) {
+                    this._error.set({ key: messageKey, vars: error?.error?.messageVariables });
+                }
+                else if (error?.error?.message) {
+                    this._error.set({ raw: error.error.message });
+                }
+                else {
+                    this._error.set({ key: 'auth.social.failed' });
+                }
+            },
+        });
+    }
+    returnUrl() {
+        return this.socialApi.consumeReturnUrl();
+    }
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialCallbackPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SocialCallbackPageComponent, isStandalone: true, selector: "lib-social-callback-page", ngImport: i0, template: `
+    <app-floating-configurator />
+    <div class="bg-surface-ground flex items-center justify-center min-h-screen">
+      <div class="flex flex-col items-center gap-4 text-center px-4">
+        @if (errorDetail()) {
+          <ui-icon name="exclamation-circle" class="text-6xl text-danger"></ui-icon>
+          <div class="text-2xl font-medium text-color">
+            {{ 'auth.social.failed' | translate }}
+          </div>
+          <p class="text-muted-color font-medium">{{ errorDetail() }}</p>
+          <button fButton severity="secondary" [outlined]="true" (click)="backToLogin()">
+            <span>{{ 'auth.login.back.to.sign.in' | translate }}</span>
+          </button>
+        } @else {
+          <ui-icon name="spinner" [spin]="true" class="text-5xl text-primary"></ui-icon>
+          <div class="text-2xl font-medium text-color">
+            {{ 'auth.social.signing.in' | translate }}
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialCallbackPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-social-callback-page',
+                    imports: [UiModule, TranslatePipe, AppFloatingConfigurator],
+                    template: `
+    <app-floating-configurator />
+    <div class="bg-surface-ground flex items-center justify-center min-h-screen">
+      <div class="flex flex-col items-center gap-4 text-center px-4">
+        @if (errorDetail()) {
+          <ui-icon name="exclamation-circle" class="text-6xl text-danger"></ui-icon>
+          <div class="text-2xl font-medium text-color">
+            {{ 'auth.social.failed' | translate }}
+          </div>
+          <p class="text-muted-color font-medium">{{ errorDetail() }}</p>
+          <button fButton severity="secondary" [outlined]="true" (click)="backToLogin()">
+            <span>{{ 'auth.login.back.to.sign.in' | translate }}</span>
+          </button>
+        } @else {
+          <ui-icon name="spinner" [spin]="true" class="text-5xl text-primary"></ui-icon>
+          <div class="text-2xl font-medium text-color">
+            {{ 'auth.social.signing.in' | translate }}
+          </div>
+        }
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+var socialCallbackPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SocialCallbackPageComponent: SocialCallbackPageComponent
+});
+
+const TENANT_PROVIDER = SocialProviderEnum.MICROSOFT;
+class SocialConfigPageComponent {
+    configService = inject(SocialAuthConfigApiService);
+    socialApi = inject(SocialAuthApiService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, {
+        optional: true,
+    });
+    tenantProvider = TENANT_PROVIDER;
+    _forms = signal(SOCIAL_PROVIDERS.map(emptyForm), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_forms" }] : /* istanbul ignore next */ []));
+    forms = this._forms.asReadonly();
+    _isLoading = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
+    isLoading = this._isLoading.asReadonly();
+    _isSaving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isSaving" }] : /* istanbul ignore next */ []));
+    isSaving = this._isSaving.asReadonly();
+    redirectUri = this.socialApi.redirectUri;
+    constructor() {
+        void this.loadConfigs();
+    }
+    updateField(provider, field, value) {
+        this._forms.update((forms) => forms.map((form) => form.provider === provider ? { ...form, [field]: value } : form));
+    }
+    async onSave() {
+        const invalid = this._forms().find((form) => form.isEnabled &&
+            (!form.clientId.trim() || (!form.hasClientSecret && !form.clientSecret.trim())));
+        if (invalid) {
+            this.messageService.add({
+                severity: 'warn',
+                summary: this.translate('shared.validation'),
+                detail: this.translate('social.config.credentials.required', {
+                    provider: this.translate(`auth.social.provider.${invalid.provider}`),
+                }),
+            });
+            return;
+        }
+        this._isSaving.set(true);
+        try {
+            const pending = this._forms().filter((form) => form.id || form.isEnabled);
+            await this.configService.bulkUpsert(pending.filter((form) => !form.id).map(toCreateDto), pending.filter((form) => form.id).map(toUpdateDto));
+            this.messageService.add({
+                severity: 'success',
+                summary: this.translate('shared.success'),
+                detail: this.translate('social.config.save.success'),
+            });
+            await this.loadConfigs();
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this._isSaving.set(false);
+        }
+    }
+    async loadConfigs() {
+        this._isLoading.set(true);
+        try {
+            const response = await this.configService.getAll({
+                pagination: { currentPage: 0, pageSize: SOCIAL_PROVIDERS.length },
+                filter: {},
+                select: [],
+                sort: {},
+            });
+            this._forms.set(mergeConfigs(response.data ?? []));
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this._isLoading.set(false);
+        }
+    }
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialConfigPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SocialConfigPageComponent, isStandalone: true, selector: "lib-social-config-page", providers: [MessageService], ngImport: i0, template: `
+    <div class="card">
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{ 'social.config.title' | translate }}
+          </h3>
+          <p class="text-sm text-muted-color mt-1">
+            {{ 'social.config.subtitle' | translate }}
+          </p>
+        </div>
+        <button fButton (click)="onSave()" [disabled]="isSaving()" [loading]="isSaving()">
+          @if (!isSaving()) {
+            <ui-icon pButtonIcon name="save"></ui-icon>
+          }
+          <span pButtonLabel>{{ 'shared.save' | translate }}</span>
+        </button>
+      </div>
+
+      <p class="text-sm text-muted-color mb-4">
+        {{ 'social.config.redirect.uri' | translate }}:
+        <code class="text-color">{{ redirectUri }}</code>
+      </p>
+
+      @if (isLoading()) {
+        <div class="flex justify-center py-8">
+          <ui-icon name="spinner" [spin]="true" class="text-3xl text-primary"></ui-icon>
+        </div>
+      } @else {
+        <div class="flex flex-col gap-4">
+          @for (form of forms(); track form.provider) {
+            <div class="border border-surface rounded p-4">
+              <div class="flex items-center justify-between gap-3">
+                <div>
+                  <div class="font-semibold">
+                    {{ 'auth.social.provider.' + form.provider | translate }}
+                  </div>
+                  <div class="text-sm text-muted-color">
+                    {{ 'social.config.provider.hint.' + form.provider | translate }}
+                  </div>
+                </div>
+                <f-toggleswitch
+                  [ngModel]="form.isEnabled"
+                  (ngModelChange)="updateField(form.provider, 'isEnabled', $event)"
+                />
+              </div>
+
+              @if (form.isEnabled) {
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 pt-4 border-t border-surface">
+                  <div class="field">
+                    <label [for]="form.provider + '-client-id'" class="block font-medium mb-2">
+                      {{ 'social.config.client.id' | translate }} *
+                    </label>
+                    <input
+                      fInputText
+                      [id]="form.provider + '-client-id'"
+                      class="w-full"
+                      [ngModel]="form.clientId"
+                      (ngModelChange)="updateField(form.provider, 'clientId', $event)"
+                    />
+                  </div>
+
+                  <div class="field">
+                    <label [for]="form.provider + '-client-secret'" class="block font-medium mb-2">
+                      {{ 'social.config.client.secret' | translate }}
+                      @if (!form.hasClientSecret) {
+                        *
+                      }
+                    </label>
+                    <f-password
+                      [inputId]="form.provider + '-client-secret'"
+                      styleClass="w-full"
+                      [placeholder]="
+                        form.hasClientSecret
+                          ? ('social.config.client.secret.unchanged' | translate)
+                          : ''
+                      "
+                      [ngModel]="form.clientSecret"
+                      (ngModelChange)="updateField(form.provider, 'clientSecret', $event)"
+                    />
+                  </div>
+
+                  @if (form.provider === tenantProvider) {
+                    <div class="field">
+                      <label [for]="form.provider + '-tenant'" class="block font-medium mb-2">
+                        {{ 'social.config.tenant.id' | translate }}
+                      </label>
+                      <input
+                        fInputText
+                        [id]="form.provider + '-tenant'"
+                        class="w-full"
+                        [placeholder]="'social.config.tenant.id.example' | translate"
+                        [ngModel]="form.tenantId"
+                        (ngModelChange)="updateField(form.provider, 'tenantId', $event)"
+                      />
+                    </div>
+                  }
+
+                  <div class="field">
+                    <label [for]="form.provider + '-scopes'" class="block font-medium mb-2">
+                      {{ 'social.config.scopes' | translate }}
+                    </label>
+                    <input
+                      fInputText
+                      [id]="form.provider + '-scopes'"
+                      class="w-full"
+                      [placeholder]="'social.config.scopes.placeholder' | translate"
+                      [ngModel]="form.scopes"
+                      (ngModelChange)="updateField(form.provider, 'scopes', $event)"
+                    />
+                  </div>
+
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "directive", type: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.PasswordComponent, selector: "f-password", inputs: ["toggleMask", "feedback", "disabled", "placeholder", "inputId", "invalid", "touched", "inputStyleClass", "styleClass", "style", "ariaDescribedby", "autocomplete", "variant", "size", "fluid", "appendTo", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "mediumRegex", "strongRegex"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: i1$1.ToggleSwitchComponent, selector: "f-toggleswitch", inputs: ["disabled", "readonly", "invalid", "ariaLabel", "trueValue", "falseValue", "inputId", "size", "tabindex", "styleClass", "style"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SocialConfigPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-social-config-page',
+                    imports: [UiModule, AngularModule, TranslatePipe],
+                    providers: [MessageService],
+                    template: `
+    <div class="card">
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{ 'social.config.title' | translate }}
+          </h3>
+          <p class="text-sm text-muted-color mt-1">
+            {{ 'social.config.subtitle' | translate }}
+          </p>
+        </div>
+        <button fButton (click)="onSave()" [disabled]="isSaving()" [loading]="isSaving()">
+          @if (!isSaving()) {
+            <ui-icon pButtonIcon name="save"></ui-icon>
+          }
+          <span pButtonLabel>{{ 'shared.save' | translate }}</span>
+        </button>
+      </div>
+
+      <p class="text-sm text-muted-color mb-4">
+        {{ 'social.config.redirect.uri' | translate }}:
+        <code class="text-color">{{ redirectUri }}</code>
+      </p>
+
+      @if (isLoading()) {
+        <div class="flex justify-center py-8">
+          <ui-icon name="spinner" [spin]="true" class="text-3xl text-primary"></ui-icon>
+        </div>
+      } @else {
+        <div class="flex flex-col gap-4">
+          @for (form of forms(); track form.provider) {
+            <div class="border border-surface rounded p-4">
+              <div class="flex items-center justify-between gap-3">
+                <div>
+                  <div class="font-semibold">
+                    {{ 'auth.social.provider.' + form.provider | translate }}
+                  </div>
+                  <div class="text-sm text-muted-color">
+                    {{ 'social.config.provider.hint.' + form.provider | translate }}
+                  </div>
+                </div>
+                <f-toggleswitch
+                  [ngModel]="form.isEnabled"
+                  (ngModelChange)="updateField(form.provider, 'isEnabled', $event)"
+                />
+              </div>
+
+              @if (form.isEnabled) {
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 pt-4 border-t border-surface">
+                  <div class="field">
+                    <label [for]="form.provider + '-client-id'" class="block font-medium mb-2">
+                      {{ 'social.config.client.id' | translate }} *
+                    </label>
+                    <input
+                      fInputText
+                      [id]="form.provider + '-client-id'"
+                      class="w-full"
+                      [ngModel]="form.clientId"
+                      (ngModelChange)="updateField(form.provider, 'clientId', $event)"
+                    />
+                  </div>
+
+                  <div class="field">
+                    <label [for]="form.provider + '-client-secret'" class="block font-medium mb-2">
+                      {{ 'social.config.client.secret' | translate }}
+                      @if (!form.hasClientSecret) {
+                        *
+                      }
+                    </label>
+                    <f-password
+                      [inputId]="form.provider + '-client-secret'"
+                      styleClass="w-full"
+                      [placeholder]="
+                        form.hasClientSecret
+                          ? ('social.config.client.secret.unchanged' | translate)
+                          : ''
+                      "
+                      [ngModel]="form.clientSecret"
+                      (ngModelChange)="updateField(form.provider, 'clientSecret', $event)"
+                    />
+                  </div>
+
+                  @if (form.provider === tenantProvider) {
+                    <div class="field">
+                      <label [for]="form.provider + '-tenant'" class="block font-medium mb-2">
+                        {{ 'social.config.tenant.id' | translate }}
+                      </label>
+                      <input
+                        fInputText
+                        [id]="form.provider + '-tenant'"
+                        class="w-full"
+                        [placeholder]="'social.config.tenant.id.example' | translate"
+                        [ngModel]="form.tenantId"
+                        (ngModelChange)="updateField(form.provider, 'tenantId', $event)"
+                      />
+                    </div>
+                  }
+
+                  <div class="field">
+                    <label [for]="form.provider + '-scopes'" class="block font-medium mb-2">
+                      {{ 'social.config.scopes' | translate }}
+                    </label>
+                    <input
+                      fInputText
+                      [id]="form.provider + '-scopes'"
+                      class="w-full"
+                      [placeholder]="'social.config.scopes.placeholder' | translate"
+                      [ngModel]="form.scopes"
+                      (ngModelChange)="updateField(form.provider, 'scopes', $event)"
+                    />
+                  </div>
+
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+function emptyForm(provider) {
+    return {
+        provider,
+        id: null,
+        isEnabled: false,
+        clientId: '',
+        clientSecret: '',
+        hasClientSecret: false,
+        tenantId: '',
+        scopes: '',
+    };
+}
+function mergeConfigs(configs) {
+    return SOCIAL_PROVIDERS.map((provider) => {
+        const config = configs.find((entry) => entry.provider === provider);
+        if (!config)
+            return emptyForm(provider);
+        return {
+            provider,
+            id: config.id,
+            isEnabled: config.isEnabled,
+            clientId: config.clientId ?? '',
+            clientSecret: '',
+            hasClientSecret: config.hasClientSecret,
+            tenantId: config.extraConfig?.['tenantId'] ?? '',
+            scopes: (config.scopes ?? []).join(', '),
+        };
+    });
+}
+/** clientSecret is omitted here; callers decide whether to include a newly typed value. */
+function toBaseDto(form) {
+    const scopes = form.scopes
+        .split(',')
+        .map((scope) => scope.trim())
+        .filter(Boolean);
+    return {
+        provider: form.provider,
+        isEnabled: form.isEnabled,
+        clientId: form.clientId.trim(),
+        ...(scopes.length ? { scopes } : {}),
+        ...(form.provider === TENANT_PROVIDER && form.tenantId.trim()
+            ? { extraConfig: { tenantId: form.tenantId.trim() } }
+            : {}),
+    };
+}
+function toCreateDto(form) {
+    return { ...toBaseDto(form), clientSecret: form.clientSecret.trim() };
+}
+function toUpdateDto(form) {
+    const trimmedSecret = form.clientSecret.trim();
+    return {
+        id: form.id,
+        ...toBaseDto(form),
+        // Blank means "keep the previously stored secret" - never overwrite it with an empty value.
+        ...(trimmedSecret ? { clientSecret: trimmedSecret } : {}),
+    };
+}
+
+var socialConfigPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SocialConfigPageComponent: SocialConfigPageComponent
+});
+
 class UserFormComponent {
     destroyRef = inject(DestroyRef);
     router = inject(Router);
@@ -7706,6 +8627,7 @@ class UserFormComponent {
         <div class="flex justify-end gap-4 md:col-span-2 pt-4">
           <button
             fButton
+            type="button"
             severity="secondary"
             [outlined]="true"
             (click)="onCancel()"
@@ -8007,6 +8929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         <div class="flex justify-end gap-4 md:col-span-2 pt-4">
           <button
             fButton
+            type="button"
             severity="secondary"
             [outlined]="true"
             (click)="onCancel()"
@@ -9780,11 +10703,11 @@ var verifyEmailPage_component = /*#__PURE__*/Object.freeze({
 // =============================================================================
 // @flusys/ng-auth - Authentication Package
 // =============================================================================
-// Interfaces (matching NestJS auth API)
+// Enums
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ADMINISTRATION_ROUTES, AUTH_ENDPOINTS, AUTH_MESSAGES, AUTH_PROFILE_EXTENSION, AUTH_REGISTRATION_EXTENSION, AUTH_ROUTES, AUTH_USER_DETAIL_CONFIG, AUTH_USER_FORM_EXTENSION, AUTH_USER_LIST_EXTENSION, AUTH_VALIDATION_CONFIG, AdministrationPageComponent, AuthApiService, AuthCompanyApiProviderAdapter, AuthInitService, AuthLayoutApiAdapter, AuthLayoutStateAdapter, AuthStateProviderAdapter, AuthStateService, AuthUserPermissionProviderAdapter, AuthUserProviderAdapter, BranchApiService, BranchFormComponent, BranchListComponent, CompanyApiService, CompanyFormComponent, CompanyListComponent, ForgotPasswordPageComponent, LoginPageComponent, PROFILE_FIELD_CONTEXT, PROFILE_ROUTES, ProfilePageComponent, REGISTRATION_FIELD_CONTEXT, RegisterPageComponent, ResetPasswordPageComponent, TokenRefreshStateService, USER_FORM_FIELD_CONTEXT, UserApiService, UserBranchPermissionDialogComponent, UserCompanyPermissionDialogComponent, UserFormComponent, UserListComponent, UserPermissionApiService, VerifyEmailPageComponent, authGuard, authInterceptor, companyFeatureGuard, emailFeatureGuard, guestGuard, isCompanySelectionResponse, isEmailVerificationRequired, isEndpoint, isLoginResponse, provideAuthLayoutIntegration, provideAuthProviders, signUpFeatureGuard, tokenRefreshInterceptor, validateEmail, validatePassword };
+export { ADMINISTRATION_ROUTES, AUTH_ENDPOINTS, AUTH_MESSAGES, AUTH_PROFILE_EXTENSION, AUTH_REGISTRATION_EXTENSION, AUTH_ROUTES, AUTH_USER_DETAIL_CONFIG, AUTH_USER_FORM_EXTENSION, AUTH_USER_LIST_EXTENSION, AUTH_VALIDATION_CONFIG, AdministrationPageComponent, AuthApiService, AuthCompanyApiProviderAdapter, AuthInitService, AuthLayoutApiAdapter, AuthLayoutStateAdapter, AuthStateProviderAdapter, AuthStateService, AuthUserPermissionProviderAdapter, AuthUserProviderAdapter, BranchApiService, BranchFormComponent, BranchListComponent, CompanyApiService, CompanyFormComponent, CompanyListComponent, ForgotPasswordPageComponent, LoginPageComponent, PROFILE_FIELD_CONTEXT, PROFILE_ROUTES, ProfilePageComponent, REGISTRATION_FIELD_CONTEXT, RegisterPageComponent, ResetPasswordPageComponent, SOCIAL_PROVIDERS, SOCIAL_RETURN_URL_KEY, SocialAuthApiService, SocialAuthConfigApiService, SocialCallbackPageComponent, SocialConfigPageComponent, SocialLoginButtonsComponent, SocialProviderEnum, TokenRefreshStateService, USER_FORM_FIELD_CONTEXT, UserApiService, UserBranchPermissionDialogComponent, UserCompanyPermissionDialogComponent, UserFormComponent, UserListComponent, UserPermissionApiService, VerifyEmailPageComponent, authGuard, authInterceptor, companyFeatureGuard, emailFeatureGuard, guestGuard, isCompanySelectionResponse, isEmailVerificationRequired, isEndpoint, isLoginResponse, provideAuthLayoutIntegration, provideAuthProviders, signUpFeatureGuard, tokenRefreshInterceptor, validateEmail, validatePassword };
 //# sourceMappingURL=flusys-ng-auth.mjs.map