89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
import { useState } from 'react';
|
|
import { errorMessage } from '../../api/client';
|
|
import {
|
|
Button,
|
|
Card,
|
|
FormField,
|
|
Input,
|
|
useToast,
|
|
} from '@cameleer/design-system';
|
|
import { useChangePassword } from '../../api/account-hooks';
|
|
import styles from '../../styles/platform.module.css';
|
|
|
|
export function PasswordChangeSection() {
|
|
const { toast } = useToast();
|
|
const changePassword = useChangePassword();
|
|
|
|
const [currentPassword, setCurrentPassword] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
|
|
async function handleChangePassword(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (newPassword.length < 8) {
|
|
toast({ title: 'Password must be at least 8 characters', variant: 'error' });
|
|
return;
|
|
}
|
|
if (newPassword !== confirmPassword) {
|
|
toast({ title: 'Passwords do not match', variant: 'error' });
|
|
return;
|
|
}
|
|
try {
|
|
await changePassword.mutateAsync({ currentPassword, newPassword });
|
|
toast({ title: 'Password changed successfully', variant: 'success' });
|
|
setCurrentPassword('');
|
|
setNewPassword('');
|
|
setConfirmPassword('');
|
|
} catch (err) {
|
|
toast({ title: 'Failed to change password', description: errorMessage(err), variant: 'error' });
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card title="Change Password">
|
|
<p className={styles.description} style={{ marginTop: 0 }}>
|
|
Update your login password. Minimum 8 characters.
|
|
</p>
|
|
<form onSubmit={handleChangePassword} style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 12 }}>
|
|
<FormField label="Current password" htmlFor="current-pw">
|
|
<Input
|
|
id="current-pw"
|
|
type="password"
|
|
value={currentPassword}
|
|
onChange={(e) => setCurrentPassword(e.target.value)}
|
|
placeholder="Enter current password"
|
|
required
|
|
/>
|
|
</FormField>
|
|
<FormField label="New password" htmlFor="new-pw">
|
|
<Input
|
|
id="new-pw"
|
|
type="password"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
placeholder="Enter new password"
|
|
required
|
|
minLength={8}
|
|
/>
|
|
</FormField>
|
|
<FormField label="Confirm password" htmlFor="confirm-pw">
|
|
<Input
|
|
id="confirm-pw"
|
|
type="password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
placeholder="Confirm new password"
|
|
required
|
|
minLength={8}
|
|
/>
|
|
</FormField>
|
|
<div>
|
|
<Button type="submit" variant="primary" loading={changePassword.isPending}>
|
|
Change Password
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
);
|
|
}
|