Merge pull request #451 from GurukiranP/ES-411

[ES-411] Implementation of cancel confirmation popup in consent page
mosip · Nov 6, 2023 · f45bae0 · f45bae0
2 parents 2cad144 + 916320f
commit f45bae0
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 3 deletions.
diff --git a/oidc-ui/public/images/warning_message_icon.svg b/oidc-ui/public/images/warning_message_icon.svg
diff --git a/oidc-ui/public/locales/ar.json b/oidc-ui/public/locales/ar.json
@@ -40,7 +40,13 @@
     "Manage-Authentication": "السماح بالوصول لإدارة المصادقة",
     "Manage-Service-Requests": "السماح بالوصول لإدارة طلبات الخدمة",
     "Manage-Credentials": "السماح بالوصول لإدارة الاعتمادات",
-    "individual_id": "مُعرّف UIN/VID المستخدم في تسجيل الدخول"
+    "individual_id": "مُعرّف UIN/VID المستخدم في تسجيل الدخول",
+    "cancelpopup": {
+      "confirm_header": "يرجى تأكيد",
+      "confirm_text": "هل أنت متأكد أنك تريد إيقاف عملية تسجيل الدخول؟",
+      "stay_btn": "يقضي",
+      "discontinue_btn": "توقف"
+    }
   },
   "l1Biometrics": {
     "scan_and_verify": "المسح والتحقق",

diff --git a/oidc-ui/public/locales/en.json b/oidc-ui/public/locales/en.json
@@ -40,7 +40,13 @@
     "Manage-Authentication": "Allow access to manage Authentication",
     "Manage-Service-Requests": "Allow access to manage Service Requests",
     "Manage-Credentials": "Allow access to manage Credentials",
-    "individual_id": "UIN/VID used in login"
+    "individual_id": "UIN/VID used in login",
+    "cancelpopup": {
+      "confirm_header": "Please confirm",
+      "confirm_text": "Are you sure you want to discontinue the login process?",
+      "stay_btn": "Stay",
+      "discontinue_btn": "Discontinue"
+    }
   },
   "l1Biometrics": {
     "scan_and_verify": "Scan and Verify",

diff --git a/oidc-ui/src/common/ModalPopup.js b/oidc-ui/src/common/ModalPopup.js
@@ -0,0 +1,34 @@
+import React from "react";
+
+const ModalPopup = ({alertIcon, header, body, footer}) => {
+  return (
+    <div
+      class="relative z-10"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <div class="relative transform overflow-hidden rounded-[20px] bg-white text-left shadow-xl transition-all duration-300 ease-out sm:my-8 sm:w-full sm:max-w-lg">
+            {alertIcon && <div className="flex flex-shrink-0 items-center justify-center rounded-t-md p-4 my-4">
+              <img src={alertIcon} />
+            </div>}
+            {header && <div className="relative text-center text-dark font-semibold text-xl text-[#2B3840]">
+              {header}
+            </div>}
+            {body && <div className="relative px-4 py-3 text-center">
+              <p className="text-base text-[#707070]">{body}</p>
+            </div>}
+            {footer && <div className="flex flex-shrink-0 flex-wrap items-center justify-center rounded-b-md p-4 mb-5 mt-3">
+              {footer}
+            </div>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalPopup;
diff --git a/oidc-ui/src/components/Consent.js b/oidc-ui/src/components/Consent.js
@@ -7,6 +7,7 @@ import { buttonTypes, configurationKeys } from "../constants/clientConstants";
 import { LoadingStates, LoadingStates as states } from "../constants/states";
 import FormAction from "./FormAction";
 import langConfigService from "./../services/langConfigService";
+import ModalPopup from "../common/ModalPopup";
 
 export default function Consent({
   authService,
@@ -42,6 +43,7 @@ export default function Consent({
   const [claimsScopes, setClaimsScopes] = useState([]);
   const [langMap, setLangMap] = useState("");
   const [timeLeft, setTimeLeft] = useState(null);
+  const [cancelPopup, setCancelPopup] = useState(false);
 
   const hasAllElement = (mainArray, subArray) =>
     subArray.every((ele) => mainArray.includes(ele));
@@ -254,9 +256,10 @@ export default function Consent({
     submitConsent(claims, scope);
   };
 
+  // open the modalpopup
   const handleCancel = (e) => {
+    setCancelPopup(true);
     e.preventDefault();
-    onError("consent_request_rejected", t("consent_request_rejected"));
   };
 
   //Handle Login API Integration here
@@ -367,9 +370,45 @@ export default function Consent({
     );
   }
 
+  // close the modalpopup
+  const handleStay = () => {
+    setCancelPopup(false);
+  };
+
+  // close the modalpopup and redirect to Relying Party landing page
+  const handleDiscontinue = () => {
+    setCancelPopup(false);
+    onError("consent_request_rejected", t("consent_request_rejected"));
+  };
+
+  // buttons for the modalpopup footer
+  var footerButtons = (
+    <>
+      <div className="mx-5 w-full">
+        <div className="mb-1">
+        <FormAction
+          type={buttonTypes.button}
+          text={t("cancelpopup.stay_btn")}
+          handleClick={handleStay}
+          id="stay"
+        />
+        </div>
+        <div className="mt-1">
+        <FormAction
+          type={buttonTypes.cancel}
+          text={t("cancelpopup.discontinue_btn")}
+          handleClick={handleDiscontinue}
+          id="discontinue"
+        />
+        </div>
+      </div>
+    </>
+  );
+
   return (
     authTime && clientName && claimsScopes.length > 0 &&
     <div className="container flex mx-auto sm:flex-row flex-col">
+       {cancelPopup && <ModalPopup alertIcon="images/warning_message_icon.svg" header={t("cancelpopup.confirm_header")} body={t("cancelpopup.confirm_text")} footer={footerButtons}/>}
       <div className="flex justify-center m-10 lg:mt-20 mb:mt-0 lg:w-1/2 md:w-1/2 md:block sm:w-1/2 sm:block hidden w-5/6 mt-20 mb-10 md:mb-0">
         <div>
           <img