Files
cpone_dashboard/cpone-dashboard/templates/auth/password.html
2026-04-30 14:27:01 +07:00

106 lines
4.4 KiB
HTML

{{define "password"}}
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Ganti Password — CpOne Dashboard</title>
<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:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] },
colors: {
brand: {
50: '#eef0fb',
100: '#dde2f7',
200: '#bbc5ef',
300: '#8f9fe4',
400: '#6677d6',
500: '#3b50a0',
600: '#2d3d7a',
700: '#212d5a',
800: '#161e3c',
900: '#0b0f1e',
}
}
}
}
}
</script>
</head>
<body class="min-h-screen bg-slate-100 font-sans text-slate-800">
<!-- Header -->
<header class="bg-brand-500 text-white">
<div class="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
<a href="{{b "/projects"}}" class="shrink-0 rounded-lg bg-white px-3 py-1.5">
<img src="{{b "/static/img/logo.png"}}" alt="Logo" class="h-8 w-auto">
</a>
<div class="flex items-center gap-2 text-sm">
<span class="rounded-full bg-white/15 px-3 py-1 text-xs font-semibold tracking-wide">{{.Username}}</span>
<a href="{{b "/logout"}}" class="rounded-lg px-3 py-1.5 font-medium opacity-75 transition hover:bg-white/15 hover:opacity-100">Logout</a>
</div>
</div>
</header>
<main class="mx-auto w-full max-w-md px-4 py-10 sm:px-6">
<div class="mb-6">
<a href="{{b "/projects"}}" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
</svg>
Kembali
</a>
</div>
<div class="rounded-2xl border border-slate-200 bg-white p-7 shadow-sm">
<h1 class="mb-1 text-lg font-semibold">Ganti Password</h1>
<p class="mb-6 text-sm text-slate-500">Masukkan password saat ini untuk verifikasi, lalu isi password baru.</p>
{{if .Error}}
<div class="mb-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
{{.Error}}
</div>
{{end}}
{{if .Success}}
<div class="mb-5 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
{{.Success}}
</div>
{{end}}
<form method="POST" action="{{b "/password"}}" class="space-y-4">
<div class="space-y-1.5">
<label for="current_password" class="block text-sm font-medium">Password Saat Ini</label>
<input id="current_password" name="current_password" type="password" required
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20"/>
</div>
<div class="space-y-1.5">
<label for="new_password" class="block text-sm font-medium">Password Baru</label>
<input id="new_password" name="new_password" type="password" required minlength="6"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20"/>
</div>
<div class="space-y-1.5">
<label for="confirm_password" class="block text-sm font-medium">Konfirmasi Password Baru</label>
<input id="confirm_password" name="confirm_password" type="password" required minlength="6"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20"/>
</div>
<button type="submit"
class="w-full rounded-xl bg-brand-500 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-600 active:bg-brand-700">
Simpan Password Baru
</button>
</form>
</div>
</main>
</body>
</html>
{{end}}