diff --git a/package-lock.json b/package-lock.json index 1aae244..b967bf0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "procurment", "version": "0.1.0", "dependencies": { + "@hookform/resolvers": "^3.9.0", "autoprefixer": "^10.4.20", "axios": "^1.7.4", "clsx": "^2.1.1", @@ -16,7 +17,9 @@ "next-intl": "^3.17.2", "react": "^18", "react-dom": "^18", - "tailwind-merge": "^2.5.2" + "react-hook-form": "^7.52.2", + "tailwind-merge": "^2.5.2", + "zod": "^3.23.8" }, "devDependencies": { "@types/node": "^20", @@ -160,6 +163,14 @@ "tslib": "^2.4.0" } }, + "node_modules/@hookform/resolvers": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz", + "integrity": "sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==", + "peerDependencies": { + "react-hook-form": "^7.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -4198,6 +4209,21 @@ "react": "^18.3.1" } }, + "node_modules/react-hook-form": { + "version": "7.52.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.2.tgz", + "integrity": "sha512-pqfPEbERnxxiNMPd0bzmt1tuaPcVccywFDpyk2uV5xCIBphHV5T8SVnX9/o3kplPE1zzKt77+YIoq+EMwJp56A==", + "engines": { + "node": ">=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18 || ^19" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -5378,6 +5404,14 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zod": { + "version": "3.23.8", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", + "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } } } } diff --git a/package.json b/package.json index 650adfb..572f60b 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@hookform/resolvers": "^3.9.0", "autoprefixer": "^10.4.20", "axios": "^1.7.4", "clsx": "^2.1.1", @@ -17,7 +18,9 @@ "next-intl": "^3.17.2", "react": "^18", "react-dom": "^18", - "tailwind-merge": "^2.5.2" + "react-hook-form": "^7.52.2", + "tailwind-merge": "^2.5.2", + "zod": "^3.23.8" }, "devDependencies": { "@types/node": "^20", diff --git a/src/app/[locale]/sign-in/icons/sign-in_icon.svg b/src/app/[locale]/sign-in/icons/sign-in_icon.svg new file mode 100644 index 0000000..64719bd --- /dev/null +++ b/src/app/[locale]/sign-in/icons/sign-in_icon.svg @@ -0,0 +1,14 @@ + + + Created with Pixso. + + + + + + + + + + + diff --git a/src/app/[locale]/sign-in/page.tsx b/src/app/[locale]/sign-in/page.tsx new file mode 100644 index 0000000..653e3c9 --- /dev/null +++ b/src/app/[locale]/sign-in/page.tsx @@ -0,0 +1,38 @@ +import Image from "next/image"; +import sign_in_icon from "./icons/sign-in_icon.svg"; +import { Link } from "@/shared/config/navigation"; +import { Container } from "@/shared/ui"; +import SignInForm from "@/widgets/forms/SignInForm"; + +const SignIn = () => { + return ( + +
+
+
+ Sign In Icon +
+
+

+ Войдите в аккаунт +

+

Пожалуйста, введите свои данные

+
+ + +

+ Еще нет аккаунта?{" "} + + Зарегистрируйтесь + +

+
+
+ + ); +}; + +export default SignIn; diff --git a/src/features/AuthInput.tsx b/src/features/AuthInput.tsx index 4a3617a..d55c301 100644 --- a/src/features/AuthInput.tsx +++ b/src/features/AuthInput.tsx @@ -9,7 +9,7 @@ import { useState } from "react"; interface IAuthInputProps extends React.InputHTMLAttributes { isPassword?: boolean; label: string; - error: string; + error?: string; } const AuthInput: React.FC = ({ diff --git a/src/widgets/forms/SignInForm.tsx b/src/widgets/forms/SignInForm.tsx new file mode 100644 index 0000000..a2ecf5d --- /dev/null +++ b/src/widgets/forms/SignInForm.tsx @@ -0,0 +1,73 @@ +"use client"; +import React, { FC, useState } from "react"; +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import AuthInput from "@/features/AuthInput"; +import Loader from "@/shared/ui/Loader/Loader"; +import Link from "next/link"; +import { useForm } from "react-hook-form"; + +// interface SignInProps { +// isLoading: boolean; +// onSubmitFunc: () => void; +// noAccountError: Error | null; +// } +const SignInForm = ({}) => { + const signInFormScheme = z.object({ + email: z.string().email("Неверный формат email"), + password: z.string().min(8, "Пароль должен содержать минимум 8 символов"), + }); + + type FormFields = z.infer; + + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: zodResolver(signInFormScheme), + }); + + const onSubmit = (data: FormFields) => {}; + return ( +
+
+ + + {errors.root && ( +
{errors.root.message}
+ )} + +
+ + Забыли пароль? + +
+
+
+ ); +}; + +export default SignInForm; diff --git a/src/widgets/forms/icons/eye-off.svg b/src/widgets/forms/icons/eye-off.svg new file mode 100644 index 0000000..80356fc --- /dev/null +++ b/src/widgets/forms/icons/eye-off.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/widgets/forms/icons/eye.svg b/src/widgets/forms/icons/eye.svg new file mode 100644 index 0000000..03f9888 --- /dev/null +++ b/src/widgets/forms/icons/eye.svg @@ -0,0 +1,4 @@ + + + +