Change i18n package to paraglideJs

also refactor auth provider

src/components/form/signin-form.tsx

@@ -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;