Add display MyKad image

public/js/mykad-reader.js

@@ -1,8 +1,17 @@
 
 let button_read_mykad = document.getElementById("button_read_mykad");
+let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.btn-danger");
+
+let removeCRLFfromString = (response_text) => {
+    return response_text.replace(/[\n\r]+/g, '').replace(/\s{2,10}/g, ' ');
+};
+
 
 let getMyKadDetail = () => {
-    return fetch(mykad_reader_endpoint).then((response) => response.json());
+    return fetch(mykad_reader_endpoint)
+        .then(response => response.text())
+        .then(response => removeCRLFfromString(response))
+        .then(response => JSON.parse(response))
 };
 
 let checkIfMyKadExist = (myKadNumber) => {
@@ -35,7 +44,7 @@ let handleMyKadReader = () => {
                 form_search_noic.submit();
             }
         })
-        .catch(error => alert(error));
+        .catch(error => console.log(error));
 
 
 };
@@ -93,6 +102,10 @@ let populateDaftarPelangganModal = (data) => {
         return isBumiputera;
     };
 
+    let photo_container = document.getElementById("photo-mykad-container");
+    let photo = document.getElementById("photo-mykad");
+    photo.src = 'data:image/png;base64, ' + data.Photo;
+
     modal_form.querySelector("input[name='name']").value = data.Name;
     modal_form.querySelector("input[name='noic']").value = data.IdNo;
     modal_form.querySelector("input[name='tarikh_lahir']").value = getFormattedDateOfBirth(data.DateOfBirth);
@@ -109,7 +122,23 @@ let populateDaftarPelangganModal = (data) => {
     modal_form.querySelector("select[name='bangsa']").value = getCodeFromValue(data.Ethnicity, ethnicities);
 
     calculatePassportAge();
+
+    photo_container.classList.remove('d-none');
+    photo_container.classList.add('d-flex');
+
     $('#daftar_pelanggan').modal('show');
 };
 
+
+let hideMykadPhoto = () => {
+    let photo = document.getElementById("photo-mykad");
+    let photo_container = document.getElementById("photo-mykad-container");
+
+    photo.src = '';
+
+    photo_container.classList.add('d-none');
+    photo_container.classList.remove('d-flex');
+};
+
 button_read_mykad.addEventListener("click", handleMyKadReader);
+button_close_modal.addEventListener("click", hideMykadPhoto);

resources/views/customers/index.blade.php

@@ -62,6 +62,9 @@
                             <form action="{{ route('customer.store') }}" onsubmit="verifycustomer()" method="POST">
                                 @csrf
                                 <div class="row form-group">
+                                    <div class="col-md-12 d-flex justify-content-center pb-3 d-none" id="photo-mykad-container">
+                                        <img src="" alt="" id="photo-mykad">
+                                    </div>
                                     <div class="col-md-6">
                                         <div class="row form-group">
                                             <div class="col-md-4">Nama</div>