added Profile Page and Change password (also included breadcrumb
This commit is contained in:
194
src/components/form/profile-form.tsx
Normal file
194
src/components/form/profile-form.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { authClient } from '@/lib/auth-client';
|
||||
import i18n from '@/lib/i18n';
|
||||
import { uploadProfileImage } from '@/server/profile-service';
|
||||
import { UserCircleIcon } from '@phosphor-icons/react';
|
||||
import { useForm } from '@tanstack/react-form';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { toast } from 'sonner';
|
||||
import z from 'zod';
|
||||
import { useAuth } from '../auth/auth-provider';
|
||||
import AvatarUser from '../AvatarUser';
|
||||
import { Button } from '../ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
|
||||
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
|
||||
import { Input } from '../ui/input';
|
||||
|
||||
const profileSchema = z.object({
|
||||
name: z.string().nonempty(
|
||||
i18n.t('profile.messages.is_required', {
|
||||
field: i18n.t('profile.form.name'),
|
||||
}),
|
||||
),
|
||||
image: z.instanceof(File).optional(),
|
||||
});
|
||||
|
||||
type Profile = z.infer<typeof profileSchema>;
|
||||
|
||||
const defaultValues: Profile = {
|
||||
name: '',
|
||||
image: undefined,
|
||||
};
|
||||
|
||||
const ProfileForm = () => {
|
||||
const { t } = useTranslation();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const { data: session, isLoading } = useAuth();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
...defaultValues,
|
||||
name: session?.user?.name || '',
|
||||
},
|
||||
validators: {
|
||||
onSubmit: profileSchema,
|
||||
onChange: profileSchema,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
try {
|
||||
let imageKey;
|
||||
if (value.image) {
|
||||
// upload image
|
||||
const formData = new FormData();
|
||||
formData.set('file', value.image);
|
||||
const { imageKey: uploadedKey } = await uploadProfileImage({
|
||||
data: formData,
|
||||
});
|
||||
imageKey = uploadedKey;
|
||||
}
|
||||
|
||||
await authClient.updateUser(
|
||||
{
|
||||
name: value.name,
|
||||
image: imageKey,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
form.reset();
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: ['session'] });
|
||||
toast.success(t('profile.messages.update_success'));
|
||||
},
|
||||
onError: (ctx) => {
|
||||
toast.error(t(`backend.${ctx.error.code}` as any));
|
||||
},
|
||||
},
|
||||
);
|
||||
} catch (error) {}
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) return null;
|
||||
if (!session?.user?.name) return null;
|
||||
|
||||
return (
|
||||
<Card className="@container/card col-span-1 @xl/main:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl flex items-center gap-2">
|
||||
<UserCircleIcon size={20} />
|
||||
{t('profile.ui.title')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
id="profile-form"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<FieldGroup>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<AvatarUser
|
||||
session={session}
|
||||
className="h-20 w-20"
|
||||
textSize="2xl"
|
||||
/>
|
||||
<form.Field
|
||||
name="image"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid;
|
||||
return (
|
||||
<Field data-invalid={isInvalid} className="col-span-2">
|
||||
<FieldLabel htmlFor={field.name}>Avatar</FieldLabel>
|
||||
<Input
|
||||
type="file"
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
accept=".jpg, .jpeg, .png, .webp"
|
||||
ref={fileInputRef}
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.files?.[0])
|
||||
}
|
||||
aria-invalid={isInvalid}
|
||||
/>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</Field>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<form.Field
|
||||
name="name"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid;
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
{t('profile.form.name')}
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
aria-invalid={isInvalid}
|
||||
/>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</Field>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="name">{t('profile.form.email')}</FieldLabel>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
value={session?.user?.email || ''}
|
||||
disabled
|
||||
className="disabled:opacity-80"
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="name">{t('profile.form.role')}</FieldLabel>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
value={session?.user?.role || ''}
|
||||
disabled
|
||||
className="disabled:opacity-80"
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<Button type="submit">{t('ui.update_btn')}</Button>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileForm;
|
||||
Reference in New Issue
Block a user