This commit is contained in:
User
2024-12-27 20:43:18 -05:00
parent 89d0394de9
commit da918835c2
84 changed files with 6160 additions and 1068 deletions

View File

@@ -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>
);
}