changed to useLocalize

Author: berry-13

client/src/components/Auth/Login.tsx

@@ -2,18 +2,14 @@ import React, { useEffect } from 'react';
 import LoginForm from './LoginForm';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { useNavigate } from 'react-router-dom';
-
-import { useRecoilValue } from 'recoil';
-import store from '~/store';
-import { localize } from '~/localization/Translation';
+import { useLocalize } from '~/hooks';
 import { useGetStartupConfig } from 'librechat-data-provider';
 import { GoogleIcon, OpenIDIcon, GithubIcon, DiscordIcon } from '~/components';
 
 function Login() {
   const { login, error, isAuthenticated } = useAuthContext();
   const { data: startupConfig } = useGetStartupConfig();
-
-  const lang = useRecoilValue(store.lang);
+  const localize = useLocalize();
 
   const navigate = useNavigate();
 
@@ -27,23 +23,23 @@ function Login() {
     <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
       <div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
         <h1 className="mb-4 text-center text-3xl font-semibold">
-          {localize(lang, 'com_auth_welcome_back')}
+          {localize('com_auth_welcome_back')}
         </h1>
         {error && (
           <div
             className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
             role="alert"
           >
-            {localize(lang, 'com_auth_error_login')}
+            {localize('com_auth_error_login')}
           </div>
         )}
         <LoginForm onSubmit={login} />
         {startupConfig?.registrationEnabled && (
           <p className="my-4 text-center text-sm font-light text-gray-700">
             {' '}
-            {localize(lang, 'com_auth_no_account')}{' '}
+            {localize('com_auth_no_account')}{' '}
             <a href="/register" className="p-1 text-green-500 hover:underline">
-              {localize(lang, 'com_auth_sign_up')}
+              {localize('com_auth_sign_up')}
             </a>
           </p>
         )}
@@ -64,7 +60,7 @@ function Login() {
                 href={`${startupConfig.serverDomain}/oauth/google`}
               >
                 <GoogleIcon />
-                <p>{localize(lang, 'com_auth_google_login')}</p>
+                <p>{localize('com_auth_google_login')}</p>
               </a>
             </div>
           </>
@@ -96,7 +92,7 @@ function Login() {
                 href={`${startupConfig.serverDomain}/oauth/github`}
               >
                 <GithubIcon />
-                <p>{localize(lang, 'com_auth_github_login')}</p>
+                <p>{localize('com_auth_github_login')}</p>
               </a>
             </div>
           </>
@@ -110,7 +106,7 @@ function Login() {
                 href={`${startupConfig.serverDomain}/oauth/discord`}
               >
                 <DiscordIcon />
-                <p>{localize(lang, 'com_auth_discord_login')}</p>
+                <p>{localize('com_auth_discord_login')}</p>
               </a>
             </div>
           </>

client/src/components/Auth/LoginForm.tsx

@@ -1,15 +1,13 @@
 import { useForm } from 'react-hook-form';
-import { useRecoilValue } from 'recoil';
-import store from '~/store';
-import { localize } from '~/localization/Translation';
+import { useLocalize } from '~/hooks';
 import { TLoginUser } from 'librechat-data-provider';
 
 type TLoginFormProps = {
   onSubmit: (data: TLoginUser) => void;
 };
 
 function LoginForm({ onSubmit }: TLoginFormProps) {
-  const lang = useRecoilValue(store.lang);
+  const localize = useLocalize();
 
   const {
     register,
@@ -30,20 +28,20 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
             type="text"
             id="email"
             autoComplete="email"
-            aria-label={localize(lang, 'com_auth_email')}
+            aria-label={localize('com_auth_email')}
             {...register('email', {
-              required: localize(lang, 'com_auth_email_required'),
+              required: localize('com_auth_email_required'),
               minLength: {
                 value: 3,
-                message: localize(lang, 'com_auth_email_min_length'),
+                message: localize('com_auth_email_min_length'),
               },
               maxLength: {
                 value: 120,
-                message: localize(lang, 'com_auth_email_max_length'),
+                message: localize('com_auth_email_max_length'),
               },
               pattern: {
                 value: /\S+@\S+\.\S+/,
-                message: localize(lang, 'com_auth_email_pattern'),
+                message: localize('com_auth_email_pattern'),
               },
             })}
             aria-invalid={!!errors.email}
@@ -54,7 +52,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
             htmlFor="email"
             className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
           >
-            {localize(lang, 'com_auth_email_address')}
+            {localize('com_auth_email_address')}
           </label>
         </div>
         {errors.email && (
@@ -70,16 +68,16 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
             type="password"
             id="password"
             autoComplete="current-password"
-            aria-label={localize(lang, 'com_auth_password')}
+            aria-label={localize('com_auth_password')}
             {...register('password', {
-              required: localize(lang, 'com_auth_password_required'),
+              required: localize('com_auth_password_required'),
               minLength: {
                 value: 8,
-                message: localize(lang, 'com_auth_password_min_length'),
+                message: localize('com_auth_password_min_length'),
               },
               maxLength: {
                 value: 40,
-                message: localize(lang, 'com_auth_password_max_length'),
+                message: localize('com_auth_password_max_length'),
               },
             })}
             aria-invalid={!!errors.password}
@@ -90,7 +88,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
             htmlFor="password"
             className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-gray-500 duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-green-500"
           >
-            {localize(lang, 'com_auth_password')}
+            {localize('com_auth_password')}
           </label>
         </div>
 
@@ -102,7 +100,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
         )}
       </div>
       <a href="/forgot-password" className="text-sm text-green-500 hover:underline">
-        {localize(lang, 'com_auth_password_forgot')}
+        {localize('com_auth_password_forgot')}
       </a>
       <div className="mt-6">
         <button
@@ -111,7 +109,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
           type="submit"
           className="w-full transform rounded-sm bg-green-500 px-4 py-3 tracking-wide text-white transition-colors duration-200 hover:bg-green-600 focus:bg-green-600 focus:outline-none"
         >
-          {localize(lang, 'com_auth_continue')}
+          {localize('com_auth_continue')}
         </button>
       </div>
     </form>