135 lines
6.4 KiB
JavaScript
135 lines
6.4 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';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
|
|
export default function UpdateProfileInformation({ mustVerifyEmail, status, timezones }) {
|
|
const user = usePage().props.auth.user;
|
|
|
|
const { data, setData, patch, errors, processing, recentlySuccessful } =
|
|
useForm({
|
|
name: user.name,
|
|
email: user.email,
|
|
timezone: user.settings.timezone
|
|
});
|
|
|
|
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>
|
|
) }
|
|
|
|
<div className="grid w-full items-center gap-4 pt-3">
|
|
<div className="flex flex-col space-y-1.5">
|
|
<InputLabel htmlFor="timezone" value="Timezone" />
|
|
<Select defaultValue={ data.timezone } onValueChange={ (e) => setData('timezone', e) } className="w-full">
|
|
<SelectTrigger className="border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600">
|
|
<SelectValue placeholder="Select a timezone" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{ Object.keys(timezones).map((area, i) => (
|
|
<SelectGroup key={ i }>
|
|
<SelectLabel>{ area }</SelectLabel>
|
|
{ Object.keys(timezones[area]).map((tz, j) => (
|
|
<SelectItem className="pl-5" key={ j } value={ tz }>{ timezones[area][tz] }</SelectItem>
|
|
) ) }
|
|
</SelectGroup>
|
|
) ) }
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<InputError className="mt-2" message={ errors.timezone } />
|
|
</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>
|
|
);
|
|
}
|