From 8d1be554d488b606628f37736178e6b97123a199 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Wed, 7 Aug 2024 14:00:52 +0530
Subject: [PATCH] fix: input validation warning translation issue

---
 .../public/locales/en/translation.json        |  1 +
 .../public/locales/fr/translation.json        |  1 +
 apps/OpenSign/src/components/AddSigner.js     |  2 ++
 apps/OpenSign/src/components/AddTeam.js       |  1 +
 apps/OpenSign/src/components/AddUser.js       |  6 ++++
 apps/OpenSign/src/components/Header.js        |  7 +++--
 apps/OpenSign/src/components/LoginFacebook.js |  6 ++++
 apps/OpenSign/src/components/LoginGoogle.js   |  9 ++++--
 .../components/pdf/DropdownWidgetOption.js    | 10 ++++++
 .../src/components/pdf/EditTemplate.js        |  4 +++
 apps/OpenSign/src/components/pdf/EmailBody.js |  1 +
 .../src/components/pdf/EmailComponent.js      |  6 ++++
 .../src/components/pdf/VerifyEmail.js         |  3 ++
 .../src/components/pdf/WidgetNameModal.js     |  1 +
 .../components/shared/fields/CreateFolder.js  |  1 +
 apps/OpenSign/src/constant/Utils.js           |  6 ++++
 apps/OpenSign/src/pages/AddAdmin.js           | 30 ++++++++++++++++--
 apps/OpenSign/src/pages/ChangePassword.js     |  3 ++
 apps/OpenSign/src/pages/ForgetPassword.js     |  3 ++
 apps/OpenSign/src/pages/Form.js               | 18 +++++++++++
 apps/OpenSign/src/pages/GuestLogin.js         | 14 +++++++--
 apps/OpenSign/src/pages/Login.js              | 23 +++++++++++++-
 apps/OpenSign/src/pages/Opensigndrive.js      |  3 ++
 apps/OpenSign/src/pages/PdfRequestFiles.js    | 11 ++++++-
 apps/OpenSign/src/pages/Pgsignup.js           |  6 ++++
 apps/OpenSign/src/pages/SSOVerify.js          |  9 ++++++
 apps/OpenSign/src/pages/Signup.js             | 31 +++++++++++++++++--
 apps/OpenSign/src/pages/TeamList.js           |  5 +++
 .../src/pages/UpdateExistUserAdmin.js         |  6 ++++
 apps/OpenSign/src/pages/UserProfile.js        |  3 ++
 apps/OpenSign/src/primitives/AddContact.js    |  2 ++
 .../src/primitives/GetReportDisplay.js        |  5 +++
 apps/OpenSign/src/primitives/ValidateRoute.js |  4 +++
 33 files changed, 226 insertions(+), 15 deletions(-)

diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json
index f8cef4d9f..8c71f25a9 100644
--- a/apps/OpenSign/public/locales/en/translation.json
+++ b/apps/OpenSign/public/locales/en/translation.json
@@ -14,6 +14,7 @@
     "tagline":"Tagline ",
     "has-requested-you-to-sign":"has requested you to sign",
     "has-requested-you-to-review-and-sign":" has requested you to review and sign",
