292 lines
11 KiB
PHP
292 lines
11 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Daftar - GriyaPadi.id</title>
|
|
<link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
|
|
|
|
<style>
|
|
body {
|
|
background-color: #f0f7e6;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.card-auth {
|
|
max-width: 500px;
|
|
width: 100%;
|
|
border: none;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.text-tani {
|
|
color: #81c408;
|
|
}
|
|
|
|
.btn-tani {
|
|
background-color: #81c408;
|
|
border-color: #81c408;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-tani:hover {
|
|
background-color: #6da705;
|
|
color: white;
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
border-color: #81c408;
|
|
box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25);
|
|
}
|
|
|
|
.bg-petani-info {
|
|
background-color: #e8f5e9;
|
|
border: 1px solid #c8e6c9;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Style Validasi Password */
|
|
.valid-item {
|
|
color: #dc3545;
|
|
font-size: 0.8rem;
|
|
margin-bottom: 2px;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.valid-item.valid {
|
|
color: #198754;
|
|
}
|
|
|
|
.valid-item i {
|
|
width: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="card card-auth p-4 bg-white">
|
|
<div class="card-body">
|
|
<div class="text-center mb-4">
|
|
<h2 class="fw-bold text-tani">Daftar Akun</h2>
|
|
<p class="text-muted small">Gabung komunitas GriyaPadi.id</p>
|
|
</div>
|
|
|
|
|
|
<form action="{{ route('register.proses') }}" method="POST">
|
|
@csrf
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted">Daftar Sebagai:</label>
|
|
<select name="role" id="role" class="form-select text-center fw-bold text-tani"
|
|
onchange="toggleForm()">
|
|
<option value="pembeli">👤 Pembeli (Belanja)</option>
|
|
<option value="petani">🌾 Petani (Jualan)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6 mb-3">
|
|
<label class="form-label small text-muted">Nama Lengkap</label>
|
|
<input type="text" name="nama_lengkap" class="form-control" required>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<label class="form-label small text-muted">Username</label>
|
|
<input type="text" name="username" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">Email</label>
|
|
<input type="email" name="email" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-3" id="wrapper-nik" style="display: none;">
|
|
<label class="form-label small text-muted">NIK (Khusus Petani)</label>
|
|
<input type="number" name="nik" id="nik" class="form-control"
|
|
placeholder="Masukkan 16 digit NIK">
|
|
<small id="pesan-nik" class="form-text d-block mt-1"></small>
|
|
</div>
|
|
|
|
{{-- PASSWORD DENGAN VALIDASI --}}
|
|
<div class="mb-2">
|
|
<label class="form-label small text-muted">Password</label>
|
|
<div class="input-group">
|
|
<input type="password" name="password" id="password" class="form-control border-end-0" required
|
|
onkeyup="checkPassword()">
|
|
<span class="input-group-text bg-white border-start-0 cursor-pointer"
|
|
onclick="togglePassword('password', 'icon-pass')">
|
|
<i class="fas fa-eye text-muted" id="icon-pass"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Indikator Kekuatan Password --}}
|
|
<div class="mb-3 ps-1">
|
|
<div id="req-length" class="valid-item"><i class="fas fa-times"></i> Minimal 8 Karakter</div>
|
|
<div id="req-number" class="valid-item"><i class="fas fa-times"></i> Ada Angka (0-9)</div>
|
|
<div id="req-upper" class="valid-item"><i class="fas fa-times"></i> Ada Huruf Kapital (A-Z)</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">Nomor HP</label>
|
|
<input type="number" name="no_hp" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">Alamat Lengkap</label>
|
|
<textarea name="alamat" class="form-control" rows="2" required></textarea>
|
|
</div>
|
|
|
|
<div id="form-petani" style="display: none;" class="p-3 rounded mb-3 bg-petani-info">
|
|
<label class="form-label small fw-bold"><i class="fas fa-store me-1"></i> Nama Toko</label>
|
|
<input type="text" name="nama_usaha" class="form-control"
|
|
placeholder="Contoh: Sayur Segar Pak Budi">
|
|
<small class="d-block mt-2" style="font-size: 11px;">*Butuh verifikasi Admin.</small>
|
|
</div>
|
|
|
|
<div class="d-grid mt-4">
|
|
<button type="submit" id="btn-daftar" class="btn btn-tani rounded-pill py-2">Register</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="text-center mt-4">
|
|
<small class="text-muted">Sudah punya akun? <a href="{{ route('login') }}"
|
|
class="text-tani fw-bold text-decoration-none">Login</a></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
// 1. Toggle Show/Hide Password
|
|
function togglePassword(inputId, iconId) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = document.getElementById(iconId);
|
|
if (input.type === "password") {
|
|
input.type = "text";
|
|
icon.classList.remove("fa-eye");
|
|
icon.classList.add("fa-eye-slash");
|
|
} else {
|
|
input.type = "password";
|
|
icon.classList.remove("fa-eye-slash");
|
|
icon.classList.add("fa-eye");
|
|
}
|
|
}
|
|
|
|
// 2. Real-time Password Validator (Yang tadi sempat hilang)
|
|
function checkPassword() {
|
|
const password = document.getElementById('password').value;
|
|
|
|
// Regex patterns
|
|
const hasLength = password.length >= 8;
|
|
const hasNumber = /\d/.test(password);
|
|
const hasUpper = /[A-Z]/.test(password);
|
|
|
|
updateRequirement('req-length', hasLength);
|
|
updateRequirement('req-number', hasNumber);
|
|
updateRequirement('req-upper', hasUpper);
|
|
}
|
|
|
|
function updateRequirement(id, isValid) {
|
|
const element = document.getElementById(id);
|
|
const icon = element.querySelector('i');
|
|
|
|
if (isValid) {
|
|
element.classList.add('valid');
|
|
icon.classList.remove('fa-times');
|
|
icon.classList.add('fa-check');
|
|
} else {
|
|
element.classList.remove('valid');
|
|
icon.classList.remove('fa-check');
|
|
icon.classList.add('fa-times');
|
|
}
|
|
}
|
|
|
|
// 3. Toggle Form Petani
|
|
function toggleForm() {
|
|
var role = document.getElementById('role').value;
|
|
var formPetani = document.getElementById('form-petani');
|
|
var wrapperNik = document.getElementById('wrapper-nik');
|
|
var inputNik = document.getElementById('nik');
|
|
var btnDaftar = document.getElementById('btn-daftar');
|
|
|
|
if (role === 'petani') {
|
|
formPetani.style.display = 'block';
|
|
wrapperNik.style.display = 'block';
|
|
inputNik.setAttribute('required', 'required');
|
|
} else {
|
|
formPetani.style.display = 'none';
|
|
wrapperNik.style.display = 'none';
|
|
inputNik.removeAttribute('required');
|
|
inputNik.value = '';
|
|
$('#pesan-nik').text('');
|
|
btnDaftar.disabled = false;
|
|
}
|
|
}
|
|
|
|
// 4. AJAX Cek NIK
|
|
$(document).ready(function() {
|
|
toggleForm(); // Panggil saat web pertama dimuat
|
|
|
|
$('#nik').on('blur', function() {
|
|
var currentRole = $('#role').val();
|
|
if (currentRole !== 'petani') return; // Cuma jalan kalau rolenya petani
|
|
|
|
let nikValue = $(this).val();
|
|
|
|
if (nikValue === '') {
|
|
$('#pesan-nik').text('');
|
|
$('#btn-daftar').prop('disabled', false);
|
|
return;
|
|
}
|
|
|
|
$('#pesan-nik').text('Mengecek NIK...').css('color', 'blue');
|
|
|
|
// Jalankan AJAX
|
|
$.ajax({
|
|
url: "{{ route('cek.nik') }}",
|
|
type: "POST",
|
|
data: {
|
|
_token: "{{ csrf_token() }}",
|
|
nik: nikValue
|
|
},
|
|
success: function(response) {
|
|
if (response.status === 'tersedia') {
|
|
$('#pesan-nik').text('NIK valid dan terdaftar.').css('color',
|
|
'green');
|
|
$('#btn-daftar').prop('disabled', false);
|
|
} else if (response.status === 'sudah_dipakai') {
|
|
$('#pesan-nik').text('NIK ini sudah terdaftar pada akun lain!').css(
|
|
'color', 'orange');
|
|
$('#btn-daftar').prop('disabled', true);
|
|
} else {
|
|
$('#pesan-nik').text(
|
|
'NIK tidak terdaftar di Gapoktan! Anda tidak bisa mendaftar.'
|
|
).css('color', 'red');
|
|
$('#btn-daftar').prop('disabled', true);
|
|
}
|
|
},
|
|
error: function() {
|
|
$('#pesan-nik').text('Terjadi kesalahan server.').css('color', 'red');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|