Setup UI

app/setup/SetupPage.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import { useState } from "react"
+import { Mail, User, Lock } from "lucide-react"
+
+export default function SetupPage() {
+  const [step, setStep] = useState(1)
+
+  const handleNextStep = () => {
+    setStep(2)
+  }
+
+  const handlePreviousStep = () => {
+    setStep(1)
+  }
+
+  return (
+    <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>
+                </div>
+
+                <div className="w-full space-y-4">
+                  <fieldset className="fieldset">
+                    <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 />
+                    </label>
+                    <div className="validator-hint hidden">Enter valid email address</div>
+                  </fieldset>
+
+                  <div className="flex flex-col md:flex-row gap-4 w-full">
+                    <fieldset className="fieldset w-full">
+                      <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 />
+                      </label>
+                      <div className="validator-hint hidden">Enter valid username</div>
+                    </fieldset>
+
+                    <fieldset className="fieldset w-full">
+                      <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 />
+                      </label>
+                      <div className="validator-hint hidden">Enter valid full name</div>
+                    </fieldset>
+                  </div>
+
+                  <div className="divider"></div>
+
+                  <div className="flex flex-col md:flex-row gap-4 w-full">
+                    <fieldset className="fieldset w-full">
+                      <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 />
+                      </label>
+                      <div className="validator-hint hidden">Enter valid password</div>
+                    </fieldset>
+
+                    <fieldset className="fieldset w-full">
+                      <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 />
+                      </label>
+                      <div className="validator-hint hidden">Enter valid repeat password</div>
+                    </fieldset>
+                  </div>
+                </div>
+
+                <div className="pt-4 mt-auto">
+                  <button className="btn btn-primary w-full" onClick={handleNextStep}>
+                    Next
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {step === 2 && (
+              <div className="flex flex-col justify-between min-h-[400px]">
+                <div className="space-y-4">
+                  <h1 className="text-2xl font-bold">Next Steps</h1>
+                  <p className="text-gray-600">Here are some next steps to get you started</p>
+
+                  <div className="space-y-4 py-4">
+                    <p>1. Click Complete to finish the setup & create the user</p>
+                    <p>2. Create a site with a network</p>
+                    <p>3. Add your first server to the network</p>
+                    <p>4. Add all your self-hosted applications to the server</p>
+                    <p>5. Setup notifications to be notified about any issues</p>
+                    <p>6. Leave a star on <a href="https://github.com/crocofied/corecontrol" target="_blank" rel="noopener noreferrer" className="link">GitHub</a> if you like it</p>
+                  </div>    
+                </div>
+
+                <div className="pt-4 flex flex-col sm:flex-row gap-2">
+                  <button className="btn btn-outline flex-1" onClick={handlePreviousStep}>
+                    Back
+                  </button>
+                  <button className="btn btn-primary flex-1">Complete</button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/setup/page.tsx

@@ -1,26 +1,31 @@
 "use client";
 
-import { useEffect } from "react";
+import SetupPage from "./SetupPage";
+import Loading from "@/components/Loading";
+
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import axios from "axios";
 
+export default function Setup() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
 
-export default function SetupPage() {
+  useEffect(() => {
-    const router = useRouter();
+    const init = async () => {
+      const response = await axios.get("/api/user/init");
+      if (response.data.message !== "No users found") {
+        router.push("/");
+      } else {
+        setLoading(false);
+      }
+    };
+    init();
+  }, []);
 
-    useEffect(() => {
+  if (loading) {
-        const init = async () => {
+    return <Loading />;
-            const response = await axios.get("/api/user/init");
+  } else {
-            if (response.data.message !== "No users found") {
+    return <SetupPage />;
-                router.push("/");
+  }
-            }
-        };
-        init();
-    }, []);
-
-    return (
-        <div>
-            <h1>Setup</h1>
-        </div>
-    );
 }