fix one

src/App.jsx

@@ -28,7 +28,7 @@ const App = () => {
         {id: 4, text: 'Множественный выбор', typeTag: InputMultipleRadio},
         {id: 5, text: 'Выпадающий список', typeTag: DropDownList},
         {id: 6, text: 'Да/Нет', typeTag: YesNo},
-        {id: 7, text: 'Файл', typeTag: InputFile},
+        // {id: 7, text: 'Файл', typeTag: InputFile},
         {id: 8, text: 'Дата', typeTag: InputDate}
     ]);
 
@@ -38,15 +38,13 @@ const App = () => {
     useEffect(() => {
         async function verifyUser() {
             const response = await verifyUserApi(cookies.token);
-            console.log("app", user)
 
-            if (response) {
             if (response.status === 200) {
                 setUser(response.data);
+                globalRender(window.location.pathname, response.data, navigate);
             }
             else {
-                    console.log(response)
+                globalRender(window.location.pathname, false, navigate);
-                }
             }
         }
 

src/assets/styles/answersForm.module.scss

@@ -11,12 +11,26 @@
     align-items: center;
 }
 
+.loading__wrapper {
+    width: 100%;
+    height: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &__body {
+        // margin-top: 100px;
+        span {
+
+        }
+    }
+}
+
+
 .answers {
     width: 70%;
     height: 70%;
     box-shadow: 0 0 5px 1px rgb(200, 200, 200);
     padding: 1.5%;
-    position: relative;
     &__linkAdmin {
         position: absolute;
         bottom: 103%;
@@ -33,6 +47,8 @@
         }
     }
     &__wrapper {
+        width: 100%;
+        height: 100%;
         &__header {
             width: 100%;
             height: 15%;
@@ -40,6 +56,7 @@
             justify-content: start;
             align-items: center;
             margin-bottom: 10px;
+            // border-bottom: 1px solid rgb(200, 200, 200);
             h3 {
                 font-size: 25px;
                 font-family: "Montserrat", sans-serif;
@@ -49,30 +66,45 @@
         &__body {
             width: 100%;
             height: 85%;
-            &__item {
+            overflow-y: auto;
-                padding: 5px;
             border-bottom: 1px solid rgb(200, 200, 200);
+            &::-webkit-scrollbar {
+                width: 7px;
+            }
+            &::-webkit-scrollbar-thumb {
+                background-color: rgb(200, 200, 200);
+            }
+            &__column {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
                 font-size: 15px;
                 font-family: "Montserrat", sans-serif;
+                padding: 5px;
+                border-bottom: 1px solid rgb(200, 200, 200);
+            }
+            &__item {
+                padding: 0 5px;
+                // border-bottom: 1px solid rgb(200, 200, 200);
+                font-size: 15px;
+                font-family: "Montserrat", sans-serif;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: 20%;
+                width: 100%;
+                &:hover {
+                    background-color: rgba(230, 230, 230, 0.6);
+                }
+                &__user {
                     cursor: pointer;
-                // &__question {
+                    &:hover {
-                //     &__text {
+                        text-decoration: underline;
-                //         font-size: 15px;
+                    }
-                //         font-family: "Montserrat", sans-serif;
+                }
-                //     }   
+                &__date {
-                //     &__comment {
+
-                //         font-size: 11px;
+                }
-                //         font-family: "Montserrat", sans-serif;
-                //         font-style: italic;
-                //         color: rgb(200, 200, 200);
-                //     }
-                // }
-                // &__answer {
-                //     &__text {
-                //         font-size: 15px;
-                //         font-family: "Montserrat", sans-serif;
-                //     }
-                // }
             }
         }
     }

src/assets/styles/enterAccount.module.scss

@@ -28,7 +28,6 @@
 .content {
     width: 100%;
     height: 100%;
-    // box-shadow: 0 3px 5px 1px rgb(200, 200, 200);
     border: 1px solid rgb(220, 220, 220);
     border-top: none;
     &__wrapper {
@@ -58,6 +57,15 @@
                 display: flex;
                 justify-content: space-around;
                 flex-direction: column;
+                position: relative;
+                &__error {
+                    position: absolute;
+                    font-size: 13px;
+                    font-family: "Montserrat", sans-serif;
+                    top: 0;
+                    left: 10px;
+                    color: rgb(224, 75, 75);
+                }
             }
             &__footer {
                 width: 100%;
@@ -87,7 +95,15 @@
                 justify-content: space-around;
                 flex-direction: column;
                 padding-bottom: 5px;
-                
+                position: relative;
+                &__error {
+                    position: absolute;
+                    font-size: 13px;
+                    font-family: "Montserrat", sans-serif;
+                    top: 0;
+                    left: 10px;
+                    color: rgb(224, 75, 75);
+                }
                 &__fio {
                     height: 15%;
                     display: flex;

src/components/NavBar.jsx

@@ -4,10 +4,6 @@ import classes from "../assets/styles/components/navbar.module.scss";
 import { verifyUserApi } from "../hooks/api/enterAccountApi";
 
 const NavBar = ({navigate, auth, setAuth}) => {
-    useEffect(() => {
-        console.log("nav", auth)
-    })
-
     return (
         <div className={classes.main}>
             <div className={classes.wrapper}>

src/components/typeAnswer/DropDownList.jsx

@@ -7,11 +7,11 @@ const DropDownList = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
         <div className={classes.main}>
             <select 
                 value={answers ? answers[postfix].answer : ""} 
-                onChange={updateAnswersForm ? (e) => updateAnswersForm(Number(e.target.value), postfix) : () => {}}
+                onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}
             >
+                <option selected disabled></option>
                 {optionAnswer.map((item, i) => 
-                    // <option value={item.id ? item.id : item[0].Value} key={i}>{item.text ? item.text : item[1].Value}</option>
+                    <option value={item.text} key={i}>{item.text}</option>
-                    <option value={item.id} key={i}>{item.text}</option>
                 )}
             </select>
         </div>

src/components/typeAnswer/InputMultipleRadio.jsx

@@ -2,20 +2,20 @@ import React from "react";
 import classes from "../../assets/styles/components/typeAnswer/inputMultiple.module.scss"
 
 const InputMultipleRadio = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
-    function checkRadio(i) {
+    function checkRadio(value) {
         if (answers[postfix].answer) {
-            return answers[postfix].answer.some(item => item === Number(i))
+            return answers[postfix].answer.some(item => item === value)
         }
         return false
     }
 
-    function updateStateCheckbox(i) {
+    function updateStateCheckbox(value) {
         if (updateAnswersForm) {
-            if (answers[postfix].answer.some((item) => item === Number(i))) {
+            if (answers[postfix].answer.some((item) => item === value)) {
-                answers[postfix].answer.splice(answers[postfix].answer.indexOf(i), 1)
+                answers[postfix].answer.splice(answers[postfix].answer.indexOf(value), 1)
             }
             else {
-                answers[postfix].answer.push(i)
+                answers[postfix].answer.push(value)
             }
             updateAnswersForm(answers[postfix].answer, postfix)
         }            
@@ -30,9 +30,9 @@ const InputMultipleRadio = ({postfix, optionAnswer, answers, updateAnswersForm})
                         type="checkbox" 
                         name={`inputMultiple_${postfix}`} 
                         id={`inputMultiple_${postfix}`}
-                        value={i} 
+                        value={item.text} 
-                        checked={answers ? checkRadio(i) : false}
+                        checked={answers ? checkRadio(item.text) : false}
-                        onChange={() => updateStateCheckbox(i)}
+                        onChange={() => updateStateCheckbox(item.text)}
                     />
                     {/* <label class="form-check-label" for={`inputMultiple_${postfix}`}>{item.text ? item.text : item[1].Value}</label> */}
                     <label class="form-check-label" for={`inputMultiple_${postfix}`}>{item.text}</label>

src/components/typeAnswer/InputRadio.jsx

@@ -11,9 +11,9 @@ const InputRadio = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
                         type="radio" 
                         name={`inputRadio_${postfix}`} 
                         id={`choice_${item.id}`} 
-                        value={i}  
+                        value={item.text}  
-                        checked={answers ? answers[postfix].answer === i : false}
+                        checked={answers ? answers[postfix].answer === item.text : false}
-                        onChange={updateAnswersForm ? (e) => updateAnswersForm(Number(e.target.value), postfix) : () => {}}
+                        onChange={updateAnswersForm ? (e) => updateAnswersForm(item.text, postfix) : () => {}}
                     />
                     {/* <label class="form-check-label" for={`inputRadio_${postfix}`}>{item.text ? item.text : item[1].Value}</label> */}
                     <label class="form-check-label" for={`inputRadio_${postfix}`}>{item.text}</label>

src/components/typeAnswer/YesNo.jsx

@@ -11,8 +11,8 @@ const YesNo = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
                     name={`YesOrNo_${postfix}`} 
                     id="choiceYes"
                     value="1" 
-                    checked={answers ? answers[postfix].answer === "1" : false}
+                    checked={answers ? answers[postfix].answer === "Да" : false}
-                    onChange={updateAnswersForm ? () => updateAnswersForm("1", postfix) : () => {}}
+                    onChange={updateAnswersForm ? () => updateAnswersForm("Да", postfix) : () => {}}
                 />
                 <label class="form-check-label" for="choiceYes">Да</label>
             </div>
@@ -23,8 +23,8 @@ const YesNo = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
                     name={`YesOrNo_${postfix}`} 
                     id="choiceNo"
                     value="2" 
-                    checked={answers ? answers[postfix].answer === "2" : false}
+                    checked={answers ? answers[postfix].answer === "Нет" : false}
-                    onChange={updateAnswersForm ? () => updateAnswersForm("2", postfix) : () => {}}
+                    onChange={updateAnswersForm ? () => updateAnswersForm("Нет", postfix) : () => {}}
                 />
                 <label class="form-check-label" for="choiceNo">Нет</label>
             </div>

src/hooks/api/enterAccountApi.js

@@ -23,7 +23,7 @@ async function completeRegistration(data) {
             return response
         }
         catch (e) {
-            return e
+            return "Ошибка. Проверте корректность введенных данных."
         }
     }
     return validate.message

src/hooks/sundry/parseListBlock.js

@@ -31,4 +31,22 @@ function responseDataToListBlock(data) {
     return result.sort((itemOne, itemTwo) => itemOne.order - itemTwo.order)
 };
 
-export { responseDataToListBlock }
+function dateTimeParse(date) {
+    let newDate = "";
+
+    for (let symbol of date) {
+        if (symbol === "T") {
+            newDate += " ";
+        }
+        else if (symbol === ".") {
+            break;
+        }
+        else {
+            newDate += symbol;
+        }
+    }
+
+    return newDate
+}
+
+export { responseDataToListBlock, dateTimeParse }

src/hooks/validation/enterAccountValidate.js

@@ -12,7 +12,9 @@ const constructorAnswerValidate = (state, messageReject = "Ошибка", messag
 
 const totalRegisterValidate = (data) => {
     const listValidation = [
-        constructorAnswerValidate(data.login.length, "Обязательное поле."),
+        constructorAnswerValidate(data.login.length, "Введите логин."),
+        constructorAnswerValidate(data.password.length, "Введите пароль."),
+        constructorAnswerValidate(data.repiedPassword.length, "Введите повторно пароль."),
         // constructorAnswerValidate(data.surname.length, "Обязательное поле."),
         // constructorAnswerValidate(data.email.length, "Обязательное поле."),
         // constructorAnswerValidate(data.phone.length, "Обязательное поле."),

src/pages/AnswersForm.jsx

@@ -3,7 +3,7 @@ import { useCookies } from "react-cookie";
 import { useNavigate, useParams } from 'react-router-dom';
 import { answersData } from "../context";
 import classes from "../assets/styles/answersForm.module.scss";
-import { responseDataToListBlock } from "../hooks/sundry/parseListBlock";
+import { responseDataToListBlock, dateTimeParse } from "../hooks/sundry/parseListBlock";
 import { listFormBlockApi, getAnswersApi } from "../hooks/api/formApi";
 import { listUsersApi } from "../hooks/api/adminApi";
 
@@ -29,6 +29,7 @@ const AnswersForm = () => {
                     for (let item of responseAnswers.data) {
                         const blocks = {
                             user: listUsers.data.find(user => user.id === item.user_id).login,
+                            date: dateTimeParse(item.date),
                             block: []
                         }
 
@@ -67,12 +68,20 @@ const AnswersForm = () => {
                             <h3>Ответы</h3>
                         </div>
                         <div className={classes.answers__wrapper__body}>
+                            <div className={classes.answers__wrapper__body__column}>
+                                <div>Логин</div>
+                                <div>Дата</div>
+                            </div>
+
                             {data ? 
                                 data.map((item, i) => 
                                     <div className={classes.answers__wrapper__body__item} key={i}>
                                         <div className={classes.answers__wrapper__body__item__user} data-bs-toggle={"modal"} data-bs-target={`#answersModal${i}`}>
                                             {item.user}
                                         </div>
+                                        <div className={classes.answers__wrapper__body__item__date}>
+                                            {item.date}
+                                        </div>
 
                                         <div class="modal fade myModal" className={classes.myModal} id={`answersModal${i}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
                                             <div class="modal-dialog myModal__dialog" className={classes.myModal__dialog}>
@@ -87,7 +96,11 @@ const AnswersForm = () => {
                                                                 <p className={classes.myModal__item__question__comment}>{block.question.comment}</p>
                                                             </div>
                                                             <div className={classes.myModal__item__answer}>
-                                                                <p className={classes.myModal__item__question__text}>Ответ: {block.answers.answer}</p>
+                                                                <p className={classes.myModal__item__question__text}>Ответ: {
+                                                                    Array.isArray(block.answers.answer) ? 
+                                                                    block.answers.answer.map(item => <span>{item}; </span>) :
+                                                                    block.answers.answer
+                                                                }</p>
                                                             </div>
                                                         </div>)}
                                                     </div>
@@ -99,27 +112,14 @@ const AnswersForm = () => {
                                         </div>
                                     </div>
                                 )
-                            : <div>Ответов нет</div>}
+                            : 
-
+                            <div className={classes.loading__wrapper}>
-
+                                <div class="spinner-border text-dark" className={classes.loading__wrapper__body} role="status">
-                            {/* <MyButton text={'Предпросмотр'} backgroundColor={'rgb(225, 225, 225)'} toggle={"modal"} target={"#previewModal"}/>
+                                    <span class="visually-hidden">Загрузка...</span>
-                            {data ? <div className={classes.answers__wrapper__body__item}></div> */}
-                            {/* {data ? 
-                                data.map((item, i) => 
-                                    <div className={classes.answers__wrapper__body__item} key={i}>
-                                        <div className={classes.answers__wrapper__body__item__question}>
-                                            <p className={classes.answers__wrapper__body__item__question__text}>{i + 1}) {item.question.question}</p>
-                                            <p className={classes.item__question__comment}>{item.question.comment}</p>
                                 </div>
-                                        <div className={classes.answers__wrapper__body__item__answer}>
+                            </div>}
-                                            <p className={classes.answers__wrapper__body__item__question__text}>Ответ: {item.answers.answer}</p>
                         </div>                        
                     </div>
-                                )
-                            : <div>Ответов нет</div>} */}
-                        </div>
-                        
-                    </div>
                 </div>
             </div>
         </div>

src/pages/EnterAccount.jsx

@@ -22,6 +22,9 @@ const EnterAccount = () => {
     const {user, setUser} = useContext(UserData);
     const [cookies, setCookie, removeCookie] = useCookies(["user"]);
 
+    const [loginError, setLoginError] = useState(false);
+    const [regsterError, setRegsterError] = useState(false);
+
     function cleanState() {
         setEmail("");
         setPhone("");
@@ -52,7 +55,7 @@ const EnterAccount = () => {
             navigate("/");
         }
         else {
-            console.log("Error")
+            setRegsterError(response)
         }
     };
 
@@ -68,7 +71,7 @@ const EnterAccount = () => {
             navigate("/")
         }
         else {
-            console.log(response)
+            setLoginError(true);
         }      
     }
 
@@ -92,6 +95,9 @@ const EnterAccount = () => {
                                 <h3>Войти в аккаунт</h3>
                             </div>
                             <div className={classes.content__wrapper__login__body}>
+                                {loginError ? <span className={classes.content__wrapper__login__body__error}>
+                                    Ошибка. Проверте корректность ввода логина и пароля.
+                                </span> : <span className={classes.content__wrapper__login__body__error}></span>}
                                 <MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/>
                                 <MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
                             </div>
@@ -105,9 +111,12 @@ const EnterAccount = () => {
                         </div> : 
                         <div className={classes.content__wrapper__register}>
                             <div className={classes.content__wrapper__register__header}>
-                                <h3>Зарегестрировать учетную запись</h3>
+                                <h3>Зарегистрировать учетную запись</h3>
                             </div>
                             <div className={classes.content__wrapper__register__body}>
+                                {regsterError ? <span className={classes.content__wrapper__register__body__error}>
+                                    {regsterError}
+                                </span> : <span className={classes.content__wrapper__register__body__error}></span>}
                                 <MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/>
                                 <MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
                                 <MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>

src/pages/NewForm.jsx

@@ -119,13 +119,6 @@ const NewForm = () => {
             console.log(response)
         }
      
-        // setListBlock(listBlock.map(item => {
-        //     if (item.id === stateModal) {
-        //         item = data
-        //     }
-        //     return item
-        // }))
-     
         cleanStates();
     };
 

src/pages/ViewForm.jsx

@@ -19,11 +19,9 @@ const ViewForm = () => {
     const [cookies, setCookies, __] = useCookies(["user"]);
     const [questions, setQuestions] = useState([]);
     const [answers, setAnswers] = useState([]);
-    // const [title, setTitle] = useState("");
 
     useEffect(() => {
         async function getForm() {
-            // const responseForms = await listFormsApi(cookies.token);
             const responseBlocks = await listFormBlockByTokenApi(cookies.token, formId);
 
             if (responseBlocks.status === 200 && responseBlocks.data) {
@@ -33,10 +31,8 @@ const ViewForm = () => {
                 setAnswers(listBlocks.map(item => (
                     {id: item.id, answer: []}
                 )))
-                // setTitle(responseForms.data.find(item => item.id === formId).title)
             }
             else {
-                // console.log(responseForms)
                 console.log(responseBlocks)
             }
         };
@@ -45,6 +41,7 @@ const ViewForm = () => {
     }, []);
 
     function updateAnswersForm(value, id) {
+        console.log(value)
         setAnswers(
             answers.map((item, i) => {
                 if (id === i) {
@@ -56,8 +53,8 @@ const ViewForm = () => {
     };
 
     async function saveAnswers() {
+        console.log(answers)
         const response = await saveAnswersApi(cookies.token, formId, answers);
-        console.log(response)
 
         if (response.status === 200) {
             setAnswersList([...answersList, {

src/router/protectedRouting.js

@@ -5,10 +5,10 @@ const protectedUrl = {
         "/profile"
     ],
     Authorized: [
-        "enter"
+        "/enter"
     ],
     notRights: [
-
+        "/forms"
     ]
 }
 
@@ -16,6 +16,14 @@ function globalRender(url, user, navigate) {
     if (!user && protectedUrl.notAuthorized.some(item => item === url)) {
         navigate("/enter")
     }
+    else if (user && protectedUrl.Authorized.some(item => item === url)) {
+        navigate("/")
+    }   
+    else if (user && protectedUrl.notRights.some(item => item === url)) {
+        if (!user.is_admin) {
+            navigate("/")
+        } 
+    }
 }
 
 export { globalRender }