@umituz/web-dashboard 3.2.4 → 4.0.0

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

@@ -1,16 +1,40 @@
 /**
- * Reset Password Form Component
+ * ResetPasswordForm
  *
- * Password reset confirmation form
+ * Composed from shared auth primitives (PasswordInput, PasswordStrengthIndicator,
+ * AuthErrorBanner). All copy is i18n-keyed.
  */
 
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Eye, EyeOff, Loader2, CheckCircle } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils";
-import { Button } from "@umituz/web-design-system/atoms";
-import type { ResetPasswordFormProps } from "../types/auth";
-import { validateResetPassword, calculatePasswordStrength } from "../utils/auth";
+import { useT } from "../../../i18n";
+import { Loader2, CheckCircle2 } from "lucide-react";
+import { Button, Input } from "../../../primitives";
+import { cn } from "../../../primitives";
+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,
@@ -19,81 +43,70 @@ export const ResetPasswordForm = ({
   onError,
 }: ResetPasswordFormProps) => {
   const navigate = useNavigate();
+  const t = useT();
+  const translate: Translate = t;
+
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   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);
 
-    // Validate
-    const validation = validateResetPassword({
-      token,
-      password,
-      confirmPassword,
-    });
+    const validation = validateResetPassword({ token, password, confirmPassword });
     if (!validation.valid) {
-      setError(validation.error || "Invalid reset data");
-      onError?.(validation.error || "Invalid reset data");
+      const message = validation.error ?? KEYS.invalidResetData;
+      setError(message);
+      onError?.(message);
       return;
     }
 
     setIsLoading(true);
-
     try {
-      // In production, call your auth API
-      // await resetPassword({ token, password });
-
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
+      // Hand off the actual reset to the consumer. The form is
+      // pure orchestration; no network knowledge here. Token and the
+      // new password are passed through so the consumer can persist it.
+      await onSuccess?.({ token, password });
+      // Don't keep the new password in component state after completion.
+      setPassword("");
+      setConfirmPassword("");
       setSuccess(true);
-      await onSuccess?.();
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "Failed to reset password";
-      setError(errorMessage);
-      onError?.(errorMessage);
+      const message = err instanceof Error ? err.message : KEYS.resetFailed;
+      setError(message);
+      onError?.(message);
     } finally {
       setIsLoading(false);
     }
   };
 
