<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>REKBER | Homepage</title>
<!-- icon font awesome -->
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<!-- css -->
<link rel="stylesheet" href="{{ asset('assets/css/login_register/style.css') }}" />
{{-- Token --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- ionicons -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<!-- Boxicons -->
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- css input dropdown -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
.select2-container .select2-selection--single {
border: none;
background: none;
outline: none;
box-shadow: none;
padding: 0;
}
.select2-container .select2-selection--single:focus {
border: none;
}
.select2-container .select2-selection--single .select2-selection__arrow {
border: none;
background: none;
}
.select2-container--default.select2-container--open .select2-selection--single {
border: none;
}
.select2-results {
border-bottom: 1px solid #aaa;
}
.select2-results__option {
padding: 10px;
color: #333;
background-color: white;
}
.select2-container--default .select2-results>.select2-results__options .select2-results__option--highlighted {
background-color: #900c3e !important;
color: #fff !important;
}
#foto-preview-ktp,
#foto-preview-ekyc {
width: 400px
}
.image-holder-ktp,
.image-holder-ekyc {
width: 400px
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="forms-container">
<div class="signin-signup">
<!-- ======= SIGN IN FORM ======= -->
<form action="{{ route('autentikasi') }}" class="sign-in-form" method="POST"
enctype="multipart/form-data">
@csrf
<h2 class="title">Sign In</h2>
<p>
Selamat datang kembali, silakan isi form login di bawah ini untuk masuk ke akun anda.
</p>
<div style="width: 100%; display: flex; align-items: center;">
<div class="input-field-signin-flex">
<i class="fas fa-envelope" aria-hidden="true"></i>
<input type="email" class="telp-input-signin" placeholder="Email" name="email" required>
</div>
<button type="button" class="btn-otp solid" id="cekAkun">Cek Akun</button>
</div>
<div class="input-field">
<i class="fas fa-unlock-alt" aria-hidden="true"></i>
<input type="password" class="otp-input" placeholder="Password" name="password" required>
</div>
<button type="submit" class="btn solid" id="login-btn">Login</button>
</form>
<!-- ======= END SIGN IN FORM ======= -->
<!-- ======= SIGN UP FORM ======= -->
<form action="#" class="sign-up-form" id="msform" enctype="multipart/form-data" method="POST">
@csrf
<h2 class="title">Sign Up</h2>
<p style="width: 90%">
Selamat datang kembali, silakan isi form login di bawah ini untuk masuk ke akun anda.
</p>
<<!--=======PROGRESS BAR=======-->
<div class="header">
<ul>
<li class="active form_1_progessbar">
<div>
<p>1</p>
</div>
</li>
<li class="form_2_progessbar">
<div>
<p>2</p>
</div>
</li>
<li class="form_3_progessbar">
<div>
<p>3</p>
</div>
</li>
<li class="form_4_progessbar">
<div>
<p>4</p>
</div>
</li>
</ul>
</div>
<!-- ======= END PROGRESS BAR ======= -->
<!-- ======= FORM MULTIPLE ======= -->
<div class="form_wrap">
<!-- ======= FORM PERSONAL DATA ======= -->
<div class="form_1 data_info">
<div style="display: flex;">
<div class="input-field-signup-flex">
<i class="fas fa-user"></i>
<input type="text" placeholder="Nama Depan" class="first-name-input"
name="nama_depan" required />
</div>
<div class="input-field-signup-flex" style="margin-left: 3%">
<i class="fas fa-user"></i>
<input type="text" placeholder="Nama Belakang" class="last-name-input"
name="nama_belakang" />
</div>
</div>
<div class="input-field up">
<i class="fa fa-id-card" aria-hidden="true"></i>
<input type="text" placeholder="NIK" class="email-input" name="nik"
maxlength="16"
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 16);" />
</div>
<div class="flex-input-btn">
<div class="input">
<i class="fa fa-envelope" aria-hidden="true"></i>
<input type="email" placeholder="Email" class="email-input" name="new_email"
id="newEmail" />
</div>
<button id="verifikasiEmail" class="btn-otp" type="button"
disabled=true>Verifikasi</button>
</div>
<div class="input-field up">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
<input type="text" class="telp-input-signup"
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
placeholder="Kode Verifikasi Email" name="email_verification">
</div>
<div class="input-field up">
<i class="fa fa-phone" aria-hidden="true"></i>
<input type="text" class="telp-input-signup" maxlength="13"
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 13);"
placeholder="Nomer Telepon" name="nohp">
</div>
<div style="display: flex;">
<div class="input-field-signup-flex up gender-select-menu" style="width: 190%">
<div class="gender-select-input" style="width: 100%; padding-left: 1rem;">
<select style="width: 190%;" class="gender-select" id="gender-select"
name="gender">
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
</div>
<div class="input-field-signup-flex up" style="margin-left: 3%">
<i class="fa fa-calendar" aria-hidden="true"></i>
<input type="date" placeholder="Tanggal Lahir" name="tanggal_lahir" />
</div>
</div>
</div>
<!-- ======= END FORM PERSONAL DATA ======= -->
<!-- ======= FORM ADDRESS ======= -->
<div class="form_2 data_info" style="display: none;">
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
<select id="selectProvince" data-url="{{ route('cari-provinsi') }}"
style="width: 100%; border: 1px solid transparent; " class="input-field"
aria-label="Default select example">
</select>
</div>
<div class='mb-2'>
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
<select id="selectCity"
style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;"
class="input-field" aria-label="Default select example">
</select>
</div>
</div>
<div class='mb-2'>
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
<select id="selectDistrict"
style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;"
class="input-field" aria-label="Default select example">
</select>
</div>
</div>
<div class='mb-2'>
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
<select id="selectVillage"
style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;"
class="input-field" aria-label="Default select example"
name="village_code">
</select>
</div>
</div>
<input type="text" class="input-field" id="alamat" name="alamat"
placeholder="Alamat lengkap Anda" cols="50" rows="4"
style="width: 190%; padding: 0rem 1rem;">
</div>
<!-- ======= END FORM ADDRESS ======= -->
<!-- ======= FORM DROP & DRAG IMAGE ======= -->
<div class="form_3 data_info" style="display: none;">
<div class="slider-container">
<div class="slider">
<div class="slide fade">
<div style="display: flex; flex-direction: column; align-items: center">
<h3 style="">Foto KTP Anda</h3>
<div class="image-holder-ktp">
<img src="{{ asset('assets/images/dashboard/Asset 3.png') }}"
alt="logo ambil gambar" id="imageHolderKtp">
</div>
<video id="webcamKtp" autoplay playsinline></video>
<div id="foto-preview-ktp"></div>
<input type="hidden" id="fotoKtp" name="ktp">
<div style="display: flex; margin-top: 1rem">
<button type="button" class="btn-foto" id="startButtonKtp"
data-state="off">Mulai Kamera</button>
<button type="button" class="btn-foto"
id="captureButtonKtp">Ambil Foto</button>
<button type="button" class="btn-foto"
id="refreshButtonKtp">Ulang Foto</button>
</div>
</div>
</div>
<div class="slide fade">
<div
style="display: flex; flex-direction: column; justify-content: center; align-items: center">
<h3>Foto Wajah Anda</h3>
<div class="image-holder-ekyc">
<img class="image-holder-ekyc"
src="{{ asset('assets/images/dashboard/Asset 3.png') }}"
alt="logo ambil gambar" id="imageHolderEkyc">
</div>
<video id="webcamEkyc" autoplay playsinline></video>
<div id="foto-preview-ekyc"></div>
<input type="hidden" id="fotoEkyc" name="wajah">
<div style="display: flex; margin-top: 1rem">
<button type="button" class="btn-foto" id="startButtonEkyc"
data-state="off">Mulai Kamera</button>
<button type="button" class="btn-foto"
id="captureButtonEkyc">Ambil Foto</button>
<button type="button" class="btn-foto"
id="refreshButtonEkyc">Ulang Foto</button>
</div>
</div>
</div>
</div>
<div class="dots">
<button class="prev" type="button"
onclick="plusSlide(-1)">❮</button>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<button class="next" type="button"
onclick="plusSlide(1)">❯</button>
</div>
</div>
</div>
<!-- ======= FORM DROP & DRAG IMAGE ======= -->
<!-- ======= FORM PIN ======= -->
<div class="form_4 data_info" style="display: none;">
<div style="display: flex">
<div class="input-field-signup-flex">
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
<input type="password" class="pin-input" placeholder="Password"
name="new_password">
</div>
<div class="input-field-signup-flex" style="margin-left: 3%">
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
<input type="password" class="konfir-pin-input"
placeholder="Konfirmasi Password" name="confirm_password">
</div>
</div>
</div>
<!-- ======= END FORM PIN ======= -->
<!-- ======= BTN FORM NEXT & BACK ======= -->
<div class="btns_wrap">
<div class="common_btns form_1_btns">
<button type="button" class="btn_next">Next <span class="icon"><ion-icon
name="arrow-forward-sharp"></ion-icon></span></button>
</div>
<div class="common_btns form_2_btns" style="display: none;">
<button type="button" class="btn_back"><span class="icon"><ion-icon
name="arrow-back-sharp"></ion-icon></span>Back</button>
<button type="button" class="btn_next">Next <span class="icon"><ion-icon
name="arrow-forward-sharp"></ion-icon></span></button>
</div>
<div class="common_btns form_3_btns" style="display: none;">
<button type="button" class="btn_back"><span class="icon"><ion-icon
name="arrow-back-sharp"></ion-icon></span>Back</button>
<button type="button" class="btn_next">Next <span class="icon"><ion-icon
name="arrow-forward-sharp"></ion-icon></span></button>
</div>
<div class="common_btns form_4_btns" style="display: none;">
<button type="button" class="btn_back"><span class="icon"><ion-icon
name="arrow-back-sharp"></ion-icon></span>Back</button>
<button type="button" class="btn_done" id="signUp">Sign Up</button>
</div>
</div>
<!-- ======= BTN FORM NEXT & BACK ======= -->
</div>
<!-- ======= END FORM MIULTIPLE ======= -->
</form>
<!-- ======= END FORM SIGN UP ======= -->
</div>
</div>
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Belum memiliki akun?</h3>
<p>
Daftarkan akun anda sekarang untuk nikmatin Aplikasi RekBer. Daftar di sini.
</p>
<button class="btn transparent" id="sign-up-btn">
Sign up
</button>
<p><a href="{{ route('login') }}">kembali</a></p>
</div>
<img src="{{ asset('assets/img/login_register/Payment Information-pana.svg') }}" class="image"
alt="" />
</div>
<div class="panel right-panel">
<div class="content">
<h3>Sudah memiliki akun?</h3>
<p>
Silakan masuk ke dalam RekBar menggunakan akun yang telah Anda buat sebelumnya di sini.
</p>
<button class="btn transparent" id="sign-in-btn">
Sign In
</button>
<p><a href="/">kembali</a></p>
</div>
<img src="{{ asset('assets/img/login_register/Payment Information-pana.svg') }}" class="image"
alt="" />
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('assets/js/login_register/app.js') }}"></script>
<script src="{{ asset('assets/js/login_register/script.js') }}"></script>
@if (Session::has('message'))
<script>
Swal.fire({
icon: 'error',
title: 'Gagal',
text: "{{ Session::get('message') }}",
});
</script>
@endif
@if ($errors->any())
<script>
Swal.fire({
icon: 'error',
title: 'Kesalahan',
text: @json($errors->all()).join(' '),
});
console.log(@json($errors->all()));
</script>
@endif
<script>
$(document).ready(function() {
let verificationStatus = false;
let verificationCode = '';
let waktuSekarangDetik = 0;
// Generate Kode Verifikasi
function generateVerificationCode() {
const codeLength = 6;
let code = '';
for (let i = 0; i < codeLength; i++) {
code += Math.floor(Math.random() * 10); // Menghasilkan digit acak dari 0 hingga 9
}
return code;
}
// Login Awal
$('#cekAkun').on('click', function() {
let email = document.querySelector('[name="email"]').value;
const csrfToken = $('meta[name="csrf-token"]').attr('content');
// Periksa apakah input email kosong
if (email.trim() === '') {
Swal.fire({
title: 'Gagal!',
text: 'Email tidak boleh kosong',
icon: 'error'
});
} else {
try {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': csrfToken
}
});
$.ajax({
url: "{{ route('status-akun', ':email') }}".replace(':email', email),
type: 'GET',
success: function(response) {
let status = response.message[0].status
if (response.status) {
Swal.fire({
title: 'Akun ditemukan',
text: 'Akun dengan email ' + email + (status ==
'Finished' ? ' siap digunakan' : (
status == 'Progress' ?
' masih proses verifikasi' :
' ditolak')),
icon: (status == 'Finished' ? 'success' : (
status == 'Progress' ? 'info' :
'error')),
confirmButtonText: 'OK'
});
} else {
Swal.fire({
title: 'Gagal',
text: 'Akun dengen email ' + email +
' tidak tersedia',
icon: 'error',
confirmButtonText: 'OK'
});
}
},
error: function(error) {
Swal.fire({
title: 'Gagal!',
text: 'Gagal memuat data karena ' + error,
icon: 'error',
confirmButtonText: 'OK',
});
}
});
} catch (error) {
Swal.fire({
title: 'Gagal!',
text: 'Gagal memuat data karena ' + error,
icon: 'error',
confirmButtonText: 'OK',
});
}
}
});
// Login Akhir
// Register Awal
$('#newEmail').on('input', function() {
const newEmail = $(this);
clearTimeout(newEmail.timer); // Menghapus timeout yang ada
const verificationButton = document.getElementById('verifikasiEmail');
verificationButton.disabled = true;
const email = newEmail.val().trim(); // Menghapus spasi di awal dan akhir
if (email != '') {
// Menunggu 5 detik sebelum menghasilkan kode verifikasi
newEmail.timer = setTimeout(function() {
if (waktuSekarangDetik == 0) {
verificationStatus = false;
verificationButton.disabled = false;
verificationButton.innerHTML = 'Verifikasi';
}
}, 1000);
}
});
function isValidEmail(email) {
// Ekspresi reguler untuk memeriksa validitas alamat email
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// Menggunakan test() untuk memeriksa apakah email sesuai dengan ekspresi reguler
return emailRegex.test(email);
}
$('#verifikasiEmail').on('click', function() {
const newEmail = $(this);
const email = document.querySelector('[name="new_email"]').value;
const csrfToken = $('meta[name="csrf-token"]').attr('content');
verificationCode = generateVerificationCode();
verificationStatus = false
if (isValidEmail(email)) {
const formData = new FormData();
formData.append('email', email);
formData.append('code', verificationCode);
// Menonaktifkan tombol verifikasi
newEmail.prop('disabled', true);
// Mengatur waktu dalam detik (misalnya, 2 menit = 120 detik)
const waktuTotalDetik = 120;
waktuSekarangDetik = waktuTotalDetik;
// Mengupdate teks tombol dengan format menit:detik
function updateButtonText() {
const menit = Math.floor(waktuSekarangDetik / 60);
const detik = waktuSekarangDetik % 60 < 10 ? '0' + (waktuSekarangDetik % 60) :
waktuSekarangDetik % 60;
newEmail.text(`${menit}:${detik}`);
}
// Memulai timer dan mengupdate teks tombol setiap detik
const timerInterval = setInterval(function() {
if (waktuSekarangDetik > 0) {
waktuSekarangDetik--;
updateButtonText();
} else {
clearInterval(timerInterval);
newEmail.text("Verifikasi"); // Mengembalikan teks awal tombol
newEmail.prop('disabled', false); // Mengaktifkan kembali tombol
}
}, 1000); // Setiap 1 detik
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': csrfToken
}
});
$.ajax({
url: "{{ route('kirim-kode') }}",
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
Swal.fire({
title: response.status ? 'Berhasil' : 'Gagal',
text: response.message,
icon: response.status ? 'success' : 'error',
});
verificationStatus = true;
},
error: function(error) {
Swal.fire({
title: 'Gagal',
text: 'Gagal karena kesalahan inputan atau jaringan',
icon: 'error',
});
console.log(error);
},
});
} else {
Swal.fire({
title: 'Kesalahan',
text: 'Inputan yang anda masukan bukan alamat email. Silahkan masukan alamat email yang benar.',
icon: 'error'
});
}
});
$('#signUp').on('click', function() {
let emptyInput = [];
const csrfToken = $('meta[name="csrf-token"]').attr('content');
let namaDepan = document.querySelector('[name="nama_depan"]').value;
let namaBelakang = document.querySelector('[name="nama_belakang"]').value;
let nik = document.querySelector('[name="nik"]').value;
let email = document.querySelector('[name="new_email"]').value;
let nohp = document.querySelector('[name="nohp"]').value;
let gender = document.querySelector('[name="gender"]').value;
let emailVerification = document.querySelector('[name="email_verification"]').value;
// Tanggal lahir
let tanggalLahir = document.querySelector('[name="tanggal_lahir"]').value;
// Mencari selisih tahun lahir dengan tahun sekarang
// Parse tanggal lahir ke objek Date
let tanggalLahirDate = new Date(tanggalLahir);
// Dapatkan tahun dari tanggal lahir
let tahunLahir = tanggalLahirDate.getFullYear();
// Dapatkan tahun sekarang
let tahunSekarang = new Date().getFullYear();
// Hitung selisih tahun
let selisihTahun = tahunSekarang - tahunLahir;
// Akhir mencari selisih tahun
let kodeKelurahan = document.querySelector('[name="village_code"]').value;
let alamat = document.querySelector('[name="alamat"]').value;
let wajah = document.querySelector('[name="wajah"]').value;
let ktp = document.querySelector('[name="ktp"]').value;
let newPassword = document.querySelector('[name="new_password"]').value;
let confirmPassword = document.querySelector('[name="confirm_password"]').value;
// Pengecekan inputan yang kosong
if (namaDepan.trim() === "" && namaBelakang.trim() === "") {
emptyInput.push("Nama depan dan nama belakang tidak boleh kosong");
}
if (nik.trim() === "") {
emptyInput.push("Nik tidak boleh kosong");
}
if (email.trim() === "") {
emptyInput.push("Email tidak boleh kosong");
}
if (!verificationStatus) {
emptyInput.push("Verifikasi email terlebih dahulu");
}
if (emailVerification.trim() === "") {
emptyInput.push("Kode verifikasi harus diisi");
}
if (emailVerification != verificationCode) {
emptyInput.push('Kode verifikasi harus sama dengan kode yang dikirim ke email');
}
if (nohp.trim() === "") {
emptyInput.push("nomor HP tidak boleh kosong");
}
if (gender.trim() === "") {
emptyInput.push("Jenis kelamin tidak boleh kosong");
}
if (tanggalLahir.trim() === "") {
emptyInput.push("Tanggal lahir tidak boleh kosong");
} else if (selisihTahun < 17) {
// kondisi dimana usia dibawah 18 tahun
emptyInput.push("Anda harus berusia 17 keatas");
}
if (kodeKelurahan.trim() === "" || alamat.trim() === "") {
emptyInput.push("Alamat tidak boleh kosong");
}
if (wajah.trim() === "") {
emptyInput.push("Silahkan ambil foto wajah anda");
}
if (ktp.trim() === "") {
emptyInput.push("Silahkan ambil foto KTP anda");
}
if (newPassword.trim() === "" && confirmPassword === "") {
emptyInput.push("Password tidak boleh kosong");
} else if (newPassword.trim() != confirmPassword) {
emptyInput.push("Password baru harus sama dengan password yang dikonfirmasi");
}
// kalau terdapat inputan kosong
if (emptyInput.length > 0) {
const emptyInputError = emptyInput.join(', ');
Swal.fire({
title: 'Gagal',
text: emptyInputError,
icon: 'error',
confirmButtonText: 'OK',
});
} else {
const formData = new FormData();
formData.append('nama-depan', namaDepan);
formData.append('nama-belakang', namaBelakang);
formData.append('nik', nik);
formData.append('email', email);
formData.append('nohp', nohp);
formData.append('gender', gender);
formData.append('tanggal-lahir', tanggalLahir);
formData.append('kode-kelurahan', kodeKelurahan);
formData.append('alamat', alamat);
formData.append('wajah', wajah);
formData.append('ktp', ktp);
formData.append('new-password', newPassword);
formData.append('confirm-password', confirmPassword);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': csrfToken
}
});
$.ajax({
url: "{{ route('register') }}",
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
Swal.fire({
title: response.status ? 'Berhasil' : 'Gagal',
text: response.message,
icon: response.status ? 'success' : 'error',
confirmButtonText: 'OK',
}).then(function() {
if (response.status == true) {
location.reload();
}
});
},
error: function(error) {
Swal.fire({
title: 'Gagal',
text: 'Ada form yang kosong atau kesalahan internet. penyebab ' +
error,
icon: 'error',
});
}
});
}
});
// Register Akhir
});
</script>
</body>
</html>