Merge pull request #513 from Infosys/bug/es-505

[ES-505] prefix in password input
mosip · Dec 12, 2023 · 00f733a · 00f733a
2 parents f715868 + e540200
commit 00f733a
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 5 deletions.
diff --git a/oidc-ui/public/index.html b/oidc-ui/public/index.html
@@ -9,6 +9,7 @@
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
   <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
+  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/oidc-ui/src/App.css b/oidc-ui/src/App.css
@@ -250,8 +250,8 @@
 }
 
 .error-banner {
-  color: #D52929;
-  background-color: #FAEFEF;
+  color: #d52929;
+  background-color: #faefef;
   height: 40px;
 }
 
@@ -281,4 +281,64 @@
     max-width: none;
   }
 
-}
+}
+
+.input-box {
+  display: flex;
+  align-items: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+[dir="ltr"] .input-box {
+  padding-left: 0.5rem;
+}
+
+[dir="rtl"] .input-box {
+  padding-right: 0.5rem;
+}
+
+.input-box .prefix {
+  letter-spacing: 0px;
+  color: #171a1c;
+  opacity: 0.6;
+  font: normal normal normal 16px/21px Roboto;
+  letter-spacing: 0px;
+}
+
+[dir="ltr"] .input-box .prefix {
+  padding-right: 10px;
+  border-right: 1px solid #707070;
+}
+[dir="rtl"] .input-box .prefix {
+  padding-left: 10px;
+  border-left: 1px solid #707070;
+}
+
+[dir="ltr"] .prefix ~ input {
+  padding-left: 10px;
+}
+
+[dir="rtl"] .prefix ~ input {
+  padding-right: 10px;
+}
+.input-box input {
+  flex-grow: 1;
+  border: none;
+  outline: none;
+  padding-left: 0rem;
+  font: normal normal normal 16px/20px Inter;
+}
+
+[dir="ltr"] .input-box input {
+  padding-left: 10px;
+}
+
+[dir="rtl"] .input-box input {
+  padding-right: 10px;
+}
+
+.input-box:focus-within {
+  border-color: #777;
+}
diff --git a/oidc-ui/src/common/ErrorIndicator.js b/oidc-ui/src/common/ErrorIndicator.js
@@ -44,6 +44,8 @@ const ErrorIndicator = ({
       return;
     }
 
+    window.onbeforeunload = null;
+
     let params = "?";
     if (nonce) {
       params = params + "nonce=" + nonce + "&";

diff --git a/oidc-ui/src/components/InputWithImage.js b/oidc-ui/src/components/InputWithImage.js
@@ -25,7 +25,8 @@ export default function InputWithImage({
   passwordHideIcon = "images/password_hide.svg",
   infoIcon = "images/info_icon.svg",
   i18nKeyPrefix = "tooltips",
-  icon
+  icon,
+  prefix
 }) {
   const { t } = useTranslation("translation", { keyPrefix: i18nKeyPrefix });
 
@@ -61,12 +62,13 @@ export default function InputWithImage({
           </label>
         )}
       </div>
-      <div className="relative">
+      <div className="relative input-box">
         {imgPath &&
           <div className="flex absolute inset-y-0 items-center p-3 pointer-events-none ltr:right-0 rtl:left-0">
             <img className="w-6 h-6" src={imgPath} />
           </div>
         }
+        {prefix && prefix !== "" && <span className="prefix">{prefix}</span>}
         <input
           ref={inputVal}
           disabled={disabled}

diff --git a/oidc-ui/src/components/LoginQRCode.js b/oidc-ui/src/components/LoginQRCode.js
@@ -337,6 +337,7 @@ export default function LoginQRCode({
           msg: "redirecting_msg",
         });
 
+        window.onbeforeunload = null;
         let response = linkAuthResponse.response;
         //Redirect
         let params = "?";

diff --git a/oidc-ui/src/components/Password.js b/oidc-ui/src/components/Password.js
@@ -54,6 +54,13 @@ export default function Password({
       configurationKeys.usernameRegex
     ) ?? process.env.REACT_APP_USERNAME_REGEX;
 
+  const usernamePrefix = 
+    openIDConnectService.getEsignetConfiguration(
+      configurationKeys.usernamePrefix
+    ) ?? "";
+
+  fields[0].prefix = usernamePrefix;
+
   const passwordRegex = new RegExp(passwordRegexValue);
   const usernameRegex = new RegExp(usernameRegexValue);
 
@@ -253,6 +260,7 @@ export default function Password({
               customClass={inputCustomClass}
               imgPath={null}
               icon={field.infoIcon}
+              prefix={field.prefix}
             />
           </div>
         ))}

diff --git a/oidc-ui/src/constants/clientConstants.js b/oidc-ui/src/constants/clientConstants.js
@@ -74,6 +74,7 @@ const configurationKeys = {
   otpLength: "otp.length",
   passwordRegex: "password.regex",
   usernameRegex: "username.regex",
+  usernamePrefix: "username.prefix",
   consentScreenExpireInSec: "consent.screen.timeout-in-secs",
   consentScreenTimeOutBufferInSec: "consent.screen.timeout-buffer-in-secs",
   walletQrCodeAutoRefreshLimit: "wallet.qr-code.auto-refresh-limit",

diff --git a/oidc-ui/src/constants/formFields.js b/oidc-ui/src/constants/formFields.js
@@ -35,6 +35,7 @@ const passwordFields = [
     isRequired: true,
     placeholder: "uin_placeholder", //translation key for password namespace
     infoIcon: config["username_info_icon"],
+    prefix: ""
   },
   {
     labelText: "password_label_text",
@@ -45,6 +46,7 @@ const passwordFields = [
     autoComplete: "",
     isRequired: true,
     placeholder: "password_placeholder", //translation key for password namespace
+    prefix: ""
   },
 ];