114 lines
4.8 KiB
JavaScript
114 lines
4.8 KiB
JavaScript
import InputError from '@/components/InputError';
|
|
import InputLabel from '@/components/InputLabel';
|
|
import PrimaryButton from '@/components/PrimaryButton';
|
|
import TextInput from '@/components/TextInput';
|
|
import { Transition } from '@headlessui/react';
|
|
import { useForm } from '@inertiajs/react';
|
|
import { useRef } from 'react';
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card.jsx";
|
|
|
|
export default function UpdatePasswordForm({ className = '' }) {
|
|
const passwordInput = useRef();
|
|
const currentPasswordInput = useRef();
|
|
|
|
const {
|
|
data,
|
|
setData,
|
|
errors,
|
|
put,
|
|
reset,
|
|
processing,
|
|
recentlySuccessful,
|
|
} = useForm({
|
|
current_password: '',
|
|
password: '',
|
|
password_confirmation: '',
|
|
});
|
|
|
|
const updatePassword = (e) => {
|
|
e.preventDefault();
|
|
|
|
put(route('password.update'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => reset(),
|
|
onError: (errors) => {
|
|
if (errors.password) {
|
|
reset('password', 'password_confirmation');
|
|
passwordInput.current.focus();
|
|
}
|
|
|
|
if (errors.current_password) {
|
|
reset('current_password');
|
|
currentPasswordInput.current.focus();
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<form onSubmit={ updatePassword }>
|
|
<CardHeader>
|
|
<CardTitle>Update Password</CardTitle>
|
|
<CardDescription>Ensure your account is using a long, random password to stay secure.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid w-full items-center gap-4">
|
|
<div className="flex flex-col space-y-1.5">
|
|
<InputLabel htmlFor="current_password" value="Current Password" />
|
|
<TextInput
|
|
id="current_password"
|
|
ref={ currentPasswordInput }
|
|
value={ data.current_password }
|
|
onChange={ (e) =>
|
|
setData('current_password', e.target.value)
|
|
}
|
|
type="password"
|
|
className="mt-1 block w-full" />
|
|
</div>
|
|
<InputError className="mt-2" message={ errors.current_password } />
|
|
</div>
|
|
<div className="grid w-full items-center gap-4 pt-3">
|
|
<div className="flex flex-col space-y-1.5">
|
|
<InputLabel htmlFor="password" value="New Password" />
|
|
<TextInput
|
|
id="password"
|
|
ref={ passwordInput }
|
|
value={ data.password }
|
|
onChange={ (e) => setData('password', e.target.value) }
|
|
type="password"
|
|
className="mt-1 block w-full" />
|
|
</div>
|
|
<InputError className="mt-2" message={ errors.password } />
|
|
</div>
|
|
<div className="grid w-full items-center gap-4 pt-3">
|
|
<div className="flex flex-col space-y-1.5">
|
|
<InputLabel htmlFor="password_confirmation" value="Confirm Password" />
|
|
<TextInput
|
|
id="password_confirmation"
|
|
value={ data.password_confirmation }
|
|
onChange={ (e) =>
|
|
setData('password_confirmation', e.target.value)
|
|
}
|
|
type="password"
|
|
className="mt-1 block w-full" />
|
|
</div>
|
|
<InputError className="mt-2" message={ errors.password_confirmation } />
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<PrimaryButton disabled={ processing }>Save</PrimaryButton>
|
|
<Transition
|
|
show={ recentlySuccessful }
|
|
enter="transition ease-in-out"
|
|
enterFrom="opacity-0"
|
|
leave="transition ease-in-out"
|
|
leaveTo="opacity-0">
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
|
|
</Transition>
|
|
</CardFooter>
|
|
</form>
|
|
</Card>
|
|
);
|
|
}
|