refactor: login, register pages #18
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| export default function AuthLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <main> | ||
| <div>{children}</div> | ||
| </main> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,61 @@ | ||
| import Link from 'next/link'; | ||
| import { useForm } from 'react-hook-form'; | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import { formSchema, FormState } from '../model/loginSchema'; | ||
| import { | ||
| Field, | ||
| FieldLabel, | ||
| Button, | ||
| Input, | ||
| FieldError, | ||
| Checkbox, | ||
| Label, | ||
| PasswordInput, | ||
| } from 'shared/ui'; | ||
|
|
||
| export function LoginForm() { | ||
|
kapitulin24 marked this conversation as resolved.
|
||
| const { | ||
| register, | ||
| handleSubmit, | ||
| reset, | ||
| formState: { errors }, | ||
| } = useForm<FormState>({ | ||
| resolver: zodResolver(formSchema), | ||
| }); | ||
| const onSubmit = (data: FormState): void => { | ||
| console.log(data); | ||
| reset(); | ||
| }; | ||
| return ( | ||
| <form className="space-y-6 mb-6" onSubmit={handleSubmit(onSubmit)}> | ||
|
Contributor
There was a problem hiding this comment. mb-6 не нужен, этот отступ лучше задать другим способом в пэйдже |
||
| <div className="flex flex-col space-y-5"> | ||
| <Field> | ||
| <FieldLabel htmlFor="email">Почта</FieldLabel> | ||
| <Input type="email" {...register('email')} id="email" placeholder="example@company.com" /> | ||
| {errors.email && <FieldError className="text-red-500">{errors.email.message}</FieldError>} | ||
|
Contributor
There was a problem hiding this comment. зачем тут кастомный text-red? |
||
| </Field> | ||
| <Field className="grid gap-2"> | ||
| <div className="flex items-center"> | ||
| <FieldLabel htmlFor="password">Пароль</FieldLabel> | ||
| </div> | ||
| <PasswordInput id="password" placeholder="Ваш пароль" {...register('password')} /> | ||
| {errors.password && ( | ||
| <FieldError className="text-red-500 text-sm">{errors.password.message}</FieldError> | ||
|
Contributor
There was a problem hiding this comment. зачем тут кастомный text-red? еще и размер текста |
||
| )} | ||
| </Field> | ||
| <div className="flex items-center justify-between text-sm"> | ||
|
Contributor
There was a problem hiding this comment. label все равно переопределяет размер текста. если он нужен, то тогда нужно его только для link задать |
||
| <Label className="flex items-center gap-2"> | ||
| <Checkbox /> | ||
|
Contributor
There was a problem hiding this comment. нужен в схеме и контролируемый ввод |
||
| Запомнить меня | ||
| </Label> | ||
| <Link href="/auth/reset-password" className="text-link hover:underline"> | ||
|
Contributor
There was a problem hiding this comment. про линк где-то в регистрации писал уже |
||
| Забыли пароль? | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| <Button size="lg" className="w-full"> | ||
| Войти | ||
| </Button> | ||
| </form> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,19 @@ | ||
| import { z } from 'zod'; | ||
|
|
||
| export const formSchema = z | ||
| .object({ | ||
| email: z.email('Неверный формат email'), | ||
| name: z.string().min(2, 'Слишком короткое имя').max(15, 'Слишком длинное имя'), | ||
| password: z.string().min(6, 'Минимум 6 символов').max(32, 'Слишком длинный пароль'), | ||
| confirmPassword: z.string(), | ||
| terms: z.boolean().refine((val) => val === true, { | ||
| message: 'Необходимо принять условия использования', | ||
| }), | ||
| }) | ||
|
|
||
| .refine((data) => data.password === data.confirmPassword, { | ||
| message: 'Пароли не совпадают', | ||
| path: ['confirmPassword'], | ||
| }); | ||
|
|
||
| export type FormState = z.infer<typeof formSchema>; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,80 @@ | ||
| import { Controller, useForm } from 'react-hook-form'; | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import { formSchema, FormState } from '../model/registerSchema'; | ||
| import { Field, FieldLabel, Button, Checkbox, Label, FieldError, Input } from 'shared/ui'; | ||
| import Link from 'next/link'; | ||
| import { PasswordInput } from 'shared/ui/password-input'; | ||
|
|
||
| export function RegisterForm() { | ||
| const { | ||
| register, | ||
| handleSubmit, | ||
| reset, | ||
| control, | ||
| formState: { errors }, | ||
| } = useForm<FormState>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { | ||
| terms: false, | ||
| }, | ||
| }); | ||
| const onSubmit = (data: FormState): void => { | ||
| console.log(data); | ||
| reset(); | ||
| }; | ||
| return ( | ||
| <form className="space-y-6 mb-8" onSubmit={handleSubmit(onSubmit)}> | ||
| <div className="flex flex-col space-y-5"> | ||
| <Field> | ||
| <FieldLabel htmlFor="name">Имя</FieldLabel> | ||
| <Input id="name" type="text" placeholder="Алексей Смирнов" {...register('name')} /> | ||
| {errors.name && ( | ||
| <FieldError className="text-red-500 text-sm">{errors.name.message}</FieldError> | ||
| )} | ||
| </Field> | ||
| <Field> | ||
| <FieldLabel htmlFor="email">Почта</FieldLabel> | ||
| <Input type="email" {...register('email')} id="email" placeholder="example@company.com" /> | ||
| {errors.email && <FieldError className="text-red-500">{errors.email.message}</FieldError>} | ||
| </Field> | ||
| <Field> | ||
| <FieldLabel htmlFor="password">Пароль</FieldLabel> | ||
| <PasswordInput id="password" placeholder="Ваш пароль" {...register('password')} /> | ||
| {errors.password && ( | ||
| <FieldError className="text-red-500">{errors.password.message}</FieldError> | ||
| )} | ||
| </Field> | ||
| <Field> | ||
| <FieldLabel htmlFor="confirmPassword">Подтвердите пароль</FieldLabel> | ||
| <PasswordInput | ||
| id="confirmPassword" | ||
| placeholder="*********" | ||
| {...register('confirmPassword')} | ||
| /> | ||
| {errors.confirmPassword && ( | ||
| <FieldError className="text-red-500">{errors.confirmPassword.message}</FieldError> | ||
| )} | ||
| </Field> | ||
| </div> | ||
| <Label className="flex items-center gap-2 text-sm"> | ||
| <Controller | ||
| name="terms" | ||
| control={control} | ||
| render={({ field }) => ( | ||
| <Checkbox id="terms" checked={field.value} onCheckedChange={field.onChange} /> | ||
| )} | ||
| /> | ||
| Я согласен с | ||
| <Link href="/auth/reset-password" className="text-link hover:underline"> | ||
|
Contributor
There was a problem hiding this comment. нужно создать Link в shared/ui с нужными стилями |
||
| условиями использования | ||
| </Link> | ||
| </Label> | ||
| {errors.terms && ( | ||
| <FieldError className="text-red-500 text-xs ml-6">{errors.terms.message}</FieldError> | ||
|
|
||
| )} | ||
| <Button size="lg" className="w-full"> | ||
| Зарегистрироваться | ||
| </Button> | ||
| </form> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,43 @@ | ||
| 'use client'; | ||
| import Link from 'next/link'; | ||
| import { RegisterForm } from './RegisterForm'; | ||
| import { ScreenshotPlaceholder, AppLogo } from 'shared/ui'; | ||
|
|
||
| export default function RegisterPage() { | ||
| return ( | ||
| <div> | ||
| <div className="min-h-screen flex"> | ||
| <div className="hidden md:flex flex-col justify-between bg-secondary p-10 w-1/2"> | ||
| <div> | ||
| <AppLogo /> | ||
| <div className="mb-4"> | ||
|
Contributor
There was a problem hiding this comment. лучше вместо mb-4 задать mt-4 ScreenshotPlaceholder |
||
| <h2 className="text-2xl font-bold mb-2">Начните работать эффективнее уже сегодня</h2> | ||
| <p> | ||
| Платформа, созданная для тех, кто ценит свое время. Управляйте проектами эффективнее | ||
| и прозрачнее. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <ScreenshotPlaceholder /> | ||
| </div> | ||
| <div className="flex flex-col justify-center items-center w-full md:w-1/2 p-10"> | ||
| <div className="w-full max-w-md"> | ||
| <div className="mb-8"> | ||
| <h2 className="text-3xl font-bold mb-2">Создать аккаунт</h2> | ||
| <p className="text-muted-foreground mb-6"> | ||
| Заполните форму ниже, чтобы начать работу. | ||
| </p> | ||
| </div> | ||
| <RegisterForm /> | ||
| <div className="flex gap-3 justify-center text-sm"> | ||
| <p className="text-muted-foreground mb-6">уже есть аккаунт?</p> | ||
|
Contributor
There was a problem hiding this comment. вместо mb-6 для блока div pb-6 |
||
| <Link href="/auth/login" className="text-link hover:underline"> | ||
| Войти | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as LogoImage } from './images/logo.svg'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import Image from 'next/image'; | ||
| import { LogoImage } from 'shared/assets'; | ||
|
|
||
| export function AppLogo() { | ||
|
Contributor
There was a problem hiding this comment. типизация. пропсы и возвращаемое значение
Contributor
There was a problem hiding this comment. нужно добавить возможность выбора варианта логотипа и размера. Точно так же как это сделано в shared/ui/button |
||
| return ( | ||
| <div className="flex items-center mb-20 gap-3"> | ||
|
Contributor
There was a problem hiding this comment. никаких mb. почитай про схлопывание марджинов |
||
| <Image src={LogoImage} alt="logo" /> | ||
| <h1 className="text-2xl font-bold">TaskTracker Lab</h1> | ||
|
|
||
| </div> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| 'use client'; | ||
|
Contributor
There was a problem hiding this comment. Компонент может работать как серверный |
||
|
|
||
|
Contributor
There was a problem hiding this comment. Типизация. Пропсы и возвращаемое значение |
||
| export function ScreenshotPlaceholder() { | ||
| return ( | ||
| <> | ||
| <div className="bg-gray-100 rounded-lg h-64 flex items-center justify-center text-gray-400 mt-8"> | ||
| Скриншот интерфейса | ||
|
Contributor
There was a problem hiding this comment. скриншота тут быть не должно, не обратил внимания что написал комент на весь блок. Соответственно компонент нужно переименовать по смыслу |
||
| </div> | ||
| <p className="text-gray-500 text-sm mt-4">© {new Date().getFullYear()} TaskTracker Lab.</p> | ||
|
Contributor
There was a problem hiding this comment. text-muted-foreground. mt-4 не нужен |
||
| </> | ||
| ); | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
странная строчка. нужно --color-link: var(--link); и выше в @theme inline