banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: login

main
Rohmad Eko Wahyudi 2025-11-12 06:36:20 +07:00
parent c4c3082704
commit 95cea6f52e
No known key found for this signature in database
GPG Key ID: 4CCEDA68CB778BAF
3 changed files with 185 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Controllers/AuthController.cs 100644
View File

@ -0,0 +1,26 @@
using Microsoft.AspNetCore.Mvc;
namespace bank_sampah.Controllers
{
public class AuthController : Controller
{
public IActionResult Login()
{
return View();
}
[HttpPost]
public IActionResult Login(string username, string password)
{
// TODO: Implementasi login validation logic
// Untuk sementara langsung redirect ke dashboard
return Redirect("/Main/Dashboard/Index");
}
public IActionResult ForgotPassword()
{
// TODO: Implementasi forgot password
return View();
}
}
}

158
Views/Auth/Login.cshtml 100644
View File

@ -0,0 +1,158 @@
@{
ViewData["Title"] = "Login";
Layout = "~/Views/Shared/_LayoutRegistrasi.cshtml";
}
<div class="min-h-screen w-full flex flex-col lg:flex-row">
<!-- Left Side - Login Form -->
<div class="w-full lg:w-1/2 flex items-center justify-center px-6 py-12 lg:px-20">
<div class="w-full max-w-md">
<!-- Header -->
<div class="px-2.5 py-4 border-b border-gray-200 flex justify-center mb-6">
<h1 class="text-gray-500 text-lg font-normal leading-7">Masuk ke Akun</h1>
</div>
<!-- Welcome Text -->
<div class="mb-9 text-center">
<h2 class="text-slate-800 text-xl font-semibold leading-8 mb-1">
Selamat Datang di e-Bank Sampah Jakarta
</h2>
<p class="text-slate-600 text-base lg:text-xl font-normal leading-8">
Dinas Lingkungan Hidup Provinsi Jakarta
</p>
</div>
<!-- Login Form -->
<form asp-controller="Auth" asp-action="Login" method="post" class="space-y-10">
<div class="space-y-3.5">
<!-- Username/Email Field -->
<div class="flex flex-col gap-1.5">
<label for="username" class="text-slate-800 text-base font-normal leading-6">
Username/Email
</label>
<input
type="text"
id="username"
name="username"
placeholder="username/email"
required
class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 outline-none focus:border-green-800 focus:ring-2 focus:ring-green-800/20 text-base font-normal leading-6 placeholder:text-gray-400 transition-all"
/>
</div>
<!-- Password Field -->
<div class="flex flex-col gap-1.5">
<label for="password" class="text-slate-800 text-base font-normal leading-6">
Password
</label>
<div class="relative">
<input
type="password"
id="password"
name="password"
placeholder="Password"
required
class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 outline-none focus:border-green-800 focus:ring-2 focus:ring-green-800/20 text-base font-normal leading-6 placeholder:text-gray-400 transition-all pr-12"
/>
<button
type="button"
onclick="togglePassword()"
class="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 transition-colors"
>
<i class="ph ph-eye text-xl" id="toggleIcon"></i>
</button>
</div>
</div>
</div>
<!-- Login Button -->
<button
type="submit"
class="w-full px-8 py-2.5 bg-green-800 hover:bg-green-900 active:bg-green-950 rounded-[99px] text-white text-base font-semibold leading-6 transition-colors"
>
Login
</button>
</form>
<!-- Additional Links -->
<div class="mt-4 flex flex-col items-center gap-4">
<!-- Forgot Password Link -->
<a
asp-controller="Auth"
asp-action="ForgotPassword"
class="text-green-800 hover:text-green-900 text-base font-normal leading-6 transition-colors"
>
Lupa Kata Sandi ?
</a>
<!-- Divider -->
<div class="w-full h-px bg-gray-200"></div>
<!-- Register Link -->
<div class="flex items-center gap-2 flex-wrap justify-center">
<span class="text-slate-800 text-base font-normal leading-6">
Belum memiliki akun ?
</span>
<a
asp-controller="Registrasi"
asp-action="RegisterNasabah"
class="text-green-800 hover:text-green-900 text-base font-normal leading-6 transition-colors"
>
Daftar Sekarang
</a>
</div>
</div>
</div>
</div>
<!-- Right Side - Hero Image -->
<div class="hidden lg:flex lg:w-1/2 relative overflow-hidden">
<!-- Background Image -->
<div class="absolute inset-0 bg-cover bg-center"
style="background-image: url('https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?w=800&q=80');">
</div>
<!-- Overlay -->
<div class="absolute inset-0 bg-black/50"></div>
<!-- Content -->
<div class="relative z-10 flex flex-col justify-end p-20 lg:p-28 pb-32 lg:pb-48">
<div class="flex flex-col gap-8 max-w-xl">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 bg-green-50 rounded-3xl self-start">
<i class="ph-fill ph-check-circle text-green-900"></i>
<span class="text-green-900 text-base font-bold leading-6">Portal Resmi</span>
</div>
<!-- Text Content -->
<div class="flex flex-col gap-2">
<h2 class="text-white text-4xl lg:text-5xl font-semibold leading-tight">
e-Bank Sampah Jakarta
</h2>
<p class="text-white text-lg font-medium leading-7">
Program dari Dinas Lingkungan Hidup Provinsi Jakarta
</p>
</div>
</div>
</div>
</div>
</div>
@section Scripts {
<script>
function togglePassword() {
const passwordInput = document.getElementById('password');
const toggleIcon = document.getElementById('toggleIcon');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
toggleIcon.classList.remove('ph-eye');
toggleIcon.classList.add('ph-eye-slash');
} else {
passwordInput.type = 'password';
toggleIcon.classList.remove('ph-eye-slash');
toggleIcon.classList.add('ph-eye');
}
}
</script>
}

2
Views/Shared/_NavbarLanding.cshtml
View File

@ -24,7 +24,7 @@
</a>
</div>
<div class="flex-1 flex justify-end items-center gap-4">
<a asp-controller="Dashboard" class="px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-[99px] flex justify-center items-center gap-2 transition-colors">
<a asp-controller="Auth" asp-action="Login" class="px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-[99px] flex justify-center items-center gap-2 transition-colors">
<div class="text-white text-base font-semibold font-jakarta leading-6">Login</div>
</a>
</div>