import { DeleteUser } from '@admin/components/settings/delete-user'; import { SettingsLayout } from '@admin/components/settings/settings-layout'; import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input'; import { FormGroup } from '@admin/components/ui/forms/form-group'; import { formClassName } from '@admin/components/ui/field-styles'; import { UserAvatar } from '@admin/components/ui/user-avatar'; import { useFormResponse } from '@admin/hooks/use-form-response'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import { userPhotoUrl } from '@admin/lib/user-avatar-url'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { FormEventHandler } from 'react'; type ProfilePageProps = { mustVerifyEmail: boolean; status?: string; profile: { name: string; email: string; photo: string | null; }; }; function Profile({ mustVerifyEmail, status, profile }: ProfilePageProps) { const { auth } = usePage().props as { auth: { user: { email_verified_at: string | null } } }; const { data, setData, patch, errors, processing } = useForm({ name: profile.name, email: profile.email, photo: profile.photo ?? '', }); const action = useFormResponse({ loadingMessage: 'Saving profile...' }); const submit: FormEventHandler = (e) => { e.preventDefault(); patch(route('profile.update'), { onStart: action.onStart, onSuccess: action.onSuccess, onError: action.onError, preserveScroll: true, }); }; const previewUrl = userPhotoUrl({ name: data.name, photo: data.photo }) ?? ''; return ( <>

Profile

Update your photo, name, and email. Change your password from the Password tab.

Your photo appears in the top bar when set; otherwise your initials are shown.
setData('photo', filename)} /> setData('name', event.target.value), required: true, autoComplete: 'name', }} /> setData('email', event.target.value), required: true, autoComplete: 'username', }} /> {mustVerifyEmail && auth.user.email_verified_at === null && (

Your email address is unverified.{' '} Click here to re-send the verification email. {status === 'verification-link-sent' && ( A new verification link has been sent to your email address. )}

)}
); } export default Object.assign(Profile, { layout: dashboardPersistentLayout('Profile', 'Your account'), });