Split Settings Component into 2 cards

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>
+  );
+};

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>
+  );
+};