Add src/components/onboarding/SignupForm.jsx

src/components/onboarding/SignupForm.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Eye, EyeOff, Mail, Lock, Phone, User, Loader2 } from "lucide-react";
+import PasswordRequirements, { validatePassword } from "./PasswordRequirements";
+
+export default function SignupForm({ storeData, onSubmit, isLoading }) {
+  const [email, setEmail] = useState(storeData.email || "demo@packagehub360.com");
+  const [mobile, setMobile] = useState(storeData.phone || "(555) 000-0000");
+  const [username, setUsername] = useState("");
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [pwFocused, setPwFocused] = useState(false);
+  const [errors, setErrors] = useState({});
+  const [showDemoWarning, setShowDemoWarning] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (email.toLowerCase() === "demo@packagehub360.com") {
+      setShowDemoWarning(true);
+      return;
+    }
+
+    const newErrors = {};
+
+    if (!email) newErrors.email = "Email is required";
+    else if (!/\S+@\S+\.\S+/.test(email)) newErrors.email = "Invalid email format";
+
+    if (!mobile) newErrors.mobile = "Mobile number is required";
+    if (!username.trim()) newErrors.username = "Username is required";
+
+    if (!validatePassword(password)) newErrors.password = "Password does not meet requirements";
+    if (password !== confirmPassword) newErrors.confirmPassword = "Passwords do not match";
+
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length === 0) {
+      onSubmit({ email, password, mobile, username });
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+