Elaman/procurement-frontend2
1
0
Fork 0
forked from Transparency/procurement-frontend2
Code Pull Requests Activity

fix bugs

Browse Source
This commit is contained in:
ariari04 2024-09-26 19:35:36 +06:00
parent 876555dc99
commit 165cab01ce
2 changed files with 121 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
src/widgets/forms/ProfileForm/ChangePassword/ChangePassword.tsx
View File

@ -1,3 +1,5 @@
"use client";
import { useState } from "react"; import { useState } from "react";
import { apiInstance } from "@/shared/config/apiConfig"; import { apiInstance } from "@/shared/config/apiConfig";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
@ -7,7 +9,7 @@ import ChangePasswordInput from "./ChangePasswordInput/ChangePasswordInput";
import { Link } from "@/shared/config/navigation"; import { Link } from "@/shared/config/navigation";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form"; import { FormProvider, useForm } from "react-hook-form";
interface IChangePasswordProps { interface IChangePasswordProps {
closeWindow: (bool: boolean) => void; closeWindow: (bool: boolean) => void;
@ -17,23 +19,15 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
closeWindow, closeWindow,
}: IChangePasswordProps) => { }: IChangePasswordProps) => {
const session = useSession(); const session = useSession();
const [oldPassword, setOldPassword] = useState<string>("");
const [newPassword, setNewPassword] = useState<string>("");
const [confirmNewPassword, setConfirmNewPassword] = useState<string>("");
const [warningOldPassword, setWarningOldPassword] = useState<string>("");
const [warningNewPassword, setWarningNewPassword] = useState<string>("");
const [warningConfirmNewPassword, setWarningConfirmNewPassword] =
useState<string>("");
const [error, setError] = useState<string>(""); const [error, setError] = useState<string>("");
const [loader, setLoader] = useState<boolean>(false); const [loader, setLoader] = useState<boolean>(false);
const [success, setSuccess] = useState<boolean>(false); const [success, setSuccess] = useState<boolean>(false);
const changePasswordScheme = z const changePasswordScheme = z
.object({ .object({
old_password: z.string().min(8, "Минимум 8 символов"), old_password: z.string().min(8, { message: "Минимум 8 символов" }),
new_password1: z.string().min(8, "Минимум 8 символов"), new_password1: z.string().min(8, { message: "Минимум 8 символов" }),
new_password2: z.string().min(8, "Минимум 8 символов"), new_password2: z.string().min(8, { message: "Минимум 8 символов" }),
}) })
.refine((data) => data.new_password1 === data.new_password2, { .refine((data) => data.new_password1 === data.new_password2, {
message: "Пароли не совпадают", message: "Пароли не совпадают",
@ -41,40 +35,43 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
}); });
type FormFields = z.infer<typeof changePasswordScheme>; type FormFields = z.infer<typeof changePasswordScheme>;
const { const form = useForm<FormFields>({
register,
handleSubmit,
formState: { errors },
} = useForm<FormFields>({
resolver: zodResolver(changePasswordScheme), resolver: zodResolver(changePasswordScheme),
defaultValues: {
old_password: "",
new_password1: "",
new_password2: "",
},
}); });
const onSubmit = async (data: FormFields) => { const onSubmit = async (data: FormFields) => {
try { try {
setError(""); console.log(data);
setLoader(true); // console.log("cfvgbhnj");
// setError("");
// setLoader(true);
const Authorization = `Bearer ${session.data?.access_token}`; // const Authorization = `Bearer ${session.data?.access_token}`;
const config = { // const config = {
headers: { // headers: {
Authorization, // Authorization,
}, // },
}; // };
const res = await apiInstance.patch( // const res = await apiInstance.patch(
"/auth/password_change/", // "/auth/password_change/",
data, // data,
config // config
); // );
if ([200, 201].includes(res.status)) return setSuccess(true); // if ([200, 201].includes(res.status)) return setSuccess(true);
} catch (error: unknown) { } catch (error: unknown) {
if (error instanceof AxiosError) { // if (error instanceof AxiosError) {
if (error.response?.status === 400) { // if (error.response?.status === 400) {
setError("Некорректный старый пароль или недопустимый новый пароль"); // setError("Некорректный старый пароль или недопустимый новый пароль");
} // }
} else { // } else {
setError("Произошла непредвиденная ошибка"); // setError("Произошла непредвиденная ошибка");
} // }
} finally { } finally {
setLoader(false); setLoader(false);
} }
@ -85,63 +82,59 @@ const ChangePassword: React.FC<IChangePasswordProps> = ({
onClick={() => closeWindow(false)} onClick={() => closeWindow(false)}
className="w-full h-full fixed top-0 left-0 z-10 bg-gray-950 flex items-center justify-center" className="w-full h-full fixed top-0 left-0 z-10 bg-gray-950 flex items-center justify-center"
> >
<div <FormProvider {...form}>
onClick={(e) => e.stopPropagation()} <div
className="flex w-full max-w-[400px] p-6 flex-col gap-4 rounded-md bg-white" onClick={(e) => e.stopPropagation()}
> className="flex w-full max-w-[400px] p-6 flex-col gap-4 rounded-md bg-white"
<form onSubmit={handleSubmit(onSubmit)}> >
<h4 className="mb-2 text-[18px] font-bold leading-7 text-gray-900"> <form onSubmit={form.handleSubmit(onSubmit)}>
Изменить пароль <h4 className="mb-2 text-[18px] font-bold leading-7 text-gray-900">
</h4> Изменить пароль
<ChangePasswordInput </h4>
onChange={(e) => setOldPassword(e.target.value)} <ChangePasswordInput
value={oldPassword} name="old_password"
placeholder="Введите старый пароль" placeholder="Введите старый пароль"
label="Старый пароль" label="Старый пароль"
error={warningOldPassword} />
/> <Link
<Link href="/sign-in/forgot-password"
href="/sign-in/forgot-password" className="self-end leading-8 text-blue"
className="self-end leading-8 text-blue" >
> Забыли пароль?
Забыли пароль? </Link>
</Link> <ChangePasswordInput
<ChangePasswordInput name="new_password1"
onChange={(e) => setNewPassword(e.target.value)} placeholder="Введите новый пароль"
value={newPassword} label="Новый пароль"
placeholder="Введите новый пароль" />
label="Новый пароль" <ChangePasswordInput
error={warningNewPassword} name="new_password2"
/> placeholder="Повторите новый пароль"
<ChangePasswordInput label="Потвердить новый пароль"
onChange={(e) => setConfirmNewPassword(e.target.value)} />
value={confirmNewPassword} {error ? <p className="text-red-500">{error}</p> : null}
placeholder="Повторите новый пароль" {success ? (
label="Потвердить новый пароль" <p className="text-light-blue">Вы успешно поменяли пароль!</p>
error={warningConfirmNewPassword} ) : null}
/>
{error ? <p className="text-red-500">{error}</p> : null}
{success ? (
<p className="text-light-blue">Вы успешно поменяли пароль!</p>
) : null}
<div className="mt-9 flex flex-col gap-3"> <div className="mt-9 flex flex-col gap-3">
<button <button
type="button" type="submit"
className="py-3 px-4 rounded-md font-bold leading-6 shadow-sm border border-blue bg-blue text-white" className="py-3 px-4 rounded-md font-bold leading-6 shadow-sm border border-blue bg-blue text-white"
> >
{loader ? <Loader /> : "Сохранить"} {loader ? <Loader /> : "Сохранить"}
</button> </button>
<button <button
className="py-3 px-4 rounded-md font-bold leading-6 shadow-md border border-gray-300 bg-slate-200 text-gray-500" className="py-3 px-4 rounded-md font-bold leading-6 shadow-md border border-gray-300 bg-slate-200 text-gray-500"
type="button" type="button"
onClick={() => closeWindow(false)} onClick={() => closeWindow(false)}
> >
Отмена Отмена
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</FormProvider>
</div> </div>
); );
}; };

55
src/widgets/forms/ProfileForm/ChangePassword/ChangePasswordInput/ChangePasswordInput.tsx
View File

@ -4,35 +4,48 @@ import Image from "next/image";
import { useState } from "react"; import { useState } from "react";
import eye_off from "./icons/eye-off.svg"; import eye_off from "./icons/eye-off.svg";
import eye_on from "./icons/eye-on.svg"; import eye_on from "./icons/eye-on.svg";
import { useFormContext } from "react-hook-form";
import { cn } from "@/lib/utils";
interface IChangePasswordInputProps interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
extends React.InputHTMLAttributes<HTMLInputElement> { name: string;
label: string; label?: string;
error: string; required?: boolean;
className?: string;
} }
const ChangePasswordInput: React.FC<IChangePasswordInputProps> = ({ const ChangePasswordInput: React.FC<Props> = ({
label,
error,
placeholder,
name, name,
onChange, label,
value, required,
}: IChangePasswordInputProps) => { className,
...props
}) => {
const {
register,
formState: { errors },
} = useFormContext();
console.log(name);
const errorText = errors[name]?.message as string;
const [isOpen, setIsOpen] = useState<boolean>(false); const [isOpen, setIsOpen] = useState<boolean>(false);
return ( return (
<div className="flex flex-col gap-2"> <div className={cn("flex flex-col gap-2", className)}>
<label className="font-bold leading-5 text-gray-700">{label}</label> {label && (
<label className="font-bold leading-5 text-gray-700">
{label}
{required && <span className="text-red-500">*</span>}
</label>
)}
<div <div
className={`py-[10px] px-[14px] flex items-center justify-between border border-gray-300 rounded-md shadow-sm bg-gray-200${ className={`py-[10px] px-[14px] flex items-center justify-between border border-gray-300 rounded-md shadow-sm bg-gray-200${
error ? "-with-error" : "" errorText ? "-with-error" : ""
}`} }`}
> >
<input <input
onChange={onChange} {...register(name)}
value={value} {...props}
name={name}
placeholder={placeholder}
type={isOpen ? "text" : "password"} type={isOpen ? "text" : "password"}
className="w-full text-[14px] placeholder:leading-6 bg-gray-200" className="w-full text-[14px] placeholder:leading-6 bg-gray-200"
/> />
@ -40,9 +53,9 @@ const ChangePasswordInput: React.FC<IChangePasswordInputProps> = ({
<Image src={isOpen ? eye_on : eye_off} alt="Eye Icon" /> <Image src={isOpen ? eye_on : eye_off} alt="Eye Icon" />
</button> </button>
</div> </div>
{error ? ( {errorText && (
<p className="text-[14px] leading-5 text-red-500">{error}</p> <p className="text-[14px] leading-5 text-red-500">{errorText}</p>
) : null} )}
</div> </div>
); );
}; };