[ES-1908] [ES-1909] UI fixes for pre and postfix. (#1029)

Signed-off-by: GurukiranP <[email protected]>
mosip · Dec 5, 2024 · 5d84d41 · 5d84d41
1 parent 15fa7d3
commit 5d84d41
Show file tree

Hide file tree

Showing 14 changed files with 33 additions and 23 deletions.
diff --git a/esignet-service/src/main/resources/application-default.properties b/esignet-service/src/main/resources/application-default.properties
@@ -374,12 +374,10 @@ mosip.esignet.ui.config.username.prefix=
 mosip.esignet.ui.config.username.postfix=
 mosip.esignet.ui.config.username.max-length=12
 mosip.esignet.ui.config.username.input-type=text
-mosip.esignet.ui.config.login-id.options={ \
-    { "id": "mobile", "svg": "mobile_icon", "prefixes": {{"label": "IND", "value": "+91", "maxLength": "", "regex": ""}, {"label": "KHM", "value": "+855", "regex": "^[a-zA-Z]+$"}, {"label": "USA", "value": "+1", "maxLength": "5"}}, "postfix": "@phone", "maxLength": 10, "regex": "^\\d*$" }, \ 
+mosip.esignet.ui.config.login-id.options={{ "id": "mobile", "svg": "mobile_icon", "prefixes": {{"label": "IND", "value": "+91", "maxLength": "", "regex": ""}, {"label": "KHM", "value": "+855", "regex": "^[a-zA-Z]+$"}, {"label": "USA", "value": "+1", "maxLength": "5"}}, "postfix": "@phone", "maxLength": 10, "regex": "^\\d*$" }, \ 
     { "id": "nrc", "svg": "nrc_id_icon", "prefixes": "nrc", "postfix": "@NRC", "maxLength": 5, "regex": "" }, \
     { "id": "vid", "svg": "vid_icon", "prefixes": "", "postfix": "@ID", "maxLength": "7", "regex": "^[a-zA-Z]+$" }, \
-    { "id": "email", "svg": "email_icon", "prefixes": "", "postfix": "", "maxLength": "", "regex": "^\\d*$" } \
-}
+    { "id": "email", "svg": "email_icon", "prefixes": "", "postfix": "", "maxLength": "", "regex": "^\\d*$" }}
 
 mosip.esignet.ui.config.key-values={'sbi.env': '${mosip.esignet.authenticator.ida-env:Developer}', 'sbi.timeout.DISC': 30, \
   'sbi.timeout.DINFO': 30, 'sbi.timeout.CAPTURE': 30, 'sbi.capture.count.face': 1, 'sbi.capture.count.finger': 1, \

diff --git a/oidc-ui/public/locales/ar.json b/oidc-ui/public/locales/ar.json
@@ -89,7 +89,7 @@
   "password": {
     "sign_in_with_password": "تسجيل الدخول بكلمة المرور",
     "remember_me": "تذكرنى",
-    "login": "يكمل",
+    "login": "تسجيل الدخول",
     "uin_label_text": "UIN/VID",
     "password_label_text": "كلمة المرور",
     "uin_placeholder": "أدخل رقم UIN أو VID الخاص بك",

diff --git a/oidc-ui/public/locales/en.json b/oidc-ui/public/locales/en.json
@@ -89,7 +89,7 @@
   "password": {
     "sign_in_with_password": "Login with Password",
     "remember_me": "Remember Me",
-    "login": "Continue",
+    "login": "Login",
     "uin_label_text": "UIN/VID",
     "password_label_text": "Password",
     "uin_placeholder": "Enter Your UIN or VID",

diff --git a/oidc-ui/public/locales/hi.json b/oidc-ui/public/locales/hi.json
@@ -89,7 +89,7 @@
   "password": {
     "sign_in_with_password": "पासवर्ड से लॉगिन करें",
     "remember_me": "मुझे याद करो",
-    "login": "जारी रखना",
+    "login": "लॉग इन करें",
     "uin_label_text": "यूआईएन/वीआईडी",
     "password_label_text": "पासवर्ड",
     "uin_placeholder": "अपना यूआईएन या वीआईडी दर्ज करें",

diff --git a/oidc-ui/public/locales/km.json b/oidc-ui/public/locales/km.json
@@ -89,7 +89,7 @@
   "password": {
     "sign_in_with_password": "ចូលដោយប្រើពាក្យសម្ងាត់",
     "remember_me": "ចងចាំខ្ញុំ",
-    "login": "បន្ត",
+    "login": "ចូល",
     "uin_label_text": "UIN/VID",
     "password_label_text": "ពាក្យសម្ងាត់",
     "uin_placeholder": "បញ្ចូល UIN ឬ VID របស់អ្នក។",

diff --git a/oidc-ui/public/locales/kn.json b/oidc-ui/public/locales/kn.json
@@ -89,7 +89,7 @@
   "password": {
     "sign_in_with_password": "ಪಾಸ್ವರ್ಡ್ನೊಂದಿಗೆ ಲಾಗಿನ್ ಮಾಡಿ",
     "remember_me": "ನನ್ನನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಿ",
-    "login": "ಮುಂದುವರಿಸಿ",
+    "login": "ಲಾಗಿನ್ ಮಾಡಿ",
     "uin_label_text": "UIN/VID",
     "password_label_text": "ಪಾಸ್ವರ್ಡ್",
     "uin_placeholder": "ನಿಮ್ಮ UIN ಅಥವಾ VID ನಮೂದಿಸಿ",

diff --git a/oidc-ui/public/locales/ta.json b/oidc-ui/public/locales/ta.json
@@ -89,7 +89,7 @@
   "password": {
     "sign_in_with_password": "கடவுச்சொல் மூலம் உள்நுழைக",
     "remember_me": "என்னை நினைவு செய்யுங்கள்",
-    "login": "தொடரவும்",
+    "login": "உள்நுழைக",
     "uin_label_text": "UIN/VID",
     "password_label_text": "கடவுச்சொல்",
     "uin_placeholder": "உங்கள் UIN அல்லது VID ஐ உள்ளிடவும்",

diff --git a/oidc-ui/public/theme/variables.css b/oidc-ui/public/theme/variables.css
@@ -63,9 +63,9 @@
   --login-client-logo-image-height: 3.25rem;
   --login-client-logo-image-width: 3.25rem;
   --login-alternate-arrow: "\21CB";
-  --login-alternate-arrow-size: 3rem;
+  --login-alternate-arrow-size: 1.5rem;
   --login-text-color: #000000;
-  --login-card-separator: linear-gradient(0deg, rgb(0,0,0,0.2) 0%, rgb(0,0,0,0.2) 100%);
+  --login-card-separator: linear-gradient(0deg, #FFFBF7 0%, #FFFFFF 100%);
   --login-card-separator-height: 1px;
   --footer-text-color: #898989;
   --footer-text-size: 14px;
@@ -75,6 +75,7 @@
   --forgot-password-width: max-content;
   --forgot-password-margin-top: 1rem;
   --password-google-reCaptcha-margin-top: 3rem;
+  --password-google-reCaptcha-margin-bottom: 1rem;
   --navbar-position: relative;
   --navbar-zIndex: 1;
   --navbar-box-shadow: 0px 2px 5px #0000001A;
@@ -197,6 +198,7 @@
   --forgot-password-width: max-content;
   --forgot-password-margin-top: 1rem;
   --password-google-reCaptcha-margin-top: 3rem;
+  --password-google-reCaptcha-margin-bottom: 1rem;
   --navbar-position: relative;
   --navbar-zIndex: 1;
   --navbar-box-shadow: 0px 2px 5px #0000001a;
@@ -327,6 +329,7 @@
   --forgot-password-width: max-content;
   --forgot-password-margin-top: 1rem;
   --password-google-reCaptcha-margin-top: 3rem;
+  --password-google-reCaptcha-margin-bottom: 1rem;
   --navbar-position: relative;
   --navbar-zIndex: 1;
   --navbar-box-shadow: 0px 2px 5px #0000001a;

diff --git a/oidc-ui/src/App.css b/oidc-ui/src/App.css
@@ -506,6 +506,7 @@ input[type="checkbox"]:hover {
 
 .password-google-reCaptcha {
   margin-top: var(--password-google-reCaptcha-margin-top) !important;
+  margin-bottom: var(--password-google-reCaptcha-margin-bottom) !important;
 }
 
 .errorInput {

diff --git a/oidc-ui/src/components/Background.js b/oidc-ui/src/components/Background.js
@@ -68,7 +68,7 @@ export default function Background({
             </h1>
           )}
         </div>
-        <div className="w-full flex mb-4 justify-center items-center">
+        <div className="w-full flex mb-4 justify-center items-center pb-2">
           {clientLogoPath && (
             <img
               className="object-contain client-logo-size client-logo-shadow rounded-[25px] border-[0.1px] border-white"

diff --git a/oidc-ui/src/components/LoginIDOptions.js b/oidc-ui/src/components/LoginIDOptions.js
@@ -39,7 +39,7 @@ const LoginIDOptions = (props) => {
         id: "vid",
         svg: "vid_icon",
         prefixes: "",
-        postfix: "@ID",
+        postfix: "",
         maxLength: "",
         regex: "",
       },

diff --git a/oidc-ui/src/components/Password.js b/oidc-ui/src/components/Password.js
@@ -440,8 +440,8 @@ export default function Password({
                         ? currentLoginID.input_label
                         : t1(field.labelText)
                     }
-                    labelFor={"Password_" + currentLoginID.id}
-                    id={"Password_" + currentLoginID.id}
+                    labelFor={idx === 0 ? currentLoginID.id : "Password_" + currentLoginID.id}
+                    id={idx === 0 ? currentLoginID.id : "Password_" + currentLoginID.id}
                     name={
                       idx === 0 ? "Password_" + currentLoginID.id : "password"
                     }

diff --git a/oidc-ui/src/components/Pin.js b/oidc-ui/src/components/Pin.js
@@ -405,8 +405,8 @@ export default function Pin({
                         ? currentLoginID.input_label
                         : t1(field.labelText)
                     }
-                    labelFor={"Pin_" + currentLoginID.id}
-                    id={"Pin_" + currentLoginID.id}
+                    labelFor={idx === 0 ? currentLoginID.id : "Pin_" + currentLoginID.id}
+                    id={idx === 0 ? currentLoginID.id : "Pin_" + currentLoginID.id}
                     name={idx === 0 ? "Pin_" + currentLoginID.id : "pin"}
                     type={field.type}
                     isRequired={field.isRequired}

diff --git a/oidc-ui/src/components/SignInOptions.js b/oidc-ui/src/components/SignInOptions.js
@@ -97,7 +97,7 @@ export default function SignInOptions({
         Object.keys(icons)?.length
       ) {
         setIconsMap(icons);
-      } else {
+      } else if (!icons){
         preloadIcons();
       }
     }
@@ -107,7 +107,15 @@ export default function SignInOptions({
     } else {
       setStatus({ state: states.LOADING, msg: "loading_msg" });
     }
-  }, [singinOptions, iconsMap]);
+  }, [singinOptions]);
+
+  useEffect(() => {
+    if (iconsMap && Object.keys(iconsMap)?.length > 0) {
+      setStatus({ state: states.LOADED, msg: "" });
+    } else {
+      setStatus({ state: states.LOADING, msg: "loading_msg" });
+    }
+  }, [iconsMap]);
 
   useEffect(() => {
     setStatus({ state: states.LOADING, msg: "loading_msg" });
@@ -127,13 +135,13 @@ export default function SignInOptions({
     }
 
     setSinginOptions(loginOptions);
-    setShowMoreOptions(loginOptions.length > 4 && loginOptions.length !== 5);
+    setShowMoreOptions(loginOptions.length > 4);
     setStatus({ state: states.LOADED, msg: "" });
   }, []);
 
   return (
     <>
-      <h1 className="text-base leading-5 font-sans font-medium mb-1 mt-2">
+      <h1 className="text-base leading-5 font-sans font-medium my-2">
         {t("preferred_mode_of_login")}
       </h1>
 
@@ -146,7 +154,7 @@ export default function SignInOptions({
       {status.state === states.LOADED &&
         singinOptions &&
         Object.keys(iconsMap)?.length > 0 && (
-          <div className="grid grid-rows-7 w-full rounded">
+          <div className="grid grid-rows-4 w-full rounded">
             {singinOptions
               .slice(0, showMoreOptions ? 4 : undefined)
               .map((option, idx) => (