Initial
This commit is contained in:
@@ -5,6 +5,7 @@ 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();
|
||||
@@ -45,98 +46,68 @@ export default function UpdatePasswordForm({ className = '' }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={className}>
|
||||
<header>
|
||||
<h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
Update Password
|
||||
</h2>
|
||||
|
||||
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Ensure your account is using a long, random password to stay
|
||||
secure.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form onSubmit={updatePassword} className="mt-6 space-y-6">
|
||||
<div>
|
||||
<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"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
|
||||
<InputError
|
||||
message={errors.current_password}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
|
||||
<InputError message={errors.password} className="mt-2" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
|
||||
<InputError
|
||||
message={errors.password_confirmation}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<PrimaryButton disabled={processing}>Save</PrimaryButton>
|
||||
|
||||
<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}
|
||||
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>
|
||||
leaveTo="opacity-0">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
|
||||
</Transition>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</section>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user