[ES-1377] modified knowledge based form, similar to pwd and otp (#842)

* [MODIFIED] knowledge based form, similar to pwd and otp Signed-off-by: Zeeshan Mehboob <[email protected]> * Update JwtProofValidatorTest.java --------- Signed-off-by: Zeeshan Mehboob <[email protected]> Co-authored-by: Balaji Alluru <[email protected]>
mosip · Aug 9, 2024 · 6ecf4a0 · 6ecf4a0
1 parent 6820b16
commit 6ecf4a0
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 44 deletions.
diff --git a/oidc-ui/public/locales/ar.json b/oidc-ui/public/locales/ar.json
@@ -85,9 +85,9 @@
   "Form": {
     "sign_in_with_details": "تسجيل الدخول بالتفاصيل",
     "login": "تسجيل الدخول",
-    "policyNumber": "ادخل رقم الوثيقة",
-    "fullName": "ادخل الاسم",
-    "dob": "ادخل تاريخ الميلاد",
+    "policyNumber_label_text": "ادخل رقم الوثيقة",
+    "fullName_label_text": "ادخل الاسم",
+    "dob_label_text": "ادخل تاريخ الميلاد",
     "policyNumber_placeholder": "رقم الوثيقة",
     "fullName_placeholder": "الاسم",
     "dob_placeholder": "تاريخ الميلاد"
@@ -225,6 +225,9 @@
     "consent_details_rejected": "آسفون! لم يكن تسجيل الدخول الخاص بك ناجحًا نظرًا لعدم مشاركة الموافقة."
   },
   "errors": {
+    "invalid_policyNumber": "رقم السياسة غير صالح",
+    "invalid_fullName": "الاسم الكامل غير صالح",
+    "invalid_dob": "تاريخ الميلاد غير صالح",
     "navigate_option": "يرجى محاولة التنقل باستخدام الخيارات أدناه.",
     "page_not_exist": "أُووبس! الصفحة التي تبحث عنها غير موجودة.",
     "something_went_wrong": "هناك خطأ ما!",

diff --git a/oidc-ui/public/locales/en.json b/oidc-ui/public/locales/en.json
@@ -85,9 +85,9 @@
   "Form": {
     "sign_in_with_details": "Login with Details",
     "login": "Login",
-    "policyNumber": "Enter Policy Number",
-    "fullName": "Enter Full Name",
-    "dob": "Enter DOB",
+    "policyNumber_label_text": "Enter Policy Number",
+    "fullName_label_text": "Enter Full Name",
+    "dob_label_text": "Enter DOB",
     "policyNumber_placeholder": "Policy Number",
     "fullName_placeholder": "Name",
     "dob_placeholder": "DOB"
@@ -226,6 +226,9 @@
     "consent_details_rejected": "We’re sorry! Your login was unsuccessful as consent was not shared."
   },
   "errors": {
+    "invalid_policyNumber": "Invalid Policy Number",
+    "invalid_fullName": "Invalid Full Name",
+    "invalid_dob": "Invalid Date of Birth",
     "navigate_option": "Please try navigating using the options below.",
     "page_not_exist": "Oops! The page you are looking for does not exist.",
     "something_went_wrong": "Something went wrong!",

diff --git a/oidc-ui/public/locales/hi.json b/oidc-ui/public/locales/hi.json
@@ -86,9 +86,9 @@
   "Form": {
     "sign_in_with_details": "विवरण के साथ लॉगिन करें",
     "login": "लॉगिन",
-    "policyNumber": "पॉलिसी नंबर दर्ज करें",
-    "fullName": "पूरा नाम दर्ज करें",
-    "dob": "जन्मतिथि दर्ज करें",
+    "policyNumber_label_text": "पॉलिसी नंबर दर्ज करें",
+    "fullName_label_text": "पूरा नाम दर्ज करें",
+    "dob_label_text": "जन्मतिथि दर्ज करें",
     "policyNumber_placeholder": "पॉलिसी नंबर",
     "fullName_placeholder": "पूरा नाम",
     "dob_placeholder": "जन्मतिथि"
@@ -226,6 +226,9 @@
     "consent_details_rejected": "हम क्षमा चाहते हैं! आपका लॉगिन असफल रहा क्योंकि सहमति साझा नहीं की गई थी।"
   },
   "errors": {
+    "invalid_policyNumber": "अमान्य नीति संख्या",
+    "invalid_fullName": "अमान्य पूरा नाम",
+    "invalid_dob": "अमान्य जन्म तिथि",
     "navigate_option": "कृपया नीचे दिए गए विकल्पों का उपयोग करके नेविगेट करने का प्रयास करें।",
     "page_not_exist": "उफ़! आप जिस पृष्ठ की तलाश कर रहे हैं वह मौजूद नहीं है।",
     "something_went_wrong": "कुछ गलत हो गया!",

diff --git a/oidc-ui/public/locales/km.json b/oidc-ui/public/locales/km.json
@@ -86,9 +86,9 @@
   "Form": {
     "sign_in_with_details": "ចូលទៅកាន់គណនីរបស់អ្នកជាមួយព័ត៌មាន",
     "login": "ចូលគណនី",
-    "policyNumber": "បញ្ចូលលេខកូដបញ្ជា",
-    "fullName": "បញ្ចូលឈ្មោះពេញ",
-    "dob": "បញ្ចូលថ្ងៃខែឆ្នាំកំណើត",
+    "policyNumber_label_text": "បញ្ចូលលេខកូដបញ្ជា",
+    "fullName_label_text": "បញ្ចូលឈ្មោះពេញ",
+    "dob_label_text": "បញ្ចូលថ្ងៃខែឆ្នាំកំណើត",
     "policyNumber_placeholder": "លេខកូដបញ្ជា",
     "fullName_placeholder": "ឈ្មោះពេញ",
     "dob_placeholder": "ថ្ងៃខែឆ្នាំកំណើត"
@@ -226,6 +226,9 @@
     "consent_details_rejected": "យើងសុំទោស! ការចូលរបស់អ្នកមិនបានជោគជ័យទេ ដោយសារការយល់ព្រមមិនត្រូវបានចែករំលែក។"
   },
   "errors": {
+    "invalid_policyNumber": "លេខគោលនយោបាយមិនត្រឹមត្រូវ",
+    "invalid_fullName": "ឈ្មោះពេញមិនត្រឹមត្រូវ",
+    "invalid_dob": "ថ្ងៃខែឆ្នាំកំណើតមិនត្រឹមត្រូវ",
     "navigate_option": "សូមព្យាយាមរុករកដោយប្រើជម្រើសខាងក្រោម។",
     "page_not_exist": "អូ! ទំព័រដែលអ្នកកំពុងស្វែងរកមិនមានទេ។",
     "something_went_wrong": "មានអ្វីមួយមិនប្រក្រតី!",

diff --git a/oidc-ui/public/locales/kn.json b/oidc-ui/public/locales/kn.json
@@ -86,9 +86,9 @@
   "Form": {
     "sign_in_with_details": "ವಿವರಗಳೊಡನೆ ಸೈನ್ ಇನ್ ಮಾಡಿ",
     "login": "ಲಾಗಿನ್",
-    "policyNumber": "ಪಾಲಿಸಿ ಸಂಖ್ಯೆ ನಮೂದಿಸಿ",
-    "fullName": "ಪೂರ್ಣ ಹೆಸರನ್ನು ನಮೂದಿಸಿ",
-    "dob": "ಹುಟ್ಟಿದ ದಿನಾಂಕವನ್ನು ನಮೂದಿಸಿ",
+    "policyNumber_label_text": "ಪಾಲಿಸಿ ಸಂಖ್ಯೆ ನಮೂದಿಸಿ",
+    "fullName_label_text": "ಪೂರ್ಣ ಹೆಸರನ್ನು ನಮೂದಿಸಿ",
+    "dob_label_text": "ಹುಟ್ಟಿದ ದಿನಾಂಕವನ್ನು ನಮೂದಿಸಿ",
     "policyNumber_placeholder": "ಪಾಲಿಸಿ ಸಂಖ್ಯೆ",
     "fullName_placeholder": "ಪೂರ್ಣ ಹೆಸರು",
     "dob_placeholder": "ಹುಟ್ಟಿದ ದಿನಾಂಕ"
@@ -226,6 +226,9 @@
     "consent_details_rejected": "ನಮ್ಮನ್ನು ಕ್ಷಮಿಸಿ! ಸಮ್ಮತಿಯನ್ನು ಹಂಚಿಕೊಳ್ಳದ ಕಾರಣ ನಿಮ್ಮ ಲಾಗಿನ್ ವಿಫಲವಾಗಿದೆ."
   },
   "errors": {
+    "invalid_policyNumber": "ಅಮಾನ್ಯ ನೀತಿ ಸಂಖ್ಯೆ",
+    "invalid_fullName": "ಅಮಾನ್ಯ ಪೂರ್ಣ ಹೆಸರು",
+    "invalid_dob": "ಅಮಾನ್ಯ ಜನ್ಮ ದಿನಾಂಕ",
     "navigate_option": "ದಯವಿಟ್ಟು ಕೆಳಗಿನ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ.",
     "page_not_exist": "ಅಯ್ಯೋ! ನೀವು ಹುಡುಕುತ್ತಿರುವ ಪುಟವು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲ.",
     "something_went_wrong": "ಏನೋ ತಪ್ಪಾಗಿದೆ!",

diff --git a/oidc-ui/public/locales/ta.json b/oidc-ui/public/locales/ta.json
@@ -86,9 +86,9 @@
   "Form": {
     "sign_in_with_details": "விவரங்களுடன் உள்நுழைய",
     "login": "உள்நுழைய",
-    "policyNumber": "காப்பீடு எண் உள்ளிடுக",
-    "fullName": "முழு பெயரை உள்ளிடுக",
-    "dob": "பிறந்த தேதியை உள்ளிடுக",
+    "policyNumber_label_text": "காப்பீடு எண் உள்ளிடுக",
+    "fullName_label_text": "முழு பெயரை உள்ளிடுக",
+    "dob_label_text": "பிறந்த தேதியை உள்ளிடுக",
     "policyNumber_placeholder": "காப்பீடு எண்",
     "fullName_placeholder": "முழு பெயர்",
     "dob_placeholder": "பிறந்த தேதி"
@@ -226,6 +226,9 @@
     "consent_details_rejected": "நாங்கள் வருந்துகிறோம்! ஒப்புதல் பகிரப்படாததால் உங்கள் உள்நுழைவு தோல்வியடைந்தது."
   },
   "errors": {
+    "invalid_policyNumber": "தவறான கொள்கை எண்",
+    "invalid_fullName": "தவறான முழு பெயர்",
+    "invalid_dob": "தவறான பிறந்த தேதி",
     "navigate_option": "கீழே உள்ள விருப்பங்களைப் பயன்படுத்தி வழிசெலுத்த முயற்சிக்கவும்.",
     "page_not_exist": "அச்சச்சோ! நீங்கள் தேடும் பக்கம் இல்லை.",
     "something_went_wrong": "ஏதோ தவறு நடந்துவிட்டது!",

diff --git a/oidc-ui/src/components/Form.js b/oidc-ui/src/components/Form.js
@@ -18,6 +18,7 @@ let fieldsState = {};
 const langConfig = await langConfigService.getEnLocaleConfiguration();
 
 export default function Form({
+  param,
   authService,
   openIDConnectService,
   backButtonDiv,
@@ -36,14 +37,15 @@ export default function Form({
   const inputCustomClass =
     "h-10 border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[hsla(0, 0%, 51%)] focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-muted-light-gray shadow-none";
 
-  const fields = openIDConnectService.getEsignetConfiguration(configurationKeys.authFactorKnowledgeFieldDetails) ?? [];
+  const fields = param;
   fields.forEach((field) => (fieldsState["_form_" + field.id] = ""));
   const post_AuthenticateUser = authService.post_AuthenticateUser;
   const buildRedirectParams = authService.buildRedirectParams;
 
   const [loginState, setLoginState] = useState(fieldsState);
   const [error, setError] = useState(null);
   const [errorBanner, setErrorBanner] = useState([]);
+  const [inputErrorBanner, setInputErrorBanner] = useState([]);
   const [status, setStatus] = useState(states.LOADED);
   const [invalidState, setInvalidState] = useState(true);
 
@@ -52,16 +54,9 @@ export default function Form({
 
   const navigate = useNavigate();
 
-  const handleChange = (e, field) => {
-    const regex = new RegExp(field.regex);
-    const value = e.target.value;
-
-    if (e.target.type === 'text' && field?.regex !== null && field?.regex !== undefined) {
-      setLoginState({ ...loginState, [e.target.id]: regex.test(value) || value === "" || value === null ? value : loginState[e.target.id] });
-    }
-    else {
-      setLoginState({ ...loginState, [e.target.id]: e.target.value });
-    }
+  const handleChange = (e) => {
+    onCloseHandle();
+    setLoginState({ ...loginState, [e.target.id]: e.target.value });
   };
 
   const handleSubmit = (e) => {
@@ -106,11 +101,11 @@ export default function Form({
   const authenticateUser = async () => {
     try {
       let transactionId = openIDConnectService.getTransactionId();
-      let uin = loginState["_form_"+openIDConnectService.getEsignetConfiguration(configurationKeys.authFactorKnowledgeIndividualIdField) ?? ""];
+      let uin = loginState["_form_" + openIDConnectService.getEsignetConfiguration(configurationKeys.authFactorKnowledgeIndividualIdField) ?? ""];
       let challengeManipulate = {};
-      fields.forEach(function(field) {
-        if(field.id !== openIDConnectService.getEsignetConfiguration(configurationKeys.authFactorKnowledgeIndividualIdField)){
-          challengeManipulate[field.id] = loginState["_form_"+field.id]
+      fields.forEach(function (field) {
+        if (field.id !== openIDConnectService.getEsignetConfiguration(configurationKeys.authFactorKnowledgeIndividualIdField)) {
+          challengeManipulate[field.id] = loginState["_form_" + field.id]
         }
       });
       let challenge = btoa(JSON.stringify(challengeManipulate));
@@ -209,10 +204,24 @@ export default function Form({
     setErrorBanner(null);
   };
 
+  const onBlurChange = (e, errors) => {
+    let id = e.target.id;
+    let tempError = inputErrorBanner.map(_ => _);
+    if (errors.length > 0) {
+      tempError.push(id)
+    } else {
+      let errorIndex = tempError.findIndex(_ => _ === id);
+      if (errorIndex !== -1) {
+        tempError.splice(errorIndex, 1);
+      }
+    }
+    setInputErrorBanner(tempError);
+  };
+
   return (
     <>
       <div className="grid grid-cols-8 items-center">
-      {(backButtonDiv)}
+        {(backButtonDiv)}
       </div>
 
       {errorBanner !== null && (
@@ -225,23 +234,25 @@ export default function Form({
 
       <form className="mt-6 space-y-6" onSubmit={handleSubmit}>
         {fields.map((field) => (
-          <div className="-space-y-px">
+          <div className="-space-y-px" key={"_form-div_" + field.id}>
             <InputWithImage
               key={"_form_" + field.id}
-              handleChange={(e) => {
-                handleChange(e, field)
-              }}
+              handleChange={handleChange}
+              blurChange={onBlurChange}
               value={loginState["_form_" + field.id]}
-              labelText={t1(field.id)}
-              labelFor={field.id}
+              labelText={t1(field.labelText)}
+              labelFor={field.labelFor}
               id={"_form_" + field.id}
+              name={field.name}
               type={field.type}
-              isRequired={true}
-              placeholder={t1(field.id + "_placeholder" )}
+              isRequired={field.isRequired}
+              placeholder={t1(field.placeholder)}
               customClass={inputCustomClass}
               imgPath={null}
               icon={field.infoIcon}
               maxLength={field.maxLength}
+              errorCode={field.errorCode}
+              regex={field.regex}
             />
           </div>
         ))}
@@ -264,7 +275,7 @@ export default function Form({
           id="verify_form"
           disabled={
             invalidState ||
-            (errorBanner && errorBanner.length > 0) ||
+            (inputErrorBanner && inputErrorBanner.length > 0) ||
             (showCaptcha && captchaToken === null)
           }
         />

diff --git a/oidc-ui/src/constants/formFields.js b/oidc-ui/src/constants/formFields.js
@@ -149,6 +149,57 @@ const signupFields = [
   },
 ];
 
+const knowledgeFields = {
+  policyNumber: {
+    labelText: 'policyNumber_label_text',
+    labelFor: 'Mosip policy',
+    id: 'policyNumber',
+    name: 'policyNumber',
+    type: 'text',
+    format: '',
+    isRequired: true,
+    placeholder: 'policyNumber_placeholder',
+    infoIcon: '',
+    errorCode: 'invalid_policyNumber',
+    prefix: "",
+    postfix: "",
+    maxLength: 50,
+    regex: ""
+  },
+  fullName: {
+    labelText: 'fullName_label_text',
+    labelFor: 'Mosip fullname',
+    id: 'fullName',
+    name: 'fullName',
+    type: 'text',
+    format: '',
+    isRequired: true,
+    placeholder: 'fullName_placeholder',
+    infoIcon: '',
+    errorCode: 'invalid_fullName',
+    prefix: "",
+    postfix: "",
+    maxLength: 25,
+    regex: ""
+  },
+  dob: {
+    labelText: 'dob_label_text',
+    labelFor: 'Mosip dob',
+    id: 'dob',
+    name: 'dob',
+    type: 'text',
+    format: '',
+    isRequired: true,
+    placeholder: 'dob_placeholder',
+    infoIcon: '',
+    errorCode: 'invalid_dob',
+    prefix: "",
+    postfix: "",
+    maxLength: "",
+    regex: ""
+  }
+}
+
 //TODO fetch tablist from oidcDetails response
 const tabList = [
   {
@@ -175,6 +226,11 @@ const tabList = [
 
 const generateFieldData = (fieldName, openIDConnectService) => {
   let fieldData = [];
+
+  const knowledgeFieldList = openIDConnectService.getEsignetConfiguration(
+    configurationKeys.authFactorKnowledgeFieldDetails
+  );
+
   const prefix =
     openIDConnectService.getEsignetConfiguration(
       configurationKeys.usernamePrefix
@@ -238,6 +294,9 @@ const generateFieldData = (fieldName, openIDConnectService) => {
       fieldData[1].maxLength = passwordMaxLength;
       fieldData[1].regex = passwordRegexValue;
       break;
+    case validAuthFactors.KBI:
+      fieldData = knowledgeFieldList.map((field) => { return { ...knowledgeFields[field.id], ...field } })
+      break;
   }
 
   return fieldData;

diff --git a/oidc-ui/src/pages/Login.js b/oidc-ui/src/pages/Login.js
@@ -59,6 +59,7 @@ function InitiateOtp(openIDConnectService, backButtonDiv) {
 
 function InitiateForm(openIDConnectService, backButtonDiv) {
   return React.createElement(Form, {
+    param: generateFieldData(validAuthFactors.KBI, openIDConnectService),
     authService: new authService(openIDConnectService),
     openIDConnectService: openIDConnectService,
     backButtonDiv: backButtonDiv,

diff --git a/vci-service-impl/src/test/java/io/mosip/esignet/vci/services/JwtProofValidatorTest.java b/vci-service-impl/src/test/java/io/mosip/esignet/vci/services/JwtProofValidatorTest.java
@@ -77,7 +77,7 @@ public void testValidate_withValidJwtProof_thenPass() throws JOSEException {
                 .issuer("client-id")
                 .audience("test-credential-issuer")
                 .issueTime(Date.from(Instant.now(Clock.systemUTC())))
-                .expirationTime(Date.from(Instant.now(Clock.systemUTC()).plusSeconds(1)))
+                .expirationTime(Date.from(Instant.now(Clock.systemUTC()).plusSeconds(5)))
                 .claim("nonce", "test-nonce")
                 .build();