Fix migration connection exhaustion and polish auth pages
- apply-migrations.ts: use single shared connection instead of one per operation - Increase MariaDB max_connections from 151 to 300 in server config - home-login-form.tsx: replace hardcoded gray colors with theme variables - register-form.tsx: add password strength meter, spinner, theme-aligned inputs - login-form.tsx: add Discord/Google SVG icons, spinner, smoother 2FA animation - page/register/login: apply premium animations (float, stagger, glow, gradient)
This commit is contained in:
openhands committed
1 parent
a9f1f4f99d
commit
f7f6e09174
7 files changed
+394
-303
No files matched your search
+65
-66
@@ -24,27 +24,27 @@ function getDbConfig(): { url: string; database: string } {
|
|||||||
return { url: mysqlConnectionUrl(url), database: dbName };
|
return { url: mysqlConnectionUrl(url), database: dbName };
|
||||||
}
|
}
|
||||||
|
|
||||||
async function ensureConnection(): Promise<void> {
|
async function openConnection() {
|
||||||
const { url } = getDbConfig();
|
const { url } = getDbConfig();
|
||||||
const mysql = await import("mysql2/promise");
|
const mysql = await import("mysql2/promise");
|
||||||
const conn = await mysql.createConnection(url);
|
return mysql.createConnection(url);
|
||||||
try {
|
}
|
||||||
await conn.execute(
|
|
||||||
`CREATE TABLE IF NOT EXISTS \`${TRACKING_TABLE}\` (
|
async function createTrackingTable(
|
||||||
|
conn: import("mysql2/promise").Connection,
|
||||||
|
): Promise<void> {
|
||||||
|
await conn.execute(
|
||||||
|
`CREATE TABLE IF NOT EXISTS \`${TRACKING_TABLE}\` (
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
migration VARCHAR(255) NOT NULL UNIQUE,
|
migration VARCHAR(255) NOT NULL UNIQUE,
|
||||||
applied_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
applied_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4`,
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4`,
|
||||||
);
|
);
|
||||||
} finally {
|
|
||||||
await conn.end();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getApplied(): Promise<Set<string>> {
|
async function getApplied(
|
||||||
const { url } = getDbConfig();
|
conn: import("mysql2/promise").Connection,
|
||||||
const mysql = await import("mysql2/promise");
|
): Promise<Set<string>> {
|
||||||
const conn = await mysql.createConnection(url);
|
|
||||||
try {
|
try {
|
||||||
const [rows] = await conn.execute(
|
const [rows] = await conn.execute(
|
||||||
`SELECT migration FROM \`${TRACKING_TABLE}\` ORDER BY id`,
|
`SELECT migration FROM \`${TRACKING_TABLE}\` ORDER BY id`,
|
||||||
@@ -52,8 +52,6 @@ async function getApplied(): Promise<Set<string>> {
|
|||||||
return new Set((rows as { migration: string }[]).map((r) => r.migration));
|
return new Set((rows as { migration: string }[]).map((r) => r.migration));
|
||||||
} catch {
|
} catch {
|
||||||
return new Set();
|
return new Set();
|
||||||
} finally {
|
|
||||||
await conn.end();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -70,69 +68,70 @@ function loadMigrations(): MigrationFile[] {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function apply(migration: MigrationFile): Promise<void> {
|
async function apply(
|
||||||
const { url } = getDbConfig();
|
conn: import("mysql2/promise").Connection,
|
||||||
const mysql = await import("mysql2/promise");
|
migration: MigrationFile,
|
||||||
const conn = await mysql.createConnection(url);
|
): Promise<void> {
|
||||||
try {
|
const statements = splitSqlStatements(migration.sql);
|
||||||
const statements = splitSqlStatements(migration.sql);
|
|
||||||
|
|
||||||
for (const stmt of statements) {
|
for (const stmt of statements) {
|
||||||
await conn.execute(stmt);
|
await conn.execute(stmt);
|
||||||
}
|
|
||||||
|
|
||||||
await conn.execute(
|
|
||||||
`INSERT INTO \`${TRACKING_TABLE}\` (migration) VALUES (?)`,
|
|
||||||
[migration.id],
|
|
||||||
);
|
|
||||||
console.log(`[migrate] Applied: ${migration.name}`);
|
|
||||||
} finally {
|
|
||||||
await conn.end();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
await conn.execute(
|
||||||
|
`INSERT INTO \`${TRACKING_TABLE}\` (migration) VALUES (?)`,
|
||||||
|
[migration.id],
|
||||||
|
);
|
||||||
|
console.log(`[migrate] Applied: ${migration.name}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
const flag = process.argv[2];
|
const mysql = await import("mysql2/promise");
|
||||||
|
const { url } = getDbConfig();
|
||||||
|
const conn = await mysql.createConnection(url);
|
||||||
|
|
||||||
if (flag === "--status") {
|
try {
|
||||||
await ensureConnection();
|
await createTrackingTable(conn);
|
||||||
const applied = await getApplied();
|
const applied = await getApplied(conn);
|
||||||
const all = loadMigrations();
|
|
||||||
|
|
||||||
console.log("\nMigration status:\n");
|
if (process.argv[2] === "--status") {
|
||||||
for (const m of all) {
|
const all = loadMigrations();
|
||||||
const done = applied.has(m.id);
|
|
||||||
console.log(
|
console.log("\nMigration status:\n");
|
||||||
` ${done ? "✓" : " "} ${m.name}${done ? "" : " [PENDING]"}`,
|
for (const m of all) {
|
||||||
);
|
const done = applied.has(m.id);
|
||||||
|
console.log(
|
||||||
|
` ${done ? "✓" : " "} ${m.name}${done ? "" : " [PENDING]"}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pending = all.filter((m) => !applied.has(m.id));
|
||||||
|
const total = all.length;
|
||||||
|
const done = total - pending.length;
|
||||||
|
console.log(`\n${done}/${total} applied, ${pending.length} pending\n`);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const pending = all.filter((m) => !applied.has(m.id));
|
const pending = loadMigrations().filter((m) => !applied.has(m.id));
|
||||||
const total = all.length;
|
|
||||||
const done = total - pending.length;
|
|
||||||
console.log(`\n${done}/${total} applied, ${pending.length} pending\n`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await ensureConnection();
|
if (pending.length === 0) {
|
||||||
const applied = await getApplied();
|
console.log("[migrate] All migrations already applied.");
|
||||||
const pending = loadMigrations().filter((m) => !applied.has(m.id));
|
return;
|
||||||
|
|
||||||
if (pending.length === 0) {
|
|
||||||
console.log("[migrate] All migrations already applied.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`[migrate] Applying ${pending.length} migration(s)...\n`);
|
|
||||||
for (const m of pending) {
|
|
||||||
try {
|
|
||||||
await apply(m);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`[migrate] FAILED: ${m.name}`, err);
|
|
||||||
process.exit(1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(`[migrate] Applying ${pending.length} migration(s)...\n`);
|
||||||
|
for (const m of pending) {
|
||||||
|
try {
|
||||||
|
await apply(conn, m);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`[migrate] FAILED: ${m.name}`, err);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log("\n[migrate] Done.");
|
||||||
|
} finally {
|
||||||
|
await conn.end();
|
||||||
}
|
}
|
||||||
console.log("\n[migrate] Done.");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main().catch((err) => {
|
main().catch((err) => {
|
||||||
|
|||||||
@@ -87,11 +87,11 @@ export default async function LoginPage() {
|
|||||||
</div>
|
</div>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="flex flex-col lg:flex-row gap-10">
|
<div className="flex flex-col lg:flex-row gap-10 stagger-children">
|
||||||
{/* Left panel */}
|
{/* Left panel */}
|
||||||
<div className="lg:w-80 shrink-0 space-y-4">
|
<div className="lg:w-80 shrink-0 space-y-4">
|
||||||
<div
|
<div
|
||||||
className="relative overflow-hidden rounded-2xl border p-6 text-center"
|
className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
|
||||||
style={{
|
style={{
|
||||||
borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
|
borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
|
||||||
background: `url(/assets/images/background.png) center/cover no-repeat`,
|
background: `url(/assets/images/background.png) center/cover no-repeat`,
|
||||||
@@ -109,7 +109,7 @@ export default async function LoginPage() {
|
|||||||
alt="Frank"
|
alt="Frank"
|
||||||
width={130}
|
width={130}
|
||||||
height={170}
|
height={170}
|
||||||
className="object-contain mx-auto drop-shadow-xl"
|
className="object-contain mx-auto drop-shadow-xl animate-float"
|
||||||
unoptimized
|
unoptimized
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -183,7 +183,7 @@ export default async function Home() {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="shrink-0 relative">
|
<div className="shrink-0 relative animate-float">
|
||||||
<div
|
<div
|
||||||
className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.15] blur-[60px]"
|
className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.15] blur-[60px]"
|
||||||
style={{ background: "var(--color-primary)" }}
|
style={{ background: "var(--color-primary)" }}
|
||||||
@@ -204,7 +204,7 @@ export default async function Home() {
|
|||||||
|
|
||||||
{/* ── Stats ── */}
|
{/* ── Stats ── */}
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="grid grid-cols-3 gap-4">
|
<div className="grid grid-cols-3 gap-4 stagger-children">
|
||||||
{[
|
{[
|
||||||
{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
|
{ 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: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
|
||||||
@@ -212,7 +212,7 @@ export default async function Home() {
|
|||||||
].map((s) => (
|
].map((s) => (
|
||||||
<div
|
<div
|
||||||
key={s.label}
|
key={s.label}
|
||||||
className="relative overflow-hidden rounded-xl border p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
|
className="relative overflow-hidden rounded-xl border p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl card-premium"
|
||||||
style={{
|
style={{
|
||||||
background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
|
background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
|
||||||
backdropFilter: "blur(8px)",
|
backdropFilter: "blur(8px)",
|
||||||
@@ -226,7 +226,7 @@ export default async function Home() {
|
|||||||
/>
|
/>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div
|
<div
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2.5"
|
className="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2.5 animate-pulse-glow"
|
||||||
style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
|
style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
|
||||||
>
|
>
|
||||||
<Image src={s.icon} alt="" width={24} height={24} unoptimized />
|
<Image src={s.icon} alt="" width={24} height={24} unoptimized />
|
||||||
@@ -435,9 +435,9 @@ export default async function Home() {
|
|||||||
|
|
||||||
{/* ── Client / Play ── */}
|
{/* ── Client / Play ── */}
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="relative overflow-hidden rounded-xl border" style={{
|
<div className="relative overflow-hidden rounded-xl border animate-gradient" style={{
|
||||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
|
||||||
background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 1%, var(--color-surface)))",
|
background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)))",
|
||||||
}}>
|
}}>
|
||||||
<div className="flex flex-col md:flex-row items-center gap-6 px-6 py-7">
|
<div className="flex flex-col md:flex-row items-center gap-6 px-6 py-7">
|
||||||
<div className="shrink-0">
|
<div className="shrink-0">
|
||||||
@@ -455,7 +455,7 @@ export default async function Home() {
|
|||||||
</div>
|
</div>
|
||||||
<Link
|
<Link
|
||||||
href="/client"
|
href="/client"
|
||||||
className="inline-flex items-center gap-2 font-extrabold text-sm px-6 py-3 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg shrink-0"
|
className="inline-flex items-center gap-2 font-extrabold text-sm px-6 py-3 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg shrink-0 animate-pulse-glow"
|
||||||
style={{
|
style={{
|
||||||
background: "var(--color-primary)",
|
background: "var(--color-primary)",
|
||||||
color: "var(--color-primary-foreground)",
|
color: "var(--color-primary-foreground)",
|
||||||
|
|||||||
@@ -87,11 +87,11 @@ export default async function RegisterPage() {
|
|||||||
</div>
|
</div>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="flex flex-col lg:flex-row gap-10">
|
<div className="flex flex-col lg:flex-row gap-10 stagger-children">
|
||||||
{/* Left panel */}
|
{/* Left panel */}
|
||||||
<div className="lg:w-80 shrink-0 space-y-4">
|
<div className="lg:w-80 shrink-0 space-y-4">
|
||||||
<div
|
<div
|
||||||
className="relative overflow-hidden rounded-2xl border p-6 text-center"
|
className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
|
||||||
style={{
|
style={{
|
||||||
borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
|
borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
|
||||||
background: `url(/assets/images/background.png) center/cover no-repeat`,
|
background: `url(/assets/images/background.png) center/cover no-repeat`,
|
||||||
@@ -109,7 +109,7 @@ export default async function RegisterPage() {
|
|||||||
alt="Frank"
|
alt="Frank"
|
||||||
width={130}
|
width={130}
|
||||||
height={170}
|
height={170}
|
||||||
className="object-contain mx-auto drop-shadow-xl"
|
className="object-contain mx-auto drop-shadow-xl animate-float"
|
||||||
unoptimized
|
unoptimized
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -69,12 +69,13 @@ export function HomeLoginForm({
|
|||||||
return (
|
return (
|
||||||
<form
|
<form
|
||||||
onSubmit={onSubmit}
|
onSubmit={onSubmit}
|
||||||
className="relative flex flex-col gap-6 rounded-lg bg-gray-100 p-3 dark:bg-gray-800"
|
className="relative flex flex-col gap-4"
|
||||||
>
|
>
|
||||||
<fieldset className="flex w-full flex-col gap-1">
|
<div className="space-y-1">
|
||||||
<label
|
<label
|
||||||
htmlFor="login-username"
|
htmlFor="login-username"
|
||||||
className="block font-semibold text-gray-700 dark:text-gray-200"
|
className="block text-xs font-bold uppercase tracking-wider"
|
||||||
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
>
|
>
|
||||||
Username
|
Username
|
||||||
</label>
|
</label>
|
||||||
@@ -83,17 +84,26 @@ export function HomeLoginForm({
|
|||||||
type="text"
|
type="text"
|
||||||
value={username}
|
value={username}
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
placeholder=""
|
placeholder="Your username"
|
||||||
className="focus:ring-0 relative z-10 w-full rounded border-4 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
autoComplete="username"
|
||||||
style={{ borderColor: "#e5e7eb", borderWidth: "4px" }}
|
|
||||||
required
|
|
||||||
disabled={needs2fa}
|
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
|
||||||
/>
|
/>
|
||||||
</fieldset>
|
</div>
|
||||||
<fieldset className="flex w-full flex-col gap-1">
|
|
||||||
|
<div className="space-y-1">
|
||||||
<label
|
<label
|
||||||
htmlFor="login-password"
|
htmlFor="login-password"
|
||||||
className="block font-semibold text-gray-700 dark:text-gray-200"
|
className="block text-xs font-bold uppercase tracking-wider"
|
||||||
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
>
|
>
|
||||||
Password
|
Password
|
||||||
</label>
|
</label>
|
||||||
@@ -102,18 +112,27 @@ export function HomeLoginForm({
|
|||||||
type="password"
|
type="password"
|
||||||
value={password}
|
value={password}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
placeholder=""
|
placeholder="Your password"
|
||||||
className="focus:ring-0 relative z-10 w-full rounded border-4 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
autoComplete="current-password"
|
||||||
style={{ borderColor: "#e5e7eb", borderWidth: "4px" }}
|
|
||||||
required
|
|
||||||
disabled={needs2fa}
|
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
|
||||||
/>
|
/>
|
||||||
</fieldset>
|
</div>
|
||||||
|
|
||||||
{needs2fa ? (
|
{needs2fa ? (
|
||||||
<fieldset className="flex w-full flex-col gap-1">
|
<div className="space-y-1 animate-scale-in">
|
||||||
<label
|
<label
|
||||||
htmlFor="login-2fa"
|
htmlFor="login-2fa"
|
||||||
className="block font-semibold text-gray-700 dark:text-gray-200"
|
className="block text-xs font-bold uppercase tracking-wider"
|
||||||
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
>
|
>
|
||||||
2FA Code
|
2FA Code
|
||||||
</label>
|
</label>
|
||||||
@@ -124,28 +143,52 @@ export function HomeLoginForm({
|
|||||||
onChange={(e) => setCode(e.target.value)}
|
onChange={(e) => setCode(e.target.value)}
|
||||||
placeholder="Enter your 2FA code"
|
placeholder="Enter your 2FA code"
|
||||||
inputMode="numeric"
|
inputMode="numeric"
|
||||||
className="focus:ring-0 relative z-10 w-full rounded border-4 border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
autoComplete="one-time-code"
|
||||||
style={{ borderColor: "#e5e7eb", borderWidth: "4px" }}
|
autoFocus
|
||||||
|
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-primary) 30%, transparent)",
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</fieldset>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<CaptchaWidget captcha={captcha} nonce={nonce} />
|
<CaptchaWidget captcha={captcha} nonce={nonce} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{error ? (
|
{error ? (
|
||||||
<p className="m-0 text-center text-sm text-red-600 dark:text-red-400">
|
<p
|
||||||
|
className="animate-fade-in-up m-0 text-center text-sm font-semibold"
|
||||||
|
style={{ color: "var(--color-danger)" }}
|
||||||
|
>
|
||||||
{error}
|
{error}
|
||||||
</p>
|
</p>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={pending}
|
disabled={pending}
|
||||||
className="w-full cursor-pointer rounded-md border-2 p-2 text-base font-semibold text-white transition-colors disabled:opacity-50"
|
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"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#27a44d",
|
background: "var(--color-primary)",
|
||||||
borderColor: "#34d399",
|
color: "var(--color-primary-foreground)",
|
||||||
|
boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{pending ? "Please wait..." : needs2fa ? "Verify" : "Login"}
|
{pending ? (
|
||||||
|
<span className="inline-flex items-center gap-2">
|
||||||
|
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||||
|
</svg>
|
||||||
|
Please wait...
|
||||||
|
</span>
|
||||||
|
) : needs2fa ? (
|
||||||
|
"Verify"
|
||||||
|
) : (
|
||||||
|
"Login"
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -72,63 +72,71 @@ export function LoginForm({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{needs2fa && (
|
{needs2fa && (
|
||||||
<p className="text-sm font-semibold mb-4" style={{ color: "var(--color-text-muted)" }}>
|
<p
|
||||||
|
className="animate-fade-in-up text-sm font-semibold mb-4"
|
||||||
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
|
>
|
||||||
{t("subtitle2fa")}
|
{t("subtitle2fa")}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
<form onSubmit={onSubmit} className="flex flex-col gap-4">
|
<form onSubmit={onSubmit} className="flex flex-col gap-4">
|
||||||
<input
|
<div className={needs2fa ? "opacity-50 pointer-events-none" : ""}>
|
||||||
value={username}
|
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
|
||||||
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"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--color-background)",
|
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
|
||||||
borderColor: needs2fa
|
|
||||||
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
|
|
||||||
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="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"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "var(--color-background)",
|
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
|
||||||
borderColor: needs2fa
|
|
||||||
? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
|
|
||||||
: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{needs2fa ? (
|
|
||||||
<input
|
<input
|
||||||
value={code}
|
value={username}
|
||||||
onChange={(e) => setCode(e.target.value)}
|
onChange={(e) => setUsername(e.target.value)}
|
||||||
placeholder={t("codePlaceholder")}
|
placeholder={t("usernamePlaceholder")}
|
||||||
inputMode="numeric"
|
autoComplete="username"
|
||||||
autoComplete="one-time-code"
|
disabled={needs2fa}
|
||||||
autoFocus
|
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
|
||||||
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "var(--color-background)",
|
backgroundColor: "var(--color-background)",
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
color: "var(--color-text-readable)",
|
||||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={needs2fa ? "opacity-50 pointer-events-none" : ""}>
|
||||||
|
<input
|
||||||
|
type="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"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--color-background)",
|
||||||
|
color: "var(--color-text-readable)",
|
||||||
|
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{needs2fa ? (
|
||||||
|
<div className="animate-scale-in">
|
||||||
|
<input
|
||||||
|
value={code}
|
||||||
|
onChange={(e) => setCode(e.target.value)}
|
||||||
|
placeholder={t("codePlaceholder")}
|
||||||
|
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"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--color-background)",
|
||||||
|
color: "var(--color-text-readable)",
|
||||||
|
borderColor: "color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<CaptchaWidget captcha={captcha} nonce={nonce} />
|
<CaptchaWidget captcha={captcha} nonce={nonce} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<p className="text-sm text-center font-semibold" style={{ color: "var(--color-danger)" }}>
|
<p
|
||||||
|
className="animate-fade-in-up text-sm text-center font-semibold"
|
||||||
|
style={{ color: "var(--color-danger)" }}
|
||||||
|
>
|
||||||
{error}
|
{error}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
@@ -143,7 +151,19 @@ export function LoginForm({
|
|||||||
boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
|
boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{pending ? t("pleaseWait") : needs2fa ? t("verify") : t("signIn")}
|
{pending ? (
|
||||||
|
<span className="inline-flex items-center justify-center gap-2">
|
||||||
|
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||||
|
</svg>
|
||||||
|
{t("pleaseWait")}
|
||||||
|
</span>
|
||||||
|
) : needs2fa ? (
|
||||||
|
t("verify")
|
||||||
|
) : (
|
||||||
|
t("signIn")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@@ -159,24 +179,35 @@ export function LoginForm({
|
|||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="w-full rounded-xl border-2 font-bold text-sm py-3 transition-all hover:scale-[1.02] active:scale-95"
|
|
||||||
onClick={() => signIn("discord", { callbackUrl: "/" })}
|
onClick={() => signIn("discord", { callbackUrl: "/" })}
|
||||||
|
className="w-full rounded-xl font-bold text-sm py-3 transition-all hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-2.5"
|
||||||
style={{
|
style={{
|
||||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
|
background: "#5865F2",
|
||||||
color: "var(--color-text-readable)",
|
color: "#ffffff",
|
||||||
|
border: "none",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
|
||||||
|
</svg>
|
||||||
{t("continueWithDiscord")}
|
{t("continueWithDiscord")}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="w-full rounded-xl border-2 font-bold text-sm py-3 transition-all hover:scale-[1.02] active:scale-95"
|
|
||||||
onClick={() => signIn("google", { callbackUrl: "/" })}
|
onClick={() => signIn("google", { callbackUrl: "/" })}
|
||||||
|
className="w-full rounded-xl font-bold text-sm py-3 transition-all hover:scale-[1.02] active:scale-95 flex items-center justify-center gap-2.5 border-2"
|
||||||
style={{
|
style={{
|
||||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
|
borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
|
||||||
color: "var(--color-text-readable)",
|
color: "var(--color-text-readable)",
|
||||||
|
background: "transparent",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/>
|
||||||
|
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
|
||||||
|
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
|
||||||
|
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
|
||||||
|
</svg>
|
||||||
{t("continueWithGoogle")}
|
{t("continueWithGoogle")}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -14,6 +14,20 @@ interface RegisterFormProps {
|
|||||||
nonce?: string;
|
nonce?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function passwordStrength(pw: string): { score: number; label: string; color: string } {
|
||||||
|
let score = 0;
|
||||||
|
if (pw.length >= 8) score += 1;
|
||||||
|
if (pw.length >= 12) score += 1;
|
||||||
|
if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) score += 1;
|
||||||
|
if (/\d/.test(pw)) score += 1;
|
||||||
|
if (/[^a-zA-Z0-9]/.test(pw)) score += 1;
|
||||||
|
|
||||||
|
if (score <= 1) return { score, label: "Weak", color: "#ef4444" };
|
||||||
|
if (score <= 2) return { score, label: "Fair", color: "#f59e0b" };
|
||||||
|
if (score <= 3) return { score, label: "Good", color: "#22c55e" };
|
||||||
|
return { score: 5, label: "Strong", color: "#16a34a" };
|
||||||
|
}
|
||||||
|
|
||||||
export function RegisterForm({
|
export function RegisterForm({
|
||||||
hotelName,
|
hotelName,
|
||||||
captcha,
|
captcha,
|
||||||
@@ -24,6 +38,8 @@ export function RegisterForm({
|
|||||||
const showCaptcha = captcha.provider !== "none" && !!captcha.siteKey;
|
const showCaptcha = captcha.provider !== "none" && !!captcha.siteKey;
|
||||||
const [serverError, formAction, isPending] = useActionState(register, null);
|
const [serverError, formAction, isPending] = useActionState(register, null);
|
||||||
const [termsAccepted, setTermsAccepted] = useState(false);
|
const [termsAccepted, setTermsAccepted] = useState(false);
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const strength = passwordStrength(password);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto w-full max-w-[800px]">
|
<div className="mx-auto w-full max-w-[800px]">
|
||||||
@@ -45,7 +61,7 @@ export function RegisterForm({
|
|||||||
) : null}
|
) : null}
|
||||||
{/* Header Banner */}
|
{/* Header Banner */}
|
||||||
<div
|
<div
|
||||||
className="relative overflow-hidden bg-center bg-cover rounded-t-lg"
|
className="relative overflow-hidden bg-center bg-cover rounded-t-xl"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: "url(/assets/images/mybobba_banner.png)",
|
backgroundImage: "url(/assets/images/mybobba_banner.png)",
|
||||||
height: "180px",
|
height: "180px",
|
||||||
@@ -54,7 +70,7 @@ export function RegisterForm({
|
|||||||
>
|
>
|
||||||
<div className="absolute inset-0 z-10 bg-black/30" />
|
<div className="absolute inset-0 z-10 bg-black/30" />
|
||||||
<div className="relative flex items-center justify-center w-full h-full z-20">
|
<div className="relative flex items-center justify-center w-full h-full z-20">
|
||||||
<div className="relative" style={{ width: "140px", height: "140px" }}>
|
<div className="relative animate-float" style={{ width: "140px", height: "140px" }}>
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 rounded-full overflow-hidden"
|
className="absolute inset-0 rounded-full overflow-hidden"
|
||||||
style={{ zIndex: -1 }}
|
style={{ zIndex: -1 }}
|
||||||
@@ -88,184 +104,178 @@ export function RegisterForm({
|
|||||||
{/* Form */}
|
{/* Form */}
|
||||||
<form
|
<form
|
||||||
action={formAction}
|
action={formAction}
|
||||||
className="p-4 flex flex-col gap-6"
|
className="p-6 flex flex-col gap-6"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor:
|
backgroundColor:
|
||||||
"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
|
"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
|
||||||
borderRadius: "0 0 8px 8px",
|
borderRadius: "0 0 12px 12px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{error && (
|
{(error || serverError) && (
|
||||||
<div
|
<div
|
||||||
className="p-3 rounded-md text-sm"
|
className="animate-fade-in-up p-3 rounded-lg text-sm font-semibold text-white"
|
||||||
style={{ backgroundColor: "#ef4444", color: "white" }}
|
style={{ backgroundColor: "var(--color-danger)" }}
|
||||||
>
|
>
|
||||||
{error}
|
{error || serverError}
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{serverError && (
|
|
||||||
<div
|
|
||||||
className="p-3 rounded-md text-sm"
|
|
||||||
style={{ backgroundColor: "#ef4444", color: "white" }}
|
|
||||||
>
|
|
||||||
{serverError}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Username & Email */}
|
{/* Username & Email */}
|
||||||
<div className="w-full flex flex-col md:flex-row gap-4">
|
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
|
||||||
<div className="w-full md:w-1/2">
|
<div className="space-y-1.5">
|
||||||
<fieldset className="flex flex-col w-full gap-1">
|
<label
|
||||||
<label
|
htmlFor="username"
|
||||||
htmlFor="username"
|
className="block text-xs font-bold uppercase tracking-wider"
|
||||||
className="block font-semibold text-sm"
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
style={{
|
>
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
{t("username")}
|
||||||
}}
|
</label>
|
||||||
>
|
<input
|
||||||
{t("username")}
|
id="username"
|
||||||
</label>
|
name="username"
|
||||||
<input
|
type="text"
|
||||||
id="username"
|
placeholder={t("usernamePlaceholder")}
|
||||||
name="username"
|
autoComplete="username"
|
||||||
type="text"
|
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
||||||
placeholder={t("usernamePlaceholder")}
|
style={{
|
||||||
autoComplete="username"
|
backgroundColor: "var(--color-background)",
|
||||||
className="focus:ring-0 border-4 rounded w-full text-sm px-3 py-2 mt-1"
|
color: "var(--color-text-readable)",
|
||||||
style={{
|
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
||||||
backgroundColor: "var(--color-background)",
|
}}
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
required
|
||||||
borderColor:
|
/>
|
||||||
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full md:w-1/2">
|
<div className="space-y-1.5">
|
||||||
<fieldset className="flex flex-col w-full gap-1">
|
<label
|
||||||
<label
|
htmlFor="mail"
|
||||||
htmlFor="mail"
|
className="block text-xs font-bold uppercase tracking-wider"
|
||||||
className="block font-semibold text-sm"
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
style={{
|
>
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
{t("email")}
|
||||||
}}
|
</label>
|
||||||
>
|
<input
|
||||||
{t("email")}
|
id="mail"
|
||||||
</label>
|
name="mail"
|
||||||
<input
|
type="email"
|
||||||
id="mail"
|
placeholder={t("emailPlaceholder")}
|
||||||
name="mail"
|
autoComplete="email"
|
||||||
type="email"
|
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
||||||
placeholder={t("emailPlaceholder")}
|
style={{
|
||||||
autoComplete="email"
|
backgroundColor: "var(--color-background)",
|
||||||
className="focus:ring-0 border-4 rounded w-full text-sm px-3 py-2 mt-1"
|
color: "var(--color-text-readable)",
|
||||||
style={{
|
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
||||||
backgroundColor: "var(--color-background)",
|
}}
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
/>
|
||||||
borderColor:
|
<p
|
||||||
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
className="text-xs mt-1"
|
||||||
}}
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
/>
|
>
|
||||||
</fieldset>
|
Geen e-mail? Je kunt later via Discord verifiëren.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p
|
|
||||||
className="text-xs mt-1"
|
|
||||||
style={{
|
|
||||||
color:
|
|
||||||
"var(--color-text-muted-readable, var(--color-text-muted))",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Geen e-mail? Je kunt later via Discord verifiëren.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Password & Confirm */}
|
{/* Password & Confirm */}
|
||||||
<div className="w-full flex flex-col md:flex-row gap-4">
|
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
|
||||||
<div className="w-full md:w-1/2">
|
<div className="space-y-1.5">
|
||||||
<fieldset className="flex flex-col w-full gap-1">
|
<label
|
||||||
<label
|
htmlFor="password"
|
||||||
htmlFor="password"
|
className="block text-xs font-bold uppercase tracking-wider"
|
||||||
className="block font-semibold text-sm"
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
style={{
|
>
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
{t("password")}
|
||||||
}}
|
</label>
|
||||||
>
|
<input
|
||||||
{t("password")}
|
id="password"
|
||||||
</label>
|
name="password"
|
||||||
<input
|
type="password"
|
||||||
id="password"
|
placeholder={t("passwordPlaceholder")}
|
||||||
name="password"
|
autoComplete="new-password"
|
||||||
type="password"
|
value={password}
|
||||||
placeholder={t("passwordPlaceholder")}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
autoComplete="new-password"
|
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
||||||
className="focus:ring-0 border-4 rounded w-full text-sm px-3 py-2 mt-1"
|
style={{
|
||||||
style={{
|
backgroundColor: "var(--color-background)",
|
||||||
backgroundColor: "var(--color-background)",
|
color: "var(--color-text-readable)",
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
||||||
borderColor:
|
}}
|
||||||
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
required
|
||||||
}}
|
/>
|
||||||
required
|
{password.length > 0 && (
|
||||||
/>
|
<div className="animate-fade-in-up space-y-1">
|
||||||
</fieldset>
|
<div className="flex gap-1">
|
||||||
|
{[1, 2, 3, 4, 5].map((i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="h-1.5 flex-1 rounded-full transition-all duration-300"
|
||||||
|
style={{
|
||||||
|
backgroundColor: i <= strength.score
|
||||||
|
? strength.color
|
||||||
|
: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs font-bold" style={{ color: strength.color }}>
|
||||||
|
{strength.label}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full md:w-1/2">
|
<div className="space-y-1.5">
|
||||||
<fieldset className="flex flex-col w-full gap-1">
|
<label
|
||||||
<label
|
htmlFor="password_confirmation"
|
||||||
htmlFor="password_confirmation"
|
className="block text-xs font-bold uppercase tracking-wider"
|
||||||
className="block font-semibold text-sm"
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
style={{
|
>
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
{t("confirmPassword")}
|
||||||
}}
|
</label>
|
||||||
>
|
<input
|
||||||
{t("confirmPassword")}
|
id="password_confirmation"
|
||||||
</label>
|
name="password_confirmation"
|
||||||
<input
|
type="password"
|
||||||
id="password_confirmation"
|
placeholder={t("confirmPasswordPlaceholder")}
|
||||||
name="password_confirmation"
|
autoComplete="new-password"
|
||||||
type="password"
|
className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
||||||
placeholder={t("confirmPasswordPlaceholder")}
|
style={{
|
||||||
autoComplete="new-password"
|
backgroundColor: "var(--color-background)",
|
||||||
className="focus:ring-0 border-4 rounded w-full text-sm px-3 py-2 mt-1"
|
color: "var(--color-text-readable)",
|
||||||
style={{
|
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
||||||
backgroundColor: "var(--color-background)",
|
}}
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
required
|
||||||
borderColor:
|
/>
|
||||||
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Terms */}
|
{/* Terms */}
|
||||||
<div
|
<div
|
||||||
className="rounded-md p-3 flex flex-col gap-3"
|
className="rounded-xl p-4 flex flex-col gap-3"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor:
|
backgroundColor:
|
||||||
"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
|
"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
|
||||||
|
border: "1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3 text-sm">
|
<div className="flex items-center gap-3 text-sm">
|
||||||
{/* biome-ignore lint/a11y/useSemanticElements: custom checkbox styled as button is intentional design */}
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
role="checkbox"
|
role="checkbox"
|
||||||
aria-checked={termsAccepted}
|
aria-checked={termsAccepted}
|
||||||
onClick={() => setTermsAccepted(!termsAccepted)}
|
onClick={() => setTermsAccepted(!termsAccepted)}
|
||||||
className="w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors"
|
className="w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-all duration-200"
|
||||||
style={{
|
style={{
|
||||||
borderColor: termsAccepted
|
borderColor: termsAccepted
|
||||||
? "#27a44d"
|
? "var(--color-primary)"
|
||||||
: "color-mix(in srgb, var(--color-text-muted) 30%, transparent)",
|
: "color-mix(in srgb, var(--color-text-muted) 30%, transparent)",
|
||||||
backgroundColor: termsAccepted ? "#27a44d" : "transparent",
|
backgroundColor: termsAccepted
|
||||||
|
? "var(--color-primary)"
|
||||||
|
: "transparent",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{termsAccepted && (
|
{termsAccepted && (
|
||||||
<svg
|
<svg
|
||||||
className="w-3 h-3 text-white"
|
className="w-3 h-3"
|
||||||
|
style={{ color: "var(--color-primary-foreground)" }}
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
@@ -287,7 +297,6 @@ export function RegisterForm({
|
|||||||
name="terms"
|
name="terms"
|
||||||
value={termsAccepted ? "1" : ""}
|
value={termsAccepted ? "1" : ""}
|
||||||
/>
|
/>
|
||||||
{/* biome-ignore lint/a11y/useSemanticElements: terms label mirrors the checkbox button */}
|
|
||||||
<span
|
<span
|
||||||
role="checkbox"
|
role="checkbox"
|
||||||
aria-checked={termsAccepted}
|
aria-checked={termsAccepted}
|
||||||
@@ -298,8 +307,8 @@ export function RegisterForm({
|
|||||||
setTermsAccepted(!termsAccepted);
|
setTermsAccepted(!termsAccepted);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="font-semibold cursor-pointer"
|
className="font-semibold cursor-pointer select-none"
|
||||||
style={{ color: "var(--color-text-readable, var(--color-text))" }}
|
style={{ color: "var(--color-text-readable)" }}
|
||||||
onClick={() => setTermsAccepted(!termsAccepted)}
|
onClick={() => setTermsAccepted(!termsAccepted)}
|
||||||
>
|
>
|
||||||
{t("termsAccept", { hotel: hotelName })}
|
{t("termsAccept", { hotel: hotelName })}
|
||||||
@@ -319,22 +328,31 @@ export function RegisterForm({
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={isPending}
|
disabled={isPending}
|
||||||
className="w-full rounded p-2 text-white font-semibold transition-all duration-200 text-base"
|
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"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#27a44d",
|
background: "var(--color-primary)",
|
||||||
border: "2px solid #34c661",
|
color: "var(--color-primary-foreground)",
|
||||||
|
boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{isPending ? t("creatingAccount") : t("createAccount")}
|
{isPending ? (
|
||||||
|
<span className="inline-flex items-center justify-center gap-2">
|
||||||
|
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||||
|
</svg>
|
||||||
|
{t("creatingAccount")}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
t("createAccount")
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<Link
|
<Link
|
||||||
href="/login"
|
href="/login"
|
||||||
className="text-sm font-semibold hover:underline"
|
className="text-sm font-bold hover:underline transition-all"
|
||||||
style={{
|
style={{ color: "var(--color-primary-readable, var(--color-primary))" }}
|
||||||
color: "var(--color-primary-readable, var(--color-primary))",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{t("alreadyHaveAccount")}
|
{t("alreadyHaveAccount")}
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Reference in new issue
Block a user