User Settings

app/api/user/change/profile/route.ts

@@ -33,6 +33,17 @@ export async function POST(request: NextRequest) {
             return NextResponse.json({ error: "User not found" }, { status: 404 });
         }
 
+        await prisma.user.update({
+            where: {
+                id: decoded.id,
+            },
+            data: {
+                username: body.username,
+                name: body.name,
+                email: body.email,
+            },
+        });
+
         return NextResponse.json({ message: "Profile updated successfully" }, { status: 200 });
     } catch (error: any) {
         return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });

app/dashboard/settings/SettingsPage.tsx

@@ -1,34 +1,56 @@
 "use client";
 
 import Sidebar from "@/components/Sidebar";
+import ErrorToast from "@/components/Error";
 import { useState } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
 
-interface DashboardPageProps {
+interface SettingsPageProps {
     username: string;
     name: string;
     email: string;
 }
 
-export default function DashboardPage({ username, name, email }: DashboardPageProps) {    
+export default function SettingsPage({ username, name, email }: SettingsPageProps) {    
     const [profileUsername, setProfileUsername] = useState(username);
     const [profileName, setProfileName] = useState(name);
     const [profileEmail, setProfileEmail] = useState(email);
+    const [oldPassword, setOldPassword] = useState("");
     const [password, setPassword] = useState("");
     const [passwordConfirm, setPasswordConfirm] = useState("");
 
+    const [error, setError] = useState("");
+
     const saveProfile = async () => {
-        const response = await axios.post("/api/user/change/profile", { token: Cookies.get("token"), username: profileUsername, name: profileName, email: profileEmail });
+        try {
-        if (response.data.message !== "Profile updated successfully") {
+            const response = await axios.post("/api/user/change/profile", { token: Cookies.get("token"), username: profileUsername, name: profileName, email: profileEmail });
-            alert("Failed to update profile");
+            if (response.data.message !== "Profile updated successfully") {
+                setError("Failed to update profile");
+            } else {
+                window.location.reload();
+            }
+        } catch (error: any) {
+            setError(error.response.data.error);
         }
     }
 
     const savePassword = async () => {
-        const response = await axios.post("/api/user/change/password", { token: Cookies.get("token"), old_password: password, password: passwordConfirm });
+        if (password !== passwordConfirm) {
-        if (response.data.message !== "Password updated successfully") {
+            setError("Passwords do not match");
-            alert("Failed to update password");
+            return;
+        }
+        if (oldPassword === password) {
+            setError("Old password and new password cannot be the same");
+            return;
+        }
+        try {
+            const response = await axios.post("/api/user/change/password", { token: Cookies.get("token"), old_password: oldPassword, password: password });
+            if (response.data.message !== "Password updated successfully") {
+                setError("Failed to update password");
+            }
+        } catch (error: any) {
+            setError(error.response.data.error);
         }
     }
 
@@ -71,6 +93,10 @@ export default function DashboardPage({ username, name, email }: DashboardPagePr
                                     <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="oldPassword" className="text-sm font-bold">Old Password</label>
+                                            <input type="password" id="oldPassword" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} className="input w-full" />
+                                        </div>
                                         <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" />
@@ -88,6 +114,7 @@ export default function DashboardPage({ username, name, email }: DashboardPagePr
 
                 </main>
             </Sidebar>
+            <ErrorToast message={error} show={error !== ""} onClose={() => setError("")} />
         </div>
     );
 }