update

src/pages/en/account.astro

@@ -0,0 +1,74 @@
+---
+import Layout from '@/layouts/Layout.astro'
+import { getI18n } from '@/i18n/utils'
+import { href, ROUTES } from '@/lib/routes'
+const { locale, t } = getI18n(Astro)
+const titleLabel = t('my account')
+const pleaseLabel = t('please log in')
+const loginLabel = t('login')
+const accountLabel = t('account')
+const emailLabel = t('email')
+const signOutLabel = t('sign out')
+const collectionsLabel = t('my collections')
+const historyLabel = t('my history')
+const soonLabel = t('coming soon')
+---
+<Layout title={titleLabel}>
+  <section class="mx-auto w-full max-w-2xl px-6 py-24" x-data="accountPage()" data-locale={locale}>
+    <h1 class="font-serif text-4xl uppercase mb-2">{titleLabel}</h1>
+
+    <div x-show="!user" x-cloak class="mt-10 space-y-4">
+      <p class="text-sm text-zinc-500">{pleaseLabel}</p>
+      <a href={href(locale, ROUTES.login) + '?redirect=' + encodeURIComponent(href(locale, ROUTES.account))}
+        class="inline-block border border-black px-6 py-3 text-[12px] font-bold uppercase tracking-[0.2em] transition-colors hover:bg-black hover:text-white">{loginLabel}</a>
+    </div>
+
+    <div x-show="user" x-cloak class="mt-10">
+      <dl class="space-y-4 text-sm">
+        <div class="flex gap-4 border-b border-zinc-100 pb-3">
+          <dt class="w-32 text-[11px] font-mono uppercase tracking-widest text-zinc-400 pt-1">{accountLabel}</dt>
+          <dd class="font-medium" x-text="user?.username"></dd>
+        </div>
+        <div class="flex gap-4 border-b border-zinc-100 pb-3">
+          <dt class="w-32 text-[11px] font-mono uppercase tracking-widest text-zinc-400 pt-1">{emailLabel}</dt>
+          <dd class="font-medium" x-text="user?.email"></dd>
+        </div>
+      </dl>
+
+      <button @click="logout()" class="mt-8 border border-black px-6 py-3 text-[12px] font-bold uppercase tracking-[0.2em] transition-colors hover:bg-black hover:text-white">{signOutLabel}</button>
+
+      <div class="mt-16 space-y-10">
+        <section>
+          <h2 class="font-serif text-2xl uppercase mb-3">{collectionsLabel}</h2>
+          <p class="text-sm text-zinc-400">{soonLabel}</p>
+        </section>
+        <section>
+          <h2 class="font-serif text-2xl uppercase mb-3">{historyLabel}</h2>
+          <p class="text-sm text-zinc-400">{soonLabel}</p>
+        </section>
+      </div>
+    </div>
+  </section>
+</Layout>
+
+<script>
+  import { getUser, logout as logoutApi } from "@/lib/api"
+  import { clientHref, ROUTES } from "@/lib/routes"
+  document.addEventListener("alpine:init", () => {
+    Alpine.data("accountPage", () => ({
+      user: null,
+      init() {
+        const loc = this.$el.dataset.locale || "en"
+        const u = getUser()
+        if (!u) {
+          window.location.href = clientHref(loc, ROUTES.login) + "?redirect=" + encodeURIComponent(clientHref(loc, ROUTES.account))
+          return
+        }
+        this.user = u
+      },
+      logout() {
+        logoutApi().finally(() => window.location.reload())
+      }
+    }))
+  })
+</script>