Add sign in function
This commit is contained in:
anime committed
1 parent
38b869084d
commit
eb81d45008
10 files changed
+320
-52
No files matched your search
@@ -38,13 +38,12 @@ const ConfirmEmailForm: React.FC<IConfirmEmailFormProps> = ({
|
||||
e.preventDefault();
|
||||
|
||||
const codeString = otp.join("");
|
||||
const codeNumber = parseInt(codeString);
|
||||
console.log(parseInt("01"));
|
||||
|
||||
try {
|
||||
setLoader(true);
|
||||
console.log(codeNumber);
|
||||
|
||||
const response = await apiInstance.post("/auth/confirm_user/", {
|
||||
code: codeNumber,
|
||||
code: codeString,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
|
||||
@@ -1,18 +1,28 @@
|
||||
"use client";
|
||||
import React, { FC, useState } from "react";
|
||||
import React 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";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "@/shared/config/navigation";
|
||||
import alert from "./icons/alert-circle.svg";
|
||||
import Image from "next/image";
|
||||
import eye_off from "./icons/eye-off.svg";
|
||||
import eye_on from "./icons/eye-on.svg";
|
||||
import Loader from "@/shared/ui/Loader/Loader";
|
||||
import { apiInstance } from "@/shared/config/apiConfig";
|
||||
import { signIn, useSession } from "next-auth/react";
|
||||
import { AxiosError } from "axios";
|
||||
|
||||
// interface SignInProps {
|
||||
// isLoading: boolean;
|
||||
// onSubmitFunc: () => void;
|
||||
// noAccountError: Error | null;
|
||||
// }
|
||||
const SignInForm = ({}) => {
|
||||
const session = useSession();
|
||||
const t = useTranslations("signIn");
|
||||
const router = useRouter();
|
||||
const [showPassword, setShowPassword] = React.useState(false);
|
||||
const [loader, setLoader] = React.useState<boolean>(false);
|
||||
const [error, setError] = React.useState<string>("");
|
||||
|
||||
const signInFormScheme = z.object({
|
||||
email: z.string().email("Неверный формат email"),
|
||||
password: z.string().min(8, "Пароль должен содержать минимум 8 символов"),
|
||||
@@ -23,46 +33,121 @@ const SignInForm = ({}) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<FormFields>({
|
||||
resolver: zodResolver(signInFormScheme),
|
||||
});
|
||||
|
||||
const onSubmit = (data: FormFields) => {};
|
||||
// const onSubmit = async (data: FormFields) => {
|
||||
// try {
|
||||
// console.log(data);
|
||||
// const res = await apiInstance.post("/auth/login/", data);
|
||||
// if ([200, 201].includes(res.status)) {
|
||||
// router.push("/");
|
||||
// }
|
||||
// } catch (error: unknown) {
|
||||
// if (error instanceof AxiosError) {
|
||||
// if ([400, 401, 404].includes(error.response?.status as number)) {
|
||||
// setError("Неверный Email или Пароль");
|
||||
// } else if (error.response?.status.toString().slice(0, 1) === "5") {
|
||||
// setError("Ошибка на стороне сервера");
|
||||
// }
|
||||
// } else {
|
||||
// setError("Непредвиденная ошибка");
|
||||
// }
|
||||
// } finally {
|
||||
// setLoader(false);
|
||||
// }
|
||||
// };
|
||||
const onSubmit = async (data: FormFields) => {
|
||||
setLoader(true);
|
||||
const result = await signIn("credentials", {
|
||||
redirect: false,
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
});
|
||||
|
||||
if (result?.error) {
|
||||
setError(result.error);
|
||||
} else if (result?.ok) {
|
||||
router.push("/");
|
||||
}
|
||||
|
||||
setLoader(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="mb-2 w-[360px] flex flex-col">
|
||||
<form
|
||||
className="mb-2 w-[360px] flex flex-col"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="flex flex-col gap-5">
|
||||
<AuthInput
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="Введите email"
|
||||
error={errors.email?.message}
|
||||
{...register("email", { required: true })}
|
||||
/>
|
||||
<AuthInput
|
||||
isPassword
|
||||
label="Пароль"
|
||||
placeholder="Введите пароль"
|
||||
error={errors.password?.message}
|
||||
{...register("password", { required: true })}
|
||||
/>
|
||||
<div>
|
||||
<label className="text-[14px] leading-5 text-gray-700">Email</label>
|
||||
<div
|
||||
className={`flex items-center${
|
||||
errors.email?.message && "border border-red-400"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
placeholder="Email"
|
||||
className="w-full text-[16px] leading-6 text-gray-900 px-[10px] py-[14px] border border-gray-300 rounded-lg shadow-sm bg-white"
|
||||
type="text"
|
||||
{...register("email", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
{errors?.email?.message && (
|
||||
<p className="flex items-center justify-between text-[14px] font-normal leading-5 text-red-500">
|
||||
{errors.email.message} <Image src={alert} alt="Alert Icon" />
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[14px] leading-5 text-gray-700">
|
||||
{t("password")}
|
||||
</label>
|
||||
<div
|
||||
className={`flex items-center border border-gray-300 rounded-lg shadow-sm bg-white${
|
||||
errors?.password?.message && "border border-red-400"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
placeholder={t("password")}
|
||||
className="w-full text-[16px] leading-6 text-gray-900 px-[10px] py-[14px]"
|
||||
type={showPassword ? "text" : "password"}
|
||||
{...register("password", { required: true })}
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowPassword((prev) => !prev)}
|
||||
type="button"
|
||||
className="pr-2"
|
||||
>
|
||||
<Image src={showPassword ? eye_on : eye_off} alt="Eye Icon" />
|
||||
</button>
|
||||
</div>
|
||||
{errors?.password?.message && (
|
||||
<p className="flex items-center justify-between text-[14px] font-normal leading-5 text-red-500">
|
||||
{errors.password.message} <Image src={alert} alt="Alert Icon" />
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{errors.root && (
|
||||
<div className="text-red-500">{errors.root.message}</div>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
className="p-4 h-[50px] w-full font-bold leading-6 text-white bg-light-blue rounded-md"
|
||||
// disabled={isLoading}
|
||||
>
|
||||
{/* {isLoading ? <Loader /> : "Войти"} */}
|
||||
Войти
|
||||
</button>
|
||||
<div className="flex flex-col mt-[36px] gap-4">
|
||||
<button
|
||||
className="p-4 h-[50px] w-full font-bold leading-6 text-white bg-light-blue rounded-md"
|
||||
type="submit"
|
||||
>
|
||||
{loader ? <Loader /> : t("loginBtn")}
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-blue font-semibold pt-2 cursor-pointer">
|
||||
<Link
|
||||
href="/forgot-password-email"
|
||||
className="text-blue font-semibold pt-2 cursor-pointer "
|
||||
>
|
||||
Забыли пароль?
|
||||
{t("passwordForget")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user