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