61 lines
2.4 KiB
Plaintext
61 lines
2.4 KiB
Plaintext
---
|
|
import { checkPassword, createSession, SESSION_COOKIE, sessionCookieOptions } from "../../lib/auth";
|
|
import { getEnv } from "../../lib/env";
|
|
|
|
export const prerender = false;
|
|
|
|
let error = "";
|
|
|
|
if (Astro.request.method === "POST") {
|
|
const form = await Astro.request.formData();
|
|
const password = String(form.get("password") ?? "");
|
|
const secret = getEnv().ADMIN_PASSWORD!;
|
|
|
|
if (await checkPassword(password, secret)) {
|
|
Astro.cookies.set(SESSION_COOKIE, await createSession(secret), sessionCookieOptions);
|
|
return Astro.redirect("/admin");
|
|
}
|
|
error = "密碼唔啱。";
|
|
}
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>登入後台</title>
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>登入後台</h1>
|
|
{error && <p class="err">{error}</p>}
|
|
<form method="post">
|
|
<label for="password">密碼</label>
|
|
<input id="password" name="password" type="password" autofocus required />
|
|
<div class="actions">
|
|
<button type="submit">登入</button>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|
|
<style is:global>
|
|
:root {
|
|
font-family: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", system-ui, sans-serif;
|
|
color: #1a1917; background: #faf8f4; line-height: 1.65; font-size: 15px;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
|
main { width: 100%; max-width: 360px; padding: 32px; background: #fff; border: 1px solid #e7e2d9; border-radius: 8px; }
|
|
h1 { font-family: "Noto Serif HK", serif; font-size: 20px; font-weight: 900; margin: 0 0 20px; }
|
|
label { display: block; font-size: 13px; color: #6e6862; margin-bottom: 6px; font-weight: 600; }
|
|
input { width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid #e7e2d9; border-radius: 4px; }
|
|
input:focus { outline: 2px solid #fef3c7; border-color: #d97706; }
|
|
button { margin-top: 18px; width: 100%; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 4px; cursor: pointer; border: 1px solid #1a1917; background: #1a1917; color: #fff; }
|
|
button:hover { background: #000; }
|
|
.err { background: #fcebeb; color: #a32d2d; padding: 10px 14px; border-radius: 4px; font-size: 14px; margin: 0 0 16px; }
|
|
</style>
|