style(landing): polish the public index, login and register screens
Gitea Actions Runner Test / test-job (push) Successful in 1s
CI / check (push) Failing after 26s
CI / tests-unit (push) Skipped
CI / tests-integration (push) Skipped
CI / tests-ui (push) Skipped
CI / preflight (push) Skipped
CI / deploy (push) Skipped
Gitea Actions Runner Test / test-job (push) Successful in 1s
CI / check (push) Failing after 26s
CI / tests-unit (push) Skipped
CI / tests-integration (push) Skipped
CI / tests-ui (push) Skipped
CI / preflight (push) Skipped
CI / deploy (push) Skipped
- add theme-aware helpers: btn-brand, btn-glass-dark, auth-input, auth-label, auth-alert, explore-pill, avatar-tile, aurora blobs and a hero scroll cue - reorder backdrop-filter declarations so the glass blur survives the production CSS optimizer in modern Chromium - hero: aurora glow, frosted recent-users chip, premium CTA buttons and cue - explore nav: icon pills with hover arrows; features: gradient icon tiles - stats: single glass panel with column dividers; join CTA: aurora + ring - auth forms: visible labels, icon inputs, eye/password toggle, gradient submit and pill footer links - auth pages: gradient card frame, aurora accents on the intro panel and hover-lift avatar tiles; unified pill-shaped top bar - drop the hard-coded register banner image in favor of the framed card
This commit is contained in:
openhands committed
1 parent
5b2eb91c5c
commit
57710a7fe3
8 files changed
+879
-521
No files matched your search
@@ -23,14 +23,14 @@ export function AuthTopBar({
|
||||
return (
|
||||
<Reveal>
|
||||
<div
|
||||
className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm:py-3"
|
||||
className="relative flex items-center justify-between rounded-full border px-3 py-2.5 sm:px-5"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-surface) 60%, transparent)",
|
||||
"linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 62%, transparent), color-mix(in srgb, var(--color-primary) 7%, transparent))",
|
||||
backdropFilter: "blur(14px)",
|
||||
WebkitBackdropFilter: "blur(14px)",
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
||||
"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
|
||||
}}
|
||||
@@ -44,21 +44,32 @@ export function AuthTopBar({
|
||||
height={28}
|
||||
className="shrink-0 object-contain"
|
||||
unoptimized
|
||||
style={{ maxHeight: 28, width: "auto", height: "auto" }}
|
||||
style={{ maxHeight: 26, width: "auto", height: "auto" }}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={ICON_LIGHTHOUSE}
|
||||
alt={hotelName}
|
||||
width={28}
|
||||
height={28}
|
||||
className="shrink-0"
|
||||
unoptimized
|
||||
/>
|
||||
<div
|
||||
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)))",
|
||||
boxShadow:
|
||||
"0 4px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={ICON_LIGHTHOUSE}
|
||||
alt=""
|
||||
width={18}
|
||||
height={18}
|
||||
className="shrink-0"
|
||||
unoptimized
|
||||
style={{ filter: "brightness(0) invert(1)" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{showHotelName ? (
|
||||
<span
|
||||
className="hidden sm:inline text-sm font-extrabold uppercase tracking-wide"
|
||||
className="hidden text-sm font-extrabold uppercase tracking-wide sm:inline"
|
||||
style={{ color: "var(--color-text-readable)" }}
|
||||
>
|
||||
{hotelName}
|
||||
@@ -66,10 +77,10 @@ export function AuthTopBar({
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
className="flex items-center gap-1 sm:gap-1.5 rounded-lg px-1.5 py-1 sm:px-2"
|
||||
className="flex items-center gap-1 sm:gap-1.5 rounded-full px-1.5 py-1 sm:px-2"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
|
||||
"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
|
||||
}}
|
||||
>
|
||||
<LanguageSwitcher />
|
||||
|
||||
+112
-122
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { KeyRound, Lock, UserRound } from "lucide-react";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { type FormEvent, useId, useState } from "react";
|
||||
@@ -9,6 +10,7 @@ import {
|
||||
CaptchaWidget,
|
||||
readCaptchaToken,
|
||||
} from "@/components/auth/captcha-widget";
|
||||
import { PasswordToggle } from "@/components/auth/password-toggle";
|
||||
import Link from "@/components/link";
|
||||
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
|
||||
|
||||
@@ -49,7 +51,6 @@ export function LoginForm({
|
||||
const [pending, setPending] = useState(false);
|
||||
|
||||
const showFooter = variant === "page";
|
||||
const labelled = variant === "compact";
|
||||
const lockCredentials = needs2fa ? "opacity-50 pointer-events-none" : "";
|
||||
|
||||
async function onSubmit(e: FormEvent<HTMLFormElement>) {
|
||||
@@ -103,8 +104,14 @@ export function LoginForm({
|
||||
<>
|
||||
{needs2fa && (
|
||||
<p
|
||||
className="animate-fade-in-up mb-4 text-sm font-semibold"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
className="animate-fade-in-up mb-4 rounded-xl border px-3 py-2.5 text-sm font-semibold"
|
||||
style={{
|
||||
color: "var(--color-text-readable)",
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 10%, transparent)",
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-primary) 26%, transparent)",
|
||||
}}
|
||||
>
|
||||
{t("subtitle2fa")}
|
||||
</p>
|
||||
@@ -115,113 +122,89 @@ export function LoginForm({
|
||||
aria-label={t("signIn")}
|
||||
className="relative flex flex-col gap-4"
|
||||
>
|
||||
<div className={labelled ? "space-y-1" : lockCredentials}>
|
||||
<label
|
||||
htmlFor={`${fieldId}-username`}
|
||||
className={
|
||||
labelled
|
||||
? "block text-xs font-bold uppercase tracking-wider"
|
||||
: "sr-only"
|
||||
}
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
<div className={`space-y-1.5 ${lockCredentials}`}>
|
||||
<label htmlFor={`${fieldId}-username`} className="auth-label">
|
||||
{t("username")}
|
||||
</label>
|
||||
<input
|
||||
id={`${fieldId}-username`}
|
||||
name="username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder={t("usernamePlaceholder")}
|
||||
autoComplete="username"
|
||||
disabled={needs2fa}
|
||||
required
|
||||
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)",
|
||||
}}
|
||||
/>
|
||||
<div className="relative">
|
||||
<UserRound
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
/>
|
||||
<input
|
||||
id={`${fieldId}-username`}
|
||||
name="username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder={t("usernamePlaceholder")}
|
||||
autoComplete="username"
|
||||
disabled={needs2fa}
|
||||
required
|
||||
className="auth-input has-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${labelled ? "space-y-1" : lockCredentials} relative`}>
|
||||
<label
|
||||
htmlFor={`${fieldId}-password`}
|
||||
className={
|
||||
labelled
|
||||
? "block text-xs font-bold uppercase tracking-wider"
|
||||
: "sr-only"
|
||||
}
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
<div className={`space-y-1.5 ${lockCredentials}`}>
|
||||
<label htmlFor={`${fieldId}-password`} className="auth-label">
|
||||
{t("password")}
|
||||
</label>
|
||||
<input
|
||||
id={`${fieldId}-password`}
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder={t("passwordPlaceholder")}
|
||||
autoComplete="current-password"
|
||||
disabled={needs2fa}
|
||||
required
|
||||
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)",
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 transition-opacity hover:opacity-100"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
tabIndex={-1}
|
||||
aria-label={showPassword ? t("hidePassword") : t("showPassword")}
|
||||
aria-pressed={showPassword}
|
||||
>
|
||||
{showPassword ? t("hidePassword") : t("showPassword")}
|
||||
</button>
|
||||
<div className="relative">
|
||||
<Lock
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
/>
|
||||
<input
|
||||
id={`${fieldId}-password`}
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder={t("passwordPlaceholder")}
|
||||
autoComplete="current-password"
|
||||
disabled={needs2fa}
|
||||
required
|
||||
className="auth-input has-icon has-action"
|
||||
/>
|
||||
<PasswordToggle
|
||||
show={showPassword}
|
||||
onToggle={() => setShowPassword((v) => !v)}
|
||||
labelShow={t("showPassword")}
|
||||
labelHide={t("hidePassword")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{needs2fa ? (
|
||||
<div className={`animate-scale-in ${labelled ? "space-y-1" : ""}`}>
|
||||
<label
|
||||
htmlFor={`${fieldId}-2fa`}
|
||||
className={
|
||||
labelled
|
||||
? "block text-xs font-bold uppercase tracking-wider"
|
||||
: "sr-only"
|
||||
}
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
<div className="animate-scale-in space-y-1.5">
|
||||
<label htmlFor={`${fieldId}-2fa`} className="auth-label">
|
||||
{t("codePlaceholder")}
|
||||
</label>
|
||||
<input
|
||||
id={`${fieldId}-2fa`}
|
||||
name="code"
|
||||
type="text"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder={t("codePlaceholder")}
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
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-primary) 30%, transparent)",
|
||||
}}
|
||||
/>
|
||||
<div className="relative">
|
||||
<KeyRound
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||
style={{ color: "var(--color-primary)" }}
|
||||
/>
|
||||
<input
|
||||
id={`${fieldId}-2fa`}
|
||||
name="code"
|
||||
type="text"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder={t("codePlaceholder")}
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
className="auth-input has-icon"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-primary) 45%, transparent)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<CaptchaWidget captcha={captcha} nonce={nonce} />
|
||||
@@ -231,8 +214,7 @@ export function LoginForm({
|
||||
<p
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
className="m-0 animate-fade-in-up text-center text-sm font-semibold"
|
||||
style={{ color: "var(--color-danger)" }}
|
||||
className="auth-alert animate-fade-in-up m-0"
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
@@ -241,13 +223,7 @@ export function LoginForm({
|
||||
<button
|
||||
type="submit"
|
||||
disabled={pending}
|
||||
className="btn-shine w-full cursor-pointer rounded-xl py-3.5 text-sm font-extrabold shadow-lg transition-all duration-200 hover:scale-[1.02] active:scale-95 disabled:opacity-60"
|
||||
style={{
|
||||
background: "var(--color-primary)",
|
||||
color: "var(--color-primary-foreground)",
|
||||
boxShadow:
|
||||
"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
|
||||
}}
|
||||
className="btn-brand btn-shine w-full cursor-pointer py-3.5 text-sm font-extrabold uppercase tracking-wider disabled:opacity-60"
|
||||
>
|
||||
{pending ? (
|
||||
<span className="inline-flex items-center justify-center gap-2">
|
||||
@@ -283,27 +259,41 @@ export function LoginForm({
|
||||
</form>
|
||||
|
||||
{showFooter && (
|
||||
<p
|
||||
className="mt-6 text-center text-xs"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
<div
|
||||
className="mt-6 space-y-3 border-t pt-5"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
|
||||
}}
|
||||
>
|
||||
{t("noAccount")}{" "}
|
||||
<Link
|
||||
href="/register"
|
||||
className="font-extrabold hover:underline"
|
||||
style={{ color: "var(--color-primary)" }}
|
||||
<p
|
||||
className="text-center text-xs"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
{t("createOne")}
|
||||
</Link>{" "}
|
||||
·{" "}
|
||||
{t("noAccount")}{" "}
|
||||
<Link
|
||||
href="/register"
|
||||
className="font-extrabold transition-colors hover:underline"
|
||||
style={{ color: "var(--color-primary)" }}
|
||||
>
|
||||
{t("createOne")}
|
||||
</Link>
|
||||
</p>
|
||||
<Link
|
||||
href="/forgot"
|
||||
className="font-extrabold hover:underline"
|
||||
style={{ color: "var(--color-primary)" }}
|
||||
className="flex items-center justify-center gap-2 rounded-full border px-4 py-2.5 text-xs font-extrabold transition-all duration-200 hover:-translate-y-0.5"
|
||||
style={{
|
||||
color: "var(--color-primary)",
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 8%, transparent)",
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-primary) 35%, transparent)",
|
||||
}}
|
||||
>
|
||||
<KeyRound aria-hidden="true" className="h-3.5 w-3.5" />
|
||||
{t("forgotPassword")}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { Eye, EyeOff } from "lucide-react";
|
||||
|
||||
/**
|
||||
* Round eye-icon button that reveals / hides a password field. Kept separate so
|
||||
* the login and register forms share one consistent control (and a11y labels).
|
||||
*/
|
||||
export function PasswordToggle({
|
||||
show,
|
||||
onToggle,
|
||||
labelShow,
|
||||
labelHide,
|
||||
}: {
|
||||
show: boolean;
|
||||
onToggle: () => void;
|
||||
labelShow: string;
|
||||
labelHide: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
aria-label={show ? labelHide : labelShow}
|
||||
aria-pressed={show}
|
||||
tabIndex={-1}
|
||||
className="absolute right-2.5 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full transition-colors duration-200 hover:bg-[color-mix(in_srgb,var(--color-primary)_14%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
{show ? (
|
||||
<EyeOff aria-hidden="true" className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye aria-hidden="true" className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { Lock, Mail, UserRound } from "lucide-react";
|
||||
import Script from "next/script";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { useTranslations } from "next-intl";
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
type RegisterState,
|
||||
register,
|
||||
} from "@/actions/register";
|
||||
import { PasswordToggle } from "@/components/auth/password-toggle";
|
||||
import Link from "@/components/link";
|
||||
import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
|
||||
|
||||
@@ -142,56 +143,6 @@ export function RegisterForm({
|
||||
nonce={nonce}
|
||||
/>
|
||||
) : null}
|
||||
{/* Header Banner */}
|
||||
<div
|
||||
className="relative overflow-hidden bg-center bg-cover rounded-t-xl"
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/mybobba_banner.png)",
|
||||
height: "160px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 z-10"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%)",
|
||||
}}
|
||||
/>
|
||||
<div className="relative flex items-center justify-center w-full h-full z-20">
|
||||
<div
|
||||
className="relative animate-float"
|
||||
style={{ width: "140px", height: "140px" }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 rounded-full overflow-hidden"
|
||||
style={{ zIndex: -1 }}
|
||||
>
|
||||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
background: "black",
|
||||
filter: "blur(8px)",
|
||||
transform: "scale(1.2)",
|
||||
opacity: 0.6,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Image
|
||||
src="/assets/images/FrankwithBag.gif"
|
||||
alt=""
|
||||
fill
|
||||
className="!static"
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
objectPosition: "center",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form
|
||||
action={(fd) => {
|
||||
@@ -201,33 +152,27 @@ export function RegisterForm({
|
||||
};
|
||||
formAction(fd);
|
||||
}}
|
||||
className="p-6 flex flex-col gap-6"
|
||||
style={{
|
||||
backgroundColor:
|
||||
"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
|
||||
borderRadius: "0 0 12px 12px",
|
||||
}}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
{errorMessage && (
|
||||
<div
|
||||
<p
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
className="animate-fade-in-up p-3 rounded-lg text-sm font-semibold text-primary-foreground"
|
||||
style={{ backgroundColor: "var(--color-danger)" }}
|
||||
className="auth-alert animate-fade-in-up m-0"
|
||||
>
|
||||
{errorMessage}
|
||||
</div>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{referralCode && (
|
||||
<div
|
||||
className="animate-fade-in-up flex items-center gap-2 p-3 rounded-lg text-sm font-semibold"
|
||||
className="animate-fade-in-up flex items-center gap-2 rounded-xl border px-3 py-2.5 text-sm font-semibold"
|
||||
style={{
|
||||
backgroundColor:
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
||||
color: "var(--color-primary-readable, var(--color-primary))",
|
||||
border:
|
||||
"1px solid color-mix(in srgb, var(--color-primary) 22%, transparent)",
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-primary) 26%, transparent)",
|
||||
}}
|
||||
>
|
||||
{t("invitedBy", { username: referralCode })}
|
||||
@@ -257,51 +202,45 @@ export function RegisterForm({
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
|
||||
<div className="space-y-1.5">
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block text-xs font-bold uppercase tracking-wider"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
<label htmlFor="username" className="auth-label">
|
||||
{t("username")}
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
placeholder={t("usernamePlaceholder")}
|
||||
autoComplete="username"
|
||||
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
|
||||
/>
|
||||
<div className="relative">
|
||||
<UserRound
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
/>
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
placeholder={t("usernamePlaceholder")}
|
||||
autoComplete="username"
|
||||
className="auth-input has-icon"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label
|
||||
htmlFor="mail"
|
||||
className="block text-xs font-bold uppercase tracking-wider"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
<label htmlFor="mail" className="auth-label">
|
||||
{t("email")}
|
||||
</label>
|
||||
<input
|
||||
id="mail"
|
||||
name="mail"
|
||||
type="email"
|
||||
placeholder={t("emailPlaceholder")}
|
||||
autoComplete="email"
|
||||
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 className="relative">
|
||||
<Mail
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
/>
|
||||
<input
|
||||
id="mail"
|
||||
name="mail"
|
||||
type="email"
|
||||
placeholder={t("emailPlaceholder")}
|
||||
autoComplete="email"
|
||||
className="auth-input has-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -327,14 +266,15 @@ export function RegisterForm({
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
|
||||
<div className="space-y-1.5">
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-xs font-bold uppercase tracking-wider"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
<label htmlFor="password" className="auth-label">
|
||||
{t("password")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
/>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
@@ -343,28 +283,19 @@ export function RegisterForm({
|
||||
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)",
|
||||
}}
|
||||
className="auth-input has-icon has-action"
|
||||
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 ? t("hidePassword") : t("showPassword")}
|
||||
</button>
|
||||
<PasswordToggle
|
||||
show={showPassword}
|
||||
onToggle={() => setShowPassword((v) => !v)}
|
||||
labelShow={t("showPassword")}
|
||||
labelHide={t("hidePassword")}
|
||||
/>
|
||||
</div>
|
||||
{password.length > 0 && (
|
||||
<div className="animate-fade-in-up space-y-1">
|
||||
<div className="flex gap-1">
|
||||
<div className="animate-fade-in-up space-y-1.5 pt-0.5">
|
||||
<div className="flex gap-1.5">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
@@ -373,13 +304,17 @@ export function RegisterForm({
|
||||
backgroundColor:
|
||||
i <= strength.score
|
||||
? strength.color
|
||||
: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
|
||||
: "color-mix(in srgb, var(--color-text-muted) 18%, transparent)",
|
||||
boxShadow:
|
||||
i <= strength.score
|
||||
? `0 0 8px color-mix(in srgb, ${strength.color} 45%, transparent)`
|
||||
: undefined,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p
|
||||
className="text-xs font-bold"
|
||||
className="text-[11px] font-extrabold uppercase tracking-wider"
|
||||
style={{ color: strength.color }}
|
||||
>
|
||||
{strength.label}
|
||||
@@ -388,38 +323,30 @@ export function RegisterForm({
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label
|
||||
htmlFor="password_confirmation"
|
||||
className="block text-xs font-bold uppercase tracking-wider"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
<label htmlFor="password_confirmation" className="auth-label">
|
||||
{t("confirmPassword")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
/>
|
||||
<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)",
|
||||
}}
|
||||
className="auth-input has-icon has-action"
|
||||
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 ? t("hidePassword") : t("showPassword")}
|
||||
</button>
|
||||
<PasswordToggle
|
||||
show={showConfirm}
|
||||
onToggle={() => setShowConfirm((v) => !v)}
|
||||
labelShow={t("showPassword")}
|
||||
labelHide={t("hidePassword")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -556,15 +483,13 @@ export function RegisterForm({
|
||||
});
|
||||
}
|
||||
}}
|
||||
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 ${
|
||||
termsAccepted ? "" : "opacity-70 saturate-[0.85] hover:scale-100"
|
||||
className={`btn-brand btn-shine w-full py-3.5 text-sm font-extrabold uppercase tracking-wider disabled:opacity-60 ${
|
||||
termsAccepted ? "" : "opacity-70 saturate-[0.85]"
|
||||
}`}
|
||||
style={{
|
||||
background: "var(--color-primary)",
|
||||
color: "var(--color-primary-foreground)",
|
||||
boxShadow: termsAccepted
|
||||
? "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)"
|
||||
: "0 2px 10px color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
||||
? undefined
|
||||
: "0 4px 14px -8px color-mix(in srgb, var(--color-primary) 50%, transparent)",
|
||||
}}
|
||||
>
|
||||
{isPending || signingIn ? (
|
||||
@@ -597,14 +522,25 @@ export function RegisterForm({
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="text-center">
|
||||
<div
|
||||
className="border-t pt-4 text-center"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-sm font-bold hover:underline transition-all"
|
||||
className="inline-flex items-center gap-2 rounded-full border px-5 py-2.5 text-xs font-extrabold transition-all duration-200 hover:-translate-y-0.5"
|
||||
style={{
|
||||
color: "var(--color-primary-readable, var(--color-primary))",
|
||||
color: "var(--color-primary)",
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 8%, transparent)",
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-primary) 35%, transparent)",
|
||||
}}
|
||||
>
|
||||
<UserRound aria-hidden="true" className="h-3.5 w-3.5" />
|
||||
{t("alreadyHaveAccount")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user