Setup System complete

app/setup/SetupPage.tsx

@@ -2,10 +2,23 @@
 
 import { useState } from "react"
 import { Mail, User, Lock } from "lucide-react"
+import ErrorToast from "@/components/Error"
+import { useRouter } from "next/navigation"
+
+import axios from "axios"
 
 export default function SetupPage() {
+  const router = useRouter()
   const [step, setStep] = useState(1)
 
+  const [email, setEmail] = useState("")
+  const [username, setUsername] = useState("")
+  const [name, setName] = useState("")
+  const [password, setPassword] = useState("")
+  const [passwordConfirm, setPasswordConfirm] = useState("")
+
+  const [error, setError] = useState("")
+
   const handleNextStep = () => {
     setStep(2)
   }
@@ -14,23 +27,46 @@ export default function SetupPage() {
     setStep(1)
   }
 
-  return (
+  const handleComplete = async () => {
-    <div className="flex flex-col items-center justify-center min-h-screen p-4">
+    if (password !== passwordConfirm) {
-      <div className="bg-base-200 p-6 rounded-lg shadow-lg w-full max-w-3xl">
+      setError("Passwords do not match")
-        <div className="mb-8">
+      return
-          <ul className="steps steps-vertical lg:steps-horizontal w-full">
+    }
-            <li className="step step-primary">Create account</li>
+    try {
-            <li className={step === 2 ? "step step-primary" : "step"}>Next Steps</li>
+      const response = await axios.post("/api/user/create", {
-          </ul>
+        email,
-        </div>
+        username,
+        name,
+        password
+      })
+      if (response.status === 201) {
+        router.push("/")
+      }
+    } catch (error: any) {
+      setError(error.response.data.error)
+    }
+  }
     
-        <div className="mt-6 relative">
+  
-          <div className="min-h-[400px] flex flex-col justify-between">
+
-            {step === 1 && (
+  return (
+    <div>
+      <div className="flex flex-col items-center justify-center min-h-screen p-4">
+        <div className="bg-base-200 p-6 rounded-lg shadow-lg w-full max-w-3xl">
+          <div className="mb-8">
+            <ul className="steps steps-vertical lg:steps-horizontal w-full">
+              <li className="step step-primary">Create account</li>
+              <li className={step === 2 ? "step step-primary" : "step"}>Next Steps</li>
+            </ul>
+          </div>
+
+          <div className="mt-6 relative">
+            <div className="min-h-[400px] flex flex-col justify-between">
+              {step === 1 && (
               <div className="space-y-6 flex-1">
                 <div className="space-y-2">
                   <h1 className="text-2xl font-bold">Create account</h1>
-                  <p className="text-gray-600">Please create an account to get started</p>
+                  <p className="text-gray-600">Please create an account to get started.</p>
                 </div>
 
                 <div className="w-full space-y-4">
@@ -38,7 +74,7 @@ export default function SetupPage() {
                     <legend className="fieldset-legend">Email</legend>
                     <label className="input validator w-full">
                       <Mail className="w-5 h-5 text-gray-500" />
-                      <input type="email" placeholder="mail@site.com" required />
+                      <input type="email" placeholder="mail@site.com" required value={email} onChange={(e) => setEmail(e.target.value)} />
                     </label>
                     <div className="validator-hint hidden">Enter valid email address</div>
                   </fieldset>
@@ -48,7 +84,7 @@ export default function SetupPage() {
                       <legend className="fieldset-legend">Username</legend>
                       <label className="input validator w-full">
                         <User className="w-5 h-5 text-gray-500" />
-                        <input type="text" placeholder="username" minLength={3} maxLength={20} required />
+                        <input type="text" placeholder="username" minLength={3} maxLength={20} required value={username} onChange={(e) => setUsername(e.target.value)} />
                       </label>
                       <div className="validator-hint hidden">Enter valid username</div>
                     </fieldset>
@@ -57,7 +93,7 @@ export default function SetupPage() {
                       <legend className="fieldset-legend">Full Name</legend>
                       <label className="input validator w-full">
                         <User className="w-5 h-5 text-gray-500" />
-                        <input type="text" placeholder="Full Name" minLength={3} maxLength={100} required />
+                        <input type="text" placeholder="Full Name" minLength={3} maxLength={100} required value={name} onChange={(e) => setName(e.target.value)} />
                       </label>
                       <div className="validator-hint hidden">Enter valid full name</div>
                     </fieldset>
@@ -70,7 +106,7 @@ export default function SetupPage() {
                       <legend className="fieldset-legend">Password</legend>
                       <label className="input validator w-full">
                         <Lock className="w-5 h-5 text-gray-500" />
-                        <input type="password" placeholder="Password" minLength={8} maxLength={100} required />
+                        <input type="password" placeholder="Password" minLength={8} maxLength={100} required value={password} onChange={(e) => setPassword(e.target.value)} />
                       </label>
                       <div className="validator-hint hidden">Enter valid password</div>
                     </fieldset>
@@ -79,7 +115,7 @@ export default function SetupPage() {
                       <legend className="fieldset-legend">Repeat Password</legend>
                       <label className="input validator w-full">
                         <Lock className="w-5 h-5 text-gray-500" />
-                        <input type="password" placeholder="Repeat Password" minLength={8} maxLength={100} required />
+                        <input type="password" placeholder="Repeat Password" minLength={8} maxLength={100} required value={passwordConfirm} onChange={(e) => setPasswordConfirm(e.target.value)} />
                       </label>
                       <div className="validator-hint hidden">Enter valid repeat password</div>
                     </fieldset>
@@ -114,7 +150,7 @@ export default function SetupPage() {
                   <button className="btn btn-outline flex-1" onClick={handlePreviousStep}>
                     Back
                   </button>
-                  <button className="btn btn-primary flex-1">Complete</button>
+                  <button className="btn btn-primary flex-1" onClick={handleComplete}>Complete</button>
                 </div>
               </div>
             )}
@@ -122,5 +158,7 @@ export default function SetupPage() {
         </div>
       </div>
     </div>
+    <ErrorToast message={error} show={!!error} onClose={() => setError("")} />
+  </div>
   )
 }

components/Error.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect } from "react";
+
+type ErrorToastProps = {
+  message: string;
+  show: boolean;
+  onClose: () => void;
+};
+
+export default function ErrorToast({ message, show, onClose }: ErrorToastProps) {
+  useEffect(() => {
+    if (show) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [show, onClose]);
+
+  if (!show) return null;
+
+  return (
+    <div className="toast toast-end">
+      <div className="alert alert-error alert-soft">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6 shrink-0 stroke-current"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <div>
+          <span className="font-bold">ERROR: </span>
+          <span>{message}</span>
+        </div>
+      </div>
+    </div>
+  );
+}