66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
const ChangePassword = ({ token }) => {
|
|
const [oldPassword, setOldPassword] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [message, setMessage] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setMessage('');
|
|
try {
|
|
const res = await fetch('/api/player/change-password', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({ oldPassword, newPassword })
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
setMessage('Password changed successfully!');
|
|
setOldPassword('');
|
|
setNewPassword('');
|
|
} else {
|
|
setMessage(data.error || 'Failed to change password');
|
|
}
|
|
} catch {
|
|
setMessage('Failed to change password');
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
if (!token) return <div>Please log in.</div>;
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} style={{ maxWidth: 400, margin: '2rem auto', textAlign: 'center' }}>
|
|
<div>
|
|
<input
|
|
type="password"
|
|
placeholder="Old Password"
|
|
value={oldPassword}
|
|
onChange={e => setOldPassword(e.target.value)}
|
|
style={{ padding: '0.5rem', width: '80%', marginBottom: 8 }}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="password"
|
|
placeholder="New Password"
|
|
value={newPassword}
|
|
onChange={e => setNewPassword(e.target.value)}
|
|
style={{ padding: '0.5rem', width: '80%', marginBottom: 8 }}
|
|
required
|
|
/>
|
|
</div>
|
|
<button type="submit" disabled={loading}>{loading ? 'Changing...' : 'Change Password'}</button>
|
|
<div style={{ marginTop: 8, color: '#2563eb' }}>{message}</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ChangePassword;
|