@umituz/web-dashboard 3.2.2 → 4.0.0

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

@@ -1,47 +1,64 @@
 /**
  * Auth Layout Component
  *
- * Configurable layout wrapper for authentication pages
+ * Configurable layout wrapper for authentication pages.
+ * Strings stay localizable via the optional `translate` prop; when it
+ * is not provided the embedded English fallbacks are rendered.
+ * Styling is entirely `udb-auth*` classes from the package stylesheet.
  */
 
 import { BrandLogo } from "../../layouts/components";
-import { cn } from "@umituz/web-design-system/utils";
-import type { AuthLayoutProps } from "../types/auth";
+import { cn } from "../../../primitives";
+import { AUTH_KEYS } from "../utils/i18nKeys";
+import type { AuthLayoutProps, Translate } from "../types/auth";
+
+/**
+ * Embedded fallbacks used when no `translate` prop is supplied.
+ * Keys mirror the AUTH_KEYS catalog so consumers can override
+ * every string via their own i18n setup.
+ */
+const DEFAULT_STRINGS: Record<string, string> = {
+  [AUTH_KEYS.layout.backToHome]: "Back to home",
+  [AUTH_KEYS.layout.orContinueWith]: "Or continue with",
+  [AUTH_KEYS.layout.allRightsReserved]: "All rights reserved.",
+};
 
 export const AuthLayout = ({
   config,
-  authState,
-  authActions,
+  translate,
+  onSocialLogin,
   children,
 }: AuthLayoutProps) => {
+  const t: Translate = translate ?? ((key) => DEFAULT_STRINGS[key] ?? key);
+  // Prefer an explicit home route; fall back to afterLoginRoute for backwards compatibility.
+  const homeRoute = config.homeRoute ?? config.afterLoginRoute;
+  const footerLinks = config.footerLinks ?? [];
+
   return (
-    <div className="min-h-screen bg-background flex flex-col">
+    <div className="udb-root udb-auth">
       {/* Header */}
-      <header className="border-b border-border px-6 py-4 flex items-center justify-between">
-        <div className="flex items-center gap-2">
+      <header className="udb-auth__header">
+        <div className="udb-auth__brand">
           <BrandLogo size={32} />
-          <span className="font-bold text-xl text-foreground">{config.brandName}</span>
+          <span className="udb-auth__brand-name">{config.brandName}</span>
         </div>
 
         {/* Additional Header Content */}
-        {config.afterLoginRoute && (
-          <a
-            href={config.afterLoginRoute}
-            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-          >
-            Back to home
+        {homeRoute && (
+          <a href={homeRoute} className="udb-auth__home-link">
+            {t(AUTH_KEYS.layout.backToHome)}
           </a>
         )}
       </header>
 
       {/* Main Content */}
-      <main className="flex-1 flex items-center justify-center px-4 py-12 bg-secondary/30">
-        <div className="w-full max-w-md">
+      <main className="udb-auth__main">
+        <div className="udb-auth__column">
           {/* Card Container */}
-          <div className="bg-background border border-border rounded-2xl shadow-sm p-8">
+          <div className="udb-auth__card">
             {/* Tagline */}
             {config.brandTagline && (
-              <p className="text-center text-sm text-muted-foreground mb-6">
+              <p className="udb-auth__tagline">
                 {config.brandTagline}
               </p>
             )}
@@ -52,36 +69,24 @@ export const AuthLayout = ({
 
           {/* Social Login */}
           {config.showSocialLogin && config.socialProviders && config.socialProviders.length > 0 && (
-            <div className="mt-6 space-y-4">
+            <div className="udb-auth__social">
               {/* Divider */}
-              <div className="relative">
-                <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-border" />
-                </div>
-                <div className="relative flex justify-center text-sm">
-                  <span className="px-2 bg-secondary/30 text-muted-foreground">
-                    Or continue with
-                  </span>
-                </div>
+              <div className="udb-divider-row">
+                <span className="udb-divider-row__label">
+                  {t(AUTH_KEYS.layout.orContinueWith)}
+                </span>
               </div>
 
               {/* Social Buttons */}
-              <div className="grid grid-cols-2 gap-3">
+              <div className="udb-social-grid">
                 {config.socialProviders.map((provider) => (
                   <button
                     key={provider.id}
                     type="button"
-                    className={cn(
-                      "flex items-center justify-center gap-2 px-4 py-3 rounded-lg border",
-                      "bg-background hover:bg-muted transition-colors",
-                      "text-sm font-medium text-foreground"
-                    )}
-                    onClick={() => {
-                      // Handle social login
-                      console.log(`Social login with ${provider.id}`);
-                    }}
+                    className={cn("udb-social-btn")}
+                    onClick={() => onSocialLogin?.(provider.id)}
                   >
-                    <span className="text-lg">{provider.icon}</span>
+                    <span className="udb-social-btn__icon">{provider.icon}</span>
                     <span>{provider.name}</span>
                   </button>
                 ))}
@@ -92,20 +97,24 @@ export const AuthLayout = ({
       </main>
 
       {/* Footer */}
-      <footer className="border-t border-border px-6 py-4">
-        <div className="max-w-4xl mx-auto flex items-center justify-between text-xs text-muted-foreground">
-          <p>© {new Date().getFullYear()} {config.brandName}. All rights reserved.</p>
-          <div className="flex items-center gap-4">
-            <a href="/terms" className="hover:text-foreground transition-colors">
-              Terms
-            </a>
-            <a href="/privacy" className="hover:text-foreground transition-colors">
-              Privacy
-            </a>
-            <a href="/contact" className="hover:text-foreground transition-colors">
-              Contact
-            </a>
-          </div>
+      <footer className="udb-auth__footer">
+        <div className="udb-auth__footer-inner">
+          <p>
+            © {new Date().getFullYear()} {config.brandName}. {t(AUTH_KEYS.layout.allRightsReserved)}
+          </p>
+          {footerLinks.length > 0 && (
+            <div className="udb-auth__footer-links">
+              {footerLinks.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  className="udb-auth__footer-link"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          )}
         </div>
       </footer>
     </div>

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

@@ -1,16 +1,39 @@
 /**
- * Forgot Password Form Component
+ * ForgotPasswordForm
  *
- * Password reset request form
+ * Composed of shared auth primitives (EmailInput, AuthErrorBanner).
+ * All copy is i18n-keyed; the success state uses lucide icons
+ * instead of the previous `✓` Unicode glyphs.
  */
 
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { ArrowLeft, Loader2, CheckCircle } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils";
-import { Button } from "@umituz/web-design-system/atoms";
-import type { ForgotPasswordFormProps } from "../types/auth";
+import { useT } from "../../../i18n";
+import { ArrowLeft, Loader2, CheckCircle2, Check } from "lucide-react";
+import { Button } from "../../../primitives";
+import type { ForgotPasswordFormProps, Translate } from "../types/auth";
 import { validateForgotPassword } from "../utils/auth";
+import { AUTH_KEYS } from "../utils/i18nKeys";
+import { AUTH_VALIDATION_KEYS } from "../utils/validationKeys";
+import { AuthErrorBanner, EmailInput } from "./shared";
+
+const KEYS = {
+  title: 'auth.forgotPassword.title',
+  description: 'auth.forgotPassword.description',
+  emailLabel: AUTH_KEYS.fields.email,
+  emailPlaceholder: AUTH_KEYS.placeholders.emailExample,
+  submitting: 'auth.forgotPassword.submitting',
+  submit: 'auth.forgotPassword.submit',
+  backToSignIn: 'auth.forgotPassword.backToSignIn',
+  successTitle: 'auth.forgotPassword.successTitle',
+  successMessage: 'auth.forgotPassword.successMessage',
+  sentTo: 'auth.forgotPassword.sentTo',
+  step1: 'auth.forgotPassword.steps.step1',
+  step2: 'auth.forgotPassword.steps.step2',
+  step3: 'auth.forgotPassword.steps.step3',
+  invalidEmail: AUTH_VALIDATION_KEYS.emailInvalid,
+  sendResetFailed: 'auth.errors.sendResetFailed',
+} as const;
 
 export const ForgotPasswordForm = ({
   config,
@@ -19,6 +42,9 @@ export const ForgotPasswordForm = ({
   showBackLink = true,
 }: ForgotPasswordFormProps) => {
   const navigate = useNavigate();
+  const t = useT();
+  const translate: Translate = t;
+
   const [email, setEmail] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -28,29 +54,26 @@ export const ForgotPasswordForm = ({
     e.preventDefault();
     setError(null);
 
-    // Validate
     const validation = validateForgotPassword({ email });
     if (!validation.valid) {
-      setError(validation.error || "Invalid email");
-      onError?.(validation.error || "Invalid email");
+      const message = validation.error ?? KEYS.invalidEmail;
+      setError(message);
+      onError?.(message);
       return;
     }
 
     setIsLoading(true);
-
     try {
-      // In production, call your auth API
-      // await forgotPassword({ email });
-
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
+      // Hand off to the consumer's auth provider. The form has
+      // no network knowledge of its own — it's pure orchestration.
+      // The submitted email is passed through so the consumer can
+      // actually trigger the reset email.
+      await onSuccess?.({ email });
       setSuccess(true);
-      await onSuccess?.();
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "Failed to send reset email";
-      setError(errorMessage);
-      onError?.(errorMessage);
+      const message = err instanceof Error ? err.message : KEYS.sendResetFailed;
+      setError(message);
+      onError?.(message);
     } finally {
       setIsLoading(false);
     }
@@ -58,48 +81,44 @@ export const ForgotPasswordForm = ({
 
   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 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>
-          <div>
-            <h1 className="text-2xl font-extrabold text-foreground mb-2">
-              Check your email
-            </h1>
-            <p className="text-muted-foreground">
-              We sent a password reset link to{" "}
-              <span className="font-medium text-foreground">{email}</span>
-            </p>
-          </div>
-        </div>
-
-        {/* Instructions */}
-        <div className="bg-muted/50 border border-border rounded-lg p-4 space-y-2">
-          <p className="text-sm text-muted-foreground">
-            ✓ Click the link in your email
-          </p>
-          <p className="text-sm text-muted-foreground">
-            ✓ Create a new password
-          </p>
-          <p className="text-sm text-muted-foreground">
-            ✓ Sign in with your new password
+          <h1 className="udb-form__title">
+            {translate(KEYS.successTitle)}
+          </h1>
+          <p className="udb-form__subtitle">
+            {translate(KEYS.sentTo)}{' '}
+            <span className="udb-form__subtitle-strong">{email}</span>
           </p>
         </div>
 
-        {/* Back to Login */}
+        <ol className="udb-steps-list">
+          <li className="udb-steps-list__item">
+            <Check className="udb-steps-list__icon" aria-hidden="true" />
+            {translate(KEYS.step1)}
+          </li>
+          <li className="udb-steps-list__item">
+            <Check className="udb-steps-list__icon" aria-hidden="true" />
+            {translate(KEYS.step2)}
+          </li>
+          <li className="udb-steps-list__item">
+            <Check className="udb-steps-list__icon" aria-hidden="true" />
+            {translate(KEYS.step3)}
+          </li>
+        </ol>
+
         {showBackLink && config.loginRoute && (
           <Button
             type="button"
             variant="ghost"
-            onClick={() => navigate(config.loginRoute!)}
-            className="w-full"
+            onClick={() => navigate(config.loginRoute)}
+            className="udb-submit-btn"
           >
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            Back to sign in
+            <ArrowLeft className="udb-btn__spinner" aria-hidden="true" />
+            {translate(KEYS.backToSignIn)}
           </Button>
         )}
       </div>
@@ -107,71 +126,50 @@ export const ForgotPasswordForm = ({
   }
 
   return (
-    <form onSubmit={handleSubmit} className="w-full max-w-md space-y-6">
-      {/* Header */}
-      <div className="text-center">
-        <h1 className="text-3xl font-extrabold text-foreground mb-2">
-          Forgot 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">
-          No worries, we'll send you reset instructions
-        </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>
-      )}
+      <AuthErrorBanner message={error} translate={translate} />
 
-      {/* Email Field */}
-      <div className="space-y-2">
-        <label htmlFor="email" className="text-sm font-medium text-foreground">
-          Email
-        </label>
-        <input
-          id="email"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="you@example.com"
-          className={cn(
-            "w-full px-4 py-3 rounded-lg border bg-background",
-            "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
-            "placeholder:text-muted-foreground",
-            error && "border-destructive"
-          )}
-          disabled={isLoading}
-          autoComplete="email"
-        />
-      </div>
+      <EmailInput
+        id="forgot-email"
+        labelKey={KEYS.emailLabel}
+        placeholderKey={KEYS.emailPlaceholder}
+        value={email}
+        onChange={setEmail}
+        translate={translate}
+        disabled={isLoading}
+        required
+      />
 
-      {/* 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}
       >
         {isLoading ? (
           <>
-            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-            Sending...
+            <Loader2 className="udb-btn__spinner" aria-hidden="true" />
+            {translate(KEYS.submitting)}
           </>
         ) : (
-          "Send reset link"
+          translate(KEYS.submit)
         )}
       </Button>
 
-      {/* Back to Login */}
       {showBackLink && config.loginRoute && (
         <button
           type="button"
-          onClick={() => navigate(config.loginRoute!)}
-          className="w-full flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => navigate(config.loginRoute)}
+          className="udb-back-link"
         >
-          <ArrowLeft className="h-4 w-4" />
-          Back to sign in
+          <ArrowLeft className="udb-back-link__icon" aria-hidden="true" />
+          {translate(KEYS.backToSignIn)}
         </button>
       )}
     </form>