Feature Localization (i18n) Support (#557)

* init localization

* Update defaul to en

* Fix merge issue and import path.

* Set default to en

* Change jsx to tsx

* Update the password max length string.

* Remove languageContext as using the recoil instead.

client/src/components/Auth/Login.tsx

@@ -2,12 +2,18 @@ import { 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 { useGetStartupConfig } from '@librechat/data-provider';
 
 function Login() {
   const { login, error, isAuthenticated } = useAuthContext();
   const { data: startupConfig } = useGetStartupConfig();
 
+  const lang = useRecoilValue(store.lang);
+
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -18,23 +24,22 @@ function Login() {
   return (
     <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">Welcome back</h1>
+        <h1 className="mb-4 text-center text-3xl font-semibold">{localize(lang, '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"
           >
-            Unable to login with the information provided. Please check your credentials and try
-            again.
+            {localize(lang, 'com_auth_error_login')}
           </div>
         )}
         <LoginForm onSubmit={login} />
         {startupConfig?.registrationEnabled && (
           <p className="my-4 text-center text-sm font-light text-gray-700">
             {' '}
-            Don&apos;t have an account?{' '}
+            {localize(lang, 'com_auth_no_account')}{' '}
             <a href="/register" className="p-1 text-green-500 hover:underline">
-              Sign up
+              {localize(lang, 'com_auth_sign_up')}
             </a>
           </p>
         )}
@@ -72,7 +77,7 @@ function Login() {
                     d="m419.404 58.936-82.933 67.896C313.136 112.246 285.552 103.82 256 103.82c-66.729 0-123.429 42.957-143.965 102.724l-83.397-68.276h-.014C71.23 56.123 157.06 0 256 0c62.115 0 119.068 22.126 163.404 58.936z"
                   ></path>
                 </svg>
-                <p>Login with Google</p>
+                <p>{localize(lang, 'com_auth_google_login')}</p>
               </a>
             </div>
           </>

client/src/components/Auth/LoginForm.tsx

@@ -1,4 +1,7 @@
 import { useForm } from 'react-hook-form';
+import { useRecoilValue } from 'recoil';
+import store from '~/store';
+import { localize } from '~/localization/Translation';
 import { TLoginUser } from '@librechat/data-provider';
 
 type TLoginFormProps = {
@@ -6,6 +9,8 @@ type TLoginFormProps = {
 };
 
 function LoginForm({ onSubmit }: TLoginFormProps) {
+  const lang = useRecoilValue(store.lang);
+  
   const {
     register,
     handleSubmit,
@@ -25,20 +30,20 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
             type="text"
             id="email"
             autoComplete="email"
-            aria-label="Email"
+            aria-label={localize(lang, 'com_auth_email')}
             {...register('email', {
-              required: 'Email is required',
+              required: localize(lang, 'com_auth_email_required'),
               minLength: {
                 value: 3,
-                message: 'Email must be at least 6 characters'
+                message: localize(lang, 'com_auth_email_min_length')
               },
               maxLength: {
                 value: 120,
-                message: 'Email should not be longer than 120 characters'
+                message: localize(lang, 'com_auth_email_max_length')
               },
               pattern: {
                 value: /\S+@\S+\.\S+/,
-                message: 'You must enter a valid email address'
+                message: localize(lang, 'com_auth_email_pattern')
               }
             })}
             aria-invalid={!!errors.email}
@@ -49,7 +54,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"
           >
-            Email address
+            {localize(lang, 'com_auth_email_address')}
           </label>
         </div>
         {errors.email && (
@@ -65,16 +70,16 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
             type="password"
             id="password"
             autoComplete="current-password"
-            aria-label="Password"
+            aria-label={localize(lang, 'com_auth_password')}
             {...register('password', {
-              required: 'Password is required',
+              required: localize(lang, 'com_auth_password_required'),
               minLength: {
                 value: 8,
-                message: 'Password must be at least 8 characters'
+                message: localize(lang, 'com_auth_password_min_length')
               },
               maxLength: {
                 value: 40,
-                message: 'Password must be 128 characters or less'
+                message: localize(lang, 'com_auth_password_max_length')
               }
             })}
             aria-invalid={!!errors.password}
@@ -85,7 +90,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"
           >
-            Password
+            {localize(lang, 'com_auth_password')}
           </label>
         </div>
 
@@ -97,7 +102,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {
         )}
       </div>
       <a href="/forgot-password" className="text-sm text-green-500 hover:underline">
-        Forgot Password?
+        {localize(lang, 'com_auth_password_forgot')}
       </a>
       <div className="mt-6">
         <button
@@ -105,7 +110,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"
         >
-          Continue
+          {localize(lang, 'com_auth_continue')}
         </button>
       </div>
     </form>

client/src/components/Auth/Registration.tsx

@@ -1,6 +1,9 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
+import { useRecoilValue } from 'recoil';
+import store from '~/store';
+import { localize } from '~/localization/Translation';
 import {
   useRegisterUserMutation,
   TRegisterUser,
@@ -11,6 +14,8 @@ function Registration() {
   const navigate = useNavigate();
   const { data: startupConfig } = useGetStartupConfig();
 
+  const lang = useRecoilValue(store.lang);
+
   const {
     register,
     watch,
@@ -70,16 +75,16 @@ function Registration() {
                 id="name"
                 type="text"
                 autoComplete="name"
-                aria-label="Full name"
+                aria-label={localize(lang, 'com_auth_full_name')}
                 {...register('name', {
-                  required: 'Name is required',
+                  required: localize(lang, 'com_auth_name_required'),
                   minLength: {
                     value: 3,
-                    message: 'Name must be at least 3 characters'
+                    message: localize(lang, 'com_auth_name_min_length')
                   },
                   maxLength: {
                     value: 80,
-                    message: 'Name must be less than 80 characters'
+                    message: localize(lang, 'com_auth_name_max_length')
                   }
                 })}
                 aria-invalid={!!errors.name}
@@ -90,7 +95,7 @@ function Registration() {
                 htmlFor="name"
                 className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm 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"
               >
-                Full name
+                {localize(lang, 'com_auth_full_name')}
               </label>
             </div>
 
@@ -106,16 +111,16 @@ function Registration() {
               <input
                 type="text"
                 id="username"
-                aria-label="Username"
+                aria-label={localize(lang, 'com_auth_username')}
                 {...register('username', {
-                  required: 'Username is required',
+                  required: localize(lang, 'com_auth_username_required'),
                   minLength: {
                     value: 3,
-                    message: 'Username must be at least 3 characters'
+                    message: localize(lang, 'com_auth_username_min_length')
                   },
                   maxLength: {
                     value: 20,
-                    message: 'Username must be less than 20 characters'
+                    message: localize(lang, 'com_auth_username_max_length')
                   }
                 })}
                 aria-invalid={!!errors.username}
@@ -127,7 +132,7 @@ function Registration() {
                 htmlFor="username"
                 className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm 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"
               >
-                Username
+                {localize(lang, 'com_auth_username')}
               </label>
             </div>
 
@@ -144,20 +149,20 @@ function Registration() {
                 type="email"
                 id="email"
                 autoComplete="email"
-                aria-label="Email"
+                aria-label={localize(lang, 'com_auth_email')}
                 {...register('email', {
-                  required: 'Email is required',
+                  required: localize(lang, 'com_auth_email_required'),
                   minLength: {
                     value: 3,
-                    message: 'Email must be at least 6 characters'
+                    message: localize(lang, 'com_auth_email_min_length')
                   },
                   maxLength: {
                     value: 120,
-                    message: 'Email should not be longer than 120 characters'
+                    message: localize(lang, 'com_auth_email_max_length')
                   },
                   pattern: {
                     value: /\S+@\S+\.\S+/,
-                    message: 'You must enter a valid email address'
+                    message: localize(lang, 'com_auth_email_pattern')
                   }
                 })}
                 aria-invalid={!!errors.email}
@@ -168,7 +173,7 @@ function Registration() {
                 htmlFor="email"
                 className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm 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"
               >
-                Email
+                {localize(lang, 'com_auth_email')}
               </label>
             </div>
             {errors.email && (
@@ -185,16 +190,16 @@ function Registration() {
                 id="password"
                 data-testid="password"
                 autoComplete="current-password"
-                aria-label="Password"
+                aria-label={localize(lang, 'com_auth_password')}
                 {...register('password', {
-                  required: 'Password is required',
+                  required: localize(lang, 'com_auth_password_required'),
                   minLength: {
                     value: 8,
-                    message: 'Password must be at least 8 characters'
+                    message: localize(lang, 'com_auth_password_min_length')
                   },
                   maxLength: {
                     value: 128,
-                    message: 'Password must be 128 characters or less'
+                    message: localize(lang, 'com_auth_password_max_length')
                   }
                 })}
                 aria-invalid={!!errors.password}
@@ -205,7 +210,7 @@ function Registration() {
                 htmlFor="password"
                 className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm 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"
               >
-                Password
+                {localize(lang, 'com_auth_password')}
               </label>
             </div>
 
@@ -222,14 +227,14 @@ function Registration() {
                 type="password"
                 id="confirm_password"
                 data-testid="confirm_password"
-                aria-label="Confirm password"
+                aria-label={localize(lang, 'com_auth_password_confirm')}
                 // uncomment to block pasting in confirm field
                 // onPaste={(e) => {
                 //   e.preventDefault();
                 //   return false;
                 // }}
                 {...register('confirm_password', {
-                  validate: (value) => value === password || 'Passwords do not match'
+                  validate: (value) => value === password || localize(lang, 'com_auth_password_not_match')
                 })}
                 aria-invalid={!!errors.confirm_password}
                 className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
@@ -239,7 +244,7 @@ function Registration() {
                 htmlFor="confirm_password"
                 className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm 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"
               >
-                Confirm password
+                {localize(lang, 'com_auth_password_confirm')}
               </label>
             </div>
 
@@ -263,19 +268,19 @@ function Registration() {
               aria-label="Submit registration"
               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 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-green-500"
             >
-              Continue
+              {localize(lang, 'com_auth_continue')}
             </button>
           </div>
         </form>
         <p className="my-4 text-center text-sm font-light text-gray-700">
           {' '}
-          Already have an account?{' '}
+          {localize(lang, 'com_auth_already_have_account')}{' '}
           <a
             href="/login"
             aria-label="Login"
             className="p-1 font-medium text-green-500 hover:underline"
           >
-            Login
+            {localize(lang, 'com_auth_login')}
           </a>
         </p>
         {startupConfig?.googleLoginEnabled && (
@@ -313,7 +318,7 @@ function Registration() {
                     d="m419.404 58.936-82.933 67.896C313.136 112.246 285.552 103.82 256 103.82c-66.729 0-123.429 42.957-143.965 102.724l-83.397-68.276h-.014C71.23 56.123 157.06 0 256 0c62.115 0 119.068 22.126 163.404 58.936z"
                   ></path>
                 </svg>
-                <p>Login with Google</p>
+                <p>{localize(lang, 'com_auth_google_login')}</p>
               </a>
             </div>
           </>

client/src/components/Auth/RequestPasswordReset.tsx

@@ -1,5 +1,8 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useRecoilValue } from 'recoil';
+import store from '~/store';
+import { localize } from '~/localization/Translation';
 import {
   useRequestPasswordResetMutation,
   TRequestPasswordReset,
@@ -7,6 +10,7 @@ import {
 } from '@librechat/data-provider';
 
 function RequestPasswordReset() {
+  const lang = useRecoilValue(store.lang);
   const {
     register,
     handleSubmit,
@@ -35,17 +39,17 @@ function RequestPasswordReset() {
   return (
     <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">Reset your password</h1>
+        <h1 className="mb-4 text-center text-3xl font-semibold">{localize(lang, 'com_auth_reset_password')}</h1>
         {success && (
           <div
             className="relative mt-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700"
             role="alert"
           >
-            Click{' '}
+            {localize(lang, 'com_auth_click')}{' '}
             <a className="text-green-600 hover:underline" href={resetLink}>
-              HERE
+              {localize(lang, 'com_auth_here')}
             </a>{' '}
-            to reset your password.
+            {localize(lang, 'com_auth_to_reset_your_password')}
             {/* An email has been sent with instructions on how to reset your password. */}
           </div>
         )}
@@ -54,8 +58,7 @@ function RequestPasswordReset() {
             className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
             role="alert"
           >
-            There was a problem resetting your password. There was no user found with the email
-            address provided. Please try again.
+            {localize(lang, 'com_auth_error_reset_password')}
           </div>
         )}
         <form
@@ -70,20 +73,20 @@ function RequestPasswordReset() {
                 type="email"
                 id="email"
                 autoComplete="off"
-                aria-label="Email"
+                aria-label={localize(lang, 'com_auth_email')}
                 {...register('email', {
-                  required: 'Email is required',
+                  required: localize(lang, 'com_auth_email_required'),
                   minLength: {
                     value: 3,
-                    message: 'Email must be at least 6 characters'
+                    message: localize(lang, 'com_auth_email_min_length')
                   },
                   maxLength: {
                     value: 120,
-                    message: 'Email should not be longer than 120 characters'
+                    message: localize(lang, 'com_auth_email_max_length')
                   },
                   pattern: {
                     value: /\S+@\S+\.\S+/,
-                    message: 'You must enter a valid email address'
+                    message: localize(lang, 'com_auth_email_pattern')
                   }
                 })}
                 aria-invalid={!!errors.email}
@@ -94,7 +97,7 @@ function RequestPasswordReset() {
                 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"
               >
-                Email address
+                {localize(lang, 'com_auth_email_address')}
               </label>
             </div>
             {errors.email && (
@@ -110,7 +113,7 @@ function RequestPasswordReset() {
               disabled={!!errors.email}
               className="w-full rounded-sm border border-transparent bg-green-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-600 focus:outline-none active:bg-green-500"
             >
-              Continue
+              {localize(lang, 'com_auth_continue')}
             </button>
           </div>
         </form>

client/src/components/Auth/ResetPassword.tsx

@@ -2,8 +2,12 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useResetPasswordMutation, TResetPassword } from '@librechat/data-provider';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import store from '~/store';
+import { localize } from '~/localization/Translation';
 
 function ResetPassword() {
+  const lang = useRecoilValue(store.lang);
   const {
     register,
     handleSubmit,
@@ -28,19 +32,19 @@ function ResetPassword() {
     return (
       <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">Password Reset Success</h1>
+          <h1 className="mb-4 text-center text-3xl font-semibold">{localize(lang, 'com_auth_reset_password_success')}</h1>
           <div
             className="relative mb-8 mt-4 rounded border border-green-400 bg-green-100 px-4 py-3 text-center text-green-700"
             role="alert"
           >
-            You may now login with your new password.
+            {localize(lang, 'com_auth_login_with_new_password')}
           </div>
           <button
             onClick={() => navigate('/login')}
-            aria-label="Sign in"
+            aria-label={localize(lang, 'com_auth_sign_in')}
             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"
           >
-            Continue
+            {localize(lang, 'com_auth_continue')}
           </button>
         </div>
       </div>
@@ -49,17 +53,17 @@ function ResetPassword() {
     return (
       <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">Reset your password</h1>
+          <h1 className="mb-4 text-center text-3xl font-semibold">{localize(lang, 'com_auth_reset_password')}</h1>
           {resetError && (
             <div
               className="relative mt-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
               role="alert"
             >
-              This password reset token is no longer valid.{' '}
+              {localize(lang, 'com_auth_error_invalid_reset_token')}{' '}
               <a className="font-semibold text-green-600 hover:underline" href="/forgot-password">
-                Click here
+                {localize(lang, 'com_auth_click_here')}
               </a>{' '}
-              to try again.
+              {localize(lang, 'com_auth_to_try_again')}
             </div>
           )}
           <form
@@ -88,16 +92,16 @@ function ResetPassword() {
                   type="password"
                   id="password"
                   autoComplete="current-password"
-                  aria-label="Password"
+                  aria-label={localize(lang, 'com_auth_password')}
                   {...register('password', {
-                    required: 'Password is required',
+                    required: localize(lang, 'com_auth_password_required'),
                     minLength: {
                       value: 8,
-                      message: 'Password must be at least 8 characters'
+                      message: localize(lang, 'com_auth_password_min_length')
                     },
                     maxLength: {
                       value: 128,
-                      message: 'Password must be 128 characters or less'
+                      message: localize(lang, 'com_auth_password_max_length')
                     }
                   })}
                   aria-invalid={!!errors.password}
@@ -108,7 +112,7 @@ function ResetPassword() {
                   htmlFor="password"
                   className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm 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"
                 >
-                  Password
+                  {localize(lang, 'com_auth_password')}
                 </label>
               </div>
 
@@ -124,14 +128,14 @@ function ResetPassword() {
                 <input
                   type="password"
                   id="confirm_password"
-                  aria-label="Confirm Password"
+                  aria-label={localize(lang, 'com_auth_password_confirm')}
                   // uncomment to prevent pasting in confirm field
                   onPaste={(e) => {
                     e.preventDefault();
                     return false;
                   }}
                   {...register('confirm_password', {
-                    validate: (value) => value === password || 'Passwords do not match'
+                    validate: (value) => value === password || localize(lang, 'com_auth_password_not_match')
                   })}
                   aria-invalid={!!errors.confirm_password}
                   className="peer block w-full appearance-none rounded-t-md border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0"
@@ -141,7 +145,7 @@ function ResetPassword() {
                   htmlFor="confirm_password"
                   className="absolute left-2.5 top-4 z-10 origin-[0] -translate-y-4 scale-75 transform text-sm 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"
                 >
-                  Confirm Password
+                  {localize(lang, 'com_auth_password_confirm')}
                 </label>
               </div>
               {errors.confirm_password && (
@@ -167,10 +171,10 @@ function ResetPassword() {
               <button
                 disabled={!!errors.password || !!errors.confirm_password}
                 type="submit"
-                aria-label="Submit registration"
+                aria-label={localize(lang, 'com_auth_submit_registration')}
                 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"
               >
-                Continue
+                {localize(lang, 'com_auth_continue')}
               </button>
             </div>
           </form>