[ES-547] [ES-576] [ES-577] Added forgot password link in the password…

… login and some i18n translation files changes Signed-off-by: GurukiranP <talk2gurukiran@gmail.com>
mosip · Dec 18, 2023 · 87bb347 · 87bb347
1 parent e79d9c5
commit 87bb347
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 10 deletions.
diff --git a/esignet-service/src/main/resources/application-local.properties b/esignet-service/src/main/resources/application-local.properties
@@ -254,15 +254,20 @@ mosip.esignet.ui.wallet.config={{'wallet.name': 'Inji', 'wallet.logo-url': 'inji
 
 mosip.esignet.ui.signup.config={'signup.banner': true, 'signup.url': 'http://localhost:3000/signup'}
 
+mosip.esignet.ui.forgot-password.config={'forgot-password': true, 'forgot-password.url': 'http://localhost:3000/forgot-password'}
+
 mosip.esignet.ui.config.key-values={'sbi.env': 'Developer', 'sbi.timeout.DISC': 30, \
   'sbi.timeout.DINFO': 30, 'sbi.timeout.CAPTURE': 30, 'sbi.capture.count.face': 1, 'sbi.capture.count.finger': 2, \
   'sbi.capture.count.iris': 1, 'sbi.capture.score.face': 70, 'sbi.capture.score.finger':70, 'sbi.capture.score.iris':70, \
   'send.otp.channels':'email,phone', 'consent.screen.timeout-in-secs':${mosip.esignet.authentication-expire-in-secs}, \
   'consent.screen.timeout-buffer-in-secs': 5, 'sbi.port.range': 4501-4600, 'sbi.bio.subtypes.iris': 'UNKNOWN', 'sbi.bio.subtypes.finger': 'UNKNOWN', \
   'resend.otp.delay.secs': 120, 'captcha.enable': '', 'captcha.sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', \
   'linked-transaction-expire-in-secs': 120, 'wallet.qr-code-buffer-in-secs': 10, 'auth.txnid.length': 10, \
-  'otp.length': 6, 'password.regex': '', 'wallet.qr-code.auto-refresh-limit': 3, 'wallet.config': ${mosip.esignet.ui.wallet.config}, \
-  'signup.config': ${mosip.esignet.ui.signup.config}}
+  'otp.length': 6, 'password.regex': '^.{8,20}$', \ 'username.regex': '^[1-9][0-9]{7,8}$',\ 'username.prefix': '+855', \
+  'username.postfix': '', \ 'wallet.config': ${mosip.esignet.ui.wallet.config},\
+  'signup.config': ${mosip.esignet.ui.signup.config}, \
+  'forgot-password.config': ${mosip.esignet.ui.forgot-password.config} \
+  }
 
 ##  ---------------------------------------------- VCI ------------------------------------------------------------------
 

diff --git a/oidc-ui/public/locales/ar.json b/oidc-ui/public/locales/ar.json
@@ -8,7 +8,7 @@
     "essential_claims": "الادعاءات الأساسية",
     "voluntary_claims": "المطالبات الطوعية",
     "cancel": "يلغي",
-    "allow": "السماح",
+    "allow": "يسمح",
     "continue": "يكمل",
     "resident-service": "خدمة المقيمين",
     "name": "اسم",
@@ -33,7 +33,7 @@
     "profile": "الملف الشخصي",
     "authorize_scope_tooltip": "يسمح لمزود الخدمة بالوصول إلى هذه الخدمات المحمية نيابة عنك",
     "essential_claims_tooltip": "معلومات المستخدم الإلزامية التي يطلبها مزود الخدمة",
-    "voluntary_claims_tooltip": "معلومات المستخدم الإضافية التي يمكن للمقيم اختيار مشاركتها مع مزود الخدمة",
+    "voluntary_claims_tooltip": "معلومات المستخدم الإضافية التي يمكنك اختيار مشاركتها مع مزود الخدمة",
     "logo_alt": "e-Signet",
     "Manage-Identity-Data": "السماح بالوصول لإدارة بيانات الهوية",
     "Manage-VID": "السماح بالوصول لإدارة VID",
@@ -75,7 +75,8 @@
     "uin_label_text": "اسم المستخدم",
     "password_label_text": "كلمة المرور",
     "uin_placeholder": "أدخل رقم الجوال المكون من 8-9 أرقام",
-    "password_placeholder": "أدخل كلمة المرور"
+    "password_placeholder": "أدخل كلمة المرور",
+    "forgot_password": "هل نسيت كلمة السر؟"
   },
   "LoginQRCode": {
     "scan_with_wallet": "قم بالمسح باستخدام {{walletName}} لتسجيل الدخول",

diff --git a/oidc-ui/public/locales/en.json b/oidc-ui/public/locales/en.json
@@ -33,7 +33,7 @@
     "profile": "Profile",
     "authorize_scope_tooltip": "Allows Service provider to access these protected services on your behalf",
     "essential_claims_tooltip": "Mandatory user information required by the Service provider",
-    "voluntary_claims_tooltip": "Additional user information that the resident can choose to share with the Service provider",
+    "voluntary_claims_tooltip": "Additional user information you can choose to share with the Service Provider",
     "logo_alt": "e-Signet",
     "Manage-Identity-Data": "Allow access to manage identity data",
     "Manage-VID": "Allow access to manage VID",
@@ -75,7 +75,8 @@
     "uin_label_text": "Username",
     "password_label_text": "Password",
     "uin_placeholder": "Enter 8-9 digit mobile number",
-    "password_placeholder": "Enter password"
+    "password_placeholder": "Enter password",
+    "forgot_password": "Forgot Password?"
   },
   "LoginQRCode": {
     "scan_with_wallet": "Scan with {{walletName}} to login",

diff --git a/oidc-ui/public/variables.css b/oidc-ui/public/variables.css
@@ -65,6 +65,11 @@
   --footer-text-color: #898989;
   --footer-text-size: 14px;
   --language-check-icon-color: #1262C9;
+  --forgot-password-color: #1262C9;
+  --forgot-password-font-size: small;
+  --forgot-password-width: max-content;
+  --forgot-password-margin-top: 1rem;
+  --password-google-reCaptcha-margin-top: 3rem;
 }
 
 [class="orange_theme"] {
@@ -134,4 +139,9 @@
   --footer-text-color: #898989;
   --footer-text-size: 14px;
   --language-check-icon-color: #EB6F2D;
+  --forgot-password-color: #EB6F2D;
+  --forgot-password-font-size: small;
+  --forgot-password-width: max-content;
+  --forgot-password-margin-top: 1rem;
+  --password-google-reCaptcha-margin-top: 3rem;
 }