+    "input-required":"Please fill out this field.",
     "sort-order" :{
       "Ascending":"Ascending",
       "Descending":"Descending",
diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json
index 874eb785f..ae1c5af71 100644
--- a/apps/OpenSign/public/locales/fr/translation.json
+++ b/apps/OpenSign/public/locales/fr/translation.json
@@ -14,6 +14,7 @@
     "tagline":"Slogan",
     "has-requested-you-to-sign":" vous a demandé de signer",
     "has-requested-you-to-review-and-sign":"vous a demandé de consulter et de signer",
+     "input-required":"Veuillez remplir ce champ.",
     "sort-order" :{
       "Ascending":"Ascendant",
       "Descending":"Descendant",
diff --git a/apps/OpenSign/src/components/AddSigner.js b/apps/OpenSign/src/components/AddSigner.js
index 4b1e0e9c1..1f49e9753 100644
--- a/apps/OpenSign/src/components/AddSigner.js
+++ b/apps/OpenSign/src/components/AddSigner.js
@@ -233,6 +233,7 @@ const AddSigner = (props) => {
               onChange={(e) => setName(e.target.value)}
               required
               disabled={addYourself}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
@@ -247,6 +248,7 @@ const AddSigner = (props) => {
               value={email}
               onChange={(e) => setEmail(e.target.value?.toLowerCase())}
               required
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               disabled={addYourself}
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
diff --git a/apps/OpenSign/src/components/AddTeam.js b/apps/OpenSign/src/components/AddTeam.js
index 088e13edd..1f214b01c 100644
--- a/apps/OpenSign/src/components/AddTeam.js
+++ b/apps/OpenSign/src/components/AddTeam.js
@@ -150,6 +150,7 @@ const AddTeam = (props) => {
               name="name"
               value={formdata.name}
               onChange={(e) => handleChange(e)}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
diff --git a/apps/OpenSign/src/components/AddUser.js b/apps/OpenSign/src/components/AddUser.js
index b8b2bcdee..74eeb63cb 100644
--- a/apps/OpenSign/src/components/AddUser.js
+++ b/apps/OpenSign/src/components/AddUser.js
@@ -273,6 +273,7 @@ const AddUser = (props) => {
               name="name"
               value={formdata.name}
               onChange={(e) => handleChange(e)}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
@@ -290,6 +291,7 @@ const AddUser = (props) => {
               name="email"
               value={formdata.email}
               onChange={(e) => handleChange(e)}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
@@ -343,6 +345,9 @@ const AddUser = (props) => {
                 onChange={(e) => handleChange(e)}
                 name="team"
                 className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
               >
                 <option defaultValue={""} value={""}>
@@ -369,6 +374,7 @@ const AddUser = (props) => {
               onChange={(e) => handleChange(e)}
               name="role"
               className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
             >
               <option defaultValue={""} value={""}>
diff --git a/apps/OpenSign/src/components/Header.js b/apps/OpenSign/src/components/Header.js
index 31968315b..f6e5bebac 100644
--- a/apps/OpenSign/src/components/Header.js
+++ b/apps/OpenSign/src/components/Header.js
@@ -8,13 +8,14 @@ import {
   checkIsSubscribed,
   checkIsSubscribedTeam,
   getAppLogo,
-  openInNewTab
+  openInNewTab,
+  saveLanguageInLocal
 } from "../constant/Utils";
 import { isEnableSubscription, isStaging } from "../constant/const";
 import { useTranslation } from "react-i18next";
 
 const Header = ({ showSidebar }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const { width } = useWindowSize();
   let username = localStorage.getItem("username");
@@ -69,7 +70,7 @@ const Header = ({ showSidebar }) => {
     let appid = localStorage.getItem("parseAppId");
 
     localStorage.clear();
-
+    saveLanguageInLocal(i18n);
     localStorage.setItem("appLogo", applogo);
     localStorage.setItem("defaultmenuid", defaultmenuid);
     localStorage.setItem("PageLanding", PageLanding);
diff --git a/apps/OpenSign/src/components/LoginFacebook.js b/apps/OpenSign/src/components/LoginFacebook.js
index edfe43dc7..b74e1da8b 100644
--- a/apps/OpenSign/src/components/LoginFacebook.js
+++ b/apps/OpenSign/src/components/LoginFacebook.js
@@ -161,6 +161,9 @@ const LoginFacebook = ({
                           Phone: e.target.value
                         })
                       }
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                   </div>
@@ -180,6 +183,9 @@ const LoginFacebook = ({
                           Company: e.target.value
                         })
                       }
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                   </div>
diff --git a/apps/OpenSign/src/components/LoginGoogle.js b/apps/OpenSign/src/components/LoginGoogle.js
index 5dbf2845e..72c6b701b 100644
--- a/apps/OpenSign/src/components/LoginGoogle.js
+++ b/apps/OpenSign/src/components/LoginGoogle.js
@@ -5,6 +5,7 @@ import { useScript } from "../hook/useScript";
 import ModalUi from "../primitives/ModalUi";
 import Loader from "../primitives/Loader";
 import { useTranslation } from "react-i18next";
+import { saveLanguageInLocal } from "../constant/Utils";
 /*
  * `GoogleSignInBtn`as it's name indicates it render google sign in button
  * and in this `useScript` in which we have created for generate google sign button
@@ -17,7 +18,7 @@ const GoogleSignInBtn = ({
   thirdpartyLoader,
   setThirdpartyLoader
 }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [isModal, setIsModal] = useState(false);
   const googleBtn = useRef();
   const [userDetails, setUserDetails] = useState({
@@ -57,6 +58,7 @@ const GoogleSignInBtn = ({
     let userSettings = localStorage.getItem("userSettings");
 
     localStorage.clear();
+    saveLanguageInLocal(i18n);
 
     localStorage.setItem("baseUrl", baseUrl);
     localStorage.setItem("parseAppId", appid);
@@ -181,7 +183,7 @@ const GoogleSignInBtn = ({
     let appid = localStorage.getItem("parseAppId");
 
     localStorage.clear();
-
+    saveLanguageInLocal(i18n);
     localStorage.setItem("appLogo", applogo);
     localStorage.setItem("defaultmenuid", defaultmenuid);
     localStorage.setItem("PageLanding", PageLanding);
@@ -214,6 +216,7 @@ const GoogleSignInBtn = ({
                   Phone: e.target.value
                 })
               }
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
             />
           </div>
@@ -232,6 +235,7 @@ const GoogleSignInBtn = ({
                   Company: e.target.value
                 })
               }
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
             />
           </div>
@@ -250,6 +254,7 @@ const GoogleSignInBtn = ({
                   Destination: e.target.value
                 })
               }
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
             />
           </div>
diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
index 45d9e497c..dfa1a9687 100644
--- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
@@ -161,6 +161,7 @@ function DropdownWidgetOption(props) {
               <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
               defaultValue={dropdownName}
               value={dropdownName}
@@ -199,6 +200,9 @@ function DropdownWidgetOption(props) {
                     />
                   )}
                   <input
+                    onInvalid={(e) =>
+                      e.target.setCustomValidity(t("input-required"))
+                    }
                     required
                     className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                     type="text"
@@ -231,6 +235,9 @@ function DropdownWidgetOption(props) {
                         <Upgrade />
                       )}
                       <input
+                        onInvalid={(e) =>
+                          e.target.setCustomValidity(t("input-required"))
+                        }
                         required
                         defaultValue={0}
                         value={minCount}
@@ -251,6 +258,9 @@ function DropdownWidgetOption(props) {
                         {t("maximum-check")}
                       </label>
                       <input
+                        onInvalid={(e) =>
+                          e.target.setCustomValidity(t("input-required"))
+                        }
                         required
                         defaultValue={0}
                         value={maxCount}
diff --git a/apps/OpenSign/src/components/pdf/EditTemplate.js b/apps/OpenSign/src/components/pdf/EditTemplate.js
index 4b381a480..9481771fb 100644
--- a/apps/OpenSign/src/components/pdf/EditTemplate.js
+++ b/apps/OpenSign/src/components/pdf/EditTemplate.js
@@ -80,6 +80,7 @@ const EditTemplate = ({ template, onSuccess }) => {
               name="Name"
               value={formData.Name}
               onChange={(e) => handleStrInput(e)}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
@@ -174,6 +175,9 @@ const EditTemplate = ({ template, onSuccess }) => {
                 name="RemindOnceInEvery"
                 className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 onChange={handleStrInput}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
               />
             </div>
diff --git a/apps/OpenSign/src/components/pdf/EmailBody.js b/apps/OpenSign/src/components/pdf/EmailBody.js
index 8df4e951d..834f31344 100644
--- a/apps/OpenSign/src/components/pdf/EmailBody.js
+++ b/apps/OpenSign/src/components/pdf/EmailBody.js
@@ -15,6 +15,7 @@ export function EmailBody(props) {
         </label>
         <input
           required
+          onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
           value={props.requestSubject}
           onChange={(e) => props.setRequestSubject(e.target.value)}
           placeholder='${senderName} has requested you to sign "${documentName}"'
diff --git a/apps/OpenSign/src/components/pdf/EmailComponent.js b/apps/OpenSign/src/components/pdf/EmailComponent.js
index 330d657b3..24341ca13 100644
--- a/apps/OpenSign/src/components/pdf/EmailComponent.js
+++ b/apps/OpenSign/src/components/pdf/EmailComponent.js
@@ -247,6 +247,9 @@ function EmailComponent({
                     onChange={handleEmailValue}
                     onKeyDown={handleEnterPress}
                     onBlur={() => emailValue && handleEnterPress("add")}
+                    onInvalid={(e) =>
+                      e.target.setCustomValidity(t("input-required"))
+                    }
                     required
                   />
                 )}
@@ -261,6 +264,9 @@ function EmailComponent({
                   onKeyDown={handleEnterPress}
                   placeholder="Add an email address and hit enter"
                   onBlur={() => emailValue && handleEnterPress("add")}
+                  onInvalid={(e) =>
+                    e.target.setCustomValidity(t("input-required"))
+                  }
                   required
                 />
               </div>
diff --git a/apps/OpenSign/src/components/pdf/VerifyEmail.js b/apps/OpenSign/src/components/pdf/VerifyEmail.js
index 08b0401b1..026cb5054 100644
--- a/apps/OpenSign/src/components/pdf/VerifyEmail.js
+++ b/apps/OpenSign/src/components/pdf/VerifyEmail.js
@@ -20,6 +20,9 @@ function VerifyEmail(props) {
             <div className="px-6 py-3 text-base-content">
               <label className="mb-2">{t("enter-otp")}</label>
               <input
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
                 type="tel"
                 pattern="[0-9]{4}"
diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.js b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
index 295425642..77fd78a21 100644
--- a/apps/OpenSign/src/components/pdf/WidgetNameModal.js
+++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
@@ -124,6 +124,7 @@ const WidgetNameModal = (props) => {
             name="name"
             value={formdata.name}
             onChange={(e) => handleChange(e)}
+            onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
             required
           />
         </div>
diff --git a/apps/OpenSign/src/components/shared/fields/CreateFolder.js b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
index 3f7448eab..fa6d9e23e 100644
--- a/apps/OpenSign/src/components/shared/fields/CreateFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
@@ -134,6 +134,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
             className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             value={name}
             onChange={(e) => setName(e.target.value)}
+            onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
             required
           />
         </div>
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index fa0636681..70feec313 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -2242,3 +2242,9 @@ export const getContainerScale = (pdfOriginalWH, pageNumber, containerWH) => {
   const containerScale = containerWH?.width / getPdfPageWidth?.width || 1;
   return containerScale;
 };
+
+//function to get current laguage and set it in local
+export const saveLanguageInLocal = (i18n) => {
+  const detectedLanguage = i18n.language || "en";
+  localStorage.setItem("i18nextLng", detectedLanguage);
+};
diff --git a/apps/OpenSign/src/pages/AddAdmin.js b/apps/OpenSign/src/pages/AddAdmin.js
index b37d08417..48e128abc 100644
--- a/apps/OpenSign/src/pages/AddAdmin.js
+++ b/apps/OpenSign/src/pages/AddAdmin.js
@@ -2,7 +2,11 @@ import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import { appInfo } from "../constant/appinfo";
 import { NavLink, useNavigate } from "react-router-dom";
-import { getAppLogo, openInNewTab } from "../constant/Utils";
+import {
+  getAppLogo,
+  openInNewTab,
+  saveLanguageInLocal
+} from "../constant/Utils";
 import { useDispatch } from "react-redux";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import Loader from "../primitives/Loader";
@@ -10,7 +14,7 @@ import Title from "../components/Title";
 import { useTranslation } from "react-i18next";
 
 const AddAdmin = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const [showPassword, setShowPassword] = useState(false);
@@ -63,6 +67,7 @@ const AddAdmin = () => {
     const userSettings = localStorage.getItem("userSettings");
 
     localStorage.clear();
+    saveLanguageInLocal(i18n);
     localStorage.setItem("baseUrl", baseUrl);
     localStorage.setItem("parseAppId", appid);
     localStorage.setItem("appLogo", applogo);
@@ -292,6 +297,9 @@ const AddAdmin = () => {
                       className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       value={name}
                       onChange={(e) => setName(e.target.value)}
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                     <hr className="my-2 border-none" />
@@ -305,6 +313,9 @@ const AddAdmin = () => {
                       className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       value={email}
                       onChange={(e) => setEmail(e.target.value?.toLowerCase())}
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                     <hr className="my-2 border-none" />
@@ -317,6 +328,9 @@ const AddAdmin = () => {
                       className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       value={phone}
                       onChange={(e) => setPhone(e.target.value)}
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                     <hr className="my-2 border-none" />
@@ -329,6 +343,9 @@ const AddAdmin = () => {
                       className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       value={company}
                       onChange={(e) => setCompany(e.target.value)}
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                     <hr className="my-2 border-none" />
@@ -341,6 +358,9 @@ const AddAdmin = () => {
                       className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       value={jobTitle}
                       onChange={(e) => setJobTitle(e.target.value)}
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                     <hr className="my-2 border-none" />
@@ -355,6 +375,9 @@ const AddAdmin = () => {
                         name="password"
                         value={password}
                         onChange={(e) => handlePasswordChange(e)}
+                        onInvalid={(e) =>
+                          e.target.setCustomValidity(t("input-required"))
+                        }
                         required
                       />
                       <span
@@ -401,6 +424,9 @@ const AddAdmin = () => {
                         id="termsandcondition"
                         checked={isAuthorize}
                         onChange={(e) => setIsAuthorize(e.target.checked)}
+                        onInvalid={(e) =>
+                          e.target.setCustomValidity(t("input-required"))
+                        }
                         required
                       />
                       <label
diff --git a/apps/OpenSign/src/pages/ChangePassword.js b/apps/OpenSign/src/pages/ChangePassword.js
index 83781c168..6bdda6586 100644
--- a/apps/OpenSign/src/pages/ChangePassword.js
+++ b/apps/OpenSign/src/pages/ChangePassword.js
@@ -73,6 +73,7 @@ function ChangePassword() {
               onChange={(e) => setCurrentPassword(e.target.value)}
               className="op-input op-input-bordered op-input-sm text-xs w-full"
               placeholder={t("current-password")}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
             />
           </div>
@@ -87,6 +88,7 @@ function ChangePassword() {
               onChange={(e) => setnewpassword(e.target.value)}
               className="op-input op-input-bordered op-input-sm text-xs w-full"
               placeholder={t("new-password")}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
             />
           </div>
@@ -101,6 +103,7 @@ function ChangePassword() {
               value={confirmpassword}
               onChange={(e) => setconfirmpassword(e.target.value)}
               placeholder={t("confirm-password")}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
             />
           </div>
diff --git a/apps/OpenSign/src/pages/ForgetPassword.js b/apps/OpenSign/src/pages/ForgetPassword.js
index b1eb53336..183d70356 100644
--- a/apps/OpenSign/src/pages/ForgetPassword.js
+++ b/apps/OpenSign/src/pages/ForgetPassword.js
@@ -109,6 +109,9 @@ function ForgotPassword() {
                       className="op-input op-input-bordered op-input-sm w-full"
                       value={state.email}
                       onChange={handleChange}
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                     <hr className="my-2 border-none" />
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index c10190972..c11e67544 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -594,6 +594,9 @@ const Forms = (props) => {
                   onChange={(e) => handleStrInput(e)}
                   className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
                   placeholder="Enter pdf password"
+                  onInvalid={(e) =>
+                    e.target.setCustomValidity(t("input-required"))
+                  }
                   required
                 />
                 <p
@@ -674,6 +677,9 @@ const Forms = (props) => {
                         ? "application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/png,image/jpeg"
                         : "application/pdf,image/png,image/jpeg"
                     }
+                    onInvalid={(e) =>
+                      e.target.setCustomValidity(t("input-required"))
+                    }
                     required
                   />
                   {process.env.REACT_APP_DROPBOX_API_KEY && (
@@ -697,6 +703,9 @@ const Forms = (props) => {
                 className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 value={formData.Name}
                 onChange={(e) => handleStrInput(e)}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
               />
             </div>
@@ -728,6 +737,9 @@ const Forms = (props) => {
                 className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 value={formData.Note}
                 onChange={(e) => handleStrInput(e)}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
               />
             </div>
@@ -750,6 +762,9 @@ const Forms = (props) => {
                   className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                   value={formData.TimeToCompleteDays}
                   onChange={(e) => handleStrInput(e)}
+                  onInvalid={(e) =>
+                    e.target.setCustomValidity(t("input-required"))
+                  }
                   required
                 />
               </div>
@@ -848,6 +863,9 @@ const Forms = (props) => {
                       name="remindOnceInEvery"
                       className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       onChange={handleStrInput}
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                   </div>
diff --git a/apps/OpenSign/src/pages/GuestLogin.js b/apps/OpenSign/src/pages/GuestLogin.js
index 777adef6a..183988057 100644
--- a/apps/OpenSign/src/pages/GuestLogin.js
+++ b/apps/OpenSign/src/pages/GuestLogin.js
@@ -2,7 +2,11 @@ import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import axios from "axios";
 import { isEnableSubscription } from "../constant/const";
-import { contractUsers, getAppLogo } from "../constant/Utils";
+import {
+  contractUsers,
+  getAppLogo,
+  saveLanguageInLocal
+} from "../constant/Utils";
 import logo from "../assets/images/logo.png";
 import { appInfo } from "../constant/appinfo";
 import Parse from "parse";
@@ -11,7 +15,7 @@ import { useTranslation } from "react-i18next";
 import SelectLanguage from "../components/pdf/SelectLanguage";
 
 function GuestLogin() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { id, userMail, contactBookId, base64url } = useParams();
   const navigate = useNavigate();
   const [email, setEmail] = useState(userMail);
@@ -43,6 +47,7 @@ function GuestLogin() {
     }
 
     localStorage.clear();
+    saveLanguageInLocal(i18n);
     const parseId = appInfo.appId;
     const newServer = `${appInfo.baseUrl}/`;
     localStorage.setItem("baseUrl", newServer);
@@ -207,7 +212,7 @@ function GuestLogin() {
                     <div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md">
                       <input
                         type="email"
-                        name="mobile"
+                        name="email"
                         value={email}
                         className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full disabled:text-[#5c5c5c] text-xs"
                         disabled
@@ -279,6 +284,9 @@ function GuestLogin() {
                       onChange={handleInputChange}
                       className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       disabled={loading}
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                   </div>
diff --git a/apps/OpenSign/src/pages/Login.js b/apps/OpenSign/src/pages/Login.js
index cd24019a5..c3fc6cb90 100644
--- a/apps/OpenSign/src/pages/Login.js
+++ b/apps/OpenSign/src/pages/Login.js
@@ -14,10 +14,16 @@ import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
 import { showTenant } from "../redux/reducers/ShowTenant";
-import { fetchSubscription, getAppLogo, openInNewTab } from "../constant/Utils";
+import {
+  fetchSubscription,
+  getAppLogo,
+  openInNewTab,
+  saveLanguageInLocal
+} from "../constant/Utils";
 import Loader from "../primitives/Loader";
 import { useTranslation } from "react-i18next";
 import SelectLanguage from "../components/pdf/SelectLanguage";
+
 function Login() {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
@@ -584,6 +590,7 @@ function Login() {
     let appid = localStorage.getItem("parseAppId");
 
     localStorage.clear();
+    saveLanguageInLocal(i18n);
 
     localStorage.setItem("appLogo", applogo);
     localStorage.setItem("defaultmenuid", defaultmenuid);
@@ -662,6 +669,9 @@ function Login() {
                           value={state.email}
                           onChange={handleChange}
                           required
+                          onInvalid={(e) =>
+                            e.target.setCustomValidity(t("input-required"))
+                          }
                         />
                         <hr className="my-1 border-none" />
                         {!isLoginSSO && (
@@ -680,6 +690,11 @@ function Login() {
                                 value={state.password}
                                 autoComplete="current-password"
                                 onChange={handleChange}
+                                onInvalid={(e) =>
+                                  e.target.setCustomValidity(
+                                    t("input-required")
+                                  )
+                                }
                                 required
                               />
                               <span
@@ -807,6 +822,9 @@ function Login() {
                       Company: e.target.value
                     })
                   }
+                  onInvalid={(e) =>
+                    e.target.setCustomValidity(t("input-required"))
+                  }
                   required
                 />
               </div>
@@ -830,6 +848,9 @@ function Login() {
                       Destination: e.target.value
                     })
                   }
+                  onInvalid={(e) =>
+                    e.target.setCustomValidity(t("input-required"))
+                  }
                   required
                 />
               </div>
diff --git a/apps/OpenSign/src/pages/Opensigndrive.js b/apps/OpenSign/src/pages/Opensigndrive.js
index 10def42fc..1ce94408f 100644
--- a/apps/OpenSign/src/pages/Opensigndrive.js
+++ b/apps/OpenSign/src/pages/Opensigndrive.js
@@ -572,6 +572,9 @@ function Opensigndrive() {
                 <span className="text-[red]">*</span>
               </label>
               <input
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
                 className="op-input op-input-bordered op-input-sm"
                 type="text"
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 421a46463..2ee1821c9 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -1048,7 +1048,7 @@ function PdfRequestFiles(props) {
                 console.log("err in request signing", err);
                 setIsAlert({
                   isShow: true,
-                  alertMessage: `Something went wrong.`
+                  alertMessage: t("something-went-wrong-mssg")
                 });
               }
             }
@@ -1729,6 +1729,9 @@ function PdfRequestFiles(props) {
                               name="otp"
                               className="grow"
                               placeholder="Enter Verification Code"
+                              onInvalid={(e) =>
+                                e.target.setCustomValidity(t("input-required"))
+                              }
                               required
                               value={otp}
                               onChange={(e) => setOtp(e.target.value)}
@@ -1774,6 +1777,9 @@ function PdfRequestFiles(props) {
                               value={contact.name}
                               onChange={handleInputChange}
                               placeholder="name"
+                              onInvalid={(e) =>
+                                e.target.setCustomValidity(t("input-required"))
+                              }
                               required
                               disabled={loading}
                             />
@@ -1795,6 +1801,9 @@ function PdfRequestFiles(props) {
                               value={contact.email}
                               onChange={handleInputChange}
                               placeholder="Email"
+                              onInvalid={(e) =>
+                                e.target.setCustomValidity(t("input-required"))
+                              }
                               required
                               disabled={loading}
                             />
diff --git a/apps/OpenSign/src/pages/Pgsignup.js b/apps/OpenSign/src/pages/Pgsignup.js
index 95474b18f..d243645b5 100644
--- a/apps/OpenSign/src/pages/Pgsignup.js
+++ b/apps/OpenSign/src/pages/Pgsignup.js
@@ -309,6 +309,9 @@ const PgSignUp = () => {
                 className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 value={formData.password}
                 onChange={handlePassowordChange}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
               />
               <label htmlFor="confirmPassword">
@@ -328,6 +331,9 @@ const PgSignUp = () => {
                 }}
                 value={formData.confirmPassword}
                 onChange={handleConFirmPassowordChange}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
               />
               <div
diff --git a/apps/OpenSign/src/pages/SSOVerify.js b/apps/OpenSign/src/pages/SSOVerify.js
index 469164fef..a78a8d2a6 100644
--- a/apps/OpenSign/src/pages/SSOVerify.js
+++ b/apps/OpenSign/src/pages/SSOVerify.js
@@ -277,6 +277,9 @@ const SSOVerify = () => {
                   })
                 }
                 disabled={isLoader}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
               />
               <p className="text-[10px] text-[red] ml-2">
@@ -299,6 +302,9 @@ const SSOVerify = () => {
                   })
                 }
                 disabled={isLoader}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
               />
             </div>
@@ -319,6 +325,9 @@ const SSOVerify = () => {
                   })
                 }
                 disabled={isLoader}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
                 required
               />
             </div>
diff --git a/apps/OpenSign/src/pages/Signup.js b/apps/OpenSign/src/pages/Signup.js
index 7bc062175..56268c5ef 100644
--- a/apps/OpenSign/src/pages/Signup.js
+++ b/apps/OpenSign/src/pages/Signup.js
@@ -11,13 +11,17 @@ import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import { isEnableSubscription } from "../constant/const";
-import { getAppLogo, openInNewTab } from "../constant/Utils";
+import {
+  getAppLogo,
+  openInNewTab,
+  saveLanguageInLocal
+} from "../constant/Utils";
 import Loader from "../primitives/Loader";
 import { useTranslation } from "react-i18next";
 import SelectLanguage from "../components/pdf/SelectLanguage";
 const Signup = () => {
   const { width } = useWindowSize();
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
   const dispatch = useDispatch();
@@ -52,7 +56,7 @@ const Signup = () => {
     let userSettings = localStorage.getItem("userSettings");
 
     localStorage.clear();
-
+    saveLanguageInLocal(i18n);
     localStorage.setItem("baseUrl", baseUrl);
     localStorage.setItem("parseAppId", appid);
     localStorage.setItem("appLogo", applogo);
@@ -347,6 +351,9 @@ const Signup = () => {
                         className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={name}
                         onChange={(e) => setName(e.target.value)}
+                        onInvalid={(e) =>
+                          e.target.setCustomValidity(t("input-required"))
+                        }
                         required
                       />
                       <hr className="my-2 border-none" />
@@ -362,6 +369,9 @@ const Signup = () => {
                         onChange={(e) =>
                           setEmail(e.target.value?.toLowerCase())
                         }
+                        onInvalid={(e) =>
+                          e.target.setCustomValidity(t("input-required"))
+                        }
                         required
                       />
                       <hr className="my-2 border-none" />
@@ -374,6 +384,9 @@ const Signup = () => {
                         className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={phone}
                         onChange={(e) => setPhone(e.target.value)}
+                        onInvalid={(e) =>
+                          e.target.setCustomValidity(t("input-required"))
+                        }
                         required
                       />
                       <hr className="my-2 border-none" />
@@ -386,6 +399,9 @@ const Signup = () => {
                         className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={company}
                         onChange={(e) => setCompany(e.target.value)}
+                        onInvalid={(e) =>
+                          e.target.setCustomValidity(t("input-required"))
+                        }
                         required
                       />
                       <hr className="my-2 border-none" />
@@ -398,6 +414,9 @@ const Signup = () => {
                         className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={jobTitle}
                         onChange={(e) => setJobTitle(e.target.value)}
+                        onInvalid={(e) =>
+                          e.target.setCustomValidity(t("input-required"))
+                        }
                         required
                       />
                       <hr className="my-2 border-none" />
@@ -412,6 +431,9 @@ const Signup = () => {
                           name="password"
                           value={password}
                           onChange={(e) => handlePasswordChange(e)}
+                          onInvalid={(e) =>
+                            e.target.setCustomValidity(t("input-required"))
+                          }
                           required
                         />
                         <span
@@ -462,6 +484,9 @@ const Signup = () => {
                           id="termsandcondition"
                           checked={isAuthorize}
                           onChange={(e) => setIsAuthorize(e.target.checked)}
+                          onInvalid={(e) =>
+                            e.target.setCustomValidity(t("input-required"))
+                          }
                           required
                         />
                         <label
diff --git a/apps/OpenSign/src/pages/TeamList.js b/apps/OpenSign/src/pages/TeamList.js
index e5fd5509c..94e9b47fc 100644
--- a/apps/OpenSign/src/pages/TeamList.js
+++ b/apps/OpenSign/src/pages/TeamList.js
@@ -366,6 +366,11 @@ const TeamList = () => {
                                           onChange={(e) =>
                                             handleEditChange(e, item)
                                           }
+                                          onInvalid={(e) =>
+                                            e.target.setCustomValidity(
+                                              t("input-required")
+                                            )
+                                          }
                                           required
                                         />
                                         <button
diff --git a/apps/OpenSign/src/pages/UpdateExistUserAdmin.js b/apps/OpenSign/src/pages/UpdateExistUserAdmin.js
index c66100d73..52a49a075 100644
--- a/apps/OpenSign/src/pages/UpdateExistUserAdmin.js
+++ b/apps/OpenSign/src/pages/UpdateExistUserAdmin.js
@@ -122,6 +122,9 @@ const UpdateExistUserAdmin = () => {
                           email: e.target.value?.toLowerCase()
                         }))
                       }
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
                     <hr className="my-2 border-none" />
@@ -139,6 +142,9 @@ const UpdateExistUserAdmin = () => {
                           masterkey: e.target.value
                         }))
                       }
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                     />
 
diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
index d5380b7d5..51a98b713 100644
--- a/apps/OpenSign/src/pages/UserProfile.js
+++ b/apps/OpenSign/src/pages/UserProfile.js
@@ -620,6 +620,9 @@ function UserProfile() {
                   <div className="px-6 py-3 text-base-content">
                     <label className="mb-2">{t("enter-otp")}</label>
                     <input
+                      onInvalid={(e) =>
+                        e.target.setCustomValidity(t("input-required"))
+                      }
                       required
                       type="tel"
                       pattern="[0-9]{4}"
diff --git a/apps/OpenSign/src/primitives/AddContact.js b/apps/OpenSign/src/primitives/AddContact.js
index 5e5c661e5..5d6d848e7 100644
--- a/apps/OpenSign/src/primitives/AddContact.js
+++ b/apps/OpenSign/src/primitives/AddContact.js
@@ -206,6 +206,7 @@ const AddContact = (props) => {
               id="name"
               value={name}
               onChange={(e) => setName(e.target.value)}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
               disabled={addYourself}
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
@@ -221,6 +222,7 @@ const AddContact = (props) => {
               id="email"
               value={email}
               onChange={(e) => setEmail(e.target.value?.toLowerCase())}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               required
               disabled={addYourself}
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index cf546c041..49b0c4b6a 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -1813,6 +1813,11 @@ const ReportTable = (props) => {
                                                   item
                                                 )
                                               }
+                                              onInvalid={(e) =>
+                                                e.target.setCustomValidity(
+                                                  t("input-required")
+                                                )
+                                              }
                                               required
                                             />
                                           </div>
diff --git a/apps/OpenSign/src/primitives/ValidateRoute.js b/apps/OpenSign/src/primitives/ValidateRoute.js
index 0e85afed1..23caa01ca 100644
--- a/apps/OpenSign/src/primitives/ValidateRoute.js
+++ b/apps/OpenSign/src/primitives/ValidateRoute.js
@@ -1,7 +1,10 @@
 import React, { useEffect } from "react";
 import Parse from "parse";
 import { Outlet } from "react-router-dom";
+import { saveLanguageInLocal } from "../constant/Utils";
+import { useTranslation } from "react-i18next";
 const ValidateRoute = () => {
+  const { i18n } = useTranslation();
   useEffect(() => {
     (async () => {
       if (localStorage.getItem("accesstoken")) {
@@ -30,6 +33,7 @@ const ValidateRoute = () => {
     let appid = localStorage.getItem("parseAppId");
 
     localStorage.clear();
+    saveLanguageInLocal(i18n);
 
     localStorage.setItem("appLogo", applogo);
     localStorage.setItem("defaultmenuid", defaultmenuid);