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

add adaptive registationForCandidate,

Browse Source 
modalRegistration,
create hook useFormValidation,
add Validation in registationForCandidate
This commit is contained in:
Никита Губарь
2023-12-26 02:42:49 +03:00
parent ce6c2d965a
commit c345bdf5ca
8 changed files with 278 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,13 +18,15 @@ export const ModalRegistration = ({ active, setActive }) => {
const [inputsValue, setInputsValue] = useState({
userName: "",
email: "",
password: ""
password: "",
secondPassword: ""
});
const [inputsError, setInputsError] = useState({
name: false,
email: false,
password: false
password: false,
secondPassword: false
});
const [loader, setLoader] = useState(false);
@ -43,6 +45,9 @@ export const ModalRegistration = ({ active, setActive }) => {
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 }));
}
@ -105,8 +110,8 @@ export const ModalRegistration = ({ active, setActive }) => {
return (
<ModalLayout active={active} setActive={closeModal} styles={"registration"}>
<div className="registration-body__main">
<h2>
Подключайтесь к <p>ITguild</p>
<h2 className="registration-body__main-title">
Подключайтесь к <span>ITguild</span>
</h2>
<p className="registration-body__main-desc">
Зарегистрируйтесь и начните работу уже сегодня
@ -182,23 +187,25 @@ export const ModalRegistration = ({ active, setActive }) => {
<div className="inputContainer">
<h5>Повторите пароль</h5>
<input
className={inputsError.password ? "error" : ""}
className={inputsError.secondPassword ? "error" : ""}
type="password"
onChange={(e) => {
setInputsError({
name: false,
email: false,
password: false
secondPassword: false
});
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value
secondPassword: e.target.value
}));
}}
value={inputsValue.password}
value={inputsValue.secondPassword}
placeholder="Пароль"
/>
{inputsError.password && <span>Минимум 6 символов</span>}
{inputsError.secondPassword && (
<span>Пароли должны совпадать</span>
)}
</div>
</div>
</div>

122
src/components/Modal/ModalRegistration/modalRegistration.scss
View File

@ -2,58 +2,105 @@
background: white;
display: flex;
flex-direction: row;
padding: 0;
padding: 40px 20px 40px 20px;
justify-content: space-between;
border: 1px solid #dde2e4;
border-radius: 8px;
width: 60%;
@media (max-width: 1375px) {
width: 80%;
}
@media (max-width: 617px) {
top: 7%;
padding: 20px 10px 20px 10px;
}
&-body {
&__main {
padding-left: 30px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 0 30px;
width: 65%;
h2 {
@media (max-width: 740px) {
width: 100%;
padding: 0;
}
&-title {
font-weight: 500;
font-size: 35px;
line-height: 32px;
display: flex;
justify-content: space-between;
width: 405px;
margin: 0 auto;
}
margin: 0;
h2 > p {
font-size: 35px;
color: #52b709;
@media (max-width: 960px) {
font-size: 25px;
}
@media (max-width: 617px) {
flex-direction: column;
align-items: center;
font-size: 20px;
}
span {
color: #52b709;
margin: 0 0 0 10px;
}
}
&-desc {
text-align: center;
width: 500px;
width: 100%;
font-weight: 500;
font-size: 16px;
line-height: 28px;
margin: 20px auto 0 auto;
margin: 20px 0 0 0;
@media (max-width: 960px) {
font-size: 15px;
}
@media (max-width: 617px) {
margin: 10px 0 0 0;
}
}
.input-body {
margin-top: 44px;
margin: 44px 0 0 0;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
@media (max-width: 617px) {
flex-direction: column;
align-items: center;
margin: 22px 0 0 0;
}
&__box {
margin-right: 25px;
display: flex;
flex-direction: column;
width: 47%;
@media (max-width: 617px) {
width: 75%;
}
h5 {
font-weight: 400;
font-size: 15px;
line-height: 18px;
margin-left: 10px;
margin: 0 0 0 10px;
}
input {
width: 294px;
height: 35px;
background: #eff2f7;
border-radius: 8px;
@ -63,9 +110,8 @@
}
.inputContainer {
height: 81px;
margin-bottom: 10px;
max-width: 294px;
margin: 0 0 20px 0;
width: 100%;
}
span {
@ -88,7 +134,11 @@
width: 174px;
height: 50px;
font-size: 18px;
margin-right: 55px;
margin: 0 55px 0 0;
@media (max-width: 740px) {
margin: 0;
}
}
.disable {
@ -112,20 +162,34 @@
}
&__about {
border-left: 1px solid #f1f1f1;
padding: 20px;
border-left: 1px solid #cdcdcd;
padding: 0 20px 0 10px;
margin: 0 0 0 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 35%;
@media (max-width: 960px) {
padding: 0 0 0 10px;
}
@media (max-width: 740px) {
display: none;
}
h4 {
margin: 22px 0 22px 0;
margin: 30px 0 5px 0;
font-weight: 900;
font-size: 14px;
line-height: 24px;
color: #52b709;
margin-right: 100px;
width: 180px;
width: 100%;
@media (max-width: 960px) {
margin: 15px 0 5px 0;
font-size: 12px;
}
}
&-text {
@ -136,7 +200,15 @@
font-weight: 400;
font-size: 12px;
line-height: 22px;
width: 205px;
width: 230px;
@media (max-width: 1643px) {
width: 100%;
}
@media (max-width: 960px) {
font-size: 10px;
}
}
img {