diff --git a/oidc-ui/src/App.css b/oidc-ui/src/App.css
@@ -333,6 +333,25 @@
   stroke: var(--language-check-icon-color);
 }
 
+.forgot-password-hyperlink {
+  color: var(--forgot-password-color);
+  font-size: var(--forgot-password-font-size);
+  width: var(--forgot-password-width);
+  margin-top: var(--forgot-password-margin-top) !important;
+}
+
+[dir="ltr"] .forgot-password-hyperlink {
+  float: right;
+}
+
+[dir="rtl"] .forgot-password-hyperlink {
+  float: left;
+}
+
+.password-google-reCaptcha {
+  margin-top: var(--password-google-reCaptcha-margin-top) !important;
+}
+
 @media screen and (max-width: 767px) {
 
   .multipurpose-login-card {

diff --git a/oidc-ui/src/components/Background.js b/oidc-ui/src/components/Background.js
@@ -32,6 +32,10 @@ export default function Background({
   // and padding according to that only
   const conditionalPadding = signupBanner ? "pt-4" : "py-4";
 
+  const handleSignup = () => {
+    window.onbeforeunload = null
+  }
+
   return (
     <div
       className={
@@ -67,7 +71,7 @@ export default function Background({
       {signupBanner && 
       <div className="signup-banner">
         <p className="signup-banner-text">{t("noAccount")}</p>
-        <a className="signup-banner-hyperlink" href={signupURL} target="_self">{t("signup_for_unified_login")}</a>
+        <a className="signup-banner-hyperlink" href={signupURL} target="_self" onClick={() => handleSignup()}>{t("signup_for_unified_login")}</a>
       </div>}
     </div>
   );

diff --git a/oidc-ui/src/components/Consent.js b/oidc-ui/src/components/Consent.js
@@ -536,7 +536,7 @@ export default function Consent({
                   <div className="grid gap-y-2">
                     <FormAction
                       type={buttonTypes.button}
-                      text={t("continue")}
+                      text={t("allow")}
                       handleClick={handleSubmit}
                       id="continue"
                     />

diff --git a/oidc-ui/src/components/Password.js b/oidc-ui/src/components/Password.js
@@ -44,6 +44,20 @@ export default function Password({
   const [status, setStatus] = useState(states.LOADED);
   const [invalidState, setInvalidState] = useState(true);
 
+  const [forgotPassword, setForgotPassword] = useState(false);
+  const [forgotPasswordURL, setForgotPassowordURL] = useState("");
+
+  let forgotPasswordConfig = openIDConnectService.getEsignetConfiguration(
+    configurationKeys.forgotPasswordConfig
+  );
+
+  useEffect(() => {
+    if(forgotPasswordConfig?.[configurationKeys.forgotPassword]) {
+      setForgotPassword(true);
+      setForgotPassowordURL(forgotPasswordConfig[configurationKeys.forgotPasswordURL] + "#" + authService.getAuthorizeQueryParam())
+    }
+  }, []);
+
   const passwordRegexValue =
     openIDConnectService.getEsignetConfiguration(
       configurationKeys.passwordRegex
@@ -233,6 +247,10 @@ export default function Password({
     setErrorBanner(tempBanner);
   };
 
+  const handleForgotPassword = () => {
+    window.onbeforeunload = null
+  }
+
   return (
     <>
       <div className="grid grid-cols-8 items-center">
@@ -270,13 +288,18 @@ export default function Password({
           </div>
         ))}
 
+        {forgotPassword && 
+          <a className="forgot-password-hyperlink" href={forgotPasswordURL} onClick={() => handleForgotPassword()} target="_self">{t("forgot_password")}</a>
+        }
+
         {showCaptcha && (
-          <div className="flex justify-center mt-5 mb-5">
+          <div className="block password-google-reCaptcha">
             <ReCAPTCHA
               hl={i18n.language}
               ref={_reCaptchaRef}
               onChange={handleCaptchaChange}
               sitekey={captchaSiteKey}
+              className="flex place-content-center"
             />
           </div>
         )}

diff --git a/oidc-ui/src/constants/clientConstants.js b/oidc-ui/src/constants/clientConstants.js
@@ -83,6 +83,9 @@ const configurationKeys = {
   signupConfig: "signup.config",
   signupBanner: "signup.banner",
   signupURL: "signup.url",
+  forgotPasswordConfig: "forgot-password.config",
+  forgotPassword: "forgot-password",
+  forgotPasswordURL: "forgot-password.url",
 };
 
 const modalityIconPath = {