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

feat: premium polish pass — typing effect, animated counters, ambient orbs, input glow, show/hide password, redesigned settings, Reveal animations
Deploy / release (push) Skipped
Details
Deploy / deploy (push) Successful in 1m53s
Details

Browse Source 
- Add TypewriterText component for hero heading animation
- Add AnimatedCounter with scroll-triggered count-up
- Add AmbientOrbs with floating gradient orbs in hero
- Add input-glow focus effect, btn-shine hover effect CSS
- Add show/hide password toggle on login, register, and home login forms
- Redesign settings page with premium gradient cards and icon headers
- Polish /me dashboard with Reveal animations, btn-shine, input-glow
- Add animate-count CSS keyframe
This commit is contained in:
openhands committed 2026-07-24 13:34:46 +02:00
1 parent 5fa342018d
commit b37b6bc2b9
10 files changed
+569 -150
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/me/page.tsx
+15 -4
View File
@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
import type { CSSProperties, ReactNode } from "react";
import { claimReferral } from "@/actions/referral";
import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
import { Reveal } from "@/components/motion-reveal";
import { auth } from "@/lib/auth";
import { avatarImageUrl } from "@/lib/format";
import { resolveHotelName } from "@/lib/hotel-name";
@@ -189,6 +190,7 @@ export default async function MePage({
) : null}
{/* ── Profile header ── */}
<Reveal>
<div
className="rounded-2xl border p-6 flex flex-col sm:flex-row items-center sm:items-start gap-6"
style={{
@@ -233,11 +235,13 @@ export default async function MePage({
</p>
</div>
</div>
</Reveal>
{/* ── Enter hotel ── */}
<Reveal delay={0.05}>
<Link
href="/client"
className="flex items-center justify-center gap-3 rounded-2xl border py-4 px-6 font-extrabold text-base transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
className="btn-shine flex items-center justify-center gap-3 rounded-2xl border py-4 px-6 font-extrabold text-base transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
@@ -254,9 +258,11 @@ export default async function MePage({
/>
Enter {hotelName}
</Link>
</Reveal>
{/* ── Stat tiles ── */}
<div className="grid grid-cols-3 gap-4">
<Reveal delay={0.1}>
<div className="grid grid-cols-3 gap-4 stagger-children">
{[
{ value: user.credits.toLocaleString(), label: "Credits" },
{ value: `Rank ${user.rank}`, label: "Hotel rank" },
@@ -285,8 +291,10 @@ export default async function MePage({
</div>
))}
</div>
</Reveal>
{/* ── Online friends ── */}
<Reveal delay={0.15}>
<div
className="rounded-2xl border p-5"
style={{
@@ -374,8 +382,10 @@ export default async function MePage({
</div>
)}
</div>
</Reveal>
{/* ── Referral card ── */}
<Reveal delay={0.2}>
<div
className="rounded-2xl border p-5"
style={{
@@ -419,7 +429,7 @@ export default async function MePage({
type="text"
readOnly
defaultValue={referralLink}
className="flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
className="input-glow flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable, var(--color-text))",
@@ -434,7 +444,7 @@ export default async function MePage({
<form action={claimReferral}>
<button
type="submit"
className="w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
@@ -459,6 +469,7 @@ export default async function MePage({
)}
</div>
</div>
</Reveal>
</div>
);
} catch {
src/app/(site)/page.tsx
+10 -6
View File
@@ -16,6 +16,9 @@ import { LanguageSwitcher } from "@/components/language-switcher";
import { HomeLoginForm } from "@/components/auth/home-login-form";
import { Reveal } from "@/components/motion-reveal";
import { Clock } from "@/components/clock";
import { TypewriterText } from "@/components/typewriter-text";
import { AnimatedCounter } from "@/components/animated-counter";
import { AmbientOrbs } from "@/components/ambient-orbs";
export const revalidate = 120;
@@ -125,7 +128,8 @@ export default async function Home() {
background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 90%, transparent) 0%, color-mix(in srgb, var(--color-surface) 35%, transparent) 50%, color-mix(in srgb, var(--color-surface) 10%, transparent) 100%)",
}}
/>
<div className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14">
<AmbientOrbs />
<div className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14" style={{ zIndex: 2 }}>
<div className="flex-1 text-center md:text-left">
<div
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border backdrop-blur-sm"
@@ -145,7 +149,7 @@ export default async function Home() {
className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
>
{tp("welcome", { hotelName })}
<TypewriterText text={tp("welcome", { hotelName })} />
</h1>
<p
className="text-base md:text-lg leading-relaxed max-w-xl mb-7"
@@ -202,9 +206,9 @@ export default async function Home() {
<Reveal>
<div className="grid grid-cols-3 gap-4 stagger-children">
{[
{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
{ value: online, label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
{ value: users, label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
{ value: rooms, label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
].map((s) => (
<div
key={s.label}
@@ -228,7 +232,7 @@ export default async function Home() {
<Image src={s.icon} alt="" width={24} height={24} unoptimized />
</div>
<div className="text-3xl md:text-4xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
{s.value}
<AnimatedCounter value={s.value} />
</div>
<div className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
{s.label}
src/app/(site)/settings/page.tsx
+213 -74
View File
@@ -1,8 +1,9 @@
import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { updateMotto } from "@/actions/user-settings";
import { ContentCard } from "@/components/public/ui";
import { Reveal } from "@/components/motion-reveal";
import { auth } from "@/lib/auth";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
@@ -39,95 +40,233 @@ export default async function SettingsPage() {
imagerBase =
(await siteSettings.get("habbo_imaging_url", imagerBase)) ?? imagerBase;
} catch {
// fall back to the default imager base
/* fall back to default */
}
const avatar = avatarImageUrl(imagerBase, user.look, { size: "l" });
return (
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="⚙️"
title={t("accountSettings")}
subtitle={t("accountSettingsSubtitle")}
/>
<ContentCard
icon="🙂"
title={user.username}
subtitle={t("publicProfile")}
>
<div className="flex flex-col gap-6 pb-14">
{/* Header */}
<Reveal>
<div
className="relative overflow-hidden rounded-xl border px-5 py-4"
style={{
display: "flex",
gap: "1.5rem",
alignItems: "center",
flexWrap: "wrap",
background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
backdropFilter: "blur(14px)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
className="avatar"
src={avatar}
alt={`${user.username} avatar`}
width={100}
height={150}
/>
<div style={{ minWidth: 0 }}>
<p style={{ margin: "0 0 0.5rem", fontSize: "1.05rem" }}>
{user.motto || <span className="muted">{t("noMotto")}</span>}
</p>
<p className="muted" style={{ margin: 0 }}>
{user.mail || t("noEmail")}
</p>
<div className="flex items-center gap-3">
<div
className="w-10 h-10 rounded-xl flex items-center justify-center"
style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
>
<Image src="/assets/images/icons/navigation/me.png" alt="" width={22} height={22} unoptimized />
</div>
<div>
<h1
className="text-lg font-black tracking-tight"
style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
>
{t("accountSettings")}
</h1>
<p className="text-xs" style={{ color: "var(--color-text-muted)" }}>
{t("accountSettingsSubtitle")}
</p>
</div>
</div>
</div>
</ContentCard>
</Reveal>
<ContentCard
icon="✏️"
title={t("changeMotto")}
subtitle={t("changeMottoSubtitle")}
>
<form
action={updateMotto}
{/* Profile card */}
<Reveal delay={0.05}>
<div
className="overflow-hidden rounded-xl border card-premium"
style={{
display: "flex",
flexDirection: "column",
gap: "0.75rem",
maxWidth: 520,
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
}}
>
<input
name="motto"
defaultValue={user.motto}
maxLength={127}
placeholder={t("mottoPlaceholder")}
aria-label="Motto"
/>
<div>
<button type="submit" className="btn btn-primary">
{t("saveMotto")}
</button>
<div
className="flex items-center gap-2.5 px-4 py-3"
style={{
background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
}}
>
<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
{t("publicProfile")}
</h2>
</div>
<div
className="p-5 flex items-center gap-5"
style={{ backgroundColor: "var(--color-surface)" }}
>
<div className="shrink-0">
<div className="rounded-xl overflow-hidden border" style={{ borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)" }}>
<Image
src={avatar}
alt={`${user.username} avatar`}
width={80}
height={120}
className="block"
unoptimized
/>
</div>
</div>
<div className="min-w-0 flex-1">
<h3 className="text-base font-extrabold" style={{ color: "var(--color-text-readable)" }}>
{user.username}
</h3>
<p className="text-sm mt-0.5" style={{ color: "var(--color-text-muted)" }}>
{user.motto || <span style={{ fontStyle: "italic", opacity: 0.5 }}>{t("noMotto")}</span>}
</p>
<p className="text-xs mt-1.5 font-medium" style={{ color: "color-mix(in srgb, var(--color-text-muted) 70%, transparent)" }}>
{user.mail || t("noEmail")}
</p>
</div>
</div>
</form>
</ContentCard>
<div className="card-grid sm-2">
<ContentCard
icon="🔒"
title={t("securityTitle")}
subtitle={t("securitySubtitle")}
>
<p className="muted" style={{ marginTop: 0 }}>
{t("securityDescription")}
</p>
<Link href="/settings/2fa" className="btn btn-outline">
{t("twoFactorLink")}
</Link>
</ContentCard>
</div>
</main>
</Reveal>
{/* Motto form */}
<Reveal delay={0.1}>
<div
className="overflow-hidden rounded-xl border"
style={{
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
}}
>
<div
className="flex items-center gap-2.5 px-4 py-3"
style={{
background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
}}
>
<Image src="/assets/images/icons/star.gif" alt="" width={18} height={18} unoptimized />
<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
{t("changeMotto")}
</h2>
</div>
<div
className="p-5"
style={{ backgroundColor: "var(--color-surface)" }}
>
<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
{t("changeMottoSubtitle")}
</p>
<form
action={updateMotto}
className="flex flex-col gap-3"
style={{ maxWidth: 520 }}
>
<input
name="motto"
defaultValue={user.motto}
maxLength={127}
placeholder={t("mottoPlaceholder")}
aria-label="Motto"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
/>
<div>
<button
type="submit"
className="btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-5 py-2.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
}}
>
{t("saveMotto")}
</button>
</div>
</form>
</div>
</div>
</Reveal>
{/* Security card */}
<Reveal delay={0.15}>
<div
className="overflow-hidden rounded-xl border"
style={{
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
}}
>
<div
className="flex items-center gap-2.5 px-4 py-3"
style={{
background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
}}
>
<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
{t("securityTitle")}
</h2>
</div>
<div
className="p-5"
style={{ backgroundColor: "var(--color-surface)" }}
>
<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
{t("securityDescription")}
</p>
<Link
href="/settings/2fa"
className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
style={{
borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
color: "var(--color-text-readable)",
background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
}}
>
{t("twoFactorLink")}
</Link>
</div>
</div>
</Reveal>
{/* Sessions link */}
<Reveal delay={0.2}>
<Link
href="/settings/sessions"
className="block overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
style={{
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
}}
>
<div
className="flex items-center justify-between px-5 py-4"
style={{ backgroundColor: "var(--color-surface)" }}
>
<div className="flex items-center gap-3">
<div
className="w-10 h-10 rounded-xl flex items-center justify-center"
style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
>
<Image src="/assets/images/icons/navigation/community.png" alt="" width={20} height={20} unoptimized />
</div>
<div>
<span className="text-sm font-extrabold" style={{ color: "var(--color-text-readable)" }}>
Session Management
</span>
<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
View active sessions and sign out everywhere
</p>
</div>
</div>
<span className="text-lg font-bold" style={{ color: "var(--color-text-muted)" }}>
→
</span>
</div>
</Link>
</Reveal>
</div>
);
}
src/app/globals.css
+63
View File
@@ -1742,6 +1742,69 @@ details[open] > summary .details-open\:rotate-180 {
border-radius: calc(var(--radius-lg) - 1px);
}
/* Input focus glow */
.input-glow:focus {
outline: none;
border-color: var(--color-primary) !important;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent),
0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.input-glow {
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
/* Typing cursor blink */
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.typing-cursor::after {
content: "|";
animation: blink 0.8s step-end infinite;
margin-left: 2px;
font-weight: 300;
color: var(--color-primary);
}
/* Number count-up */
@keyframes count-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-count {
animation: count-up 0.6s ease-out both;
}
/* Premium button shine */
.btn-shine {
position: relative;
overflow: hidden;
}
.btn-shine::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
transparent 0%,
transparent 35%,
color-mix(in srgb, white 8%, transparent) 50%,
transparent 65%,
transparent 100%
);
transform: rotate(25deg);
transition: all 0.5s ease;
pointer-events: none;
}
.btn-shine:hover::after {
left: 100%;
}
/* Staggered children animation */
.stagger-children > * {
animation: fade-in-up 0.5s ease-out both;
src/components/ambient-orbs.tsx
+66
View File
@@ -0,0 +1,66 @@
"use client";
import { useEffect, useState } from "react";
interface Orb {
id: number;
x: number;
y: number;
size: number;
delay: number;
duration: number;
color: string;
}
export function AmbientOrbs() {
const [orbs, setOrbs] = useState<Orb[]>([]);
useEffect(() => {
const colors = [
"var(--color-primary)",
"var(--color-accent)",
"color-mix(in srgb, var(--color-primary) 60%, var(--color-accent))",
];
const items: Orb[] = Array.from({ length: 3 }, (_, i) => ({
id: i,
x: 15 + Math.random() * 70,
y: 10 + Math.random() * 70,
size: 120 + Math.random() * 180,
delay: Math.random() * 3,
duration: 8 + Math.random() * 6,
color: colors[i],
}));
setOrbs(items);
}, []);
if (orbs.length === 0) return null;
return (
<div className="absolute inset-0 overflow-hidden pointer-events-none" style={{ zIndex: 1 }}>
{orbs.map((orb) => (
<div
key={orb.id}
className="absolute rounded-full"
style={{
left: `${orb.x}%`,
top: `${orb.y}%`,
width: orb.size,
height: orb.size,
background: `radial-gradient(circle, ${orb.color} 0%, transparent 70%)`,
opacity: 0.12,
animation: `ambient-drift-${orb.id} ${orb.duration}s ease-in-out ${orb.delay}s infinite alternate`,
}}
/>
))}
<style>{`
${orbs.map((orb) => `
@keyframes ambient-drift-${orb.id} {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(${(Math.random() > 0.5 ? "" : "-") + (20 + Math.random() * 30)}px, ${(Math.random() > 0.5 ? "" : "-") + (20 + Math.random() * 30)}px) scale(${0.8 + Math.random() * 0.4}); }
66% { transform: translate(${(Math.random() > 0.5 ? "" : "-") + (10 + Math.random() * 40)}px, ${(Math.random() > 0.5 ? "" : "-") + (15 + Math.random() * 35)}px) scale(${0.9 + Math.random() * 0.3}); }
100% { transform: translate(0, 0) scale(1); }
}`).join("\n")}
`}</style>
</div>
);
}
src/components/animated-counter.tsx
+46
View File
@@ -0,0 +1,46 @@
"use client";
import { motion, useInView } from "framer-motion";
import { useEffect, useRef, useState } from "react";
export function AnimatedCounter({
value,
suffix = "",
}: {
value: number;
suffix?: string;
}) {
const ref = useRef<HTMLSpanElement>(null);
const isInView = useInView(ref, { once: true, margin: "-50px" });
const [display, setDisplay] = useState(0);
useEffect(() => {
if (!isInView) return;
const duration = 1200;
const steps = 30;
const increment = value / steps;
let current = 0;
let step = 0;
const id = setInterval(() => {
step++;
current = Math.min(Math.round(increment * step), value);
setDisplay(current);
if (step >= steps) {
clearInterval(id);
setDisplay(value);
}
}, duration / steps);
return () => clearInterval(id);
}, [isInView, value]);
return (
<motion.span
ref={ref}
initial={{ opacity: 0, y: 12 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, ease: "easeOut" }}
>
{display.toLocaleString()}{suffix}
</motion.span>
);
}
src/components/auth/home-login-form.tsx
+41 -27
View File
@@ -18,6 +18,7 @@ export function HomeLoginForm({
} = {}) {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [code, setCode] = useState("");
const [needs2fa, setNeeds2fa] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -87,7 +88,7 @@ export function HomeLoginForm({
placeholder="Your username"
autoComplete="username"
disabled={needs2fa}
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
@@ -100,31 +101,44 @@ export function HomeLoginForm({
</div>
<div className="space-y-1">
<label
htmlFor="login-password"
className="block text-xs font-bold uppercase tracking-wider"
style={{ color: "var(--color-text-muted)" }}
>
Password
</label>
<input
id="login-password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Your password"
autoComplete="current-password"
disabled={needs2fa}
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: needs2fa
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<div className="flex items-center justify-between">
<label
htmlFor="login-password"
className="block text-xs font-bold uppercase tracking-wider"
style={{ color: "var(--color-text-muted)" }}
>
Password
</label>
</div>
<div className="relative">
<input
id="login-password"
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Your password"
autoComplete="current-password"
disabled={needs2fa}
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: needs2fa
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showPassword ? "Hide" : "Show"}
</button>
</div>
</div>
{needs2fa ? (
@@ -169,7 +183,7 @@ export function HomeLoginForm({
<button
type="submit"
disabled={pending}
className="w-full cursor-pointer rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
className="btn-shine w-full cursor-pointer rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
src/components/auth/login-form.tsx
+16 -6
View File
@@ -21,6 +21,7 @@ export function LoginForm({
const t = useTranslations("pages.login");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [code, setCode] = useState("");
const [needs2fa, setNeeds2fa] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -87,7 +88,7 @@ export function LoginForm({
placeholder={t("usernamePlaceholder")}
autoComplete="username"
disabled={needs2fa}
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
@@ -95,21 +96,30 @@ export function LoginForm({
}}
/>
</div>
<div className={needs2fa ? "opacity-50 pointer-events-none" : ""}>
<div className={`${needs2fa ? "opacity-50 pointer-events-none" : ""} relative`}>
<input
type="password"
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder={t("passwordPlaceholder")}
autoComplete="current-password"
disabled={needs2fa}
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showPassword ? "Hide" : "Show"}
</button>
</div>
{needs2fa ? (
<div className="animate-scale-in">
@@ -120,7 +130,7 @@ export function LoginForm({
inputMode="numeric"
autoComplete="one-time-code"
autoFocus
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
@@ -144,7 +154,7 @@ export function LoginForm({
<button
type="submit"
disabled={pending}
className="w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
src/components/auth/register-form.tsx
+57 -33
View File
@@ -39,6 +39,8 @@ export function RegisterForm({
const [serverError, formAction, isPending] = useActionState(register, null);
const [termsAccepted, setTermsAccepted] = useState(false);
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [showConfirm, setShowConfirm] = useState(false);
const strength = passwordStrength(password);
return (
@@ -136,7 +138,7 @@ export function RegisterForm({
type="text"
placeholder={t("usernamePlaceholder")}
autoComplete="username"
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
@@ -159,7 +161,7 @@ export function RegisterForm({
type="email"
placeholder={t("emailPlaceholder")}
autoComplete="email"
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
@@ -180,22 +182,33 @@ export function RegisterForm({
>
{t("password")}
</label>
<input
id="password"
name="password"
type="password"
placeholder={t("passwordPlaceholder")}
autoComplete="new-password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<div className="relative">
<input
id="password"
name="password"
type={showPassword ? "text" : "password"}
placeholder={t("passwordPlaceholder")}
autoComplete="new-password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showPassword ? "Hide" : "Show"}
</button>
</div>
{password.length > 0 && (
<div className="animate-fade-in-up space-y-1">
<div className="flex gap-1">
@@ -225,20 +238,31 @@ export function RegisterForm({
>
{t("confirmPassword")}
</label>
<input
id="password_confirmation"
name="password_confirmation"
type="password"
placeholder={t("confirmPasswordPlaceholder")}
autoComplete="new-password"
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<div className="relative">
<input
id="password_confirmation"
name="password_confirmation"
type={showConfirm ? "text" : "password"}
placeholder={t("confirmPasswordPlaceholder")}
autoComplete="new-password"
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text-readable)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<button
type="button"
onClick={() => setShowConfirm(!showConfirm)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
style={{ color: "var(--color-text-muted)" }}
tabIndex={-1}
>
{showConfirm ? "Hide" : "Show"}
</button>
</div>
</div>
</div>
@@ -323,7 +347,7 @@ export function RegisterForm({
<button
type="submit"
disabled={isPending}
className="w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
src/components/typewriter-text.tsx
+42
View File
@@ -0,0 +1,42 @@
"use client";
import { motion } from "framer-motion";
import { useEffect, useState } from "react";
export function TypewriterText({
text,
className,
}: {
text: string;
className?: string;
}) {
const [displayed, setDisplayed] = useState("");
const [done, setDone] = useState(false);
useEffect(() => {
setDisplayed("");
setDone(false);
let i = 0;
const id = setInterval(() => {
if (i < text.length) {
setDisplayed(text.slice(0, i + 1));
i++;
} else {
clearInterval(id);
setDone(true);
}
}, 40);
return () => clearInterval(id);
}, [text]);
return (
<motion.span
className={`${className ?? ""} ${!done ? "typing-cursor" : ""}`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
>
{displayed}
</motion.span>
);
}