remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(auth): align login and register with themed intro, translated social cards
CI / check (push) Successful in 4m15s
Details
CI / preflight (push) Skipped
Details
CI / deploy (push) Successful in 1m52s
Details

Browse Source
This commit is contained in:
openhands committed 2026-09-18 13:35:22 +02:00
1 parent 469f69ddd7
commit d6111387e4
4 files changed
+30 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/login/page.tsx
+16 -12
View File
@@ -16,7 +16,6 @@ import { ICON_FRIENDS, ICON_NAV_GOODY, ICON_NAV_ME } from "@/lib/site-icons";
export default async function LoginPage() {
const t = await getTranslations("pages.login");
const th = await getTranslations("header");
const [hotelName, cfg, logo] = await Promise.all([
resolveHotelName(),
captchaConfig(),
@@ -51,24 +50,29 @@ export default async function LoginPage() {
<AuthTopBar hotelName={hotelName} logo={logo} />
<Reveal>
<div className="flex flex-col gap-8 lg:flex-row">
<div className="flex flex-col gap-8 lg:flex-row lg:items-start">
{/* Left panel */}
<div className="lg:w-80 shrink-0 space-y-4">
<div className="lg:w-96 shrink-0 space-y-4">
<SurfaceCard
className="card-glow relative p-6 text-center"
className="card-glow relative overflow-hidden p-6 text-center"
style={{
borderColor:
"color-mix(in srgb, var(--color-primary) 20%, transparent)",
background: `url(/assets/images/background.png) center/cover no-repeat`,
}}
>
<div
className="absolute inset-0"
style={{
background:
"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent))",
}}
/>
<div
aria-hidden="true"
className="absolute inset-0 overflow-hidden"
>
<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
</div>
<div className="relative">
<div className="brand-halo left-1/2 top-8 h-52 w-52 -translate-x-1/2" />
<Image
@@ -95,7 +99,7 @@ export default async function LoginPage() {
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
</span>
{th("online", { count: online, hotel: "" }).trim()}
{t("usersOnline", { count: online })}
</div>
<h1
className="text-xl font-black"
@@ -117,7 +121,7 @@ export default async function LoginPage() {
{recentUsers.length > 0 && (
<SurfaceCard
title={th("online", { count: online, hotel: "" }).trim()}
title={t("whoIsOnline")}
icon={ICON_NAV_GOODY}
bodyClassName="p-4"
className="card-glow"
@@ -126,7 +130,7 @@ export default async function LoginPage() {
{recentUsers.map((u) => (
<div
key={u.username}
className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5"
className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
style={{
background:
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
@@ -154,7 +158,7 @@ export default async function LoginPage() {
{latestUsers.length > 0 && (
<SurfaceCard
title="Newest citizens"
title={t("newestCitizens")}
icon={ICON_FRIENDS}
bodyClassName="p-4"
className="card-glow"
@@ -163,7 +167,7 @@ export default async function LoginPage() {
{latestUsers.map((u) => (
<div
key={u.username}
className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5"
className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
style={{
background:
"color-mix(in srgb, var(--color-primary) 4%, transparent)",
@@ -191,7 +195,7 @@ export default async function LoginPage() {
</div>
{/* Right: form */}
<div className="flex-1">
<div className="flex-1 lg:sticky lg:top-6">
<SurfaceCard
title={t("title")}
icon={ICON_NAV_ME}
src/app/(site)/register/page.tsx
+6 -2
View File
@@ -101,7 +101,10 @@ export default async function RegisterPage() {
"var(--color-primary-readable, var(--color-primary))",
}}
>
<span className="w-2 h-2 rounded-full bg-primary" />
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
</span>
{tpr("usersOnline", { count: online })}
</div>
<h1
@@ -111,7 +114,8 @@ export default async function RegisterPage() {
fontFamily: "var(--font-nunito)",
}}
>
{tpr("title")} — {hotelName}
{tpr("title")} —{" "}
<span className="gradient-text">{hotelName}</span>
</h1>
<p
className="text-xs mt-1.5 leading-relaxed"
src/messages/en.json
+4 -1
View File
@@ -977,7 +977,10 @@
"errorInvalidCredentials": "Invalid username or password",
"errorInvalid2fa": "Invalid 2FA code",
"errorUnverified": "Please verify your email before signing in.",
"errorCaptcha": "Captcha verification failed. Please try again."
"errorCaptcha": "Captcha verification failed. Please try again.",
"whoIsOnline": "Who's online",
"newestCitizens": "Newest citizens",
"usersOnline": "{count} online"
},
"register": {
"title": "Create account",
src/messages/it.json
+4 -1
View File
@@ -951,7 +951,10 @@
"errorUnverified": "Verifica la tua email prima di accedere.",
"errorCaptcha": "Verifica captcha non riuscita. Riprova.",
"welcomeBack": "Bentornato",
"welcomeBackSub": "Accedi per continuare su {hotelName}"
"welcomeBackSub": "Accedi per continuare su {hotelName}",
"whoIsOnline": "Chi è online",
"newestCitizens": "Nuovi cittadini",
"usersOnline": "{count} online"
},
"register": {
"title": "Crea un account",