toom1996
74
src/pages/cn/account.astro
Normal file
74
src/pages/cn/account.astro
Normal file
@ -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>
|
||||
69
src/pages/cn/login.astro
Normal file
69
src/pages/cn/login.astro
Normal file
@ -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>
|
||||
74
src/pages/en/account.astro
Normal file
74
src/pages/en/account.astro
Normal file
@ -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>
|
||||
69
src/pages/en/login.astro
Normal file
69
src/pages/en/login.astro
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user