479 lines
26 KiB
PHP
479 lines
26 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>REKBER</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') }}" />
|
|
<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'>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ======= PRELOADER ======= -->
|
|
<div id="preloader">
|
|
<div id="status">
|
|
<div class="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ======= END PRELOADER ======= -->
|
|
|
|
<!-- ======= MODAL ======= -->
|
|
<div class="modal_wrapper">
|
|
<div class="shadow"></div>
|
|
<div class="success_wrap">
|
|
<span class="modal_icon"><ion-icon name="checkmark-sharp"></ion-icon></span>
|
|
<p>You have successfully completed the process.</p>
|
|
</div>
|
|
</div>
|
|
<!-- ======= MODAL ======= -->
|
|
|
|
<div class="container">
|
|
<div class="forms-container">
|
|
<div class="signin-signup">
|
|
|
|
<!-- ======= SIGN IN FORM ======= -->
|
|
<form action="{{ route('authenticate') }}" 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="text" class="telp-input-signin" maxlength="13" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 13);" placeholder="Nomer Telepon"> --}}
|
|
<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="{{ route('register') }}" 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" />
|
|
</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-envelope" aria-hidden="true"></i>
|
|
<input type="email" placeholder="Email" class="email-input" name="email" />
|
|
</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">
|
|
<span class="gender-select">Jenis Kelamin</span>
|
|
<i class="bx bx-chevron-down" style="padding: 0"></i>
|
|
</div>
|
|
<ul class="gender-options" name="gender">
|
|
<li class="gender-option">
|
|
<span class="gender-option-text">Laki-laki</span>
|
|
</li>
|
|
<li class="gender-option">
|
|
<span class="gender-option-text">Perempuan</span>
|
|
</li>
|
|
</ul>
|
|
</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 select-menu" style="width: 190%" name="alamat">
|
|
<div class="select-btn">
|
|
<span class="sBtn-text">Select Provinsi</span>
|
|
<i class="bx bx-chevron-down"></i>
|
|
</div>
|
|
<ul class="options">
|
|
<li class="option">
|
|
<span class="option-text">Nanggroe Aceh Darussalam</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Sumatera Utara</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Sumatera Selatan</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Sumatera Barat</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Bengkulu</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Riau</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Kepulauan Riau</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Jambi</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Lampung</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Bangka Belitung</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Kalimantan Barat</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Kalimantan Timur</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Kalimantan Selatan</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Kalimantan Tengah</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Kalimantan Utara</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Banten</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">DKI Jakarta</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Jawa Barat</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Jawa Tengah</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Daerah Istimewa Yogyakarta</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Jawa Timur</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Bali</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Nusa Tenggara Timur</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Nusa Tenggara Barat</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Gorontalo</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Sulawesi Barat</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Sulawesi Tengah</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Sulawesi Utara</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Sulawesi Tenggara</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Sulawesi Selatan</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Maluku Utara</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Maluku</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Papua Barat</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Papua</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Papua Tengah</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Papua Pegunungan</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Papua Selatan</span>
|
|
</li>
|
|
<li class="option">
|
|
<span class="option-text">Papua Barat Daya</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="input-field select-menu" style="width: 190%">
|
|
<div class="select-btn">
|
|
<span class="sBtn-text">Select Kabupaten/Kota</span>
|
|
<i class="bx bx-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
<div class="input-field select-menu" style="width: 190%">
|
|
<div class="select-btn">
|
|
<span class="sBtn-text">Select Kecamatan</span>
|
|
<i class="bx bx-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- ======= END FORM ADDRESS ======= -->
|
|
|
|
<!-- ======= FORM DROP & DRAG IMAGE ======= -->
|
|
<div class="form_3 data_info" style="display: none;">
|
|
|
|
<div class="container-img">
|
|
<div class="drop-area box box-h">
|
|
<div class="img">
|
|
<img src="img/uploadimg.svg" alt="">
|
|
</div>
|
|
<h5 class="drop-area-title">Tarik atau Seret gambar mu di sini</h5>
|
|
<p class="drop-area-text">type jpg, png atau jpeg</p>
|
|
<input type="file" accept="image/*" id="input-file" hidden
|
|
name="foto[]" multiple>
|
|
</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="text" class="pin-input" maxlength="6"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
|
|
placeholder="PIN" name="password">
|
|
</div>
|
|
|
|
<div class="input-field-signup-flex" style="margin-left: 3%">
|
|
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
|
|
<input type="text" class="konfir-pin-input" maxlength="6"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
|
|
placeholder="Konfirmasi PIN" 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="submit" class="btn_done">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="/">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="{{ asset('assets/js/login_register/jquery.js') }}"></script>
|
|
<script src="{{ asset('assets/js/login_register/app.js') }}"></script>
|
|
<script src="{{ asset('assets/js/login_register/script.js') }}"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#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',
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|