update

src/pages/cn/login.astro

@@ -0,0 +1,69 @@
+---
+import Layout from '@/layouts/Layout.astro'
+import { getI18n } from '@/i18n/utils'
+const { locale, t } = getI18n(Astro)
+const loginLabel = t('login')
+const promptLabel = t('login prompt')
+const accountLabel = t('username or email')
+const passwordLabel = t('password')
+const failLabel = t('login failed')
+---
+<Layout title={loginLabel}>
+  <section class="mx-auto w-full max-w-md px-6 py-24">
+    <h1 class="font-serif text-4xl tracking-tight uppercase mb-2">{loginLabel}</h1>
+    <p class="text-[11px] font-mono uppercase tracking-widest text-zinc-400 mb-10">{promptLabel}</p>
+
+    <form x-data="loginForm()" data-locale={locale} data-fail-label={failLabel} @submit.prevent="submit()" class="space-y-8" novalidate>
+      <div>
+        <label class="block text-[11px] font-mono uppercase tracking-widest text-zinc-500 mb-2">{accountLabel}</label>
+        <input type="text" x-model="account" autocomplete="username" required
+          class="w-full bg-transparent border-0 border-b border-black/30 rounded-none px-0 py-2 text-sm outline-none focus:border-black focus:ring-0" />
+      </div>
+      <div>
+        <label class="block text-[11px] font-mono uppercase tracking-widest text-zinc-500 mb-2">{passwordLabel}</label>
+        <input type="password" x-model="password" autocomplete="current-password" required
+          class="w-full bg-transparent border-0 border-b border-black/30 rounded-none px-0 py-2 text-sm outline-none focus:border-black focus:ring-0" />
+      </div>
+
+      <p x-show="error" x-text="error" x-cloak class="text-xs text-red-600 uppercase tracking-wide"></p>
+
+      <button type="submit" :disabled="loading"
+        class="w-full border border-black py-3 text-[12px] font-bold uppercase tracking-[0.2em] transition-colors hover:bg-black hover:text-white disabled:opacity-40">
+        <span x-show="!loading">{loginLabel}</span>
+        <span x-show="loading" x-cloak>…</span>
+      </button>
+    </form>
+  </section>
+</Layout>
+
+<script>
+  import { login, getUser } from "@/lib/api"
+  import { clientHref, ROUTES } from "@/lib/routes"
+  document.addEventListener("alpine:init", () => {
+    Alpine.data("loginForm", () => ({
+      account: "",
+      password: "",
+      error: "",
+      loading: false,
+      init() {
+        if (getUser()) {
+          const loc = this.$el.dataset.locale || "en"
+          window.location.href = clientHref(loc, ROUTES.account)
+        }
+      },
+      submit() {
+        this.error = ""
+        this.loading = true
+        login({ account: this.account, password: this.password })
+          .then(() => {
+            const params = new URLSearchParams(window.location.search)
+            const redirect = params.get("redirect")
+            const loc = this.$el.dataset.locale || "en"
+            window.location.href = redirect || clientHref(loc, ROUTES.account)
+          })
+          .catch(() => { this.error = this.$el.dataset.failLabel || "login failed" })
+          .finally(() => { this.loading = false })
+      }
+    }))
+  })
+</script>