Settings Site

app/api/user/validate/route.ts

@@ -30,7 +30,7 @@ export async function POST(request: NextRequest) {
             return NextResponse.json({ error: "User not found" }, { status: 404 });
         }
 
-        return NextResponse.json({ message: "Valid", username: user.username, name: user.name }, { status: 200 });
+        return NextResponse.json({ message: "Valid", username: user.username, name: user.name, email: user.email }, { status: 200 });
 
     } catch (error: any) {
         return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });

app/dashboard/settings/SettingsPage.tsx

@@ -1,13 +1,37 @@
 "use client";
 
 import Sidebar from "@/components/Sidebar";
+import { useState } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
 
 interface DashboardPageProps {
     username: string;
     name: string;
+    email: string;
 }
 
-export default function DashboardPage({ username, name }: DashboardPageProps) {    
+export default function DashboardPage({ username, name, email }: DashboardPageProps) {    
+    const [profileUsername, setProfileUsername] = useState(username);
+    const [profileName, setProfileName] = useState(name);
+    const [profileEmail, setProfileEmail] = useState(email);
+    const [password, setPassword] = useState("");
+    const [passwordConfirm, setPasswordConfirm] = useState("");
+
+    const saveProfile = async () => {
+        const response = await axios.post("/api/user/change/profile", { token: Cookies.get("token"), username: profileUsername, name: profileName, email: profileEmail });
+        if (response.data.message !== "Profile updated successfully") {
+            alert("Failed to update profile");
+        }
+    }
+
+    const savePassword = async () => {
+        const response = await axios.post("/api/user/change/password", { token: Cookies.get("token"), old_password: password, password: passwordConfirm });
+        if (response.data.message !== "Password updated successfully") {
+            alert("Failed to update password");
+        }
+    }
+
     return (
         <div>
             <Sidebar 
@@ -20,8 +44,46 @@ export default function DashboardPage({ username, name }: DashboardPageProps) {
                     <p className="text-sm opacity-70">Manage your instance settings</p>
 
                     <div className="tabs tabs-border pt-8">
-                        <input type="radio" name="user_settings" className="tab text-primary" aria-label="User Settings" defaultChecked/>
+                        <input type="radio" name="user_settings" className="tab text-primary z-10" aria-label="User Settings" defaultChecked/>
-                        <div className="tab-content bg-base-100 p-10">User Settings</div>
+                        <div className="tab-content relative bg-base-100 pl-4 pt-4">
+                            <div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
+                            <div className="flex flex-col gap-4"> 
+                                <div className="w-full bg-base-300 p-4 rounded-2xl border border-stone-800">
+                                    <h2 className="text-lg font-bold">Profile Settings</h2>
+                                    <p className="text-sm opacity-70">Manage your profile settings</p>
+                                    <div className="flex flex-col gap-2 pt-8">
+                                        <div className="flex flex-col gap-1">
+                                            <label htmlFor="username" className="text-sm font-bold">Username</label>
+                                            <input type="text" id="username" value={profileUsername} onChange={(e) => setProfileUsername(e.target.value)} className="input w-full" />
+                                        </div>
+                                        <div className="flex flex-col gap-1">
+                                            <label htmlFor="name" className="text-sm font-bold">Name</label>
+                                            <input type="text" id="name" value={profileName} onChange={(e) => setProfileName(e.target.value)} className="input w-full" />
+                                        </div>
+                                        <div className="flex flex-col gap-1">
+                                            <label htmlFor="email" className="text-sm font-bold">Email</label>
+                                            <input type="email" id="email" value={profileEmail} onChange={(e) => setProfileEmail(e.target.value)} className="input w-full" />
+                                        </div>
+                                    </div>
+                                    <button className="btn btn-primary mt-8 w-full" onClick={saveProfile}>Save Changes</button>
+                                </div>
+                                <div className="w-full bg-base-300 p-4 rounded-2xl border border-stone-800">
+                                    <h2 className="text-lg font-bold">Password Settings</h2>
+                                    <p className="text-sm opacity-70">Manage your password</p>
+                                    <div className="flex flex-col gap-4 pt-8">
+                                        <div className="flex flex-col gap-2">
+                                            <label htmlFor="password" className="text-sm font-bold">Password</label>
+                                            <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} className="input w-full" />
+                                        </div>
+                                        <div className="flex flex-col gap-2">
+                                            <label htmlFor="passwordConfirm" className="text-sm font-bold">Confirm Password</label>
+                                            <input type="password" id="passwordConfirm" value={passwordConfirm} onChange={(e) => setPasswordConfirm(e.target.value)} className="input w-full" />
+                                        </div>
+                                    </div>
+                                    <button className="btn btn-primary mt-8 w-full" onClick={savePassword}>Save Changes</button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
 
                 </main>

app/dashboard/settings/page.tsx

@@ -13,6 +13,7 @@ export default function Dashboard() {
   const [loading, setLoading] = useState(true);
   const [username, setUsername] = useState("");
   const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
 
   useEffect(() => {
     const init = async () => {
@@ -27,6 +28,7 @@ export default function Dashboard() {
       } else {
         setUsername(response.data.username);
         setName(response.data.name);
+        setEmail(response.data.email);
         setLoading(false);
       }
     };
@@ -36,6 +38,6 @@ export default function Dashboard() {
   if (loading) {
     return <Loading />;
   } else {
-    return <SettingsPage username={username} name={name} />;
+    return <SettingsPage username={username} name={name} email={email} />;
   }
 }