Chneemann/flowstate
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(auth): match register page design with welcome and login UI
All checks were successful
Deploy Flowstate to VPS / deploy (push) Successful in 46s
Details

Browse source
This commit is contained in:
Chneemann 2026-10-08 09:43:31 +02:00
parent 01a1c27efa
commit 587d54865f
No known key found for this signature in database
1 changed files with 138 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
app/(auth)/register/page.tsx
View file

@ -9,6 +9,8 @@ import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { registerUser } from "@/lib/services/auth.service";
import { Loader2, UserPlus } from "lucide-react";
import { JSX } from "react/jsx-runtime";
/**
* Renders the registration page featuring a sign-up form, error feedback,
@ -16,7 +18,7 @@ import { registerUser } from "@/lib/services/auth.service";
*
* @returns {JSX.Element} The rendered registration page component.
*/
export default function RegisterPage() {
export default function RegisterPage(): JSX.Element {
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const router = useRouter();
@ -26,9 +28,13 @@ export default function RegisterPage() {
* and navigates to summary page on successful registration.
*
* @async
* @function handleSubmit
* @param {React.SubmitEvent<HTMLFormElement>} event - The form submission event.
* @returns {Promise<void>} Resolves when registration handling completes.
*/
async function handleSubmit(event: React.SubmitEvent<HTMLFormElement>) {
async function handleSubmit(
event: React.SubmitEvent<HTMLFormElement>,
): Promise<void> {
event.preventDefault();
setError(null);
setLoading(true);
@ -47,14 +53,33 @@ export default function RegisterPage() {
}
return (
<div className="flex h-dvh w-full items-center justify-center">
<div className="w-full max-w-sm p-6 space-y-6 border border-border rounded-xl bg-card backdrop-blur-md">
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold tracking-tight">
<div className="relative min-h-dvh w-full flex flex-col items-center justify-center p-4 overflow-x-hidden bg-background text-foreground selection:bg-primary selection:text-background">
{/* Background Ambient Glow */}
<div
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 -top-20 sm:-top-32 -z-10 transform-gpu overflow-hidden blur-2xl sm:blur-3xl"
>
<div
className="relative left-[calc(50%-10rem)] aspect-1155/678 w-[20rem] sm:w-50rem -translate-x-1/2 rotate-30deg bg-linear-to-tr from-accent to-primary opacity-20 sm:opacity-15"
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
/>
</div>
{/* Registration Card Container */}
<div className="w-full max-w-sm p-6 sm:p-8 space-y-6 border border-border rounded-2xl bg-card/80 backdrop-blur-md shadow-xl">
<div className="space-y-1.5 text-center">
<h1 className="text-2xl font-extrabold tracking-tight">
Create an Account
</h1>
<p className="text-sm text-foreground-muted">
Get started with your Flowstate Workspace.
<p className="text-xs sm:text-sm text-foreground-muted">
Get started with your{" "}
<span className="bg-linear-to-r from-primary to-accent bg-clip-text font-semibold text-transparent">
Flowstate
</span>{" "}
workspace.
</p>
</div>
@ -68,60 +93,123 @@ export default function RegisterPage() {
)}
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-2 gap-2.5">
<div className="space-y-1">
<label
htmlFor="firstName"
className="block text-xs font-medium text-foreground-muted"
>
First Name*
</label>
<input
id="firstName"
name="firstName"
type="text"
placeholder="First Name*"
placeholder="John"
maxLength={50}
required
className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
/>
<input
name="lastName"
type="text"
placeholder="Last Name*"
maxLength={50}
required
className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
/>
</div>
<div className="space-y-1">
<label
htmlFor="lastName"
className="block text-xs font-medium text-foreground-muted"
>
Last Name*
</label>
<input
id="lastName"
name="lastName"
type="text"
placeholder="Doe"
maxLength={50}
required
className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
/>
</div>
</div>
<div className="space-y-1">
<label
htmlFor="email"
className="block text-xs font-medium text-foreground-muted"
>
Email Address*
</label>
<input
id="email"
name="email"
type="email"
placeholder="Email*"
placeholder="name@example.com"
maxLength={255}
required
className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
/>
</div>
<div className="space-y-1">
<label
htmlFor="password"
className="block text-xs font-medium text-foreground-muted"
>
Password*
</label>
<input
id="password"
name="password"
type="password"
placeholder="Password*"
placeholder="••••••••••••"
maxLength={72}
required
className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
/>
</div>
<div className="space-y-1">
<label
htmlFor="confirmPassword"
className="block text-xs font-medium text-foreground-muted"
>
Confirm Password*
</label>
<input
id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="Confirm Password*"
placeholder="••••••••••••"
maxLength={72}
required
className="w-full px-3 py-2 text-sm rounded-lg border border-border bg-background focus:outline-none focus:border-foreground"
className="w-full px-3.5 py-2.5 text-sm rounded-lg border border-border bg-background/50 text-foreground placeholder:text-foreground-muted/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-2 text-sm font-medium rounded-lg bg-foreground text-background hover:opacity-70 transition-opacity disabled:opacity-20 cursor-pointer disabled:cursor-auto"
className="w-full py-2.5 px-4 text-sm font-semibold rounded-lg bg-primary text-background shadow-md hover:bg-primary-hover transition-colors duration-200 disabled:opacity-50 flex items-center justify-center gap-2 cursor-pointer disabled:cursor-not-allowed pt-2"
>
{loading ? "Being created..." : "Sign Up"}
{loading ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
Creating account...
</>
) : (
<>
<UserPlus className="w-4 h-4" />
Sign Up
</>
)}
</button>
</form>
<div className="text-center text-xs text-foreground-muted">
<div className="text-center text-xs text-foreground-muted pt-1">
Already have an account?{" "}
<Link href="/login" className="text-foreground hover:underline">
<Link
href="/login"
className="font-medium text-foreground hover:text-primary transition-colors hover:underline"
>
Sign In
</Link>
</div>