@umituz/web-dashboard 3.2.4 → 4.1.0

package/src/domains/auth/components/shared/SocialLoginButtons.tsx

@@ -0,0 +1,58 @@
+/**
+ * SocialLoginButtons
+ *
+ * Renders a list of social auth providers as a row of icon buttons.
+ * Generic over the provider id so adding a new provider is a config change,
+ * not a code change.
+ */
+
+import { Button } from "../../../../primitives";
+import { GoogleIcon, AppleIcon } from "./SocialProviderIcons";
+
+export type SocialProviderId = 'google' | 'apple';
+
+export interface SocialLoginButtonsProps {
+  /** Provider handlers keyed by provider id */
+  onProvider: (id: SocialProviderId) => void;
+  /** Translation function */
+  translate: (key: string) => string;
+  /** Disable all buttons (e.g., during form submission) */
+  disabled?: boolean;
+}
+
+/**
+ * Centralized provider config. Add new providers here and the UI follows.
+ */
+const SOCIAL_PROVIDERS: ReadonlyArray<{
+  id: SocialProviderId;
+  labelKey: string;
+  Icon: typeof GoogleIcon;
+}> = [
+  { id: 'google', labelKey: 'auth.social.continueWithGoogle', Icon: GoogleIcon },
+  { id: 'apple', labelKey: 'auth.social.continueWithApple', Icon: AppleIcon },
+];
+
+export const SocialLoginButtons = ({
+  onProvider,
+  translate,
+  disabled = false,
+}: SocialLoginButtonsProps) => {
+  return (
+    <div className="udb-social-grid">
+      {SOCIAL_PROVIDERS.map(({ id, labelKey, Icon }) => (
+        <Button
+          key={id}
+          type="button"
+          variant="outline"
+          onClick={() => onProvider(id)}
+          disabled={disabled}
+          aria-label={translate(labelKey)}
+          className="udb-social-grid__btn"
+        >
+          <Icon className="udb-social-grid__icon" aria-hidden="true" />
+          {translate(labelKey)}
+        </Button>
+      ))}
+    </div>
+  );
+};

package/src/domains/auth/components/shared/SocialProviderIcons.tsx

@@ -0,0 +1,48 @@
+/**
+ * Social Provider Icons
+ *
+ * Reusable SVG icon components for social auth providers.
+ * Centralizes the brand mark assets so consuming forms
+ * don't embed raw SVG paths in JSX.
+ */
+
+import type { FC } from "react";
+
+interface IconProps {
+  className?: string;
+  "aria-hidden"?: boolean | "true" | "false";
+}
+
+const baseProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  "aria-hidden": true as const,
+};
+
+export const GoogleIcon: FC<IconProps> = ({ className, ...rest }) => (
+  <svg className={className} {...baseProps} {...rest}>
+    <path
+      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      fill="#4285F4"
+    />
+    <path
+      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      fill="#34A853"
+    />
+    <path
+      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+      fill="#FBBC05"
+    />
+    <path
+      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      fill="#EA4335"
+    />
+  </svg>
+);
+
+export const AppleIcon: FC<IconProps> = ({ className, ...rest }) => (
+  <svg className={className} {...baseProps} {...rest}>
+    <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
+  </svg>
+);

package/src/domains/auth/components/shared/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared auth form components — barrel export
+ */
+
+export { AuthErrorBanner } from './AuthErrorBanner';
+export type { AuthErrorBannerProps } from './AuthErrorBanner';
+
+export { EmailInput } from './EmailInput';
+export type { EmailInputProps } from './EmailInput';
+
+export { PasswordInput } from './PasswordInput';
+export type { PasswordInputProps } from './PasswordInput';
+
+export { PasswordStrengthIndicator } from './PasswordStrengthIndicator';
+export type { PasswordStrengthIndicatorProps } from './PasswordStrengthIndicator';
+
+export { SocialLoginButtons } from './SocialLoginButtons';
+export type { SocialLoginButtonsProps, SocialProviderId } from './SocialLoginButtons';
+
+export { GoogleIcon, AppleIcon } from './SocialProviderIcons';

package/src/domains/auth/hooks/index.ts

