107 lines
4.6 KiB
JavaScript
107 lines
4.6 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 { Link, useForm, usePage } from '@inertiajs/react';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
|
|
export default function UpdateProfileInformation({
|
|
mustVerifyEmail,
|
|
status,
|
|
className = '',
|
|
}) {
|
|
const user = usePage().props.auth.user;
|
|
|
|
const { data, setData, patch, errors, processing, recentlySuccessful } =
|
|
useForm({
|
|
name: user.name,
|
|
email: user.email,
|
|
});
|
|
|
|
const submit = (e) => {
|
|
e.preventDefault();
|
|
|
|
patch(route('profile.update'));
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<form onSubmit={ submit }>
|
|
<CardHeader>
|
|
<CardTitle>Profile Information</CardTitle>
|
|
<CardDescription>Update your account's profile information and email address.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid w-full items-center gap-4">
|
|
<div className="flex flex-col space-y-1.5">
|
|
<InputLabel htmlFor="name" value="Name" />
|
|
<TextInput
|
|
id="name"
|
|
className="mt-1 block w-full"
|
|
value={ data.name }
|
|
onChange={ (e) => setData('name', e.target.value) } />
|
|
</div>
|
|
<InputError className="mt-2" message={ errors.name } />
|
|
</div>
|
|
<div className="grid w-full items-center gap-4 pt-3">
|
|
<div className="flex flex-col space-y-1.5">
|
|
<InputLabel htmlFor="email" value="Email" />
|
|
<TextInput
|
|
id="email"
|
|
type="email"
|
|
className="mt-1 block w-full"
|
|
value={ data.email }
|
|
onChange={ (e) => setData('email', e.target.value) }
|
|
required />
|
|
</div>
|
|
<InputError className="mt-2" message={ errors.email } />
|
|
</div>
|
|
|
|
{ mustVerifyEmail && user.email_verified_at === null && (
|
|
<div className="grid w-full items-center gap-4 pt-3">
|
|
<div className="flex flex-col space-y-1.5">
|
|
<p className="mt-2 text-sm text-gray-800 dark:text-gray-200">
|
|
Your email address is unverified.
|
|
<Link
|
|
href={ route('verification.send') }
|
|
method="post"
|
|
as="button"
|
|
className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800">
|
|
Click here to re-send the verification email.
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
|
|
{ status === 'verification-link-sent' && (
|
|
<div className="mt-2 text-sm font-medium text-green-600 dark:text-green-400">
|
|
A new verification link has been sent to your
|
|
email address.
|
|
</div>
|
|
) }
|
|
</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>
|
|
);
|
|
}
|