function MainComponent() { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); const [username, setUsername] = useState(""); const [acceptedTerms, setAcceptedTerms] = useState(false); const { signUpWithCredentials } = useAuth(); const validateEmail = (email)=>{ return email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/); }; const validatePassword = (password)=>{ return password.length >= 8 && // at least 8 characters /[A-Z]/.test(password) && // at least one uppercase /[a-z]/.test(password) && // at least one lowercase /[0-9]/.test(password); // at least one number }; const validateUsername = (username)=>{ return username.length >= 3 && username.length <= 20 && /^[a-zA-Z0-9_]+$/.test(username); }; const onSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); if (!email || !password || !username) { setError("Please fill in all fields"); setLoading(false); return; } if (!validateEmail(email)) { setError("Please enter a valid email address"); setLoading(false); return; } if (!validatePassword(password)) { setError("Password must be at least 8 characters and include uppercase, lowercase, and numbers"); setLoading(false); return; } if (!validateUsername(username)) { setError("Username must be 3-20 characters and can only contain letters, numbers, and underscores"); setLoading(false); return; } if (!acceptedTerms) { setError("Please accept the terms and conditions"); setLoading(false); return; } try { // First create the user account await signUpWithCredentials({ email, password, callbackUrl: "/", redirect: true }); // The user will be automatically redirected after successful signup } catch (err) { const errorMessages = { OAuthSignin: "Couldn’t start sign-up. Please try again or use a different method.", OAuthCallback: "Sign-up failed after redirecting. Please try again.", OAuthCreateAccount: "Couldn’t create an account with this sign-up option. Try another one.", EmailCreateAccount: "This email can’t be used. It may already be registered.", Callback: "Something went wrong during sign-up. Please try again.", OAuthAccountNotLinked: "This account is linked to a different sign-in method. Try using that instead.", CredentialsSignin: "Invalid email or password. If you already have an account, try signing in instead.", AccessDenied: "You don’t have permission to sign up.", Configuration: "Sign-up isn’t working right now. Please try again later.", Verification: "Your sign-up link has expired. Request a new one." }; setError(errorMessages[err.message] || "Something went wrong. Please try again."); setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen w-full items-center justify-center bg-black p-4", __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-[#2DD4BF]", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-1 h-6 w-4 border-r-2 border-white", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-2 h-4 w-4 border-r-2 border-white", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "Create Account"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-400", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Join the SocialScene community")), /*#__PURE__*/ React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "space-y-6 rounded-2xl bg-gray-900 p-8", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-gray-700 bg-gray-800 px-4 py-3 focus-within:border-[#2DD4BF] focus-within:ring-1 focus-within:ring-[#2DD4BF]", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "username", type: "text", value: username, onChange: (e)=>setUsername(e.target.value), placeholder: "Choose a username", className: "w-full bg-transparent text-lg text-white outline-none placeholder:text-gray-500", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-gray-700 bg-gray-800 px-4 py-3 focus-within:border-[#2DD4BF] focus-within:ring-1 focus-within:ring-[#2DD4BF]", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "email", type: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter your email", className: "w-full bg-transparent text-lg text-white outline-none placeholder:text-gray-500", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden rounded-lg border border-gray-700 bg-gray-800 focus-within:border-[#2DD4BF] focus-within:ring-1 focus-within:ring-[#2DD4BF]", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "password", type: showPassword ? "text" : "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full bg-transparent px-4 py-3 text-lg text-white outline-none placeholder:text-gray-500", placeholder: "Create a password", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowPassword(!showPassword), className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-eye${showPassword ? "-slash" : ""}`, __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, "Password must be at least 8 characters and include uppercase, lowercase, and numbers")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "terms", checked: acceptedTerms, onChange: (e)=>setAcceptedTerms(e.target.checked), className: "h-4 w-4 rounded border-gray-700 bg-gray-800 text-[#2DD4BF] focus:ring-[#2DD4BF]", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "terms", className: "text-sm text-gray-300", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, "I accept the", " ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#2DD4BF] hover:text-[#14B8A6]", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, "Terms of Service"), " ", "and", " ", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#2DD4BF] hover:text-[#14B8A6]", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, "Privacy Policy"))), error && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-red-900/50 p-3 text-sm text-red-200", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full rounded-lg bg-[#2DD4BF] px-4 py-3 text-base font-medium text-white transition-all hover:bg-[#14B8A6] focus:outline-none focus:ring-2 focus:ring-[#2DD4BF] focus:ring-offset-2 disabled:opacity-50", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin mr-2", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }), "Creating account...") : "Create Account"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full border-t border-gray-700", __source: { fileName: "", lineNumber: 231, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative flex justify-center text-sm", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-gray-900 px-2 text-gray-400", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }, "Or continue with"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-3", __source: { fileName: "", lineNumber: 240, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "flex items-center justify-center rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google mr-2", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }), "Google"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "flex items-center justify-center rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-apple mr-2", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }), "Apple")), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-gray-400", __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, "Already have an account?", " ", /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-[#2DD4BF] hover:text-[#14B8A6]", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, "Sign in"))))); }