Feat: Настроить структуру auth route ( #41 )

apps/web/app/(auth)/auth-form-layout.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@repo/ui'
+
+interface Props {
+	title?: React.ReactNode
+	children: React.ReactNode
+	footer?: React.ReactNode
+}
+
+const AuthFormLayout = (props: Props) => {
+	const { title, children, footer } = props
+
+	return (
+		<Card className='w-full max-w-sm'>
+			<CardHeader>
+				<CardTitle>{title}</CardTitle>
+			</CardHeader>
+			<CardContent>{children}</CardContent>
+			<CardFooter>{footer}</CardFooter>
+		</Card>
+	)
+}
+
+export { AuthFormLayout }

apps/web/app/(auth)/layout.tsx

@@ -0,0 +1,20 @@
+import { FEATURES } from '@/hooks/use-feature-flag'
+import { notFound } from 'next/navigation'
+
+import { HStack } from '@repo/ui'
+
+interface Props {
+	children: React.ReactNode
+}
+
+export default function AuthLayout({ children }: Props) {
+	if (!FEATURES.AUTH) {
+		notFound()
+	}
+
+	return (
+		<HStack align='center' justify='center' className='min-h-screen bg-foreground'>
+			{children}
+		</HStack>
+	)
+}

apps/web/app/authorization/authorization-form.tsx → apps/web/app/(auth)/login/login-form.tsx

@@ -1,17 +1,24 @@
 'use client'
 
-import React from 'react'
 import { useFormContext } from 'react-hook-form'
 
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from '@repo/ui'
+import {
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	Input,
+	VStack,
+} from '@repo/ui'
 
-import { AuthorizationFormValues } from './use-authorization-form'
+import { LoginFormValues } from './use-login-form'
 
-const AuthorizationForm = () => {
-	const { control } = useFormContext<AuthorizationFormValues>()
+const LoginForm = () => {
+	const { control } = useFormContext<LoginFormValues>()
 
 	return (
-		<div className='py-4 grid gap-2'>
+		<VStack>
 			<FormField
 				control={control}
 				name='email'
@@ -32,14 +39,14 @@ const AuthorizationForm = () => {
 					<FormItem>
 						<FormLabel>Пароль</FormLabel>
 						<FormControl>
-							<Input {...field} />
+							<Input {...field} type='password' />
 						</FormControl>
 						<FormMessage />
 					</FormItem>
 				)}
 			/>
-		</div>
+		</VStack>
 	)
 }
 
-export { AuthorizationForm }
+export { LoginForm }

apps/web/app/(auth)/login/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { Button, Form } from '@repo/ui'
+
+import { AuthFormLayout } from '../auth-form-layout'
+import { LoginForm } from './login-form'
+import { LoginFormValues, useLoginForm } from './use-login-form'
+
+export default function LoginPage() {
+	const form = useLoginForm()
+
+	const onSubmit = async (data: LoginFormValues) => {
+		console.log(data)
+	}
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className='w-full max-w-sm'>
+				<AuthFormLayout
+					title='Войдите в свой аккаунт'
+					footer={
+						<Button
+							disabled={form.formState.isSubmitting}
+							type='submit'
+							variant='default'
+							className='w-full'
+						>
+							Войти
+						</Button>
+					}
+				>
+					<LoginForm />
+				</AuthFormLayout>
+			</form>
+		</Form>
+	)
+}

apps/web/app/authorization/use-authorization-form.ts → apps/web/app/(auth)/login/use-login-form.ts

@@ -13,15 +13,15 @@ const formSchema = z.object({
 	}),
 })
 
-export type AuthorizationFormValues = z.infer<typeof formSchema>
+export type LoginFormValues = z.infer<typeof formSchema>
 
-const useAuthorizationForm = () =>
-	useForm<AuthorizationFormValues>({
+const useLoginForm = () =>
+	useForm<LoginFormValues>({
 		resolver: standardSchemaResolver(formSchema),
 		defaultValues: {
 			email: '',
 			password: '',
 		},
 	})
 
-export { useAuthorizationForm }
+export { useLoginForm }

apps/web/app/(auth)/register/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { Button, Form } from '@repo/ui'
+
+import { AuthFormLayout } from '../auth-form-layout'
+import { RegisterForm } from './register-form'
+import { RegisterFormValues, useRegisterForm } from './use-register-form'
+
+export default function RegisterPage() {
+	const form = useRegisterForm()
+
+	const onSubmit = async (data: RegisterFormValues) => {
+		console.log(data)
+	}
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className='w-full max-w-sm'>
+				<AuthFormLayout
+					title='Регистрация'
+					footer={
+						<Button
+							disabled={form.formState.isSubmitting}
+							type='submit'
+							variant='default'
+							className='w-full'
+						>
+							Зарегистрироваться
+						</Button>
+					}
+				>
+					<RegisterForm />
+				</AuthFormLayout>
+			</form>
+		</Form>
+	)
+}

apps/web/app/(auth)/register/register-form.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useFormContext } from 'react-hook-form'
+
+import {
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	Input,
+	VStack,
+} from '@repo/ui'
+
+import { RegisterFormValues } from './use-register-form'
+
+const RegisterForm = () => {
+	const { control } = useFormContext<RegisterFormValues>()
+
+	return (
+		<VStack>
+			<FormField
+				control={control}
+				name='email'
+				render={({ field }) => (
+					<FormItem>
+						<FormLabel>Почта</FormLabel>
+						<FormControl>
+							<Input {...field} autoComplete='email' />
+						</FormControl>
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+			<FormField
+				control={control}
+				name='name'
+				render={({ field }) => (
+					<FormItem>
+						<FormLabel>Имя</FormLabel>
+						<FormControl>
+							<Input {...field} />
+						</FormControl>
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+			<FormField
+				control={control}
+				name='password'
+				render={({ field }) => (
+					<FormItem>
+						<FormLabel>Пароль</FormLabel>
+						<FormControl>
+							<Input {...field} type='password' autoComplete='new-password' />
+						</FormControl>
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+			<FormField
+				control={control}
+				name='confirmPassword'
+				render={({ field }) => (
+					<FormItem>
+						<FormLabel>Подтверждение пароля</FormLabel>
+						<FormControl>
+							<Input {...field} type='password' autoComplete='new-password' />
+						</FormControl>
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+		</VStack>
+	)
+}
+
+export { RegisterForm }

apps/web/app/(auth)/register/use-register-form.ts

@@ -0,0 +1,40 @@
+'use client'
+
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+const formSchema = z
+	.object({
+		email: z.email({
+			message: 'Пожалуйста, введите правильный адрес электронной почты.',
+		}),
+		name: z.string().min(2, {
+			message: 'Имя должно содержать не менее 2 символов.',
+		}),
+		password: z.string().min(8, {
+			message: 'Пароль должен содержать не менее 8 символов.',
+		}),
+		confirmPassword: z.string().min(8, {
+			message: 'Пароль должен содержать не менее 8 символов.',
+		}),
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: 'Пароли не совпадают.',
+		path: ['confirmPassword'],
+	})
+
+export type RegisterFormValues = z.infer<typeof formSchema>
+
+const useRegisterForm = () =>
+	useForm<RegisterFormValues>({
+		resolver: standardSchemaResolver(formSchema),
+		defaultValues: {
+			email: '',
+			password: '',
+			confirmPassword: '',
+			name: '',
+		},
+	})
+
+export { useRegisterForm }