@umituz/web-dashboard 5.0.1 → 6.1.0

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

@@ -1,63 +0,0 @@
-import { useMemo } from "react";
-import { calculatePasswordStrength } from "../../utils/auth";
-import { cn } from "@umituz/web-design-system/utils/cn";
-
-const STRENGTH_KEYS = {
-  weak: 'auth.passwordStrength.weak',
-  fair: 'auth.passwordStrength.fair',
-  good: 'auth.passwordStrength.good',
-  strong: 'auth.passwordStrength.strong',
-} as const;
-
-type StrengthBand = keyof typeof STRENGTH_KEYS;
-
-const scoreToBand = (score: number): StrengthBand => {
-  if (score < 25) return 'weak';
-  if (score < 50) return 'fair';
-  if (score < 75) return 'good';
-  return 'strong';
-};
-
-export interface PasswordStrengthIndicatorProps {
-  password: string;
-  translate: (key: string) => string;
-}
-
-export const PasswordStrengthIndicator = ({
-  password,
-  translate,
-}: PasswordStrengthIndicatorProps) => {
-  const { band, filledSegments } = useMemo(() => {
-    const value = calculatePasswordStrength(password);
-    const resolvedBand = scoreToBand(value);
-    const segments = Math.round(value / 25);
-    return {
-      band: resolvedBand,
-      filledSegments: segments,
-    };
-  }, [password]);
-
-  if (!password) return null;
-
-  return (
-    <div className="udb-strength" aria-live="polite">
-      <div className="udb-strength__bars">
-        {[0, 1, 2, 3].map((segment) => {
-          const isActive = segment < filledSegments;
-          return (
-            <div
-              key={segment}
-              className={cn(
-                "udb-strength__bar",
-                isActive && `udb-strength__bar--${band}`,
-              )}
-            />
-          );
-        })}
-      </div>
-      <p className={cn("udb-strength__label", `udb-strength__label--${band}`)}>
-        {translate(STRENGTH_KEYS[band])}
-      </p>
-    </div>
-  );
-};

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

@@ -1,44 +0,0 @@
-import { Button } from "@umituz/web-design-system/atoms";
-import { GoogleIcon, AppleIcon } from "./SocialProviderIcons";
-
-export type SocialProviderId = 'google' | 'apple';
-
-export interface SocialLoginButtonsProps {
-  onProvider: (id: SocialProviderId) => void;
-  translate: (key: string) => string;
-  disabled?: boolean;
-}
-
-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

@@ -1,48 +0,0 @@
-/**
- * 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

@@ -1,20 +0,0 @@
-/**
- * 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

@@ -1,8 +0,0 @@
-/**
- * Auth Hooks
- *
- * Export all auth hooks
- */
-
-export { useAuth } from "./useAuth";
-export type { AuthProvider } from "./useAuth";

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

@@ -1,230 +0,0 @@
-/**
- * useAuth Hook
- *
- * 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 } from "react";
-import type {
-  AuthState,
-  User,
-  AuthActions,
-  LoginCredentials,
-  RegisterData,
-  ForgotPasswordData,
-  ResetPasswordData,
-} from "../types/auth";
-import {
-  validateLogin,
-  validateRegister,
-  validateForgotPassword,
-  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 {
-  /** Auth implementation (connects to your backend) */
-  authProvider?: AuthProvider;
-}
-
-/**
- * Wrap a side-effectful async function with the standard
- * isLoading + error + throw contract.
- *
- * 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
- *
- * 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 { authProvider } = options;
-
-  const [authState, setAuthState] = useState<AuthState>({
-    isAuthenticated: false,
-    user: null,
-    isLoading: false,
-    error: null,
-  });
-
-  const updateState = useCallback((updates: Partial<AuthState>) => {
-    setAuthState((prev) => ({ ...prev, ...updates }));
-  }, []);
-
-  const requireProvider = useCallback((): AuthProvider => {
-    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);
-      }
-
-      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;
-      });
-    },
-    [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);
-      }
-
-      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;
-      });
-    },
-    [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 executeAuthAction(updateState, "Failed to send reset email", async () => {
-        const provider = requireProvider();
-        await provider.forgotPassword(data);
-        updateState({ isLoading: false });
-      });
-    },
-    [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 executeAuthAction(updateState, "Failed to reset password", async () => {
-        const provider = requireProvider();
-        await provider.resetPassword(data);
-        updateState({ isLoading: false });
-      });
-    },
-    [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);
-      }
-
-      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;
-      });
-    },
-    [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;
-    });
-  }, [requireProvider, updateState]);
-
-  const clearError = useCallback(() => {
-    updateState({ error: null });
-  }, [updateState]);
-
-  const authActions: AuthActions = {
-    login,
-    register,
-    logout,
-    forgotPassword,
-    resetPassword,
-    updateProfile,
-    refresh,
-  };
-
-  return {
-    ...authState,
-    ...authActions,
-    clearError,
-  };
-}

package/src/domains/auth/index.ts

@@ -1,62 +0,0 @@
-/**
- * Auth Domain
- *
- * Main entry point for authentication domain
- */
-
-// Components
-export {
-  AuthLayout,
-  LoginForm,
-  RegisterForm,
-  ForgotPasswordForm,
-  ResetPasswordForm,
-} from "./components";
-
-// Hooks
-export { useAuth, type AuthProvider } from "./hooks";
-
-// Utils
-export {
-  isValidEmail,
-  isValidPassword,
-  validateLogin,
-  validateRegister,
-  validateForgotPassword,
-  validateResetPassword,
-  getUserDisplayName,
-  getUserInitials,
-  isEmailVerified,
-  formatUserCreatedAt,
-  maskEmail,
-  generateResetToken,
-  calculatePasswordStrength,
-  getPasswordStrengthBand,
-  sanitizeInput,
-  AUTH_KEYS,
-  AUTH_VALIDATION_KEYS,
-  type ValidationResult,
-  type PasswordStrengthBand,
-  type AuthValidationKey,
-} from "./utils";
-
-// Types
-export type {
-  LoginCredentials,
-  RegisterData,
-  ForgotPasswordData,
-  ResetPasswordData,
-  AuthState,
-  User,
-  AuthActions,
-  AuthComponentProps,
-  AuthStep,
-  AuthConfig,
-  SocialProvider,
-  AuthLayoutProps,
-  LoginFormProps,
-  RegisterFormProps,
-  ForgotPasswordFormProps,
-  ResetPasswordFormProps,
-  Translate,
-} from "./types";