-  const passwordStrength = calculatePasswordStrength(password);
-  const passwordsMatch = password === confirmPassword;
-
   if (success) {
     return (
-      <div className="w-full max-w-md space-y-6">
-        {/* Success Message */}
-        <div className="text-center space-y-4">
-          <div className="flex justify-center">
-            <div className="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center">
-              <CheckCircle className="h-8 w-8 text-green-600 dark:text-green-500" />
-            </div>
-          </div>
-          <div>
-            <h1 className="text-2xl font-extrabold text-foreground mb-2">
-              Password reset successful
-            </h1>
-            <p className="text-muted-foreground">
-              Your password has been updated. You can now sign in with your new password.
-            </p>
+      <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>
 
-        {/* Sign In Button */}
         {config.loginRoute && (
           <Button
             type="button"
             onClick={() => navigate(config.loginRoute)}
-            className="w-full h-12 text-base font-bold rounded-full"
+            className="udb-submit-btn udb-submit-btn--pill"
           >
-            Go to sign in
+            {translate(KEYS.goToSignIn)}
           </Button>
         )}
       </div>
@@ -101,126 +114,67 @@ export const ResetPasswordForm = ({
   }
 
   return (
-    <form onSubmit={handleSubmit} className="w-full max-w-md space-y-5">
-      {/* Header */}
-      <div className="text-center">
-        <h1 className="text-3xl font-extrabold text-foreground mb-2">
-          Create new password
+    <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="text-muted-foreground">
-          Enter your new password below
-        </p>
+        <p className="udb-form__subtitle">{translate(KEYS.description)}</p>
       </div>
 
-      {/* Error Message */}
-      {error && (
-        <div className="bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-lg text-sm">
-          {error}
-        </div>
-      )}
-
-      {/* Password Field */}
-      <div className="space-y-2">
-        <label htmlFor="password" className="text-sm font-medium text-foreground">
-          New Password
-        </label>
-        <div className="relative">
-          <input
-            id="password"
-            type={showPassword ? "text" : "password"}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="••••••••"
-            className={cn(
-              "w-full px-4 py-3 rounded-lg border bg-background pr-12",
-              "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
-              "placeholder:text-muted-foreground"
-            )}
-            disabled={isLoading}
-            autoComplete="new-password"
-          />
-          <button
-            type="button"
-            onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
-            tabIndex={-1}
-          >
-            {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
-          </button>
-        </div>
-        {/* Password Strength Indicator */}
-        {password && (
-          <div className="flex items-center gap-2">
-            <div className="flex-1 h-1 bg-muted rounded-full overflow-hidden">
-              <div
-                className={cn(
-                  "h-full transition-all duration-300",
-                  passwordStrength < 25 && "bg-destructive",
-                  passwordStrength >= 25 && passwordStrength < 50 && "bg-orange-500",
-                  passwordStrength >= 50 && passwordStrength < 75 && "bg-yellow-500",
-                  passwordStrength >= 75 && "bg-green-500"
-                )}
-                style={{ width: `${passwordStrength}%` }}
-              />
-            </div>
-            <span className="text-xs text-muted-foreground">
-              {passwordStrength < 25 && "Weak"}
-              {passwordStrength >= 25 && passwordStrength < 50 && "Fair"}
-              {passwordStrength >= 50 && passwordStrength < 75 && "Good"}
-              {passwordStrength >= 75 && "Strong"}
-            </span>
-          </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>
 
-      {/* Confirm Password Field */}
-      <div className="space-y-2">
-        <label htmlFor="confirmPassword" className="text-sm font-medium text-foreground">
-          Confirm New Password
+      <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>
-        <div className="relative">
-          <input
-            id="confirmPassword"
-            type={showConfirmPassword ? "text" : "password"}
-            value={confirmPassword}
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            placeholder="••••••••"
-            className={cn(
-              "w-full px-4 py-3 rounded-lg border bg-background pr-12",
-              "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
-              "placeholder:text-muted-foreground",
-              confirmPassword && !passwordsMatch && "border-destructive"
-            )}
-            disabled={isLoading}
-            autoComplete="new-password"
-          />
-          <button
-            type="button"
-            onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
-            tabIndex={-1}
-          >
-            {showConfirmPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
-          </button>
-        </div>
+        <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="text-xs text-destructive">Passwords do not match</p>
+          <p className="udb-field__error" role="alert">
+            {translate(KEYS.passwordsDoNotMatch)}
+          </p>
         )}
       </div>
 
-      {/* Submit Button */}
       <Button
         type="submit"
-        className="w-full h-12 text-base font-bold rounded-full"
+        className="udb-submit-btn udb-submit-btn--pill"
         disabled={isLoading || !passwordsMatch}
       >
         {isLoading ? (
           <>
-            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-            Resetting...
+            <Loader2 className="udb-btn__spinner" aria-hidden="true" />
+            {translate(KEYS.submitting)}
           </>
         ) : (
-          "Reset password"
+          translate(KEYS.submit)
         )}
       </Button>
     </form>

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

@@ -0,0 +1,35 @@
+/**
+ * AuthErrorBanner
+ *
+ * Inline error display for auth forms. Renders an alert with the
+ * provided i18n key resolved by the consumer's translation function.
+ */
+
+import { AlertCircle } from "lucide-react";
+import { cn } from "../../../../primitives";
+
+export interface AuthErrorBannerProps {
+  /** i18n key for the message (already resolved by the consumer) */
+  message?: string | null;
+  /** Translation function used to resolve the key */
+  translate: (key: string) => string;
+  /** Optional className for layout integration */
+  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

@@ -0,0 +1,91 @@
+/**
+ * EmailInput
+ *
+ * Standardized email input used across all auth forms.
+ * Renders label, input, error state, and disabled state consistently.
+ */
+
+import { forwardRef } from "react";
+import { Input } from "../../../../primitives";
+import { cn } from "../../../../primitives";
+
+export interface EmailInputProps {
+  /** Input id (used to wire up the label) */
+  id: string;
+  /** Label i18n key — resolved via `translate` */
+  labelKey: string;
+  /** Placeholder i18n key */
+  placeholderKey: string;
+  /** Current value */
+  value: string;
+  /** Change handler */
+  onChange: (value: string) => void;
+  /** Translation function */
+  translate: (key: string) => string;
+  /** Auto-complete hint (default: "email") */
+  autoComplete?: string;
+  /** Disable the input */
+  disabled?: boolean;
+  /** Whether to mark the field as required (renders an asterisk) */
+  required?: boolean;
+  /** Optional error message to display below the field */
+  error?: string | null;
+  /** Custom className */
+  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

@@ -0,0 +1,119 @@
+/**
+ * PasswordInput
+ *
+ * Password field with show/hide toggle, used across all auth forms.
+ * Centralizes the visibility toggle, autoComplete, and label structure
+ * so individual forms can stay focused on their unique concerns.
+ */
+
+import { forwardRef, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { Input } from "../../../../primitives";
+import { Button } from "../../../../primitives";
+import { cn } from "../../../../primitives";
+
+export interface PasswordInputProps {
+  /** Input id (used to wire up the label) */
+  id: string;
+  /** Label i18n key */
+  labelKey: string;
+  /** Placeholder i18n key */
+  placeholderKey: string;
+  /** Current value */
+  value: string;
+  /** Change handler */
+  onChange: (value: string) => void;
+  /** Translation function */
+  translate: (key: string) => string;
+  /** Auto-complete hint (e.g., "current-password", "new-password") */
+  autoComplete?: string;
+  /** Disable the input */
+  disabled?: boolean;
+  /** Whether to mark the field as required (renders an asterisk) */
+  required?: boolean;
+  /** Optional error message to display below the field */
+  error?: string | null;
+  /** Custom className */
+  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

@@ -0,0 +1,75 @@
+/**
+ * PasswordStrengthIndicator
+ *
+ * Renders a 4-segment strength bar plus a localized label band.
+ * The label i18n key is computed from the strength band so the
+ * component stays free of hardcoded strings. Bar/label colors come
+ * from `--u-*` tones (weak/danger, fair/warning-2, good/warning,
+ * strong/success).
+ */
+
+import { useMemo } from "react";
+import { calculatePasswordStrength } from "../../utils/auth";
+import { cn } from "../../../../primitives";
+
+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 to evaluate */
+  password: string;
+  /** Translation function */
+  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>
+  );
+};