third commit

src/App.css

@@ -113,9 +113,11 @@ h1 {
 }
 h2 {
   margin: 0;
+  width: 300px;
 }
 #multi-step-form-container {
   margin-top: 5rem;
+  padding: 2%;
 }
 .text-center {
   text-align: center;
@@ -387,9 +389,11 @@ body {
     }
   /* drag and drop style  */
   .code-json{
+      text-wrap: wrap;
       border: 2px dashed #f0f2f5;
       padding: 1rem;
       height: 100%;
+      width: 100%;
       pre{
         background-color: #f0f2f5;
         padding: 1rem;

src/Components/SkyIdentification.js

@@ -10,6 +10,7 @@ const SkyIdentification = () => {
   const [responseLiveness, setResponseLiveness] = useState(null);
   const [responseFaceMatching, setResponseFaceMatching] = useState(null);
   const [displaybtn, setdisplaybtn] = useState(null);
+  const [imageSrc, setImageSrc] = useState("/assets/CINcrt.jpg");
 
   const handleFileChange = (event) => {
     readImage(event.target.files[0]);
@@ -19,6 +20,10 @@ const SkyIdentification = () => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
     setSelectedFile(file);
+    reader.onload = function () {
+      setImageSrc(reader.result);
+  };
+    console.log(file)
     skyid_extract_info_from_doc_request(file, responseLogin.response_data.access_token);
   };
 
@@ -158,6 +163,7 @@ const SkyIdentification = () => {
 
   return (
     <div className="main_container">
+      <br/>
       <div>
         <img src="/assets/IndatacoreIdentity.png" className="IndatacoreIdentity" alt="" />
       </div>
@@ -167,9 +173,12 @@ const SkyIdentification = () => {
       <div id="multi-step-form-container">
 
         <input type="file" onChange={handleFileChange} />
+        <img src={`${imageSrc}`} />
+
         <br/>
         {responseLogin && (
-          <div>
+          <div className='code-json'>
+          <br/>
             <h2>Server Response Login :</h2>
             <pre>{JSON.stringify(responseLogin, null, 2)}</pre>
           </div>
@@ -177,7 +186,7 @@ const SkyIdentification = () => {
 
         <br />
         {responseOcr && (
-          <div>
+          <div className='code-json'>
             <h2>Server Response OCR:</h2>
             <pre>{JSON.stringify(responseOcr, null, 2)}</pre>
           </div>
@@ -188,7 +197,7 @@ const SkyIdentification = () => {
         {displaybtn && (
           <button  onClick={startScanFace}>Start Scan Face</button>
         )}
-        <div>
+        <div className='code-json'>
         <br />
           {responseLiveness && (
             <div>
@@ -200,7 +209,7 @@ const SkyIdentification = () => {
         <br />
         <div>
           {responseFaceMatching && (
-            <div>
+            <div className='code-json'>
               <h2>Server Response Face Matching :</h2>
               <pre>{JSON.stringify(responseFaceMatching, null, 2)}</pre>
             </div>

src/config/helperConfig.js

 export default {
     // information sent after creation of applicationId by mail
-    OCR_url : "***",
-    OCR_url_status : "***",
-    LIVENESS_url : "***",
-    FACE_MATCHING_url : "***",
-    skyid_fa_sdk_params_url : "***",
+    OCR_url : "https://saas.ms.sup1.idc.skyidentification.com:7001/extract_info_from_document",
+    OCR_url_status : "https://saas.ms.sup1.idc.skyidentification.com:7001/skyid_ocr_status",
+    LIVENESS_url : "https://saas.ms.sup1.idc.skyidentification.com:4432/check_liveness",
+    FACE_MATCHING_url : "https://saas.ms.sup1.idc.skyidentification.com:7008/compare_multi_doc_vs_selfie",
+    skyid_fa_sdk_params_url : "https://saas.ms.sup1.idc.skyidentification.com:7008/",
     Recover_Face_Matching_Result_URL : "***",
   
-    institution_id : "***",
-    skyid_fa_sdk_user : "***",
-    skyid_fa_sdk_password : "***",
-    skyid_fa_sdk_token : "***",
-    skyid_fa_sdk_appId : "***",
+    institution_id : "042",
+    skyid_fa_sdk_user : "demo.skyid",
+    skyid_fa_sdk_password : "4GH1Kw@vx$*K003x",
+    skyid_fa_sdk_token : "042405620988672110134531288085084",
+    skyid_fa_sdk_appId : "demo.saas.web.skyid.idc",
   
   
     setFileImage(my_selfie_canvas) {