sam/fullstack-fuware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change i18n package to paraglideJs

Browse Source 
also refactor auth provider
This commit is contained in:
Sam Liu
2026-01-07 22:26:48 +07:00
parent 391acd282b
commit d49c37848f
47 changed files with 887 additions and 1060 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/form/change-password-form.tsx
View File

@@ -1,30 +1,30 @@
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'
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { KeyIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import i18next from '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'),
m.common_is_required({
field: m.change_password_form_current_password(),
}),
),
newPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', {
field: i18n.t('changePassword.form.new_password'),
m.common_is_required({
field: m.change_password_form_new_password(),
}),
),
confirmPassword: z.string().nonempty(
i18n.t('changePassword.messages.is_required', {
field: i18n.t('changePassword.form.confirm_password'),
m.common_is_required({
field: m.change_password_form_confirm_password(),
}),
),
})
@@ -33,22 +33,20 @@ const ChangePasswordFormSchema = z
ctx.addIssue({
path: ['confirmPassword'],
code: z.ZodIssueCode.custom,
message: i18n.t('changePassword.messages.password_not_match'),
})
message: m.change_password_messages_password_not_match(),
});
}
})
});
type ChangePassword = z.infer<typeof ChangePasswordFormSchema>
type ChangePassword = z.infer<typeof ChangePasswordFormSchema>;
const defaultValues: ChangePassword = {
currentPassword: '',
newPassword: '',
confirmPassword: '',
}
};
const ChangePasswordForm = () => {
const { t } = useTranslation()
const form = useForm({
defaultValues,
validators: {
@@ -64,33 +62,40 @@ const ChangePasswordForm = () => {
},
{
onSuccess: () => {
form.reset()
toast.success(t('changePassword.messages.change_password_success'))
form.reset();
toast.success(
m.change_password_messages_change_password_success(),
{
richColors: true,
},
);
},
onError: (ctx) => {
console.log(ctx.error.code)
toast.error(t(`backend.${ctx.error.code}` as any))
console.log(ctx.error.code);
toast.error(i18next.t(`backend_${ctx.error.code}` as any), {
richColors: true,
});
},
},
)
);
},
})
});
return (
<Card className="@container/card">
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<KeyIcon size={20} />
{t('changePassword.ui.title')}
{m.change_password_ui_title()}
</CardTitle>
</CardHeader>
<CardContent>
<form
id="change-password-form"
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
>
<FieldGroup>
@@ -98,11 +103,11 @@ const ChangePasswordForm = () => {
name="currentPassword"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('changePassword.form.current_password')}:
{m.change_password_form_current_password()}:
</FieldLabel>
<Input
id={field.name}
@@ -117,18 +122,18 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<form.Field
name="newPassword"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('changePassword.form.new_password')}:
{m.change_password_form_new_password()}:
</FieldLabel>
<Input
id={field.name}
@@ -143,18 +148,18 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<form.Field
name="confirmPassword"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('changePassword.form.confirm_password')}:
{m.change_password_form_confirm_password()}:
</FieldLabel>
<Input
id={field.name}
@@ -169,17 +174,17 @@ const ChangePasswordForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<Field>
<Button type="submit">{t('ui.change_password_btn')}</Button>
<Button type="submit">{m.ui_change_password_btn()}</Button>
</Field>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}
);
};
export default ChangePasswordForm
export default ChangePasswordForm;

27
src/components/form/profile-form.tsx
View File

