apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

debug ModalRegistration and

Browse Source 
RegistrationForCandidate
This commit is contained in:
Никита Губарь 2023-12-29 12:23:54 +03:00
parent 94a13f4903
commit 4b0176079e
5 changed files with 128 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.envexample
View File

@ -1,2 +0,0 @@
REACT_APP_API_URL = https://dev.itguild.info/api
REACT_APP_BASE_URL = https://dev.itguild.info/api

4
src/components/AuthBox/AuthBox.jsx
View File

@ -87,12 +87,12 @@ export const AuthBox = ({ title }) => {
)}
<form ref={ref} className="auth-box__form">
<label htmlFor="e-mail">Ваш e-mail</label>
<input id="e-mail" type="text" name="email" placeholder="E-mail" />
<input id="loginEmail" type="text" name="email" placeholder="E-mail" />
<label htmlFor="password">Ваш пароль</label>
<div className="inputWrapper">
<input
id="password"
id="loginPassword"
type={showPassword ? "text" : "password"}
name="password"
placeholder="Пароль"

203
src/components/Modal/ModalRegistration/ModalRegistration.jsx
View File

@ -1,7 +1,6 @@
import React, { useState } from "react";
import { apiRequest } from "@api/request";
import { useFormValidation } from "@hooks/useFormValidation";
import { useNotification } from "@hooks/useNotification";
import BaseButton from "@components/Common/BaseButton/BaseButton";
@ -15,98 +14,51 @@ import telegramLogo from "assets/icons/tgLogo.svg";
import "./modalRegistration.scss";
export const ModalRegistration = ({ active, setActive }) => {
const [inputsValue, setInputsValue] = useState({
userName: "",
const [loader, setLoader] = useState(false);
const fields = {
username: "",
email: "",
password: "",
secondPassword: ""
});
const [inputsError, setInputsError] = useState({
name: false,
email: false,
password: false,
secondPassword: false
});
const [loader, setLoader] = useState(false);
const validateEmail = (email) => {
// регулярное выражение для проверки email
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// возвращаем true, если email проходит проверку, и false, если нет
return re.test(email);
};
const closeModal = () => {
setActive(false);
handleClearForm();
};
const apiEndpoint = "/register/sign-up";
const { showNotification } = useNotification();
const validateForm = () => {
if (inputsValue.password.length < 6) {
setInputsError((prevValue) => ({ ...prevValue, password: true }));
}
if (inputsValue.password !== inputsValue.secondPassword) {
setInputsError((prevValue) => ({ ...prevValue, secondPassword: true }));
}
if (inputsValue.userName.length < 2) {
setInputsError((prevValue) => ({ ...prevValue, name: true }));
}
if (!validateEmail(inputsValue.email)) {
setInputsError((prevValue) => ({ ...prevValue, email: true }));
}
if (
inputsValue.password.length < 6 ||
inputsValue.userName.length < 6 ||
!validateEmail(inputsValue.email)
) {
return true;
}
const showNotificationError = () => {
showNotification({
show: true,
text: "Аккаунт с таким логином или email уже существует",
type: "error"
});
};
const submitHandler = () => {
if (validateForm()) {
return;
}
setLoader(true);
apiRequest("/register/sign-up", {
method: "POST",
data: {
username: inputsValue.userName,
email: inputsValue.email,
password: inputsValue.password
}
}).then((data) => {
setLoader(false);
if (!data) {
showNotification({
show: true,
text: "Аккаунт с таким логином или email уже существует",
type: "error"
});
} else {
closeModal();
showNotification({
show: true,
text: "Аккаунт успешно создан",
type: "success"
});
}
const showNotificationTrue = () => {
showNotification({
show: true,
text: "Аккаунт успешно создан",
type: "success"
});
};
const closeModal = () => {
setInputsValue({
userName: "",
email: "",
password: ""
});
setInputsError({
name: false,
email: false,
password: false
});
setActive(false);
};
const {
formData,
validationErrors,
handleChange,
handleSubmit,
handleClearForm
} = useFormValidation(
apiEndpoint,
fields,
showNotificationError,
showNotificationTrue,
closeModal
);
return (
<ModalLayout active={active} setActive={closeModal} styles={"registration"}>
<div className="registration-body__main">
@ -122,43 +74,25 @@ export const ModalRegistration = ({ active, setActive }) => {
<div className="inputContainer">
<h5>Ваше имя</h5>
<input
className={inputsError.name ? "error" : ""}
onChange={(e) => {
setInputsError({
name: false,
email: false,
password: false
});
setInputsValue((prevValue) => ({
...prevValue,
userName: e.target.value
}));
}}
value={inputsValue.userName}
className={validationErrors.username ? "error" : ""}
onChange={handleChange}
value={formData.username}
placeholder="Имя"
id="username"
/>
{inputsError.name && <span>Минимум 2 символа</span>}
<span>{validationErrors.username}</span>
</div>
<div className="inputContainer">
<h5>E-mail</h5>
<input
type="email"
className={inputsError.email ? "error" : ""}
onChange={(e) => {
setInputsError({
name: false,
email: false,
password: false
});
setInputsValue((prevValue) => ({
...prevValue,
email: e.target.value
}));
}}
value={inputsValue.email}
className={validationErrors.email ? "error" : ""}
onChange={handleChange}
value={formData.email}
placeholder="Почта"
id="email"
/>
{inputsError.email && <span>Введите корректный e-mail</span>}
<span>{validationErrors.email}</span>
</div>
</div>
@ -166,46 +100,26 @@ export const ModalRegistration = ({ active, setActive }) => {
<div className="inputContainer">
<h5>Пароль</h5>
<input
className={inputsError.password ? "error" : ""}
className={validationErrors.password ? "error" : ""}
type="password"
onChange={(e) => {
setInputsError({
name: false,
email: false,
password: false
});
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value
}));
}}
value={inputsValue.password}
onChange={handleChange}
value={formData.password}
placeholder="Пароль"
id="password"
/>
{inputsError.password && <span>Минимум 6 символов</span>}
<span>{validationErrors.password}</span>
</div>
<div className="inputContainer">
<h5>Повторите пароль</h5>
<input
className={inputsError.secondPassword ? "error" : ""}
className={validationErrors.secondPassword ? "error" : ""}
type="password"
onChange={(e) => {
setInputsError({
name: false,
email: false,
secondPassword: false
});
setInputsValue((prevValue) => ({
...prevValue,
secondPassword: e.target.value
}));
}}
value={inputsValue.secondPassword}
onChange={handleChange}
value={formData.secondPassword}
placeholder="Пароль"
id="secondPassword"
/>
{inputsError.secondPassword && (
<span>Пароли должны совпадать</span>
)}
<span>{validationErrors.secondPassword}</span>
</div>
</div>
</div>
@ -217,7 +131,10 @@ export const ModalRegistration = ({ active, setActive }) => {
<BaseButton
onClick={(e) => {
e.preventDefault();
submitHandler();
setLoader(true);
handleSubmit(e);
setLoader(false);
closeModal();
}}
styles="button-box__submit"
>

47
src/hooks/useFormValidation.js
View File

@ -23,9 +23,9 @@ export const useFormValidation = (
// Функция для валидации формы
const validateForm = () => {
const errors = {};
if (formData.name != undefined) {
if (formData.name.trim() === "") {
errors.name = "Имя обязательно к заполнению";
if (formData.username != undefined) {
if (formData.username.trim() === "") {
errors.username = "Имя обязательно к заполнению";
}
}
@ -66,23 +66,39 @@ export const useFormValidation = (
return Object.keys(errors).length === 0;
};
// Функция отчистки формы
const handleClearForm = () => {
const clearedFormData = Object.fromEntries(
Object.keys(formData).map((key) => [key, ""])
);
setFormData(clearedFormData);
const clearedValidationErrors = Object.fromEntries(
Object.keys(validationErrors).map((key) => [key, ""])
);
setValidationErrors(clearedValidationErrors);
};
// Функция для обработки отправки формы
const handleSubmit = async (e) => {
e.preventDefault();
// Проверка валидации формы
if (validateForm()) {
try {
const response = await apiRequest(apiEndpoint, {
method: "POST",
data: formData
});
let newformData = { ...formData };
delete newformData.secondPassword;
if (!response) {
showNotificationError();
} else {
showNotificationTrue();
}
try {
apiRequest(apiEndpoint, {
method: "POST",
data: newformData
}).then((data) => {
if ("errors" in data) {
showNotificationError();
} else {
handleClearForm();
showNotificationTrue();
}
});
} catch (error) {
console.error("Error submitting form:", error);
}
@ -93,6 +109,7 @@ export const useFormValidation = (
formData,
validationErrors,
handleChange,
handleSubmit
handleSubmit,
handleClearForm
};
};

69
src/pages/RegistrationForCandidate/RegistrationForCandidate.js
View File

@ -17,7 +17,7 @@ export const RegistrationForCandidate = () => {
const apiEndpoint = "/register/sign-up";
const fields = {
name: "",
username: "",
summary: "",
email: "",
tg: "",
@ -41,12 +41,13 @@ export const RegistrationForCandidate = () => {
});
};
const form = useFormValidation(
apiEndpoint,
fields,
showNotificationError,
showNotificationTrue
);
const { formData, validationErrors, handleChange, handleSubmit } =
useFormValidation(
apiEndpoint,
fields,
showNotificationError,
showNotificationTrue
);
return (
<div className="registrationCandidate">
@ -79,81 +80,79 @@ export const RegistrationForCandidate = () => {
{/* форма регистрации */}
<form
className="registrationCandidate__form"
onSubmit={form.handleSubmit}
onSubmit={handleSubmit}
>
<div className="registrationCandidate__form__input">
<label htmlFor="name">Ваше имя</label>
<input
className={form.validationErrors.name ? "error" : ""}
value={form.formData.name}
onChange={form.handleChange}
id="name"
className={validationErrors.username ? "error" : ""}
value={formData.username}
onChange={handleChange}
id="username"
type="text"
placeholder="Имя"
/>
<span>{form.validationErrors.name}</span>
<span>{validationErrors.username}</span>
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="summary">Если есть ссылка на резюме</label>
<input
className={form.validationErrors.summary ? "error" : ""}
value={form.formData.summary}
onChange={form.handleChange}
className={validationErrors.summary ? "error" : ""}
value={formData.summary}
onChange={handleChange}
id="summary"
type="url"
placeholder="Резюме"
/>
<span>{form.validationErrors.summary}</span>
<span>{validationErrors.summary}</span>
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="email">Ваш e-mail</label>
<input
className={form.validationErrors.email ? "error" : ""}
value={form.formData.email}
onChange={form.handleChange}
className={validationErrors.email ? "error" : ""}
value={formData.email}
onChange={handleChange}
id="email"
type="email"
placeholder="E-mail"
/>
<span>{form.validationErrors.email}</span>
<span>{validationErrors.email}</span>
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="tg">Ваш telegram</label>
<input
className={form.validationErrors.tg ? "error" : ""}
value={form.formData.tg}
onChange={form.handleChange}
className={validationErrors.tg ? "error" : ""}
value={formData.tg}
onChange={handleChange}
id="tg"
type="text"
placeholder="Telegram"
/>
<span>{form.validationErrors.tg}</span>
<span>{validationErrors.tg}</span>
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="password">Придумайте пароль</label>
<input
className={form.validationErrors.password ? "error" : ""}
value={form.formData.password}
onChange={form.handleChange}
className={validationErrors.password ? "error" : ""}
value={formData.password}
onChange={handleChange}
id="password"
type="password"
placeholder="Пароль"
/>
<span>{form.validationErrors.password}</span>
<span>{validationErrors.password}</span>
</div>
<div className="registrationCandidate__form__input">
<label htmlFor="secondPassword">Повторите пароль</label>
<input
className={
form.validationErrors.secondPassword ? "error" : ""
}
value={form.formData.secondPassword}
onChange={form.handleChange}
className={validationErrors.secondPassword ? "error" : ""}
value={formData.secondPassword}
onChange={handleChange}
id="secondPassword"
type="password"
placeholder="Пароль"
/>
<span>{form.validationErrors.secondPassword}</span>
<span>{validationErrors.secondPassword}</span>
</div>
<div className="registrationCandidate__form__submit">
<button type="submit">Отправить</button>