feat: registrasi nasabah
Rohmad Eko Wahyudi
parent
07021a53e3
commit
c4c3082704
|
|
@ -0,0 +1,56 @@
|
|||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace BankSampahApp.Controllers.Registrasi
|
||||
{
|
||||
[Route("[controller]/[action]")]
|
||||
public class RegistrasiController : Controller
|
||||
{
|
||||
private readonly ILogger<RegistrasiController> _logger;
|
||||
|
||||
public RegistrasiController(ILogger<RegistrasiController> logger)
|
||||
{
|
||||
_logger = logger;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Halaman register nasabah
|
||||
/// </summary>
|
||||
[HttpGet]
|
||||
public IActionResult RegisterNasabah()
|
||||
{
|
||||
return View("~/Views/Registrasi/RegisterNasabah.cshtml");
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Handle form submission register nasabah
|
||||
/// </summary>
|
||||
[HttpPost]
|
||||
public IActionResult RegisterNasabah(RegisterNasabahViewModel model)
|
||||
{
|
||||
if (!ModelState.IsValid)
|
||||
{
|
||||
return View("~/Views/Registrasi/RegisterNasabah.cshtml", model);
|
||||
}
|
||||
|
||||
// TODO: Implement registration logic
|
||||
// For now, just log and redirect
|
||||
_logger.LogInformation("New customer registration attempt: {Username}", model.Username);
|
||||
|
||||
TempData["SuccessMessage"] = "Pendaftaran berhasil! Silakan login.";
|
||||
return RedirectToAction("Login", "Account");
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// ViewModel untuk form register nasabah
|
||||
/// </summary>
|
||||
public class RegisterNasabahViewModel
|
||||
{
|
||||
public string NamaLengkap { get; set; } = string.Empty;
|
||||
public string AlamatEmail { get; set; } = string.Empty;
|
||||
public string JenisNasabah { get; set; } = string.Empty;
|
||||
public string Username { get; set; } = string.Empty;
|
||||
public string Password { get; set; } = string.Empty;
|
||||
public string ConfirmPassword { get; set; } = string.Empty;
|
||||
}
|
||||
}
|
||||
|
|
@ -34,14 +34,14 @@
|
|||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="flex flex-col sm:flex-row justify-start items-start gap-4">
|
||||
<button class="btn-custom px-8 py-3 bg-green-800 hover:bg-green-700 rounded-full flex justify-center items-center gap-2 transition-colors">
|
||||
<a href="/Registrasi/RegisterNasabah" class="btn-custom px-8 py-3 bg-green-800 hover:bg-green-700 rounded-full flex justify-center items-center gap-2 transition-colors">
|
||||
<span class="text-white text-base font-semibold font-jakarta">Pendaftaran Nasabah</span>
|
||||
<div class="w-5 h-5 relative">
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</a>
|
||||
<button class="btn-custom px-8 py-3 bg-white/10 hover:bg-white/20 rounded-full border border-gray-300 flex justify-center items-center gap-2 transition-colors">
|
||||
<span class="text-white text-base font-semibold font-jakarta">Pendaftaran Bank Sampah</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,222 @@
|
|||
@{
|
||||
ViewData["Title"] = "Register Nasabah";
|
||||
}
|
||||
|
||||
<div class="min-h-screen bg-white">
|
||||
<div class="flex flex-col lg:flex-row min-h-screen">
|
||||
<!-- Left Section - Form -->
|
||||
<div class="w-full lg:w-1/2 px-6 sm:px-12 md:px-20 pt-10 md:pt-14 pb-20 md:pb-28 bg-white flex flex-col justify-center items-center">
|
||||
<div class="w-full max-w-md">
|
||||
<!-- Header -->
|
||||
<div class="px-2.5 py-4 bg-white rounded-tl-lg rounded-tr-lg border-b border-gray-200 flex justify-center items-center gap-2.5 mb-6">
|
||||
<div class="text-gray-500 text-lg font-normal font-jakarta leading-7">Register Nasabah</div>
|
||||
</div>
|
||||
|
||||
<!-- Title Section -->
|
||||
<div class="flex flex-col justify-start items-center mb-9">
|
||||
<h1 class="text-slate-800 text-xl font-semibold font-jakarta leading-8 text-center">
|
||||
Selamat Datang di e-Bank Sampah Jakarta
|
||||
</h1>
|
||||
<p class="text-slate-600 text-xl font-normal font-jakarta leading-8 text-center">
|
||||
Dinas Lingkungan Hidup Provinsi Jakarta
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Form Section -->
|
||||
<form class="flex flex-col justify-start items-center gap-4">
|
||||
<!-- Nama Lengkap -->
|
||||
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
||||
<label for="namaLengkap" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
||||
Nama Lengkap
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="namaLengkap"
|
||||
name="namaLengkap"
|
||||
placeholder="Nama lengkap"
|
||||
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Alamat Email -->
|
||||
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
||||
<label for="alamatEmail" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
||||
Alamat Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="alamatEmail"
|
||||
name="alamatEmail"
|
||||
placeholder="Alamat email"
|
||||
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Jenis Nasabah -->
|
||||
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
||||
<label for="jenisNasabah" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
||||
Jenis Nasabah
|
||||
</label>
|
||||
<div class="relative w-full">
|
||||
<select
|
||||
id="jenisNasabah"
|
||||
name="jenisNasabah"
|
||||
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-400 text-base font-normal font-jakarta leading-6 focus:outline-green-800 focus:outline-2 appearance-none cursor-pointer"
|
||||
>
|
||||
<option value="">Pilih jenis nasabah</option>
|
||||
<option value="individu">Individu</option>
|
||||
<option value="kelompok">Kelompok</option>
|
||||
<option value="perusahaan">Perusahaan</option>
|
||||
</select>
|
||||
<div class="absolute right-3.5 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<i class="ph ph-caret-down text-gray-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Username -->
|
||||
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
||||
<label for="username" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="Username"
|
||||
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
||||
<label for="password" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
||||
Password
|
||||
</label>
|
||||
<div class="relative w-full">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
||||
/>
|
||||
<button type="button" class="absolute right-3.5 top-1/2 -translate-y-1/2" onclick="togglePassword('password')">
|
||||
<i class="ph ph-eye text-gray-500 text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Konfirmasi Password -->
|
||||
<div class="w-full flex flex-col justify-start items-start gap-1.5 mb-6">
|
||||
<label for="confirmPassword" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
||||
Konfirmasi Password
|
||||
</label>
|
||||
<div class="relative w-full">
|
||||
<input
|
||||
type="password"
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
placeholder="Konfirmasi password"
|
||||
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
||||
/>
|
||||
<button type="button" class="absolute right-3.5 top-1/2 -translate-y-1/2" onclick="togglePassword('confirmPassword')">
|
||||
<i class="ph ph-eye text-gray-500 text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Register Button -->
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-full flex justify-center items-center gap-2 transition-colors"
|
||||
>
|
||||
<span class="text-white text-base font-semibold font-jakarta leading-6">Register</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Footer Links -->
|
||||
<div class="flex flex-col justify-center items-center gap-4 mt-6">
|
||||
<!-- Login Link -->
|
||||
<div class="flex justify-start items-center gap-2">
|
||||
<span class="text-slate-800 text-base font-normal font-jakarta leading-6">Sudah punya akun?</span>
|
||||
<a href="/Account/Login" class="text-green-800 text-base font-normal font-jakarta leading-6 hover:underline">Login</a>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="w-full h-px bg-gray-200"></div>
|
||||
|
||||
<!-- Back to Home -->
|
||||
<div class="flex justify-start items-center gap-2">
|
||||
<span class="text-slate-800 text-base font-normal font-jakarta leading-6">Kembali ke</span>
|
||||
<a href="/" class="text-green-800 text-base font-normal font-jakarta leading-6 hover:underline">Beranda</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Section - Image with Overlay -->
|
||||
<div class="hidden lg:flex lg:w-1/2 relative bg-cover bg-center overflow-hidden" style="background-image: url('/images/bg-landing-page-header.png');">
|
||||
<!-- Dark Overlay -->
|
||||
<div class="absolute inset-0 bg-black/50"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative z-10 px-28 pt-28 pb-48 flex items-end">
|
||||
<div class="flex flex-col justify-start items-start gap-8">
|
||||
<!-- Portal Resmi Badge -->
|
||||
<div class="px-4 py-2 bg-green-50 rounded-3xl flex justify-center items-center gap-2">
|
||||
<div class="w-4 h-4 relative">
|
||||
<div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-900 rounded-full"></div>
|
||||
</div>
|
||||
<span class="text-green-900 text-base font-bold font-jakarta leading-6">Portal Resmi</span>
|
||||
</div>
|
||||
|
||||
<!-- Title and Subtitle -->
|
||||
<div class="flex flex-col justify-start items-start gap-2">
|
||||
<h2 class="text-white text-5xl font-semibold font-jakarta leading-[60px]">
|
||||
e-Bank Sampah Jakarta
|
||||
</h2>
|
||||
<p class="text-white text-lg font-medium font-jakarta leading-7">
|
||||
Program dari Dinas Lingkungan Hidup Provinsi Jakarta
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
function togglePassword(inputId) {
|
||||
const input = document.getElementById(inputId);
|
||||
const icon = input.nextElementSibling.querySelector('i');
|
||||
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
icon.classList.remove('ph-eye');
|
||||
icon.classList.add('ph-eye-slash');
|
||||
} else {
|
||||
input.type = 'password';
|
||||
icon.classList.remove('ph-eye-slash');
|
||||
icon.classList.add('ph-eye');
|
||||
}
|
||||
}
|
||||
|
||||
// Form validation
|
||||
document.querySelector('form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const password = document.getElementById('password').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
alert('Password dan konfirmasi password tidak cocok!');
|
||||
return;
|
||||
}
|
||||
|
||||
// Add your form submission logic here
|
||||
console.log('Form submitted');
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<div class="col-span-1">
|
||||
<h3 class="text-lg font-bold font-jakarta mb-4">Layanan</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="text-gray-400 hover:text-white font-jakarta text-sm">Pendaftaran Nasabah</a></li>
|
||||
<li><a href="/Registrasi/RegisterNasabah" class="text-gray-400 hover:text-white font-jakarta text-sm">Pendaftaran Nasabah</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white font-jakarta text-sm">Pendaftaran Bank Sampah</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white font-jakarta text-sm">Lokasi Bank Sampah</a></li>
|
||||
<li><a href="/Account/Login" class="text-gray-400 hover:text-white font-jakarta text-sm">Login</a></li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@ViewData["Title"] - E-Bank Sampah</title>
|
||||
|
||||
<!-- Meta tags untuk SEO -->
|
||||
<meta name="description" content="Aplikasi E-Bank Sampah untuk mengelola sampah dan mendapatkan reward">
|
||||
<meta name="keywords" content="bank sampah, recycle, environment, go green, sampah">
|
||||
<meta name="author" content="E-Bank Sampah">
|
||||
|
||||
<!-- Open Graph Meta Tags -->
|
||||
<meta property="og:title" content="@ViewData["Title"] - E-Bank Sampah">
|
||||
<meta property="og:description" content="Kelola sampah Anda dengan mudah dan dapatkan reward!">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<!-- Phosphor Icons -->
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://cdn.jsdelivr.net/npm/@@phosphor-icons/web@2.1.2/src/regular/style.css" />
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://cdn.jsdelivr.net/npm/@@phosphor-icons/web@2.1.2/src/fill/style.css" />
|
||||
|
||||
<!-- Material Icon -->
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
</head>
|
||||
|
||||
<body class="min-h-dvh bg-white font-sans antialiased">
|
||||
<!-- Halaman registrasi tanpa navbar dan footer -->
|
||||
<main>
|
||||
@RenderBody()
|
||||
</main>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="~/js/site.js" asp-append-version="true"></script>
|
||||
@await RenderSectionAsync("Scripts", required: false)
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -2,11 +2,16 @@
|
|||
// Tentukan layout berdasarkan controller
|
||||
var controller = ViewContext.RouteData.Values["controller"]?.ToString();
|
||||
|
||||
// Landing page menggunakan layout yang berbeda
|
||||
// Landing page menggunakan layout dengan navbar dan footer
|
||||
if (controller == "Home")
|
||||
{
|
||||
Layout = "_Layout";
|
||||
}
|
||||
// Halaman registrasi menggunakan layout tanpa navbar dan footer
|
||||
else if (controller == "Registrasi")
|
||||
{
|
||||
Layout = "_LayoutRegistrasi";
|
||||
}
|
||||
else
|
||||
{
|
||||
// Semua halaman aplikasi menggunakan layout dengan sidebar
|
||||
|
|
|
|||
Loading…
Reference in New Issue