@@ -1,12 +1,14 @@
import { authClient, useSession } from '@/lib/auth-client';
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { uploadProfileImage } from '@/service/profile.api';
import { ProfileInput, profileUpdateSchema } from '@/service/profile.schema';
import { UserCircleIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useQueryClient } from '@tanstack/react-query';
import i18next from 'i18next';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { useAuth } from '../auth/auth-provider';
import AvatarUser from '../avatar/AvatarUser';
import RoleBadge from '../avatar/RoleBadge';
import { Button } from '../ui/button';
@@ -20,9 +22,8 @@ const defaultValues: ProfileInput = {
};
const ProfileForm = () => {
const { t } = useTranslation();
const fileInputRef = useRef<HTMLInputElement>(null);
const { data: session, isPending } = useSession();
const { data: session, isPending } = useAuth();
const queryClient = useQueryClient();
const form = useForm({
@@ -61,10 +62,14 @@ const ProfileForm = () => {
queryClient.refetchQueries({
queryKey: ['auth', 'session'],
});
toast.success(t('profile.messages.update_success'));
toast.success(m.profile_messages_update_success(), {
richColors: true,
});
},
onError: (ctx) => {
toast.error(t(`backend.${ctx.error.code}` as any));
toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
richColors: true,
});
},
},
);
@@ -80,7 +85,7 @@ const ProfileForm = () => {
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<UserCircleIcon size={20} />
{t('profile.ui.title')}
{m.profile_ui_title()}
</CardTitle>
</CardHeader>
<CardContent>
@@ -130,7 +135,7 @@ const ProfileForm = () => {
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('profile.form.name')}
{m.profile_form_name()}
</FieldLabel>
<Input
id={field.name}
@@ -148,7 +153,7 @@ const ProfileForm = () => {
}}
/>
<Field>
<FieldLabel htmlFor="name">{t('profile.form.email')}</FieldLabel>
<FieldLabel htmlFor="name">{m.profile_form_email()}</FieldLabel>
<Input
id="email"
name="email"
@@ -158,13 +163,13 @@ const ProfileForm = () => {
/>
</Field>
<Field>
<FieldLabel htmlFor="name">{t('profile.form.role')}</FieldLabel>
<FieldLabel htmlFor="name">{m.profile_form_role()}</FieldLabel>
<div className="flex gap-2">
<RoleBadge type={session?.user?.role} />
</div>
</Field>
<Field>
<Button type="submit">{t('ui.update_btn')}</Button>
<Button type="submit">{m.ui_update_btn()}</Button>
</Field>
</FieldGroup>
</form>

33
src/components/form/settings-form.tsx
View File

@@ -1,33 +1,24 @@
import { m } from '@/paraglide/messages';
import { settingQueries } from '@/service/queries';
import { updateSettings } from '@/service/setting.api';
import { settingSchema, SettingsInput } from '@/service/setting.schema';
import { GearIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
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';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '../ui/select';
import { Textarea } from '../ui/textarea';
const defaultValues: SettingsInput = {
site_language: '',
site_name: '',
site_description: '',
site_keywords: '',
};
const SettingsForm = () => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const { data: settings } = useQuery(settingQueries.list());
@@ -35,8 +26,11 @@ const SettingsForm = () => {
const updateMutation = useMutation({
mutationFn: updateSettings,
onSuccess: () => {
// setLocale(variables.data.site_language as Locale);
queryClient.invalidateQueries({ queryKey: settingQueries.all });
toast.success(t('settings.messages.update_success'));
toast.success(m.settings_messages_update_success(), {
richColors: true,
});
},
});
@@ -46,7 +40,6 @@ const SettingsForm = () => {
site_name: settings?.site_name?.value || '',
site_description: settings?.site_description?.value || '',
site_keywords: settings?.site_keywords?.value || '',
site_language: settings?.site_language?.value || '',
},
validators: {
onSubmit: settingSchema,
@@ -62,7 +55,7 @@ const SettingsForm = () => {
<CardHeader>
<CardTitle className="text-xl flex items-center gap-2">
<GearIcon size={20} />
{t('settings.ui.title')}
{m.settings_ui_title()}
</CardTitle>
</CardHeader>
<CardContent>
@@ -83,7 +76,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.name')}
{m.settings_form_name()}
</FieldLabel>
<Input
id={field.name}
@@ -108,7 +101,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.description')}
{m.settings_form_description()}
</FieldLabel>
<Textarea
id={field.name}
@@ -134,7 +127,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.keywords')}
{m.settings_form_keywords()}
</FieldLabel>
<Textarea
id={field.name}
@@ -152,7 +145,7 @@ const SettingsForm = () => {
);
}}
/>
<form.Field
{/* <form.Field
name="site_language"
children={(field) => {
const isInvalid =
@@ -160,7 +153,7 @@ const SettingsForm = () => {
return (
<Field data-invalid={isInvalid} className="col-span-2">
<FieldLabel htmlFor={field.name}>
{t('settings.form.language')}
{m.settings_form_language()}
</FieldLabel>
<Select
name={field.name}
@@ -182,9 +175,9 @@ const SettingsForm = () => {
</Field>
);
}}
/>
/> */}
<Field>
<Button type="submit">{t('ui.update_btn')}</Button>
<Button type="submit">{m.ui_update_btn()}</Button>
</Field>
</FieldGroup>
</form>

87
src/components/form/signin-form.tsx
View File

@@ -1,38 +1,33 @@
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'
import { authClient } from '@/lib/auth-client';
import { m } from '@/paraglide/messages';
import { useForm } from '@tanstack/react-form';
import { useQueryClient } from '@tanstack/react-query';
import { createLink, useNavigate } from '@tanstack/react-router';
import i18next from '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')),
.nonempty(m.common_is_required({ field: m.login_page_form_email }))
.email(m.login_page_messages_email_invalid()),
password: z.string().nonempty(
i18n.t('loginPage.messages.is_required', {
field: i18n.t('loginPage.form.password'),
m.common_is_required({
field: m.login_page_form_password(),
}),
),
})
});
const ButtonLink = createLink(Button)
const ButtonLink = createLink(Button);
const SignInForm = () => {
const { t } = useTranslation()
const navigate = useNavigate()
const queryClient = useQueryClient()
const navigate = useNavigate();
const queryClient = useQueryClient();
const form = useForm({
defaultValues: {
email: '',
@@ -50,24 +45,28 @@ const SignInForm = () => {
},
{
onSuccess: () => {
navigate({ to: '/' })
navigate({ to: '/' });
queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
toast.success(t('loginPage.messages.login_success'))
toast.success(m.login_page_messages_login_success(), {
richColors: true,
});
},
onError: (ctx) => {
toast.error(t(`backend.${ctx.error.code}` as any))
toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
richColors: true,
});
},
},
)
);
},
})
});
return (
<div className="flex flex-col gap-6">
<Card>
<CardHeader className="text-center">
<CardTitle className="text-xl">
{t('loginPage.ui.welcome_back')}
{m.login_page_ui_welcome_back()}
</CardTitle>
{/* <CardDescription>Login with your Google account</CardDescription> */}
</CardHeader>
@@ -75,8 +74,8 @@ const SignInForm = () => {
<form
id="sign-in-form"
onSubmit={(e) => {
e.preventDefault()
form.handleSubmit()
e.preventDefault();
form.handleSubmit();
}}
>
<FieldGroup>
@@ -96,11 +95,11 @@ const SignInForm = () => {
name="email"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('loginPage.form.email')}
{m.login_page_form_email()}
</FieldLabel>
<Input
id={field.name}
@@ -117,18 +116,18 @@ const SignInForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<form.Field
name="password"
children={(field) => {
const isInvalid =
field.state.meta.isTouched && !field.state.meta.isValid
field.state.meta.isTouched && !field.state.meta.isValid;
return (
<Field data-invalid={isInvalid}>
<FieldLabel htmlFor={field.name}>
{t('loginPage.form.password')}
{m.login_page_form_password()}
</FieldLabel>
<Input
id={field.name}
@@ -143,13 +142,13 @@ const SignInForm = () => {
<FieldError errors={field.state.meta.errors} />
)}
</Field>
)
);
}}
/>
<Field>
<Button type="submit">{t('ui.login_btn')}</Button>
<Button type="submit">{m.ui_login_btn()}</Button>
<ButtonLink to="/" variant="outline">
{t('ui.cancel_btn')}
{m.ui_cancel_btn()}
</ButtonLink>
{/* <FieldDescription className="text-center">
{t('loginPage.ui.not_have_account')}{' '}
@@ -165,7 +164,7 @@ const SignInForm = () => {
and <a href="#">Privacy Policy</a>.
</FieldDescription> */}
</div>
)
}
);
};
export default SignInForm
export default SignInForm;

25
src/components/form/signup-form.tsx
View File

@@ -1,20 +1,19 @@
import { createLink, Link } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { Button } from '../ui/button'
import { m } from '@/paraglide/messages';
import { createLink, Link } from '@tanstack/react-router';
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'
} from '../ui/card';
import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field';
import { Input } from '../ui/input';
const ButtonLink = createLink(Button)
const ButtonLink = createLink(Button);
const SignupForm = () => {
const { t } = useTranslation()
return (
<div className="flex flex-col gap-6">
<Card>
@@ -59,11 +58,11 @@ const SignupForm = () => {
<Field>
<Button type="submit">Create Account</Button>
<ButtonLink to="/" variant="outline">
{t('ui.cancel_btn')}
{m.ui_cancel_btn()}
</ButtonLink>
<FieldDescription className="text-center">
Already have an account?{' '}
<Link to="/sign-in">{t('ui.login_btn')}</Link>
<Link to="/sign-in">{m.ui_login_btn()}</Link>
</FieldDescription>
</Field>
</FieldGroup>
@@ -75,7 +74,7 @@ const SignupForm = () => {
and <a href="#">Privacy Policy</a>.
</FieldDescription> */}
</div>
)
}
);
};
export default SignupForm
export default SignupForm;