From 7551b0b494774f9e96b9e09adcb865a2cd4a6980 Mon Sep 17 00:00:00 2001
From: headlesdev <damian.bergemann@outlook.com>
Date: Sat, 17 May 2025 21:39:10 +0200
Subject: [PATCH] Split Settings Component into 2 cards

---
 app/dashboard/settings/SettingsPage.tsx  | 160 +++++++----------------
 components/settings/PasswordSettings.tsx |  74 +++++++++++
 components/settings/ProfileSettings.tsx  |  86 ++++++++++++
 3 files changed, 208 insertions(+), 112 deletions(-)
 create mode 100644 components/settings/PasswordSettings.tsx
 create mode 100644 components/settings/ProfileSettings.tsx

diff --git a/app/dashboard/settings/SettingsPage.tsx b/app/dashboard/settings/SettingsPage.tsx
index e5a738e..3891db4 100644
--- a/app/dashboard/settings/SettingsPage.tsx
+++ b/app/dashboard/settings/SettingsPage.tsx
@@ -1,120 +1,56 @@
-"use client";
+// components/SettingsPage.tsx
+'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";
+import Sidebar from '@/components/Sidebar';
+import ErrorToast from '@/components/Error';
+import { ProfileSettings } from '@/components/settings/ProfileSettings';
+import { PasswordSettings } from '@/components/settings/PasswordSettings';
+import { useState } from 'react';
 
 interface SettingsPageProps {
-    username: string;
-    name: string;
-    email: string;
+  username: string;
+  name: string;
+  email: string;
 }
 
-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("");
+export default function SettingsPage({ username, name, email }: SettingsPageProps) {
+  const [error, setError] = useState('');
 
-    const [error, setError] = useState("");
+  return (
+    <div>
+      <Sidebar
+        username={username}
+        fullName={name}
+        breadcrumbPath={['/', 'Dashboard', 'Settings']}
+      >
+        <main>
+          <h1 className="text-2xl font-bold">Settings</h1>
+          <p className="text-sm opacity-70">Manage your instance settings</p>
 
-    const saveProfile = async () => {
-        try {
-            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") {
-                setError("Failed to update profile");
-            } else {
-                window.location.reload();
-            }
-        } catch (error: any) {
-            setError(error.response.data.error);
-        }
-    }
-
-    const savePassword = async () => {
-        if (password !== passwordConfirm) {
-            setError("Passwords do not match");
-            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);
-        }
-    }
-
-    return (
-        <div>
-            <Sidebar 
-                username={username} 
-                fullName={name} 
-                breadcrumbPath={['/', 'Dashboard', 'Settings']}
-            >
-                <main>
-                    <h1 className="text-2xl font-bold">Settings</h1>
-                    <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 z-10" aria-label="User Settings" defaultChecked/>
-                        <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-200 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-200 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="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" />
-                                        </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>
-            </Sidebar>
-            <ErrorToast message={error} show={error !== ""} onClose={() => setError("")} />
-        </div>
-    );
+          <div className="tabs tabs-border pt-8">
+            <input 
+              type="radio" 
+              name="user_settings" 
+              className="tab text-primary z-10" 
+              aria-label="User Settings" 
+              defaultChecked 
+            />
+            <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">
+                <ProfileSettings
+                  initialUsername={username}
+                  initialName={name}
+                  initialEmail={email}
+                  onError={setError}
+                />
+                <PasswordSettings onError={setError} />
+              </div>
+            </div>
+          </div>
+        </main>
+      </Sidebar>
+      <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/components/settings/PasswordSettings.tsx b/components/settings/PasswordSettings.tsx
new file mode 100644
index 0000000..070e160
--- /dev/null
+++ b/components/settings/PasswordSettings.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { useState } from 'react';
+import axios from 'axios';
+import Cookies from 'js-cookie';
+
+export const PasswordSettings = ({ onError }: { onError: (message: string) => void }) => {
+  const [oldPassword, setOldPassword] = useState('');
+  const [password, setPassword] = useState('');
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+
+  const handleSave = async () => {
+    if (password !== passwordConfirm) return onError('Passwords do not match');
+    if (oldPassword === password) return onError('New password must be different');
+
+    try {
+      const response = await axios.post('/api/user/change/password', {
+        token: Cookies.get('token'),
+        old_password: oldPassword,
+        password,
+      });
+
+      if (response.data.message !== 'Password updated successfully') {
+        onError('Failed to update password');
+      }
+    } catch (error: any) {
+      onError(error.response?.data?.error || 'An error occurred');
+    }
+  };
+
+  return (
+    <div className="w-full bg-base-200 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="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"
+          />
+        </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={handleSave}>
+        Save Changes
+      </button>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/settings/ProfileSettings.tsx b/components/settings/ProfileSettings.tsx
new file mode 100644
index 0000000..2ae5d04
--- /dev/null
+++ b/components/settings/ProfileSettings.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { useState } from 'react';
+import axios from 'axios';
+import Cookies from 'js-cookie';
+
+interface ProfileSettingsProps {
+  initialUsername: string;
+  initialName: string;
+  initialEmail: string;
+  onError: (message: string) => void;
+}
+
+export const ProfileSettings = ({
+  initialUsername,
+  initialName,
+  initialEmail,
+  onError,
+}: ProfileSettingsProps) => {
+  const [username, setUsername] = useState(initialUsername);
+  const [name, setName] = useState(initialName);
+  const [email, setEmail] = useState(initialEmail);
+
+  const handleSave = async () => {
+    try {
+      const response = await axios.post('/api/user/change/profile', {
+        token: Cookies.get('token'),
+        username,
+        name,
+        email,
+      });
+
+      if (response.data.message === 'Profile updated successfully') {
+        window.location.reload();
+      } else {
+        onError('Failed to update profile');
+      }
+    } catch (error: any) {
+      onError(error.response?.data?.error || 'An error occurred');
+    }
+  };
+
+  return (
+    <div className="w-full bg-base-200 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={username}
+            onChange={(e) => setUsername(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={name}
+            onChange={(e) => setName(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={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="input w-full"
+          />
+        </div>
+      </div>
+      
+      <button className="btn btn-primary mt-8 w-full" onClick={handleSave}>
+        Save Changes
+      </button>
+    </div>
+  );
+};
\ No newline at end of file