From 5d84d41d83e306099342b46e31319df609e28982 Mon Sep 17 00:00:00 2001 From: Gk <76690271+gk-4VII@users.noreply.github.com> Date: Thu, 5 Dec 2024 16:31:36 +0530 Subject: [PATCH] [ES-1908] [ES-1909] UI fixes for pre and postfix. (#1029) Signed-off-by: GurukiranP --- .../resources/application-default.properties | 6 ++---- oidc-ui/public/locales/ar.json | 2 +- oidc-ui/public/locales/en.json | 2 +- oidc-ui/public/locales/hi.json | 2 +- oidc-ui/public/locales/km.json | 2 +- oidc-ui/public/locales/kn.json | 2 +- oidc-ui/public/locales/ta.json | 2 +- oidc-ui/public/theme/variables.css | 7 +++++-- oidc-ui/src/App.css | 1 + oidc-ui/src/components/Background.js | 2 +- oidc-ui/src/components/LoginIDOptions.js | 2 +- oidc-ui/src/components/Password.js | 4 ++-- oidc-ui/src/components/Pin.js | 4 ++-- oidc-ui/src/components/SignInOptions.js | 18 +++++++++++++----- 14 files changed, 33 insertions(+), 23 deletions(-) diff --git a/esignet-service/src/main/resources/application-default.properties b/esignet-service/src/main/resources/application-default.properties index ba979e252..c04936399 100644 --- 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 index 86247e58b..b449b1f1c 100644 --- 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 index 3032e966b..bdeb06ce7 100644 --- 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 index ef6af6d53..5db430d60 100644 --- 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 index 5a509fa0a..7ffbdd48b 100644 --- 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 index ba5639ccf..83cbf1015 100644 --- 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 index a55ee9654..86ae6a03d 100644 --- 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 index f05234fab..d6a55676e 100644 --- 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 index fe7ffae5a..4ec195684 100644 --- 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 index 2f5e51e26..0cdc656e8 100644 --- a/oidc-ui/src/components/Background.js +++ b/oidc-ui/src/components/Background.js @@ -68,7 +68,7 @@ export default function Background({ )} -
+
{clientLogoPath && ( { 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 index 17f6731ba..37bde58e8 100644 --- 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 index f2084ba55..cc964c063 100644 --- 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 index f8d34f935..e98c87b08 100644 --- 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 ( <> -

+

{t("preferred_mode_of_login")}

@@ -146,7 +154,7 @@ export default function SignInOptions({ {status.state === states.LOADED && singinOptions && Object.keys(iconsMap)?.length > 0 && ( -
+
{singinOptions .slice(0, showMoreOptions ? 4 : undefined) .map((option, idx) => (