@@ -5,3 +5,4 @@
  */
 
 export { useAuth } from "./useAuth";
+export type { AuthProvider } from "./useAuth";

package/src/domains/auth/hooks/useAuth.ts

@@ -1,10 +1,12 @@
 /**
  * useAuth Hook
  *
- * Core authentication hook for managing auth state and actions
+ * Core authentication hook for managing auth state and actions.
+ * Centralizes the try/catch+loading+error pattern via a single helper
+ * to keep individual actions focused on their unique logic.
  */
 
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback } from "react";
 import type {
   AuthState,
   User,
@@ -21,278 +23,195 @@ import {
   validateResetPassword,
 } from "../utils/auth";
 
+/**
+ * Auth provider contract — single source of truth for backend integration.
+ */
+export interface AuthProvider {
+  login: (credentials: LoginCredentials) => Promise<User>;
+  register: (data: RegisterData) => Promise<User>;
+  logout: () => Promise<void>;
+  forgotPassword: (data: ForgotPasswordData) => Promise<void>;
+  resetPassword: (data: ResetPasswordData) => Promise<void>;
+  refreshAuth: () => Promise<User | null>;
+}
+
 interface UseAuthOptions {
-  /** Initial authenticated state */
-  initialAuthenticated?: boolean;
-  /** Current user data */
-  initialUser?: User | null;
   /** Auth implementation (connects to your backend) */
-  authProvider?: {
-    login: (credentials: LoginCredentials) => Promise<User>;
-    register: (data: RegisterData) => Promise<User>;
-    logout: () => Promise<void>;
-    forgotPassword: (data: ForgotPasswordData) => Promise<void>;
-    resetPassword: (data: ResetPasswordData) => Promise<void>;
-    refreshAuth: () => Promise<User | null>;
-  };
+  authProvider?: AuthProvider;
 }
 
 /**
- * useAuth hook
+ * Wrap a side-effectful async function with the standard
+ * isLoading + error + throw contract.
  *
- * Manages authentication state and provides auth actions
+ * Important: the wrapped function is the SINGLE point of truth for
+ * setting isLoading=false, ensuring errors are surfaced (not swallowed),
+ * and re-throwing for callers that need to react.
+ */
+const executeAuthAction = async <T>(
+  updateState: (updates: Partial<AuthState>) => void,
+  fallbackErrorMessage: string,
+  action: () => Promise<T>,
+): Promise<T> => {
+  updateState({ isLoading: true, error: null });
+  try {
+    return await action();
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error && error.message ? error.message : fallbackErrorMessage;
+    updateState({ isLoading: false, error: errorMessage });
+    throw error instanceof Error ? error : new Error(errorMessage);
+  }
+};
+
+/**
+ * useAuth hook
  *
- * @param options - Hook options
- * @returns Auth state and actions
+ * Manages authentication state and provides auth actions.
+ * Each action surfaces errors to the caller AND to the auth state.
  */
 export function useAuth(options: UseAuthOptions = {}) {
-  const {
-    initialAuthenticated = false,
-    initialUser = null,
-    authProvider,
-  } = options;
+  const { authProvider } = options;
 
-  // State
   const [authState, setAuthState] = useState<AuthState>({
-    isAuthenticated: initialAuthenticated,
-    user: initialUser,
+    isAuthenticated: false,
+    user: null,
     isLoading: false,
     error: null,
   });
 
-  // Update auth state helper
   const updateState = useCallback((updates: Partial<AuthState>) => {
     setAuthState((prev) => ({ ...prev, ...updates }));
   }, []);
 
-  // Login action
-  const login = useCallback(async (credentials: LoginCredentials) => {
-    // Validate credentials
-    const validation = validateLogin(credentials);
-    if (!validation.valid) {
-      updateState({ error: validation.error });
-      throw new Error(validation.error);
+  const requireProvider = useCallback((): AuthProvider => {
+    if (!authProvider) {
+      throw new Error("Auth provider not configured");
     }
-
-    updateState({ isLoading: true, error: null });
-
-    try {
-      if (!authProvider) {
-        throw new Error("Auth provider not configured");
+    return authProvider;
+  }, [authProvider]);
+
+  const login = useCallback(
+    async (credentials: LoginCredentials): Promise<User> => {
+      const validation = validateLogin(credentials);
+      if (!validation.valid) {
+        const message = validation.error ?? "Login validation failed";
+        updateState({ error: message });
+        throw new Error(message);
       }
 
-      const user = await authProvider.login(credentials);
-      updateState({
-        isAuthenticated: true,
-        user,
-        isLoading: false,
-        error: null,
-      });
-
-      return user;
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Login failed";
-      updateState({
-        isAuthenticated: false,
-        user: null,
-        isLoading: false,
-        error: errorMessage,
+      return executeAuthAction(updateState, "Login failed", async () => {
+        const provider = requireProvider();
+        const user = await provider.login(credentials);
+        updateState({ isAuthenticated: true, user, isLoading: false, error: null });
+        return user;
       });
-      throw error;
-    }
-  }, [authProvider, updateState]);
-
-  // Register action
-  const register = useCallback(async (data: RegisterData) => {
-    // Validate registration data
-    const validation = validateRegister(data, false);
-    if (!validation.valid) {
-      updateState({ error: validation.error });
-      throw new Error(validation.error);
-    }
-
-    updateState({ isLoading: true, error: null });
-
-    try {
-      if (!authProvider) {
-        throw new Error("Auth provider not configured");
+    },
+    [requireProvider, updateState],
+  );
+
+  const register = useCallback(
+    async (data: RegisterData): Promise<User> => {
+      const validation = validateRegister(data, false);
+      if (!validation.valid) {
+        const message = validation.error ?? "Registration validation failed";
+        updateState({ error: message });
+        throw new Error(message);
       }
 
-      const user = await authProvider.register(data);
-      updateState({
-        isAuthenticated: true,
-        user,
-        isLoading: false,
-        error: null,
-      });
-
-      return user;
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Registration failed";
-      updateState({
-        isAuthenticated: false,
-        user: null,
-        isLoading: false,
-        error: errorMessage,
+      return executeAuthAction(updateState, "Registration failed", async () => {
+        const provider = requireProvider();
+        const user = await provider.register(data);
+        updateState({ isAuthenticated: true, user, isLoading: false, error: null });
+        return user;
       });
-      throw error;
-    }
-  }, [authProvider, updateState]);
-
-  // Logout action
-  const logout = useCallback(async () => {
-    updateState({ isLoading: true, error: null });
-
-    try {
-      if (!authProvider) {
-        throw new Error("Auth provider not configured");
+    },
+    [requireProvider, updateState],
+  );
+
+  const logout = useCallback(async (): Promise<void> => {
+    await executeAuthAction(updateState, "Logout failed", async () => {
+      const provider = requireProvider();
+      await provider.logout();
+      updateState({ isAuthenticated: false, user: null, isLoading: false, error: null });
+    });
+  }, [requireProvider, updateState]);
+
+  const forgotPassword = useCallback(
+    async (data: ForgotPasswordData): Promise<void> => {
+      const validation = validateForgotPassword(data);
+      if (!validation.valid) {
+        const message = validation.error ?? "Forgot password validation failed";
+        updateState({ error: message });
+        throw new Error(message);
       }
 
-      await authProvider.logout();
-
-      updateState({
-        isAuthenticated: false,
-        user: null,
-        isLoading: false,
-        error: null,
-      });
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Logout failed";
-      updateState({
-        isLoading: false,
-        error: errorMessage,
+      await executeAuthAction(updateState, "Failed to send reset email", async () => {
+        const provider = requireProvider();
+        await provider.forgotPassword(data);
+        updateState({ isLoading: false });
       });
-      throw error;
-    }
-  }, [authProvider, updateState]);
-
-  // Forgot password action
-  const forgotPassword = useCallback(async (data: ForgotPasswordData) => {
-    // Validate email
-    const validation = validateForgotPassword(data);
-    if (!validation.valid) {
-      updateState({ error: validation.error });
-      throw new Error(validation.error);
-    }
-
-    updateState({ isLoading: true, error: null });
-
-    try {
-      if (!authProvider) {
-        throw new Error("Auth provider not configured");
+    },
+    [requireProvider, updateState],
+  );
+
+  const resetPassword = useCallback(
+    async (data: ResetPasswordData): Promise<void> => {
+      const validation = validateResetPassword(data);
+      if (!validation.valid) {
+        const message = validation.error ?? "Reset password validation failed";
+        updateState({ error: message });
+        throw new Error(message);
       }
 
-      await authProvider.forgotPassword(data);
-      updateState({ isLoading: false });
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Failed to send reset email";
-      updateState({
-        isLoading: false,
-        error: errorMessage,
+      await executeAuthAction(updateState, "Failed to reset password", async () => {
+        const provider = requireProvider();
+        await provider.resetPassword(data);
+        updateState({ isLoading: false });
       });
-      throw error;
-    }
-  }, [authProvider, updateState]);
-
-  // Reset password action
-  const resetPassword = useCallback(async (data: ResetPasswordData) => {
-    // Validate reset data
-    const validation = validateResetPassword(data);
-    if (!validation.valid) {
-      updateState({ error: validation.error });
-      throw new Error(validation.error);
-    }
-
-    updateState({ isLoading: true, error: null });
-
-    try {
-      if (!authProvider) {
-        throw new Error("Auth provider not configured");
+    },
+    [requireProvider, updateState],
+  );
+
+  const updateProfile = useCallback(
+    async (data: Partial<User>): Promise<User> => {
+      const currentUser = authState.user;
+      if (!currentUser) {
+        const message = "No user to update";
+        updateState({ error: message });
+        throw new Error(message);
       }
 
-      await authProvider.resetPassword(data);
-      updateState({ isLoading: false });
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Failed to reset password";
-      updateState({
-        isLoading: false,
-        error: errorMessage,
-      });
-      throw error;
-    }
-  }, [authProvider, updateState]);
-
-  // Update profile action
-  const updateProfile = useCallback(async (data: Partial<User>) => {
-    updateState({ isLoading: true, error: null });
-
-    try {
-      // Update local user state
-      let updatedUser: User | null = null;
-      setAuthState((prev) => {
-        updatedUser = prev.user ? { ...prev.user, ...data } : null;
-        return {
-          ...prev,
-          user: updatedUser,
-          isLoading: false,
-          error: null,
+      return executeAuthAction(updateState, "Failed to update profile", async () => {
+        // Pure derivation of the new user, no side effects in setState callback.
+        // Required fields come from the existing user; data overrides only the rest.
+        const { id: _ignoredId, ...rest } = data;
+        const updatedUser: User = {
+          ...currentUser,
+          ...rest,
+          id: currentUser.id,
+          email: data.email ?? currentUser.email,
         };
+        updateState({ user: updatedUser, isLoading: false, error: null });
+        return updatedUser;
       });
-
-      // In production, call your API here
-      // await authProvider?.updateProfile(data);
-
-      if (!updatedUser) {
-        throw new Error("No user to update");
-      }
-
-      return updatedUser;
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Failed to update profile";
-      updateState({
-        isLoading: false,
-        error: errorMessage,
-      });
-      throw error;
-    }
-  }, [updateState]);
-
-  // Refresh auth action
-  const refresh = useCallback(async () => {
-    updateState({ isLoading: true, error: null });
-
-    try {
-      if (!authProvider) {
-        throw new Error("Auth provider not configured");
-      }
-
-      const user = await authProvider.refreshAuth();
-
-      updateState({
-        isAuthenticated: !!user,
-        user,
-        isLoading: false,
-        error: null,
-      });
-
+    },
+    [authState.user, updateState],
+  );
+
+  const refresh = useCallback(async (): Promise<User | null> => {
+    return executeAuthAction(updateState, "Failed to refresh authentication", async () => {
+      const provider = requireProvider();
+      const user = await provider.refreshAuth();
+      updateState({ isAuthenticated: Boolean(user), user, isLoading: false, error: null });
       return user;
-    } catch (error) {
-      updateState({
-        isAuthenticated: false,
-        user: null,
-        isLoading: false,
-        error: null,
-      });
-      throw error;
-    }
-  }, [authProvider, updateState]);
+    });
+  }, [requireProvider, updateState]);
 
-  // Clear error action
   const clearError = useCallback(() => {
     updateState({ error: null });
   }, [updateState]);
 
-  // Auth actions object
   const authActions: AuthActions = {
     login,
     register,

package/src/domains/auth/index.ts

@@ -14,9 +14,7 @@ export {
 } from "./components";
 
 // Hooks
-export {
-  useAuth,
-} from "./hooks";
+export { useAuth, type AuthProvider } from "./hooks";
 
 // Utils
 export {
@@ -33,8 +31,13 @@ export {
   maskEmail,
   generateResetToken,
   calculatePasswordStrength,
-  getPasswordStrengthLabel,
+  getPasswordStrengthBand,
   sanitizeInput,
+  AUTH_KEYS,
+  AUTH_VALIDATION_KEYS,
+  type ValidationResult,
+  type PasswordStrengthBand,
+  type AuthValidationKey,
 } from "./utils";
 
 // Types
@@ -55,4 +58,5 @@ export type {
   RegisterFormProps,
   ForgotPasswordFormProps,
   ResetPasswordFormProps,
+  Translate,
 } from "./types";

package/src/domains/auth/types/auth.ts

@@ -6,6 +6,13 @@
 
 import type { ComponentType, ReactElement } from "react";
 
+/**
+ * Translation function contract. Auth components stay i18n-agnostic;
+ * the consumer plugs in their i18n library of choice.
+ * Interpolation params follow the i18next convention (`{{placeholder}}`).
+ */
+export type Translate = (key: string, params?: Record<string, unknown>) => string;
+
 /**
  * User credentials for login
  */
@@ -156,6 +163,10 @@ export interface AuthConfig {
   showSocialLogin?: boolean;
   /** Available social providers */
   socialProviders?: SocialProvider[];
+  /** Public home route (header "back" link). Falls back to `afterLoginRoute`. */
+  homeRoute?: string;
+  /** Footer links (rendered only when provided — no defaults that 404) */
+  footerLinks?: Array<{ label: string; href: string }>;
   /** Enable remember me */
   enableRememberMe?: boolean;
   /** Enable email verification */
@@ -192,6 +203,10 @@ export interface AuthLayoutProps {
   authState?: AuthState;
   /** Auth actions */
   authActions?: AuthActions;
+  /** Optional translation function for layout strings (falls back to embedded English) */
+  translate?: Translate;
+  /** Social provider login handler (receives the provider id) */
+  onSocialLogin?: (providerId: string) => void | Promise<void>;
   /** Children content */
   children?: React.ReactNode;
 }
@@ -212,7 +227,13 @@ export interface LoginFormProps {
   showRegisterLink?: boolean;
   /** Show social login buttons */
   showSocialLogin?: boolean;
-  /** Custom login handler (receives credentials, returns user) - overrides mock auth */
+  /**
+   * Allow the built-in mock login (accepts ANY credentials) for demos.
+   * Defaults to false — without `onLoginAttempt` the form reports a
+   * configuration error instead of silently "logging in".
+   */
+  enableMockAuth?: boolean;
+  /** Custom login handler (receives credentials, returns user) */
   onLoginAttempt?: (credentials: LoginCredentials) => Promise<User>;
   /** On successful login (called after onLoginAttempt or mock auth succeeds) */
   onLoginSuccess?: (user: User) => void | Promise<void>;
@@ -258,8 +279,8 @@ export interface RegisterFormProps {
 export interface ForgotPasswordFormProps {
   /** Auth configuration */
   config: AuthConfig;
-  /** On success */
-  onSuccess?: () => void | Promise<void>;
+  /** Submit handler — receives the entered email and performs the reset request */
+  onSuccess?: (data: { email: string }) => void | Promise<void>;
   /** On error */
   onError?: (error: string) => void;
   /** Show back to login link */
@@ -274,8 +295,8 @@ export interface ResetPasswordFormProps {
   config: AuthConfig;
   /** Reset token */
   token: string;
-  /** On success */
-  onSuccess?: () => void | Promise<void>;
+  /** Submit handler — receives the token and the new password */
+  onSuccess?: (data: { token: string; password: string }) => void | Promise<void>;
   /** On error */
   onError?: (error: string) => void;
 }