import { useState } from 'react'; import Head from 'next/head'; import Layout from '../components/Layout'; import { useAuth } from '../hooks/useAuth'; import { userAPI } from '../services/api'; export default function SettingsPage() { const { user } = useAuth(); const [name, setName] = useState(user?.name || ''); const [currentPassword, setCurrentPassword] = useState(''); const [newPassword, setNewPassword] = useState(''); const [msg, setMsg] = useState({ text: '', type: '' }); const updateProfile = async () => { try { await userAPI.updateProfile({ name }); setMsg({ text: 'Profile updated!', type: 'success' }); } catch (err: any) { setMsg({ text: err.response?.data?.message || 'Error', type: 'error' }); } }; const changePassword = async () => { try { await userAPI.changePassword({ currentPassword, newPassword }); setMsg({ text: 'Password changed!', type: 'success' }); setCurrentPassword(''); setNewPassword(''); } catch (err: any) { setMsg({ text: err.response?.data?.message || 'Error', type: 'error' }); } }; return ( <> Settings – MarketScope

Settings

{msg.text && (
{msg.text}
)}

Profile

setName(e.target.value)} className="input-field" />

Change Password

setCurrentPassword(e.target.value)} className="input-field" />
setNewPassword(e.target.value)} className="input-field" placeholder="Min 8 characters" />
); }