219 lines
7.9 KiB
PHP
219 lines
7.9 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>
|
|
|
|
{{-- 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" 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>
|
|
// 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");
|
|
}
|
|
}
|
|
|
|
// Toggle Form Petani
|
|
function toggleForm() {
|
|
var role = document.getElementById('role').value;
|
|
var formPetani = document.getElementById('form-petani');
|
|
formPetani.style.display = (role === 'petani') ? 'block' : 'none';
|
|
}
|
|
|
|
// Real-time Password Validator
|
|
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');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|