69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import Alert from '@mui/material/Alert';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Stack from '@mui/material/Stack';
|
|
import TextField from '@mui/material/TextField';
|
|
import Typography from '@mui/material/Typography';
|
|
import { useState } from 'react';
|
|
|
|
import { useAuth } from '../../store/auth';
|
|
|
|
export function ChangePasswordPanel() {
|
|
const changePassword = useAuth((s) => s.changePassword);
|
|
const [current, setCurrent] = useState('');
|
|
const [next, setNext] = useState('');
|
|
const [confirm, setConfirm] = useState('');
|
|
const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const submit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setMsg(null);
|
|
if (next.length < 6) {
|
|
setMsg({ ok: false, text: 'New password must be at least 6 characters.' });
|
|
return;
|
|
}
|
|
if (next !== confirm) {
|
|
setMsg({ ok: false, text: 'New passwords do not match.' });
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
const err = await changePassword(current, next);
|
|
setBusy(false);
|
|
if (err) {
|
|
setMsg({ ok: false, text: err });
|
|
} else {
|
|
setMsg({ ok: true, text: 'Password changed successfully.' });
|
|
setCurrent('');
|
|
setNext('');
|
|
setConfirm('');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<Typography variant="h5">Change password</Typography>
|
|
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
|
|
Keep your account secure — update the default password.
|
|
</Typography>
|
|
<Box component="form" onSubmit={submit} sx={{ maxWidth: 480 }}>
|
|
{msg && (
|
|
<Alert severity={msg.ok ? 'success' : 'error'} sx={{ mb: 2 }}>
|
|
{msg.text}
|
|
</Alert>
|
|
)}
|
|
<Stack spacing={2.5}>
|
|
<TextField label="Current password" type="password" value={current} onChange={(e) => setCurrent(e.target.value)} required fullWidth />
|
|
<TextField label="New password" type="password" value={next} onChange={(e) => setNext(e.target.value)} required fullWidth />
|
|
<TextField label="Confirm new password" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required fullWidth />
|
|
<Box>
|
|
<Button type="submit" variant="contained" disabled={busy}>
|
|
{busy ? 'Updating…' : 'Update password'}
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|