mirror of
https://github.com/FranP-code/Reflecto.git
synced 2025-10-13 00:43:31 +00:00
feat: add auth layout component with shared sign-in/sign-up forms
This commit is contained in:
69
apps/web/src/components/auth-layout.tsx
Normal file
69
apps/web/src/components/auth-layout.tsx
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Link } from "@tanstack/react-router";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
|
||||||
|
|
||||||
|
export default function AuthLayout({
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
children,
|
||||||
|
footer,
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
subtitle?: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
footer?: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-[100svh] w-full overflow-hidden">
|
||||||
|
{/* Background aesthetics */}
|
||||||
|
<div className="pointer-events-none absolute inset-0 -z-10">
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(1200px_600px_at_50%_-10%,hsl(262_84%_60%/.25),transparent_60%),radial-gradient(800px_400px_at_110%_10%,hsl(292_84%_60%/.15),transparent_60%),radial-gradient(800px_400px_at_-10%_10%,hsl(202_84%_60%/.12),transparent_60%)]" />
|
||||||
|
<div className="absolute inset-0 bg-grid-white/5 [mask-image:radial-gradient(1000px_600px_at_center,black,transparent)]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-0 px-4 py-10 lg:min-h-[100svh] lg:grid-cols-2 lg:gap-8 lg:px-8 lg:py-16">
|
||||||
|
{/* Marketing / Brand panel */}
|
||||||
|
<aside className="relative hidden flex-col justify-between lg:flex">
|
||||||
|
<div>
|
||||||
|
<Link className="inline-flex items-center gap-2" to="/">
|
||||||
|
<span
|
||||||
|
aria-hidden
|
||||||
|
className="inline-block h-7 w-7 rounded bg-gradient-to-br from-purple-500 to-fuchsia-500 shadow-md shadow-fuchsia-500/20"
|
||||||
|
/>
|
||||||
|
<span className="text-lg font-semibold tracking-tight">Reflecto</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="mt-16 max-w-lg">
|
||||||
|
<h1 className="text-balance text-4xl font-semibold leading-tight tracking-tight">
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
|
{subtitle ? (
|
||||||
|
<p className="mt-4 text-muted-foreground text-base">{subtitle}</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-16 select-none text-sm text-muted-foreground">
|
||||||
|
<p>© {new Date().getFullYear()} Reflecto. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Form panel */}
|
||||||
|
<main className="flex items-center justify-center">
|
||||||
|
<div className="w-full max-w-md">
|
||||||
|
<Card className="bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:bg-zinc-900/80">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-2xl">{title}</CardTitle>
|
||||||
|
{subtitle ? (
|
||||||
|
<CardDescription>{subtitle}</CardDescription>
|
||||||
|
) : null}
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>{children}</CardContent>
|
||||||
|
</Card>
|
||||||
|
{footer ? <div className="mt-4">{footer}</div> : null}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -64,95 +64,71 @@ export default function SignInForm({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto mt-10 w-full max-w-md p-6">
|
<form
|
||||||
<h1 className="mb-6 text-center font-bold text-3xl">Welcome Back</h1>
|
className="space-y-4"
|
||||||
|
onSubmit={(e) => {
|
||||||
<form
|
e.preventDefault();
|
||||||
className="space-y-4"
|
e.stopPropagation();
|
||||||
onSubmit={(e) => {
|
form.handleSubmit();
|
||||||
e.preventDefault();
|
}}
|
||||||
e.stopPropagation();
|
>
|
||||||
form.handleSubmit();
|
<div>
|
||||||
}}
|
<form.Field name="email">
|
||||||
>
|
{(field) => (
|
||||||
<div>
|
<div className="space-y-2">
|
||||||
<form.Field name="email">
|
<Label htmlFor={field.name}>Email</Label>
|
||||||
{(field) => (
|
<Input
|
||||||
<div className="space-y-2">
|
id={field.name}
|
||||||
<Label htmlFor={field.name}>Email</Label>
|
name={field.name}
|
||||||
<Input
|
onBlur={field.handleBlur}
|
||||||
id={field.name}
|
onChange={(e) => field.handleChange(e.target.value)}
|
||||||
name={field.name}
|
type="email"
|
||||||
onBlur={field.handleBlur}
|
value={field.state.value}
|
||||||
onChange={(e) => field.handleChange(e.target.value)}
|
/>
|
||||||
type="email"
|
{field.state.meta.errors.map((error) => (
|
||||||
value={field.state.value}
|
<p className="text-red-500" key={error?.message}>
|
||||||
/>
|
{error?.message}
|
||||||
{field.state.meta.errors.map((error) => (
|
</p>
|
||||||
<p className="text-red-500" key={error?.message}>
|
))}
|
||||||
{error?.message}
|
</div>
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</form.Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<form.Field name="password">
|
|
||||||
{(field) => (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor={field.name}>Password</Label>
|
|
||||||
<Input
|
|
||||||
id={field.name}
|
|
||||||
name={field.name}
|
|
||||||
onBlur={field.handleBlur}
|
|
||||||
onChange={(e) => field.handleChange(e.target.value)}
|
|
||||||
type="password"
|
|
||||||
value={field.state.value}
|
|
||||||
/>
|
|
||||||
{field.state.meta.errors.map((error) => (
|
|
||||||
<p className="text-red-500" key={error?.message}>
|
|
||||||
{error?.message}
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</form.Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form.Subscribe>
|
|
||||||
{(state) => (
|
|
||||||
<Button
|
|
||||||
className="w-full"
|
|
||||||
disabled={!state.canSubmit || state.isSubmitting}
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
{state.isSubmitting ? "Submitting..." : "Sign In"}
|
|
||||||
</Button>
|
|
||||||
)}
|
)}
|
||||||
</form.Subscribe>
|
</form.Field>
|
||||||
</form>
|
|
||||||
|
|
||||||
<div className="mt-4 space-y-2 text-center">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Button asChild className="px-0" variant="link">
|
|
||||||
<Link search={{ mode: "recover" }} to="/password">
|
|
||||||
Forgot password?
|
|
||||||
</Link>
|
|
||||||
</Button>
|
|
||||||
<Button asChild className="px-0" variant="link">
|
|
||||||
<Link to="/verify-email">Verify your email</Link>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
className="text-indigo-600 hover:text-indigo-800"
|
|
||||||
onClick={onSwitchToSignUp}
|
|
||||||
variant="link"
|
|
||||||
>
|
|
||||||
Need an account? Sign Up
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div>
|
||||||
|
<form.Field name="password">
|
||||||
|
{(field) => (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor={field.name}>Password</Label>
|
||||||
|
<Input
|
||||||
|
id={field.name}
|
||||||
|
name={field.name}
|
||||||
|
onBlur={field.handleBlur}
|
||||||
|
onChange={(e) => field.handleChange(e.target.value)}
|
||||||
|
type="password"
|
||||||
|
value={field.state.value}
|
||||||
|
/>
|
||||||
|
{field.state.meta.errors.map((error) => (
|
||||||
|
<p className="text-red-500" key={error?.message}>
|
||||||
|
{error?.message}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form.Field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form.Subscribe>
|
||||||
|
{(state) => (
|
||||||
|
<Button
|
||||||
|
className="w-full"
|
||||||
|
disabled={!state.canSubmit || state.isSubmitting}
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{state.isSubmitting ? "Submitting..." : "Sign In"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</form.Subscribe>
|
||||||
|
</form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -66,112 +66,93 @@ export default function SignUpForm({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto mt-10 w-full max-w-md p-6">
|
<form
|
||||||
<h1 className="mb-6 text-center font-bold text-3xl">Create Account</h1>
|
className="space-y-4"
|
||||||
|
onSubmit={(e) => {
|
||||||
<form
|
e.preventDefault();
|
||||||
className="space-y-4"
|
e.stopPropagation();
|
||||||
onSubmit={(e) => {
|
form.handleSubmit();
|
||||||
e.preventDefault();
|
}}
|
||||||
e.stopPropagation();
|
>
|
||||||
form.handleSubmit();
|
<div>
|
||||||
}}
|
<form.Field name="name">
|
||||||
>
|
{(field) => (
|
||||||
<div>
|
<div className="space-y-2">
|
||||||
<form.Field name="name">
|
<Label htmlFor={field.name}>Name</Label>
|
||||||
{(field) => (
|
<Input
|
||||||
<div className="space-y-2">
|
id={field.name}
|
||||||
<Label htmlFor={field.name}>Name</Label>
|
name={field.name}
|
||||||
<Input
|
onBlur={field.handleBlur}
|
||||||
id={field.name}
|
onChange={(e) => field.handleChange(e.target.value)}
|
||||||
name={field.name}
|
value={field.state.value}
|
||||||
onBlur={field.handleBlur}
|
/>
|
||||||
onChange={(e) => field.handleChange(e.target.value)}
|
{field.state.meta.errors.map((error) => (
|
||||||
value={field.state.value}
|
<p className="text-red-500" key={error?.message}>
|
||||||
/>
|
{error?.message}
|
||||||
{field.state.meta.errors.map((error) => (
|
</p>
|
||||||
<p className="text-red-500" key={error?.message}>
|
))}
|
||||||
{error?.message}
|
</div>
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</form.Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<form.Field name="email">
|
|
||||||
{(field) => (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor={field.name}>Email</Label>
|
|
||||||
<Input
|
|
||||||
id={field.name}
|
|
||||||
name={field.name}
|
|
||||||
onBlur={field.handleBlur}
|
|
||||||
onChange={(e) => field.handleChange(e.target.value)}
|
|
||||||
type="email"
|
|
||||||
value={field.state.value}
|
|
||||||
/>
|
|
||||||
{field.state.meta.errors.map((error) => (
|
|
||||||
<p className="text-red-500" key={error?.message}>
|
|
||||||
{error?.message}
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</form.Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<form.Field name="password">
|
|
||||||
{(field) => (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor={field.name}>Password</Label>
|
|
||||||
<Input
|
|
||||||
id={field.name}
|
|
||||||
name={field.name}
|
|
||||||
onBlur={field.handleBlur}
|
|
||||||
onChange={(e) => field.handleChange(e.target.value)}
|
|
||||||
type="password"
|
|
||||||
value={field.state.value}
|
|
||||||
/>
|
|
||||||
{field.state.meta.errors.map((error) => (
|
|
||||||
<p className="text-red-500" key={error?.message}>
|
|
||||||
{error?.message}
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</form.Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form.Subscribe>
|
|
||||||
{(state) => (
|
|
||||||
<Button
|
|
||||||
className="w-full"
|
|
||||||
disabled={!state.canSubmit || state.isSubmitting}
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
{state.isSubmitting ? "Submitting..." : "Sign Up"}
|
|
||||||
</Button>
|
|
||||||
)}
|
)}
|
||||||
</form.Subscribe>
|
</form.Field>
|
||||||
</form>
|
|
||||||
|
|
||||||
<div className="mt-4 space-y-2 text-center">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Button asChild className="px-0" variant="link">
|
|
||||||
<Link to="/verify-email">Verify your email</Link>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
className="text-indigo-600 hover:text-indigo-800"
|
|
||||||
onClick={onSwitchToSignIn}
|
|
||||||
variant="link"
|
|
||||||
>
|
|
||||||
Already have an account? Sign In
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div>
|
||||||
|
<form.Field name="email">
|
||||||
|
{(field) => (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor={field.name}>Email</Label>
|
||||||
|
<Input
|
||||||
|
id={field.name}
|
||||||
|
name={field.name}
|
||||||
|
onBlur={field.handleBlur}
|
||||||
|
onChange={(e) => field.handleChange(e.target.value)}
|
||||||
|
type="email"
|
||||||
|
value={field.state.value}
|
||||||
|
/>
|
||||||
|
{field.state.meta.errors.map((error) => (
|
||||||
|
<p className="text-red-500" key={error?.message}>
|
||||||
|
{error?.message}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form.Field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<form.Field name="password">
|
||||||
|
{(field) => (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor={field.name}>Password</Label>
|
||||||
|
<Input
|
||||||
|
id={field.name}
|
||||||
|
name={field.name}
|
||||||
|
onBlur={field.handleBlur}
|
||||||
|
onChange={(e) => field.handleChange(e.target.value)}
|
||||||
|
type="password"
|
||||||
|
value={field.state.value}
|
||||||
|
/>
|
||||||
|
{field.state.meta.errors.map((error) => (
|
||||||
|
<p className="text-red-500" key={error?.message}>
|
||||||
|
{error?.message}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form.Field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form.Subscribe>
|
||||||
|
{(state) => (
|
||||||
|
<Button
|
||||||
|
className="w-full"
|
||||||
|
disabled={!state.canSubmit || state.isSubmitting}
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{state.isSubmitting ? "Submitting..." : "Sign Up"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</form.Subscribe>
|
||||||
|
</form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
import { createFileRoute, Link, redirect } from "@tanstack/react-router";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import SignInForm from "@/components/sign-in-form";
|
import SignInForm from "@/components/sign-in-form";
|
||||||
import SignUpForm from "@/components/sign-up-form";
|
import SignUpForm from "@/components/sign-up-form";
|
||||||
|
import AuthLayout from "@/components/auth-layout";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
import { account } from "@/lib/auth-client";
|
import { account } from "@/lib/auth-client";
|
||||||
|
|
||||||
export const Route = createFileRoute("/login")({
|
export const Route = createFileRoute("/login")({
|
||||||
@@ -27,9 +29,55 @@ export const Route = createFileRoute("/login")({
|
|||||||
function RouteComponent() {
|
function RouteComponent() {
|
||||||
const [showSignIn, setShowSignIn] = useState(false);
|
const [showSignIn, setShowSignIn] = useState(false);
|
||||||
|
|
||||||
return showSignIn ? (
|
const title = showSignIn ? "Welcome back" : "Create your account";
|
||||||
<SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
|
const subtitle = showSignIn
|
||||||
) : (
|
? "Sign in to access your dashboard and keep creating."
|
||||||
<SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
|
: "Join Reflecto to capture ideas and collaborate seamlessly.";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthLayout
|
||||||
|
footer={
|
||||||
|
<div className="flex flex-col items-center gap-2 text-center sm:flex-row sm:justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Button asChild className="px-0" variant="link">
|
||||||
|
<Link search={{ mode: "recover" }} to="/password">
|
||||||
|
Forgot password?
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild className="px-0" variant="link">
|
||||||
|
<Link to="/verify-email">Verify your email</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{showSignIn ? (
|
||||||
|
<Button
|
||||||
|
className="px-0 text-primary"
|
||||||
|
onClick={() => setShowSignIn(false)}
|
||||||
|
variant="link"
|
||||||
|
>
|
||||||
|
Need an account? Sign Up
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
className="px-0 text-primary"
|
||||||
|
onClick={() => setShowSignIn(true)}
|
||||||
|
variant="link"
|
||||||
|
>
|
||||||
|
Already have an account? Sign In
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
subtitle={subtitle}
|
||||||
|
title={title}
|
||||||
|
>
|
||||||
|
{showSignIn ? (
|
||||||
|
<SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
|
||||||
|
) : (
|
||||||
|
<SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
|
||||||
|
)}
|
||||||
|
</AuthLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user