@umituz/web-dashboard 5.0.1 → 6.0.0

package/src/domains/auth/components/ResetPasswordForm.tsx

@@ -1,173 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useT } from "@umituz/web-localization/react";
-import { Loader2, CheckCircle2 } from "lucide-react";
-import { Button, Input } from "@umituz/web-design-system/atoms";
-import { cn } from "@umituz/web-design-system/utils/cn";
-import type { ResetPasswordFormProps, Translate } from "../types/auth";
-import { validateResetPassword } from "../utils/auth";
-import { AUTH_KEYS } from "../utils/i18nKeys";
-import { AUTH_VALIDATION_KEYS } from "../utils/validationKeys";
-import {
-  AuthErrorBanner,
-  PasswordInput,
-  PasswordStrengthIndicator,
-} from "./shared";
-
-const KEYS = {
-  title: 'auth.resetPassword.title',
-  description: 'auth.resetPassword.description',
-  newPassword: 'auth.resetPassword.newPassword',
-  confirmNewPassword: 'auth.resetPassword.confirmNewPassword',
-  passwordsDoNotMatch: AUTH_VALIDATION_KEYS.passwordsDoNotMatch,
-  submit: 'auth.resetPassword.submit',
-  submitting: 'auth.resetPassword.submitting',
-  successTitle: 'auth.resetPassword.successTitle',
-  successMessage: 'auth.resetPassword.successMessage',
-  goToSignIn: 'auth.resetPassword.goToSignIn',
-  invalidResetData: AUTH_VALIDATION_KEYS.passwordTooShort,
-  resetFailed: 'auth.errors.resetFailed',
-} as const;
-
-export const ResetPasswordForm = ({
-  config,
-  token,
-  onSuccess,
-  onError,
-}: ResetPasswordFormProps) => {
-  const navigate = useNavigate();
-  const t = useT();
-  const translate: Translate = t;
-
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-
-  const passwordsMatch = password === confirmPassword;
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-
-    const validation = validateResetPassword({ token, password, confirmPassword });
-    if (!validation.valid) {
-      const message = validation.error ?? KEYS.invalidResetData;
-      setError(message);
-      onError?.(message);
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      await onSuccess?.({ token, password });
-      setPassword("");
-      setConfirmPassword("");
-      setSuccess(true);
-    } catch (err) {
-      const message = err instanceof Error ? err.message : KEYS.resetFailed;
-      setError(message);
-      onError?.(message);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  if (success) {
-    return (
-      <div className="udb-form" role="status" aria-live="polite">
-        <div className="udb-form__header">
-          <div className="udb-success-badge">
-            <CheckCircle2 className="udb-success-badge__icon" aria-hidden="true" />
-          </div>
-          <h1 className="udb-form__title">
-            {translate(KEYS.successTitle)}
-          </h1>
-          <p className="udb-form__subtitle">
-            {translate(KEYS.successMessage)}
-          </p>
-        </div>
-
-        {config.loginRoute && (
-          <Button
-            type="button"
-            onClick={() => navigate(config.loginRoute)}
-            className="udb-submit-btn udb-submit-btn--pill"
-          >
-            {translate(KEYS.goToSignIn)}
-          </Button>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="udb-form" noValidate>
-      <div className="udb-form__header">
-        <h1 className="udb-form__title udb-form__title--lg">
-          {translate(KEYS.title)}
-        </h1>
-        <p className="udb-form__subtitle">{translate(KEYS.description)}</p>
-      </div>
-
-      <AuthErrorBanner message={error} translate={translate} />
-
-      <div className="udb-form__group">
-        <PasswordInput
-          id="reset-password"
-          labelKey={KEYS.newPassword}
-          placeholderKey={AUTH_KEYS.placeholders.password}
-          value={password}
-          onChange={setPassword}
-          translate={translate}
-          autoComplete="new-password"
-          disabled={isLoading}
-          required
-        />
-        <PasswordStrengthIndicator password={password} translate={translate} />
-      </div>
-
-      <div className="udb-field">
-        <label htmlFor="reset-confirm" className="udb-field__label">
-          {translate(KEYS.confirmNewPassword)}
-          <span className="udb-field__required" aria-hidden="true">*</span>
-        </label>
-        <Input
-          id="reset-confirm"
-          type="password"
-          autoComplete="new-password"
-          required
-          disabled={isLoading}
-          value={confirmPassword}
-          placeholder={translate(AUTH_KEYS.placeholders.password)}
-          onChange={(e) => setConfirmPassword(e.target.value)}
-          aria-invalid={Boolean(confirmPassword) && !passwordsMatch}
-          className={cn(confirmPassword && !passwordsMatch && 'udb-input--error')}
-        />
-        {confirmPassword && !passwordsMatch && (
-          <p className="udb-field__error" role="alert">
-            {translate(KEYS.passwordsDoNotMatch)}
-          </p>
-        )}
-      </div>
-
-      <Button
-        type="submit"
-        className="udb-submit-btn udb-submit-btn--pill"
-        disabled={isLoading || !passwordsMatch}
-      >
-        {isLoading ? (
-          <>
-            <Loader2 className="udb-btn__spinner" aria-hidden="true" />
-            {translate(KEYS.submitting)}
-          </>
-        ) : (
-          translate(KEYS.submit)
-        )}
-      </Button>
-    </form>
-  );
-};
-
-export default ResetPasswordForm;

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

@@ -1,11 +0,0 @@
-/**
- * Auth Components
- *
- * Export all auth components
- */
-
-export { AuthLayout } from "./AuthLayout";
-export { LoginForm } from "./LoginForm";
-export { RegisterForm } from "./RegisterForm";
-export { ForgotPasswordForm } from "./ForgotPasswordForm";
-export { ResetPasswordForm } from "./ResetPasswordForm";

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

@@ -1,25 +0,0 @@
-import { AlertCircle } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils/cn";
-
-export interface AuthErrorBannerProps {
-  message?: string | null;
-  translate: (key: string) => string;
-  className?: string;
-}
-
-export const AuthErrorBanner = ({ message, translate, className }: AuthErrorBannerProps) => {
-  if (!message) return null;
-
-  const resolved = message.includes('.') ? translate(message) : message;
-
-  return (
-    <div
-      role="alert"
-      aria-live="polite"
-      className={cn("udb-form-alert", className)}
-    >
-      <AlertCircle className="udb-form-alert__icon" aria-hidden="true" />
-      <span>{resolved}</span>
-    </div>
-  );
-};

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

@@ -1,73 +0,0 @@
-import { forwardRef } from "react";
-import { Input } from "@umituz/web-design-system/atoms";
-import { cn } from "@umituz/web-design-system/utils/cn";
-
-export interface EmailInputProps {
-  id: string;
-  labelKey: string;
-  placeholderKey: string;
-  value: string;
-  onChange: (value: string) => void;
-  translate: (key: string) => string;
-  autoComplete?: string;
-  disabled?: boolean;
-  required?: boolean;
-  error?: string | null;
-  className?: string;
-}
-
-export const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
-  (
-    {
-      id,
-      labelKey,
-      placeholderKey,
-      value,
-      onChange,
-      translate,
-      autoComplete = "email",
-      disabled = false,
-      required = false,
-      error = null,
-      className,
-    },
-    ref,
-  ) => {
-    return (
-      <div className={cn("udb-field", className)}>
-        <label htmlFor={id} className="udb-field__label">
-          {translate(labelKey)}
-          {required && (
-            <span className="udb-field__required" aria-hidden="true">
-              *
-            </span>
-          )}
-        </label>
-        <Input
-          ref={ref}
-          id={id}
-          type="email"
-          autoComplete={autoComplete}
-          required={required}
-          disabled={disabled}
-          value={value}
-          placeholder={translate(placeholderKey)}
-          onChange={(e) => onChange(e.target.value)}
-          aria-invalid={Boolean(error)}
-          aria-describedby={error ? `${id}-error` : undefined}
-        />
-        {error && (
-          <p
-            id={`${id}-error`}
-            className="udb-field__error"
-            role="alert"
-          >
-            {error}
-          </p>
-        )}
-      </div>
-    );
-  },
-);
-
-EmailInput.displayName = "EmailInput";

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

@@ -1,100 +0,0 @@
-import { forwardRef, useState } from "react";
-import { Eye, EyeOff } from "lucide-react";
-import { Input } from "@umituz/web-design-system/atoms";
-import { Button } from "@umituz/web-design-system/atoms";
-import { cn } from "@umituz/web-design-system/utils/cn";
-
-export interface PasswordInputProps {
-  id: string;
-  labelKey: string;
-  placeholderKey: string;
-  value: string;
-  onChange: (value: string) => void;
-  translate: (key: string) => string;
-  autoComplete?: string;
-  disabled?: boolean;
-  required?: boolean;
-  error?: string | null;
-  className?: string;
-}
-
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  (
-    {
-      id,
-      labelKey,
-      placeholderKey,
-      value,
-      onChange,
-      translate,
-      autoComplete = "current-password",
-      disabled = false,
-      required = false,
-      error = null,
-      className,
-    },
-    ref,
-  ) => {
-    const [visible, setVisible] = useState(false);
-
-    return (
-      <div className={cn("udb-field", className)}>
-        <label htmlFor={id} className="udb-field__label">
-          {translate(labelKey)}
-          {required && (
-            <span className="udb-field__required" aria-hidden="true">
-              *
-            </span>
-          )}
-        </label>
-        <div className="udb-password-wrap">
-          <Input
-            ref={ref}
-            id={id}
-            type={visible ? "text" : "password"}
-            autoComplete={autoComplete}
-            required={required}
-            disabled={disabled}
-            value={value}
-            placeholder={translate(placeholderKey)}
-            onChange={(e) => onChange(e.target.value)}
-            aria-invalid={Boolean(error)}
-            aria-describedby={error ? `${id}-error` : undefined}
-            className="udb-input--with-toggle"
-          />
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            tabIndex={-1}
-            onClick={() => setVisible((prev) => !prev)}
-            disabled={disabled}
-            aria-label={
-              visible
-                ? translate('auth.a11y.hidePassword')
-                : translate('auth.a11y.showPassword')
-            }
-            className="udb-password-toggle"
-          >
-            {visible ? (
-              <EyeOff className="udb-password-toggle__icon" aria-hidden="true" />
-            ) : (
-              <Eye className="udb-password-toggle__icon" aria-hidden="true" />
-            )}
-          </Button>
-        </div>
-        {error && (
-          <p
-            id={`${id}-error`}
-            className="udb-field__error"
-            role="alert"
-          >
-            {error}
-          </p>
-        )}
-      </div>
-    );
-  },
-);
-
-PasswordInput.displayName = "PasswordInput";

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";