External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-29 16:14:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Setup System complete

Browse Source
This commit is contained in:
headlesdev
2025-05-17 16:26:01 +02:00
parent 95b70221f5
commit 0598b5084d
2 changed files with 103 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
app/setup/SetupPage.tsx
View File

@@ -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 (
<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>
const handleComplete = async () => {
if (password !== passwordConfirm) {
setError("Passwords do not match")
return
}
try {
const response = await axios.post("/api/user/create", {
email,
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>
)
}