diff --git a/public/assets/css/login_register/style.css b/public/assets/css/login_register/style.css index 176ddded..ed37ca40 100644 --- a/public/assets/css/login_register/style.css +++ b/public/assets/css/login_register/style.css @@ -26,6 +26,10 @@ input[type="text"] { outline: 0; } +video { + background: primary; +} + .container { position: relative; width: 100%; @@ -357,21 +361,22 @@ form p { @media (max-width: 1100px) { .container { - min-height: 800px; + min-height: 1000px; height: 100vh; } - .container.sign-up-mode .right-panel { - padding-top: 0; + form.sign-in-form { + justify-content: start; } .header { - padding: 0px; + padding: 0; } .header ul li div { padding: 0 1.2rem; } + .signin-signup { width: 100%; @@ -393,8 +398,6 @@ form p { .panel { flex-direction: row; justify-content: space-around; - align-items: center; - padding: 2.5rem 8%; grid-column: 1 / 2; } @@ -446,7 +449,7 @@ form p { .container.sign-up-mode:before { transform: translate(-50%, 100%); - bottom: 32%; + bottom: 26%; right: initial; } @@ -471,9 +474,13 @@ form p { } } -@media (max-width: 700px) { - form { - padding: 0 1.5rem; +@media (max-width: 740px) { + .form_4 div { + width: 90%; + } + + .btns_wrap .common_btns.form_4_btns { + width: 90%; } .image { @@ -509,7 +516,6 @@ form p { .header { display: flex; justify-content: center; - padding: 1rem 0; } .header ul { @@ -925,10 +931,8 @@ form p { background-color: #900c3e; } -#webcamKtp { - height: 30vh; - border-radius: 1rem; -} + +#webcamKtp, #webcamEkyc { height: 30vh; border-radius: 1rem; diff --git a/public/assets/js/login_register/app.js b/public/assets/js/login_register/app.js index 469ae5cd..fd9f092b 100644 --- a/public/assets/js/login_register/app.js +++ b/public/assets/js/login_register/app.js @@ -139,69 +139,163 @@ document.addEventListener("DOMContentLoaded", function () { const videoElementKtp = document.getElementById("webcamKtp"); const captureButtonKtp = document.getElementById("captureButtonKtp"); const fotoInputKtp = document.getElementById("fotoKtp"); + const startButtonKtp = document.getElementById("startButtonKtp"); + const refreshButtonKtp = document.getElementById("refreshButtonKtp"); const videoElementEkyc = document.getElementById("webcamEkyc"); const captureButtonEkyc = document.getElementById("captureButtonEkyc"); const fotoInputEkyc = document.getElementById("fotoEkyc"); + const startButtonEkyc = document.getElementById("startButtonEkyc"); + const refreshButtonEkyc = document.getElementById("refreshButtonEkyc"); - navigator.mediaDevices - .getUserMedia({ - video: true - }) - .then(function (stream) { - videoElementKtp.srcObject = stream; - }) - .catch(function (error) { - console.error("Gagal mengakses kamera: ", error); - }); + let ktpStream = null; + let ekycStream = null; - captureButtonKtp.addEventListener("click", function () { - const canvas = document.createElement("canvas"); - const context = canvas.getContext("2d"); - canvas.width = videoElementKtp.videoWidth; - canvas.height = videoElementKtp.videoHeight; - context.drawImage(videoElementKtp, 0, 0, canvas.width, canvas.height); - const fotoDataUrl = canvas.toDataURL("image/jpeg"); + // Fungsi untuk menyalakan kamera + function turnOnCamera(stream, videoElement, startButton) { + videoElement.srcObject = stream; + startButton.textContent = "Matikan Kamera"; + videoElement.style.display = "block"; // Tampilkan video + } - // Set nilai foto input hidden dengan data URL - fotoInputKtp.value = fotoDataUrl; + // Fungsi untuk mematikan kamera + function turnOffCamera(stream, videoElement, startButton) { + if (stream) { + stream.getTracks().forEach((track) => track.stop()); + videoElement.srcObject = null; + } + startButton.textContent = "Nyalakan Kamera"; + videoElement.style.display = "none"; // Sembunyikan video + } - // Tampilkan preview foto - const fotoPreview = document.getElementById("foto-preview"); - fotoPreview.innerHTML = 'Foto'; + // Fungsi untuk menghapus hasil foto + function clearPhoto(fotoInput, fotoPreview) { + fotoInput.value = ""; + fotoPreview.innerHTML = ""; + } - // // Hentikan akses kamera setelah mengambil foto - // stream.getTracks().forEach((track) => track.stop()); + startButtonKtp.addEventListener("click", function () { + if (ktpStream) { + // Matikan kamera jika sudah aktif + turnOffCamera(ktpStream, videoElementKtp, startButtonKtp); + // Hapus hasil foto + clearPhoto(fotoInputKtp, document.getElementById("foto-preview-ktp")); + ktpStream = null; + } else { + // Aktifkan kamera jika belum aktif + navigator.mediaDevices + .getUserMedia({ video: true }) + .then(function (stream) { + ktpStream = stream; + turnOnCamera(ktpStream, videoElementKtp, startButtonKtp); + }) + .catch(function (error) { + console.error("Gagal mengakses kamera: ", error); + }); + } }); - navigator.mediaDevices - .getUserMedia({ - video: true - }) - .then(function (stream) { - videoElementEkyc.srcObject = stream; - }) - .catch(function (error) { - console.error("Gagal mengakses kamera: ", error); - }); + startButtonEkyc.addEventListener("click", function () { + if (ekycStream) { + // Matikan kamera jika sudah aktif + turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc); + // Hapus hasil foto + clearPhoto(fotoInputEkyc, document.getElementById("foto-preview-ekyc")); + ekycStream = null; + } else { + // Aktifkan kamera jika belum aktif + navigator.mediaDevices + .getUserMedia({ video: true }) + .then(function (stream) { + ekycStream = stream; + turnOnCamera(ekycStream, videoElementEkyc, startButtonEkyc); + }) + .catch(function (error) { + console.error("Gagal mengakses kamera: ", error); + }); + } + }); + + refreshButtonKtp.addEventListener("click", function () { + // Hapus hasil foto jika tombol "Ulang Foto" ditekan + clearPhoto(fotoInputKtp, document.getElementById("foto-preview-ktp")); + + if (ktpStream) { + // Matikan kamera jika sedang aktif + turnOffCamera(ktpStream, videoElementKtp, startButtonKtp); + ktpStream = null; + } + + // Menyalakan kembali kamera + navigator.mediaDevices + .getUserMedia({ video: true }) + .then(function (stream) { + ktpStream = stream; + turnOnCamera(ktpStream, videoElementKtp, startButtonKtp); + }) + .catch(function (error) { + console.error("Gagal mengakses kamera: ", error); + }); + }); + + refreshButtonEkyc.addEventListener("click", function () { + // Hapus hasil foto jika tombol "Ulang Foto" ditekan + clearPhoto(fotoInputEkyc, document.getElementById("foto-preview-ekyc")); + + if (ekycStream) { + // Matikan kamera jika sedang aktif + turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc); + ekycStream = null; + } + + // Menyalakan kembali kamera + navigator.mediaDevices + .getUserMedia({ video: true }) + .then(function (stream) { + ekycStream = stream; + turnOnCamera(ekycStream, videoElementEkyc, startButtonEkyc); + }) + .catch(function (error) { + console.error("Gagal mengakses kamera: ", error); + }); + }); + + captureButtonKtp.addEventListener("click", function () { + if (ktpStream) { + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d"); + canvas.width = videoElementKtp.videoWidth; + canvas.height = videoElementKtp.videoHeight; + context.drawImage(videoElementKtp, 0, 0, canvas.width, canvas.height); + const fotoDataUrl = canvas.toDataURL("image/jpeg"); + + fotoInputKtp.value = fotoDataUrl; + + const fotoPreview = document.getElementById("foto-preview-ktp"); + fotoPreview.innerHTML = 'Foto'; + + // Matikan kamera setelah mengambil foto + turnOffCamera(ktpStream, videoElementKtp, startButtonKtp); + } + }); captureButtonEkyc.addEventListener("click", function () { - const canvas = document.createElement("canvas"); - const context = canvas.getContext("2d"); - canvas.width = videoElementEkyc.videoWidth; - canvas.height = videoElementEkyc.videoHeight; - context.drawImage(videoElementEkyc, 0, 0, canvas.width, canvas.height); - const fotoDataUrl = canvas.toDataURL("image/jpeg"); + if (ekycStream) { + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d"); + canvas.width = videoElementEkyc.videoWidth; + canvas.height = videoElementEkyc.videoHeight; + context.drawImage(videoElementEkyc, 0, 0, canvas.width, canvas.height); + const fotoDataUrl = canvas.toDataURL("image/jpeg"); - // Set nilai foto input hidden dengan data URL - fotoInputEkyc.value = fotoDataUrl; + fotoInputEkyc.value = fotoDataUrl; - // Tampilkan preview foto - const fotoPreview = document.getElementById("foto-preview"); - fotoPreview.innerHTML = 'Foto'; + const fotoPreview = document.getElementById("foto-preview-ekyc"); + fotoPreview.innerHTML = 'Foto'; - // // Hentikan akses kamera setelah mengambil foto - // stream.getTracks().forEach((track) => track.stop()); + // Matikan kamera setelah mengambil foto + turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc); + } }); }); /****************************************** @@ -267,14 +361,12 @@ $(document).ready(function () { * AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN ******************************************/ $(document).ready(function () { - + // Inisialisasi select2 untuk selectProv $("#selectProv").select2({ placeholder: 'Pilih Provinsi', ajax: { url: $("#selectProv").data("url"), - processResults: function ({ - data - }) { + processResults: function ({ data }) { return { results: $.map(data, function (item) { return { @@ -282,21 +374,63 @@ $(document).ready(function () { text: item.name } }) - } + }; } } }); + // Inisialisasi select2 untuk selectRegenc + $("#selectRegenc").select2({ + placeholder: 'Pilih Kabupaten/Kota', + ajax: { + url: "", // Isi dengan URL yang sesuai + processResults: function ({ data }) { + return { + results: $.map(data, function (item) { + return { + id: item.id, + text: item.name + } + }) + }; + } + } + }); + + // Inisialisasi select2 untuk selectDistric + $("#selectDistric").select2({ + placeholder: 'Pilih Kecamatan', + ajax: { + url: "", // Isi dengan URL yang sesuai + processResults: function ({ data }) { + return { + results: $.map(data, function (item) { + return { + id: item.id, + text: item.name + } + }) + }; + } + } + }); + + // Event listener untuk perubahan pada selectProv $("#selectProv").change(function () { let id = $('#selectProv').val(); + // Mengosongkan pilihan di selectRegenc dan selectDistric + $("#selectRegenc, #selectDistric").empty(); + + // Menghapus properti 'disabled' pada selectRegenc dan selectDistric + $("#selectRegenc, #selectDistric").prop("disabled", false); + + // Memuat ulang data berdasarkan provinsi yang baru dipilih di selectRegenc $("#selectRegenc").select2({ placeholder: 'Pilih Wilayah', ajax: { - url: "/selectRegenc/" + id, - processResults: function ({ - data - }) { + url: "/selectRegenc/" + id, // Isi dengan URL yang sesuai + processResults: function ({ data }) { return { results: $.map(data, function (item) { return { @@ -304,32 +438,41 @@ $(document).ready(function () { text: item.name } }) - } + }; } } }); }); - $("#selectRegenc").change(function () { - let id = $('#selectRegenc').val(); - $("#selectDistric").select2({ - placeholder: 'Pilih Kota', - ajax: { - url: "/selectDistric/" + id, - processResults: function ({ data }) { - return { - results: $.map(data, function (item) { - return { - id: item.id, - text: item.name - } - }) - } - } - } - }); - }); + // Event listener untuk perubahan pada selectRegenc + $("#selectRegenc").change(function () { + let id = $('#selectRegenc').val(); + + // Mengosongkan pilihan di selectDistric + $("#selectDistric").empty(); + + // Menghapus properti 'disabled' pada selectDistric + $("#selectDistric").prop("disabled", false); + + // Memuat ulang data berdasarkan wilayah yang baru dipilih di selectDistric + $("#selectDistric").select2({ + placeholder: 'Pilih Kecamatan', + ajax: { + url: "/selectDistric/" + id, // Isi dengan URL yang sesuai + processResults: function ({ data }) { + return { + results: $.map(data, function (item) { + return { + id: item.id, + text: item.name + } + }) + }; + } + } + }); + }); }); /****************************************** * END AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN - ******************************************/ + ******************************************/ \ No newline at end of file diff --git a/resources/views/auth/sign-in_sign-up.blade.php b/resources/views/auth/sign-in_sign-up.blade.php index 3938e48e..901a8c6b 100644 --- a/resources/views/auth/sign-in_sign-up.blade.php +++ b/resources/views/auth/sign-in_sign-up.blade.php @@ -52,6 +52,11 @@ background-color: #900c3e !important; color: #fff !important; } + + #foto-preview-ktp, + #foto-preview-ekyc { + width: 300px + } @@ -201,7 +206,7 @@ - + @@ -214,37 +219,35 @@
-
-
+ +

KTP Anda

-
- -
+ +
- +
+ + + +
-
-
+ +

E-KYC Anda

-
- -
+ +
- +
+ + + +
-
+