init
This commit is contained in:
phaichayon
13
src/features/auth/components/github-auth-button.tsx
Normal file
13
src/features/auth/components/github-auth-button.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Icons } from '@/components/icons';
|
||||
|
||||
export default function GithubSignInButton() {
|
||||
return (
|
||||
<Button className='w-full' variant='outline' type='button' disabled>
|
||||
<Icons.github className='mr-2 h-4 w-4' />
|
||||
GitHub coming later
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
69
src/features/auth/components/interactive-grid.tsx
Normal file
69
src/features/auth/components/interactive-grid.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
/**
|
||||
* InteractiveGridPattern is a component that renders a grid pattern with interactive squares.
|
||||
*
|
||||
* @param width - The width of each square.
|
||||
* @param height - The height of each square.
|
||||
* @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.
|
||||
* @param className - The class name of the grid.
|
||||
* @param squaresClassName - The class name of the squares.
|
||||
*/
|
||||
interface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {
|
||||
width?: number;
|
||||
height?: number;
|
||||
squares?: [number, number]; // [horizontal, vertical]
|
||||
className?: string;
|
||||
squaresClassName?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The InteractiveGridPattern component.
|
||||
*
|
||||
* @see InteractiveGridPatternProps for the props interface.
|
||||
* @returns A React component.
|
||||
*/
|
||||
export function InteractiveGridPattern({
|
||||
width = 40,
|
||||
height = 40,
|
||||
squares = [24, 24],
|
||||
className,
|
||||
squaresClassName,
|
||||
...props
|
||||
}: InteractiveGridPatternProps) {
|
||||
const [horizontal, vertical] = squares;
|
||||
const [hoveredSquare, setHoveredSquare] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width * horizontal}
|
||||
height={height * vertical}
|
||||
className={cn('absolute inset-0 h-full w-full border border-gray-400/30', className)}
|
||||
{...props}
|
||||
>
|
||||
{Array.from({ length: horizontal * vertical }).map((_, index) => {
|
||||
const x = (index % horizontal) * width;
|
||||
const y = Math.floor(index / horizontal) * height;
|
||||
return (
|
||||
<rect
|
||||
key={index}
|
||||
x={x}
|
||||
y={y}
|
||||
width={width}
|
||||
height={height}
|
||||
className={cn(
|
||||
'stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000',
|
||||
hoveredSquare === index ? 'fill-gray-300/30' : 'fill-transparent',
|
||||
squaresClassName
|
||||
)}
|
||||
onMouseEnter={() => setHoveredSquare(index)}
|
||||
onMouseLeave={() => setHoveredSquare(null)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
171
src/features/auth/components/sign-in-view.tsx
Normal file
171
src/features/auth/components/sign-in-view.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useAppForm } from "@/components/ui/tanstack-form";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getSession, signIn } from "next-auth/react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import * as z from "zod";
|
||||
import { InteractiveGridPattern } from "./interactive-grid";
|
||||
|
||||
const signInSchema = z.object({
|
||||
email: z.string().email("Enter a valid email address"),
|
||||
password: z.string().min(8, "Password must be at least 8 characters"),
|
||||
});
|
||||
|
||||
export default function SignInViewPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
validators: {
|
||||
onSubmit: signInSchema,
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
startTransition(async () => {
|
||||
const result = await signIn("credentials", {
|
||||
email: value.email,
|
||||
password: value.password,
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
if (result?.error) {
|
||||
toast.error("Invalid email or password");
|
||||
return;
|
||||
}
|
||||
|
||||
await getSession();
|
||||
toast.success("Signed in successfully");
|
||||
window.location.assign(callbackUrl);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
|
||||
<div className="relative hidden h-full flex-col p-10 lg:flex dark:border-r">
|
||||
<div className="absolute inset-0 bg-sidebar" />
|
||||
<div className="text-sidebar-foreground relative z-20 flex items-center text-lg font-medium">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="mr-2 h-6 w-6"
|
||||
>
|
||||
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
|
||||
</svg>
|
||||
Auth.js Workspace Login
|
||||
</div>
|
||||
<InteractiveGridPattern
|
||||
className={cn(
|
||||
"mask-[radial-gradient(400px_circle_at_center,white,transparent)]",
|
||||
"inset-x-0 inset-y-[0%] h-full skew-y-12",
|
||||
)}
|
||||
/>
|
||||
<div className="text-sidebar-foreground relative z-20 mt-auto">
|
||||
<blockquote className="space-y-2">
|
||||
<p className="text-lg">
|
||||
“Move from template scaffolding to app-owned auth and data
|
||||
without tearing up the dashboard UX.”
|
||||
</p>
|
||||
<footer className="text-sidebar-foreground/70 text-sm">
|
||||
Training System
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full items-center justify-center p-4 lg:p-8">
|
||||
<div className="flex w-full max-w-md flex-col items-center justify-center space-y-6">
|
||||
<div className="w-full space-y-2 text-center">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Sign in to your workspace
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Use the credentials created for you by a super admin or
|
||||
organization admin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form.AppForm>
|
||||
<form.Form className="w-full space-y-4">
|
||||
<form.AppField
|
||||
name="email"
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>
|
||||
Email
|
||||
</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type="email"
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) =>
|
||||
field.handleChange(event.target.value)
|
||||
}
|
||||
placeholder="you@example.com"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.AppField
|
||||
name="password"
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>
|
||||
Password
|
||||
</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type="password"
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) =>
|
||||
field.handleChange(event.target.value)
|
||||
}
|
||||
placeholder="Enter your password"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button className="w-full" type="submit" isLoading={isPending}>
|
||||
Sign in
|
||||
</Button>
|
||||
</form.Form>
|
||||
</form.AppForm>
|
||||
|
||||
<div className="text-muted-foreground space-y-2 px-8 text-center text-xs">
|
||||
<p>
|
||||
This starter now uses app-owned authentication with Auth.js and an
|
||||
internal organization model.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
219
src/features/auth/components/sign-up-view.tsx
Normal file
219
src/features/auth/components/sign-up-view.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
'use client';
|
||||
|
||||
import { Button, buttonVariants } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useAppForm } from '@/components/ui/tanstack-form';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { signIn } from 'next-auth/react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useTransition } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import * as z from 'zod';
|
||||
import { InteractiveGridPattern } from './interactive-grid';
|
||||
|
||||
const signUpSchema = z.object({
|
||||
name: z.string().min(2, 'Name must be at least 2 characters'),
|
||||
email: z.string().email('Enter a valid email address'),
|
||||
password: z.string().min(8, 'Password must be at least 8 characters'),
|
||||
workspaceName: z.string().min(2, 'Workspace name must be at least 2 characters')
|
||||
});
|
||||
|
||||
export default function SignUpViewPage() {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
workspaceName: ''
|
||||
},
|
||||
validators: {
|
||||
onSubmit: signUpSchema
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
startTransition(async () => {
|
||||
const response = await fetch('/api/auth/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(value)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = (await response.json().catch(() => null)) as { message?: string } | null;
|
||||
toast.error(data?.message ?? 'Unable to create account');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await signIn('credentials', {
|
||||
email: value.email,
|
||||
password: value.password,
|
||||
redirect: false
|
||||
});
|
||||
|
||||
if (result?.error) {
|
||||
toast.error('Account created, but sign-in failed. Please sign in manually.');
|
||||
router.push('/auth/sign-in');
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('Account created successfully');
|
||||
router.push('/dashboard');
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className='relative min-h-screen items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0'>
|
||||
<Link
|
||||
href='/auth/sign-in'
|
||||
className={cn(
|
||||
buttonVariants({ variant: 'ghost' }),
|
||||
'absolute top-4 right-4 hidden md:top-8 md:right-8'
|
||||
)}
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
<div className='relative hidden h-full flex-col p-10 lg:flex dark:border-r'>
|
||||
<div className='absolute inset-0 bg-sidebar' />
|
||||
<div className='text-sidebar-foreground relative z-20 flex items-center text-lg font-medium'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className='mr-2 h-6 w-6'
|
||||
>
|
||||
<path d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' />
|
||||
</svg>
|
||||
Create your first workspace
|
||||
</div>
|
||||
<InteractiveGridPattern
|
||||
className={cn(
|
||||
'mask-[radial-gradient(400px_circle_at_center,white,transparent)]',
|
||||
'inset-x-0 inset-y-[0%] h-full skew-y-12'
|
||||
)}
|
||||
/>
|
||||
<div className='text-sidebar-foreground relative z-20 mt-auto'>
|
||||
<blockquote className='space-y-2'>
|
||||
<p className='text-lg'>
|
||||
“Own the auth boundary, own the org model, and keep your feature modules
|
||||
stable.”
|
||||
</p>
|
||||
<footer className='text-sidebar-foreground/70 text-sm'>Training System</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex h-full items-center justify-center p-4 lg:p-8'>
|
||||
<div className='flex w-full max-w-md flex-col items-center justify-center space-y-6'>
|
||||
<div className='w-full space-y-2 text-center'>
|
||||
<h1 className='text-2xl font-semibold tracking-tight'>Create an account</h1>
|
||||
<p className='text-muted-foreground text-sm'>
|
||||
We'll create your user, your first workspace, and sign you in.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form.AppForm>
|
||||
<form.Form className='w-full space-y-4'>
|
||||
<form.AppField
|
||||
name='name'
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>Full name</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) => field.handleChange(event.target.value)}
|
||||
placeholder='Jane Doe'
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.AppField
|
||||
name='workspaceName'
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>Workspace name</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) => field.handleChange(event.target.value)}
|
||||
placeholder='Acme Studio'
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.AppField
|
||||
name='email'
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>Email</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type='email'
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) => field.handleChange(event.target.value)}
|
||||
placeholder='you@example.com'
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.AppField
|
||||
name='password'
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>Password</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type='password'
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(event) => field.handleChange(event.target.value)}
|
||||
placeholder='Minimum 8 characters'
|
||||
disabled={isPending}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button className='w-full' type='submit' isLoading={isPending}>
|
||||
Create account
|
||||
</Button>
|
||||
</form.Form>
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
116
src/features/auth/components/user-auth-form.tsx
Normal file
116
src/features/auth/components/user-auth-form.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useAppForm } from "@/components/ui/tanstack-form";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import * as z from "zod";
|
||||
|
||||
const formSchema = z.object({
|
||||
email: z.string().email({ message: "Enter a valid email address" }),
|
||||
password: z
|
||||
.string()
|
||||
.min(8, { message: "Password must be at least 8 characters" }),
|
||||
});
|
||||
|
||||
export default function UserAuthForm() {
|
||||
const router = useRouter();
|
||||
const [loading, startTransition] = useTransition();
|
||||
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
validators: {
|
||||
onSubmit: formSchema,
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
startTransition(async () => {
|
||||
const result = await signIn("credentials", {
|
||||
email: value.email,
|
||||
password: value.password,
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
if (result?.error) {
|
||||
toast.error("Invalid email or password");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success("Signed in successfully");
|
||||
router.push("/dashboard");
|
||||
router.refresh();
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<form.AppForm>
|
||||
<form.Form className="w-full space-y-2">
|
||||
<form.AppField
|
||||
name="email"
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>
|
||||
Email
|
||||
</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
placeholder="Enter your email..."
|
||||
disabled={loading}
|
||||
aria-invalid={
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
<form.AppField
|
||||
name="password"
|
||||
children={(field) => (
|
||||
<field.FieldSet>
|
||||
<field.Field>
|
||||
<field.FieldLabel htmlFor={field.name}>
|
||||
Password
|
||||
</field.FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type="password"
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
placeholder="Enter your password..."
|
||||
disabled={loading}
|
||||
aria-invalid={
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
}
|
||||
/>
|
||||
</field.Field>
|
||||
<field.FieldError />
|
||||
</field.FieldSet>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
disabled={loading}
|
||||
className="mt-2 ml-auto w-full"
|
||||
type="submit"
|
||||
>
|
||||
Continue with Email
|
||||
</Button>
|
||||
</form.Form>
|
||||
</form.AppForm>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user