@umituz/web-dashboard 2.0.8 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "Dashboard Layout System - Customizable, themeable dashboard layouts and settings",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -23,6 +23,11 @@
     "./onboarding/hooks": "./src/domains/onboarding/hooks/index.ts",
     "./onboarding/utils": "./src/domains/onboarding/utils/index.ts",
     "./onboarding/types": "./src/domains/onboarding/types/index.ts",
+    "./auth": "./src/domains/auth/index.ts",
+    "./auth/components": "./src/domains/auth/components/index.ts",
+    "./auth/hooks": "./src/domains/auth/hooks/index.ts",
+    "./auth/utils": "./src/domains/auth/utils/index.ts",
+    "./auth/types": "./src/domains/auth/types/index.ts",
     "./package.json": "./package.json"
   },
   "files": [
@@ -64,6 +69,10 @@
     "settings",
     "onboarding",
     "wizard",
+    "auth",
+    "authentication",
+    "login",
+    "register",
     "react",
     "typescript",
     "components",

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

@@ -0,0 +1,114 @@
+/**
+ * Auth Layout Component
+ *
+ * Configurable layout wrapper for authentication pages
+ */
+
+import { BrandLogo } from "../../layouts/components";
+import type { AuthLayoutProps } from "../types/auth";
+
+export const AuthLayout = ({
+  config,
+  authState,
+  authActions,
+  children,
+}: AuthLayoutProps) => {
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      {/* Header */}
+      <header className="border-b border-border px-6 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <BrandLogo size={32} />
+          <span className="font-bold text-xl text-foreground">{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
+          </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">
+          {/* Card Container */}
+          <div className="bg-background border border-border rounded-2xl shadow-sm p-8">
+            {/* Tagline */}
+            {config.brandTagline && (
+              <p className="text-center text-sm text-muted-foreground mb-6">
+                {config.brandTagline}
+              </p>
+            )}
+
+            {/* Children Content (Forms) */}
+            {children}
+          </div>
+
+          {/* Social Login */}
+          {config.showSocialLogin && config.socialProviders && config.socialProviders.length > 0 && (
+            <div className="mt-6 space-y-4">
+              {/* 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>
+
+              {/* Social Buttons */}
+              <div className="grid grid-cols-2 gap-3">
+                {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}`);
+                    }}
+                  >
+                    <span className="text-lg">{provider.icon}</span>
+                    <span>{provider.name}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </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>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default AuthLayout;

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

@@ -0,0 +1,181 @@
+/**
+ * Forgot Password Form Component
+ *
+ * Password reset request form
+ */
+
+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 { validateForgotPassword } from "../utils/auth";
+
+export const ForgotPasswordForm = ({
+  config,
+  onSuccess,
+  onError,
+  showBackLink = true,
+}: ForgotPasswordFormProps) => {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate
+    const validation = validateForgotPassword({ email });
+    if (!validation.valid) {
+      setError(validation.error || "Invalid email");
+      onError?.(validation.error || "Invalid email");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      // In production, call your auth API
+      // await forgotPassword({ email });
+
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      setSuccess(true);
+      await onSuccess?.();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to send reset email";
+      setError(errorMessage);
+      onError?.(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  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">
+              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
+          </p>
+        </div>
+
+        {/* Back to Login */}
+        {showBackLink && config.loginRoute && (
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => navigate(config.loginRoute!)}
+            className="w-full"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to sign in
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  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?
+        </h1>
+        <p className="text-muted-foreground">
+          No worries, we'll send you reset instructions
+        </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>
+      )}
+
+      {/* 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>
+
+      {/* Submit Button */}
+      <Button
+        type="submit"
+        className="w-full h-12 text-base font-bold rounded-full"
+        disabled={isLoading}
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            Sending...
+          </>
+        ) : (
+          "Send reset link"
+        )}
+      </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"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to sign in
+        </button>
+      )}
+    </form>
+  );
+};
+
+export default ForgotPasswordForm;

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

@@ -0,0 +1,228 @@
+/**
+ * Login Form Component
+ *
+ * Configurable login form with validation
+ */
+
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Button } from "@umituz/web-design-system/atoms";
+import type { LoginFormProps } from "../types/auth";
+import { validateLogin, calculatePasswordStrength } from "../utils/auth";
+
+export const LoginForm = ({
+  config,
+  defaultCredentials = {},
+  showRememberMe = true,
+  showForgotPassword = true,
+  showRegisterLink = true,
+  onLoginSuccess,
+  onLoginError,
+}: LoginFormProps) => {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState(defaultCredentials.email || "");
+  const [password, setPassword] = useState(defaultCredentials.password || "");
+  const [rememberMe, setRememberMe] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate
+    const validation = validateLogin({ email, password });
+    if (!validation.valid) {
+      setError(validation.error || "Invalid credentials");
+      onLoginError?.(validation.error || "Invalid credentials");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      // In production, call your auth API
+      // const user = await login({ email, password });
+
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      // Success
+      const mockUser = {
+        id: "1",
+        email,
+        name: email.split("@")[0],
+      };
+
+      await onLoginSuccess?.(mockUser);
+      navigate(config.afterLoginRoute);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Login failed";
+      setError(errorMessage);
+      onLoginError?.(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const passwordStrength = calculatePasswordStrength(password);
+
+  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">
+          Welcome back
+        </h1>
+        <p className="text-muted-foreground">
+          Sign in to your {config.brandName} account
+        </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>
+      )}
+
+      {/* 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>
+
+      {/* Password Field */}
+      <div className="space-y-2">
+        <label htmlFor="password" className="text-sm font-medium text-foreground">
+          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",
+              error && "border-destructive"
+            )}
+            disabled={isLoading}
+            autoComplete="current-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>
+        )}
+      </div>
+
+      {/* Remember Me & Forgot Password */}
+      {(showRememberMe || showForgotPassword) && (
+        <div className="flex items-center justify-between">
+          {showRememberMe && (
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                className="w-4 h-4 rounded border-border text-primary focus:ring-2 focus:ring-primary"
+              />
+              <span className="text-sm text-muted-foreground">Remember me</span>
+            </label>
+          )}
+          {showForgotPassword && config.forgotPasswordRoute && (
+            <button
+              type="button"
+              onClick={() => navigate(config.forgotPasswordRoute!)}
+              className="text-sm text-primary hover:underline font-medium"
+            >
+              Forgot password?
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Submit Button */}
+      <Button
+        type="submit"
+        className="w-full h-12 text-base font-bold rounded-full"
+        disabled={isLoading}
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            Signing in...
+          </>
+        ) : (
+          "Sign in"
+        )}
+      </Button>
+
+      {/* Register Link */}
+      {showRegisterLink && config.registerRoute && (
+        <p className="text-center text-sm text-muted-foreground">
+          Don't have an account?{" "}
+          <button
+            type="button"
+            onClick={() => navigate(config.registerRoute)}
+            className="text-primary hover:underline font-medium"
+          >
+            Sign up
+          </button>
+        </p>
+      )}
+    </form>
+  );
+};
+
+export default LoginForm;