302 lines
18 KiB
Plaintext
302 lines
18 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Daftar";
|
|
Layout = "~/Views/Website/Shared/_AuthLayout.cshtml";
|
|
}
|
|
|
|
@section css {
|
|
<style>
|
|
.bg-auth-signup {
|
|
background-image: radial-gradient(circle at 85% 1%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 96%,transparent 96%, transparent 100%),radial-gradient(circle at 14% 15%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 1%,transparent 1%, transparent 100%),radial-gradient(circle at 60% 90%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 20%,transparent 20%, transparent 100%),radial-gradient(circle at 79% 7%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 78%,transparent 78%, transparent 100%),radial-gradient(circle at 55% 65%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 52%,transparent 52%, transparent 100%),linear-gradient(135deg, rgb(0, 180, 230),rgb(0, 162, 255));
|
|
}
|
|
</style>
|
|
}
|
|
|
|
<div class="min-h-screen bg-auth-signup flex flex-col items-center justify-center p-4 sm:p-6 lg:p-8">
|
|
<div class="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-4xl w-full overflow-hidden">
|
|
<div class="flex flex-col lg:flex-row">
|
|
<div class="lg:w-1/2 bg-gradient-to-br from-cyan-300 to-cyan-500 flex flex-col items-center justify-between p-6 sm:p-8 lg:p-12 min-h-[200px] lg:min-h-[500px] lg:order-2">
|
|
<div class="flex-grow flex items-center justify-center w-full">
|
|
<div class="text-center text-white">
|
|
|
|
<div class="relative">
|
|
<img src="/website/logo.svg" alt="Ilustrasi Login" class="w-full h-20 max-w-xs sm:max-w-md mx-auto">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="mt-4 sm:mt-8 w-full text-center text-xs sm:text-sm text-gray-200">
|
|
© @(DateTime.Now.Year > 2025 ? $"2025 - {DateTime.Now.Year}" : DateTime.Now.Year.ToString()) Dinas Lingkungan Hidup Provinsi DKI Jakarta. All rights reserved.
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="lg:w-1/2 p-6 sm:p-8 lg:p-12 lg:order-1">
|
|
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-6 sm:mb-8">Daftar</h1>
|
|
|
|
<form id="signupForm" method="POST" action="#" class="space-y-4 sm:space-y-6 needs-validation" novalidate autocomplete="off">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Nama Perusahaan/Kegiatan Usaha</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="building-2"></i>
|
|
</div>
|
|
<input type="text" name="company_name" id="company_name" placeholder="Masukan nama perusahaan" class="w-full pl-9 sm:pl-10 pr-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required autofocus>
|
|
</div>
|
|
<div id="company_name_error" class="text-red-500 text-sm hidden mt-1">Nama perusahaan wajib diisi</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="mail"></i>
|
|
</div>
|
|
<input type="email" name="email" id="email" placeholder="Masukan email" class="w-full pl-9 sm:pl-10 pr-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
|
|
</div>
|
|
<div id="email_error" class="text-red-500 text-sm hidden mt-1">Email harus valid</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Jenis Pelaku Usaha</label>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center">
|
|
<input type="checkbox" name="business_type[]" value="jasa_pengangkutan" id="jasa_pengangkutan" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-cyan-300">
|
|
<label for="jasa_pengangkutan" class="ml-2 text-sm font-medium text-gray-700">Jasa Pengangkutan</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input type="checkbox" name="business_type[]" value="jasa_pengolahan" id="jasa_pengolahan" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-cyan-300">
|
|
<label for="jasa_pengolahan" class="ml-2 text-sm font-medium text-gray-700">Jasa Pengolahan</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input type="checkbox" name="business_type[]" value="usaha_kegiatan" id="usaha_kegiatan" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-cyan-300">
|
|
<label for="usaha_kegiatan" class="ml-2 text-sm font-medium text-gray-700">Perusahaan/Kawasan</label>
|
|
</div>
|
|
<div id="business_type_error" class="text-red-500 text-sm hidden">Minimal pilih satu jenis usaha</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="w-4 h-4 text-gray-400 transition-colors duration-300" data-lucide="lock"></i>
|
|
</div>
|
|
<input type="password" name="password" id="password" placeholder="Masukan password" class="w-full pl-9 sm:pl-10 pr-10 sm:pr-12 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePassword('password')">
|
|
<i id="eye-open-password" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400 transition-colors duration-300" data-lucide="eye"></i>
|
|
<i id="eye-closed-password" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400 hidden" data-lucide="eye-off"></i>
|
|
</div>
|
|
</div>
|
|
<div id="password_error" class="text-red-500 text-sm hidden mt-1">Password minimal 8 karakter</div>
|
|
<div class="text-gray-500 text-xs mt-1">
|
|
Password harus minimal 8 karakter, mengandung huruf besar, huruf kecil, angka, dan karakter khusus
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Konfirmasi Password</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="lock-keyhole"></i>
|
|
</div>
|
|
<input type="password" name="password_confirmation" id="password_confirmation" placeholder="Konfirmasi password" class="w-full pl-9 sm:pl-10 pr-10 sm:pr-12 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePassword('password_confirmation')">
|
|
<i id="eye-open-confirm" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="eye"></i>
|
|
<i id="eye-closed-confirm" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400 hidden" data-lucide="eye-off"></i>
|
|
</div>
|
|
</div>
|
|
<div id="password_confirmation_error" class="text-red-500 text-sm hidden mt-1">Password konfirmasi tidak sama</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="flex items-center h-5">
|
|
<input id="terms" name="terms" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-cyan-300" required>
|
|
</div>
|
|
<label for="terms" class="ml-2 text-sm font-medium text-gray-700">
|
|
Saya setuju dengan <a href="#" class="text-cyan-600 hover:underline">Syarat dan Ketentuan</a> yang Berlaku
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full bg-cyan-400 hover:bg-cyan-500 text-white font-semibold py-2.5 sm:py-3 px-6 text-sm sm:text-base rounded-lg transition-colors duration-200">
|
|
Daftar
|
|
</button>
|
|
|
|
<div class="text-center">
|
|
<p class="text-sm text-gray-600">
|
|
Sudah memiliki akun? <a href="/login" class="text-cyan-600 hover:underline">Masuk</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="termsModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg p-6 mx-4 max-w-md w-full">
|
|
<div class="flex items-center mb-4">
|
|
<div class="bg-red-100 rounded-full p-2 mr-3">
|
|
<i class="w-6 h-6 text-red-600" data-lucide="alert-circle"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Perhatian</h3>
|
|
</div>
|
|
<p class="text-gray-600 mb-6">Anda harus menyetujui syarat dan ketentuan untuk melanjutkan pendaftaran.</p>
|
|
<div class="flex justify-end">
|
|
<button onclick="closeTermsModal()" class="bg-cyan-500 hover:bg-cyan-600 text-white px-4 py-2 rounded-lg transition-colors">
|
|
Mengerti
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
function togglePassword(field) {
|
|
const passwordInput = document.getElementById(field);
|
|
const eyeOpen = document.getElementById('eye-open-' + (field === 'password' ? 'password' : 'confirm'));
|
|
const eyeClosed = document.getElementById('eye-closed-' + (field === 'password' ? 'password' : 'confirm'));
|
|
|
|
if (passwordInput.type === 'password') {
|
|
passwordInput.type = 'text';
|
|
eyeOpen.classList.add('hidden');
|
|
eyeClosed.classList.remove('hidden');
|
|
} else {
|
|
passwordInput.type = 'password';
|
|
eyeOpen.classList.remove('hidden');
|
|
eyeClosed.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function showTermsModal() {
|
|
const modal = document.getElementById('termsModal');
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('flex');
|
|
}
|
|
|
|
function closeTermsModal() {
|
|
const modal = document.getElementById('termsModal');
|
|
modal.classList.add('hidden');
|
|
modal.classList.remove('flex');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('signupForm');
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
let isValid = true;
|
|
|
|
hideAllErrors();
|
|
removeErrorBorders();
|
|
|
|
const companyName = document.getElementById('company_name').value.trim();
|
|
if (!companyName) {
|
|
showError('company_name', 'Nama perusahaan wajib diisi');
|
|
isValid = false;
|
|
}
|
|
|
|
const email = document.getElementById('email').value.trim();
|
|
const atSymbol = String.fromCharCode(64);
|
|
if (!email) {
|
|
showError('email', 'Email wajib diisi');
|
|
isValid = false;
|
|
} else if (!email.includes(atSymbol) || email.indexOf(atSymbol) === -1 || email.indexOf('.') === -1) {
|
|
showError('email', 'Email harus valid');
|
|
isValid = false;
|
|
}
|
|
|
|
const businessTypes = document.querySelectorAll('input[name="business_type[]"]:checked');
|
|
if (businessTypes.length === 0) {
|
|
showError('business_type', 'Minimal pilih satu jenis usaha');
|
|
isValid = false;
|
|
}
|
|
|
|
const password = document.getElementById('password').value;
|
|
if (!password) {
|
|
showError('password', 'Password wajib diisi');
|
|
isValid = false;
|
|
} else {
|
|
const hasMinLength = password.length >= 8;
|
|
const hasUppercase = /[A-Z]/.test(password);
|
|
const hasLowercase = /[a-z]/.test(password);
|
|
const hasNumber = /[0-9]/.test(password);
|
|
const specialChars = '!*$#%~()_+-=[];:"\\|,.<>/?';
|
|
const hasSpecialChar = specialChars.split('').some(char => password.includes(char));
|
|
|
|
if (!hasMinLength) {
|
|
showError('password', 'Password minimal 8 karakter');
|
|
isValid = false;
|
|
} else if (!hasUppercase) {
|
|
showError('password', 'Password harus mengandung huruf besar');
|
|
isValid = false;
|
|
} else if (!hasLowercase) {
|
|
showError('password', 'Password harus mengandung huruf kecil');
|
|
isValid = false;
|
|
} else if (!hasNumber) {
|
|
showError('password', 'Password harus mengandung angka');
|
|
isValid = false;
|
|
} else if (!hasSpecialChar) {
|
|
showError('password', 'Password harus mengandung karakter khusus');
|
|
isValid = false;
|
|
}
|
|
}
|
|
|
|
const passwordConfirmation = document.getElementById('password_confirmation').value;
|
|
if (!passwordConfirmation) {
|
|
showError('password_confirmation', 'Konfirmasi password wajib diisi');
|
|
isValid = false;
|
|
} else if (password !== passwordConfirmation) {
|
|
showError('password_confirmation', 'Password konfirmasi tidak sama');
|
|
isValid = false;
|
|
}
|
|
|
|
const terms = document.getElementById('terms');
|
|
if (!terms.checked) {
|
|
showTermsModal();
|
|
isValid = false;
|
|
}
|
|
|
|
if (isValid) {
|
|
console.log('Form is valid, ready to submit');
|
|
form.submit();
|
|
}
|
|
});
|
|
|
|
function showError(fieldName, message) {
|
|
const errorElement = document.getElementById(fieldName + '_error');
|
|
const inputElement = document.getElementById(fieldName);
|
|
|
|
if (errorElement) {
|
|
errorElement.textContent = message;
|
|
errorElement.classList.remove('hidden');
|
|
}
|
|
|
|
if (inputElement) {
|
|
inputElement.classList.add('border-red-500');
|
|
inputElement.classList.remove('border-gray-300');
|
|
}
|
|
}
|
|
|
|
function hideAllErrors() {
|
|
const errorElements = document.querySelectorAll('[id$="_error"]');
|
|
errorElements.forEach(element => {
|
|
element.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
function removeErrorBorders() {
|
|
const inputElements = document.querySelectorAll('input, select');
|
|
inputElements.forEach(element => {
|
|
element.classList.remove('border-red-500');
|
|
element.classList.add('border-gray-300');
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
} |