[ES-1410] Handled QR-Code click event functionality for Inji login. (m…

…osip#848)

Signed-off-by: Gk <76690271+gk-4VII@users.noreply.github.com>

oidc-ui/src/components/LoginQRCode.js

@@ -36,7 +36,8 @@ export default function LoginQRCode({
   const [error, setError] = useState(null);
   const [qrCodeTimeOut, setQrCodeTimeout] = useState();
   const [errorBanner, setErrorBanner] = useState(null);
-
+  const [qrRedirectUrl, setQrRedirectUrl] = useState("");
+
   const linkedTransactionExpireInSec =
     openIDConnectService.getEsignetConfiguration(
       configurationKeys.linkedTransactionExpireInSecs
@@ -79,6 +80,8 @@ export default function LoginQRCode({
       response.expireDateTime
     );
 
+    setQrRedirectUrl(text);
+
     const canvas = document.createElement("canvas");
     QRCode.toCanvas(
       canvas,
@@ -436,6 +439,11 @@ export default function LoginQRCode({
     setErrorBanner(null);
   };
 
+  const handleQRCode = () => {
+    window.onbeforeunload = null;
+    window.location.href = qrRedirectUrl;
+  };
+
   return (
     <>
       <div className="grid grid-cols-8 items-center">
@@ -475,8 +483,8 @@ export default function LoginQRCode({
         )}
         {qr && (
           <div className="w-full flex justify-center">
-            <div className="border border-4 qrcode-border rounded-3xl p-2">
-              <img id="wallet-qr-code" src={qr} style={{ height: "186px", width: "186px" }} />
+            <div className="border border-4 qrcode-border rounded-3xl p-2 hover:cursor-pointer onClick={handleQRCode}">
+              <img id="wallet-qr-code" src={qr} style={{ height: "186px", width: "186px" }} alt="wallet-qr-code"/>
             </div>
           </div>
         )}