added Profile Page and Change password (also included breadcrumb
This commit is contained in:
185
src/components/form/change-password-form.tsx
Normal file
185
src/components/form/change-password-form.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import { authClient } from '@/lib/auth-client'
|
||||
import i18n from '@/lib/i18n'
|
||||
import { KeyIcon } from '@phosphor-icons/react'
|
||||
import { useForm } from '@tanstack/react-form'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import z from 'zod'
|
||||
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 ChangePasswordFormSchema = z
|
||||
.object({
|
||||
currentPassword: z.string().nonempty(
|
||||
i18n.t('changePassword.messages.is_required', {
|
||||
field: i18n.t('changePassword.form.current_password'),
|
||||
}),
|
||||
),
|
||||
newPassword: z.string().nonempty(
|
||||
i18n.t('changePassword.messages.is_required', {
|
||||
field: i18n.t('changePassword.form.new_password'),
|
||||
}),
|
||||
),
|
||||
confirmPassword: z.string().nonempty(
|
||||
i18n.t('changePassword.messages.is_required', {
|
||||
field: i18n.t('changePassword.form.confirm_password'),
|
||||
}),
|
||||
),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (data.newPassword !== data.confirmPassword) {
|
||||
ctx.addIssue({
|
||||
path: ['confirmPassword'],
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: i18n.t('changePassword.messages.password_not_match'),
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
type ChangePassword = z.infer<typeof ChangePasswordFormSchema>
|
||||
|
||||
const defaultValues: ChangePassword = {
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
}
|
||||
|
||||
const ChangePasswordForm = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const form = useForm({
|
||||
defaultValues,
|
||||
validators: {
|
||||
onSubmit: ChangePasswordFormSchema,
|
||||
onChange: ChangePasswordFormSchema,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
await authClient.changePassword(
|
||||
{
|
||||
newPassword: value.newPassword,
|
||||
currentPassword: value.currentPassword,
|
||||
revokeOtherSessions: true,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
form.reset()
|
||||
toast.success(t('changePassword.messages.change_password_success'))
|
||||
},
|
||||
onError: (ctx) => {
|
||||
console.log(ctx.error.code)
|
||||
toast.error(t(`backend.${ctx.error.code}` as any))
|
||||
},
|
||||
},
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Card className="@container/card">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl flex items-center gap-2">
|
||||
<KeyIcon size={20} />
|
||||
{t('changePassword.ui.title')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
id="change-password-form"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
form.handleSubmit()
|
||||
}}
|
||||
>
|
||||
<FieldGroup>
|
||||
<form.Field
|
||||
name="currentPassword"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
{t('changePassword.form.current_password')}:
|
||||
</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}
|
||||
type="password"
|
||||
/>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="newPassword"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
{t('changePassword.form.new_password')}:
|
||||
</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}
|
||||
type="password"
|
||||
/>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="confirmPassword"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
{t('changePassword.form.confirm_password')}:
|
||||
</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}
|
||||
type="password"
|
||||
/>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<Field>
|
||||
<Button type="submit">{t('ui.change_password_btn')}</Button>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChangePasswordForm
|
||||
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;
|
||||
171
src/components/form/signin-form.tsx
Normal file
171
src/components/form/signin-form.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { authClient } from '@/lib/auth-client'
|
||||
import i18n from '@/lib/i18n'
|
||||
import { useForm } from '@tanstack/react-form'
|
||||
import { useQueryClient } from '@tanstack/react-query'
|
||||
import { createLink, useNavigate } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import z from 'zod'
|
||||
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 SignInFormSchema = z.object({
|
||||
email: z
|
||||
.string()
|
||||
.nonempty(
|
||||
i18n.t('loginPage.messages.is_required', {
|
||||
field: i18n.t('loginPage.form.email'),
|
||||
}),
|
||||
)
|
||||
.email(i18n.t('loginPage.messages.email_invalid')),
|
||||
password: z.string().nonempty(
|
||||
i18n.t('loginPage.messages.is_required', {
|
||||
field: i18n.t('loginPage.form.password'),
|
||||
}),
|
||||
),
|
||||
})
|
||||
|
||||
const ButtonLink = createLink(Button)
|
||||
|
||||
const SignInForm = () => {
|
||||
const { t } = useTranslation()
|
||||
const navigate = useNavigate()
|
||||
const queryClient = useQueryClient()
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
validators: {
|
||||
onSubmit: SignInFormSchema,
|
||||
onChange: SignInFormSchema,
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
await authClient.signIn.email(
|
||||
{
|
||||
email: value.email,
|
||||
password: value.password,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
navigate({ to: '/' })
|
||||
queryClient.invalidateQueries({ queryKey: ['session'] })
|
||||
toast.success(t('loginPage.messages.login_success'))
|
||||
},
|
||||
onError: (ctx) => {
|
||||
toast.error(t(`backend.${ctx.error.code}` as any))
|
||||
},
|
||||
},
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-xl">
|
||||
{t('loginPage.ui.welcome_back')}
|
||||
</CardTitle>
|
||||
{/* <CardDescription>Login with your Google account</CardDescription> */}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
id="sign-in-form"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
form.handleSubmit()
|
||||
}}
|
||||
>
|
||||
<FieldGroup>
|
||||
{/* <Field>
|
||||
<Button variant="outline" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
Login with Google
|
||||
</Button>
|
||||
</Field>
|
||||
<FieldSeparator>Or continue with</FieldSeparator> */}
|
||||
<form.Field
|
||||
name="email"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
{t('loginPage.form.email')}
|
||||
</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}
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
autoComplete="off"
|
||||
/>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="password"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldLabel htmlFor={field.name}>
|
||||
{t('loginPage.form.password')}
|
||||
</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}
|
||||
type="password"
|
||||
/>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<Field>
|
||||
<Button type="submit">{t('ui.login_btn')}</Button>
|
||||
<ButtonLink to="/" variant="outline">
|
||||
{t('ui.cancel_btn')}
|
||||
</ButtonLink>
|
||||
{/* <FieldDescription className="text-center">
|
||||
{t('loginPage.ui.not_have_account')}{' '}
|
||||
<Link to="/sign-up">{t('ui.signup_btn')}</Link>
|
||||
</FieldDescription> */}
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* <FieldDescription className="px-6 text-center">
|
||||
By clicking continue, you agree to our <a href="#">Terms of Service</a>{' '}
|
||||
and <a href="#">Privacy Policy</a>.
|
||||
</FieldDescription> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SignInForm
|
||||
81
src/components/form/signup-form.tsx
Normal file
81
src/components/form/signup-form.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { createLink, Link } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Button } from '../ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '../ui/card'
|
||||
import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field'
|
||||
import { Input } from '../ui/input'
|
||||
|
||||
const ButtonLink = createLink(Button)
|
||||
|
||||
const SignupForm = () => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-xl">Create your account</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your email below to create your account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="name">Full Name</FieldLabel>
|
||||
<Input id="name" type="text" placeholder="John Doe" required />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="password">Password</FieldLabel>
|
||||
<Input id="password" type="password" required />
|
||||
<FieldDescription>
|
||||
Must be at least 8 characters long.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="confirm-password">
|
||||
Confirm Password
|
||||
</FieldLabel>
|
||||
<Input id="confirm-password" type="password" required />
|
||||
<FieldDescription>
|
||||
Please confirm your password.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
<Field>
|
||||
<Button type="submit">Create Account</Button>
|
||||
<ButtonLink to="/" variant="outline">
|
||||
{t('ui.cancel_btn')}
|
||||
</ButtonLink>
|
||||
<FieldDescription className="text-center">
|
||||
Already have an account?{' '}
|
||||
<Link to="/sign-in">{t('ui.login_btn')}</Link>
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* <FieldDescription className="px-6 text-center">
|
||||
By clicking continue, you agree to our <a href="#">Terms of Service</a>{' '}
|
||||
and <a href="#">Privacy Policy</a>.
|
||||
</FieldDescription> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SignupForm
|
||||
Reference in New Issue
Block a user