118 lines
4.7 KiB
TypeScript
118 lines
4.7 KiB
TypeScript
import { type BreadcrumbItem, type SharedData } from '@/types';
|
|
import { Head, Link, useForm, usePage } from '@inertiajs/react';
|
|
import { Alert, Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
|
|
import { IconCheck, IconDeviceFloppy, IconMail } from '@tabler/icons-react';
|
|
import React from 'react';
|
|
|
|
import AppLayout from '@/layouts/app-layout';
|
|
import SettingsLayout from '@/layouts/settings/layout';
|
|
import { edit } from '@/routes/profile';
|
|
import { send } from '@/routes/verification';
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Profile settings',
|
|
href: edit().url,
|
|
},
|
|
];
|
|
|
|
export default function Profile({
|
|
mustVerifyEmail,
|
|
status,
|
|
}: {
|
|
mustVerifyEmail: boolean;
|
|
status?: string;
|
|
}) {
|
|
const { auth } = usePage<SharedData>().props;
|
|
const form = useForm({
|
|
name: auth.user.name,
|
|
email: auth.user.email,
|
|
});
|
|
|
|
const submit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
form.patch(route('profile.update'), {
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<AppLayout breadcrumbs={breadcrumbs}>
|
|
<Head title="Profile settings" />
|
|
|
|
<SettingsLayout>
|
|
<Card withBorder shadow="sm" radius="md">
|
|
<form onSubmit={submit}>
|
|
<Stack spacing="md">
|
|
<Stack spacing={2}>
|
|
<Text weight={700}>Profile information</Text>
|
|
<Text size="sm" color="dimmed">
|
|
Update your name and email address.
|
|
</Text>
|
|
</Stack>
|
|
|
|
<TextInput
|
|
label="Name"
|
|
value={form.data.name}
|
|
onChange={(event) => form.setData('name', event.currentTarget.value)}
|
|
error={form.errors.name}
|
|
required
|
|
autoComplete="name"
|
|
/>
|
|
|
|
<TextInput
|
|
label="Email address"
|
|
type="email"
|
|
value={form.data.email}
|
|
onChange={(event) => form.setData('email', event.currentTarget.value)}
|
|
error={form.errors.email}
|
|
required
|
|
autoComplete="username"
|
|
/>
|
|
|
|
{mustVerifyEmail && auth.user.email_verified_at === null ? (
|
|
<Alert icon={<IconMail size={16} />} color="yellow" variant="light">
|
|
<Stack spacing={4}>
|
|
<Text size="sm">Your email address is unverified.</Text>
|
|
<Text
|
|
component={Link}
|
|
href={send()}
|
|
size="sm"
|
|
underline
|
|
weight={600}
|
|
>
|
|
Resend the verification email
|
|
</Text>
|
|
</Stack>
|
|
</Alert>
|
|
) : null}
|
|
|
|
{status === 'verification-link-sent' ? (
|
|
<Alert icon={<IconCheck size={16} />} color="green" variant="light">
|
|
A new verification link has been sent to your email address.
|
|
</Alert>
|
|
) : null}
|
|
|
|
<Group spacing="sm">
|
|
<Button
|
|
type="submit"
|
|
loading={form.processing}
|
|
leftIcon={<IconDeviceFloppy size={16} />}
|
|
>
|
|
Save
|
|
</Button>
|
|
|
|
{form.recentlySuccessful ? (
|
|
<Text size="sm" color="dimmed">
|
|
Saved
|
|
</Text>
|
|
) : null}
|
|
</Group>
|
|
</Stack>
|
|
</form>
|
|
</Card>
|
|
</SettingsLayout>
|
|
</AppLayout>
|
|
);
|
|
}
|