pull krbl

.gitea/workflows/publish.yaml

@@ -0,0 +1,56 @@
+name: publish-main
+
+on:
+  push
+
+jobs:
+  release-image:
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+    env:
+      DOCKER_ORG: krbl
+      RUNNER_TOOL_CACHE: /toolcache
+      IMAGE_NAME: minerva-frontend
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker BuildX
+        uses: docker/setup-buildx-action@v2
+        with:
+          config-inline: |
+            [registry."gitea.unprism.ru"]                                
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          registry: gitea.unprism.ru
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Get Meta
+        id: meta
+        run: |
+          echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
+          echo REPO_VERSION=$(git describe --tags --always | sed 's/^v//') >> $GITHUB_OUTPUT                 
+
+      - name: Extract branch name
+        shell: bash
+        run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
+        id: extract_branch
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: |
+            linux/amd64
+            linux/arm64
+          push: true
+          tags: |
+            gitea.unprism.ru/${{ env.DOCKER_ORG }}/${{ env.IMAGE_NAME }}:${{ steps.extract_branch.outputs.branch }}                      

.gitignore

@@ -1,3 +1,4 @@
 dist/
 node_modules/
 package-lock.json
+.DS_Store

captain-definition

@@ -0,0 +1,12 @@
+{
+  "schemaVersion": 2,
+  "dockerfileLines": [
+    "FROM node",
+    "WORKDIR /app",
+    "COPY package*.json ./",
+    "RUN npm install",
+    "COPY . .",
+    "EXPOSE 3000",
+    "CMD [\"npm\", \"run\", \"start:dev\"]"
+  ]
+}

src/App.jsx

@@ -3,13 +3,13 @@ import { Outlet, useNavigate } from "react-router-dom";
 import { FormsData, UserData, TypeAnswerData, answersData } from "./context";
 import { useCookies } from "react-cookie";
 import { globalRender } from "./router/protectedRouting.js";
-import { verifyUserApi } from "./hooks/api/enterAccountApi.js"
-import classes from "./assets/styles/app.module.scss"
+import { verifyUserApi } from "./hooks/api/enterAccountApi.js";
+import classes from "./assets/styles/app.module.scss";
 import NavBar from "./components/NavBar.jsx";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
 import InputText from "./components/typeAnswer/InputText.jsx";
 import TextArea from "./components/typeAnswer/TextArea.jsx";
-import YesNo from "./components/typeAnswer/YesNo.jsx"
+import YesNo from "./components/typeAnswer/YesNo.jsx";
 import InputDate from "./components/typeAnswer/InputDate.jsx";
 import InputMultipleRadio from "./components/typeAnswer/InputMultipleRadio.jsx";
 import InputRadio from "./components/typeAnswer/InputRadio.jsx";
@@ -28,51 +28,52 @@ 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}
     ]);
 
-    // useEffect(() => globalRender(window.location.pathname, user, navigate));
-    const [cookies, _, __] = useCookies(["user"]);
+  // useEffect(() => globalRender(window.location.pathname, user, navigate));
+  const [cookies, _, __] = useCookies(["user"]);
 
-    useEffect(() => {
-        async function verifyUser() {
-            const response = await verifyUserApi(cookies.token);
-            console.log("app", user)
+  useEffect(() => {
+    async function verifyUser() {
+      const response = await verifyUserApi(cookies.token);
+      console.log("app", user);
 
-            if (response) {
-                if (response.status === 200) {
-                    setUser(response.data);
-                }
-                else {
-                    console.log(response)
-                }
+            if (response.status === 200) {
+                setUser(response.data);
+                globalRender(window.location.pathname, response.data, navigate);
+            }
+            else {
+                globalRender(window.location.pathname, false, navigate);
             }
         }
 
-        verifyUser();
-    }, [])
+    verifyUser();
+  }, []);
 
-    return (
-        <UserData.Provider value={{ user, setUser }}>
-            <answersData.Provider value={{ answersList, setAnswersList }}>
-                <FormsData.Provider value={{ forms, setForms }}>
-                    <TypeAnswerData.Provider value={{ listTypeAnswer, setListTypeAnswer }}>
-                        <div className={classes.main}>
-                            <div className={classes.container}>
-                                <div className={classes.header}>
-                                    <NavBar navigate={navigate} auth={user} setAuth={setUser}/>                   
-                                </div>
-                                <div className={classes.content}>
-                                    <Outlet/>
-                                </div>
-                            </div>
-                        </div>
-                    </TypeAnswerData.Provider>
-                </FormsData.Provider>  
-            </answersData.Provider>
-        </UserData.Provider>      
-    )
-}
+  return (
+    <UserData.Provider value={{ user, setUser }}>
+      <answersData.Provider value={{ answersList, setAnswersList }}>
+        <FormsData.Provider value={{ forms, setForms }}>
+          <TypeAnswerData.Provider
+            value={{ listTypeAnswer, setListTypeAnswer }}
+          >
+            <div className={classes.main}>
+              <div className={classes.container}>
+                <div className={classes.header}>
+                  <NavBar navigate={navigate} auth={user} setAuth={setUser} />
+                </div>
+                <div className={classes.content}>
+                  <Outlet />
+                </div>
+              </div>
+            </div>
+          </TypeAnswerData.Provider>
+        </FormsData.Provider>
+      </answersData.Provider>
+    </UserData.Provider>
+  );
+};
 
 export default App;

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 {
-                padding: 5px;
-                border-bottom: 1px solid rgb(200, 200, 200);
+            overflow-y: auto;
+            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;
-                cursor: pointer;
-                // &__question {
-                //     &__text {
-                //         font-size: 15px;
-                //         font-family: "Montserrat", sans-serif;
-                //     }   
-                //     &__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;
-                //     }
-                // }
+                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;
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+                &__date {
+
+                }
             }
         }
     }

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}>
@@ -30,7 +26,7 @@ const NavBar = ({navigate, auth, setAuth}) => {
                 </div>
             </div>
         </div>
-    )
-}
+    );
+};
 
 export default NavBar;

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.id} key={i}>{item.text}</option>
+                    <option value={item.text} 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))) {
-                answers[postfix].answer.splice(answers[postfix].answer.indexOf(i), 1)
+            if (answers[postfix].answer.some((item) => item === value)) {
+                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} 
-                        checked={answers ? checkRadio(i) : false}
-                        onChange={() => updateStateCheckbox(i)}
+                        value={item.text} 
+                        checked={answers ? checkRadio(item.text) : false}
+                        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}  
-                        checked={answers ? answers[postfix].answer === i : false}
-                        onChange={updateAnswersForm ? (e) => updateAnswersForm(Number(e.target.value), postfix) : () => {}}
+                        value={item.text}  
+                        checked={answers ? answers[postfix].answer === item.text : false}
+                        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}
-                    onChange={updateAnswersForm ? () => updateAnswersForm("1", postfix) : () => {}}
+                    checked={answers ? answers[postfix].answer === "Да" : false}
+                    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}
-                    onChange={updateAnswersForm ? () => updateAnswersForm("2", postfix) : () => {}}
+                    checked={answers ? answers[postfix].answer === "Нет" : false}
+                    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

@@ -1,18 +1,24 @@
-const constructorAnswerValidate = (state, messageReject = "Ошибка", messageResolve = undefined) => {
-    return state ? 
-        {
-            status: true, 
-            message: messageResolve
-        } :
-        {
-            status: false, 
-            message: messageReject
-        }
-}
+const constructorAnswerValidate = (
+  state,
+  messageReject = "Ошибка",
+  messageResolve = undefined
+) => {
+  return state
+    ? {
+        status: true,
+        message: messageResolve,
+      }
+    : {
+        status: false,
+        message: messageReject,
+      };
+};
 
 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, "Обязательное поле."),
@@ -20,12 +26,12 @@ const totalRegisterValidate = (data) => {
         // constructorAnswerValidate(data.password >= 8, "Пароль должен иметь более 8 символов.")
     ]
 
-    for (let value of listValidation) {
-        if (!value.status) {
-            return value
-        }
+  for (let value of listValidation) {
+    if (!value.status) {
+      return value;
     }
-    return { status: true }
-}
+  }
+  return { status: true };
+};
 
-export { totalRegisterValidate, constructorAnswerValidate }
+export { totalRegisterValidate, constructorAnswerValidate };

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,26 +112,13 @@ const AnswersForm = () => {
                                         </div>
                                     </div>
                                 )
-                            : <div>Ответов нет</div>}
-
-
-                            {/* <MyButton text={'Предпросмотр'} backgroundColor={'rgb(225, 225, 225)'} toggle={"modal"} target={"#previewModal"}/>
-                            {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}>
-                                            <p className={classes.answers__wrapper__body__item__question__text}>Ответ: {item.answers.answer}</p>
-                                        </div>
-                                    </div>
-                                )
-                            : <div>Ответов нет</div>} */}
+                            : 
+                            <div className={classes.loading__wrapper}>
+                                <div class="spinner-border text-dark" className={classes.loading__wrapper__body} role="status">
+                                    <span class="visually-hidden">Загрузка...</span>
+                                </div>
+                            </div>}
                         </div>                        
-                        
                     </div>
                 </div>
             </div>

src/pages/EnterAccount.jsx

@@ -5,44 +5,51 @@ import classes from "../assets/styles/enterAccount.module.scss";
 import MyInput from "../components/MyInput.jsx";
 import MyButton from "../components/MyButton.jsx";
 import { UserData } from "../context";
-import { logIn, completeRegistration, verifyUserApi } from "../hooks/api/enterAccountApi.js";
+import {
+  logIn,
+  completeRegistration,
+  verifyUserApi,
+} from "../hooks/api/enterAccountApi.js";
 
 const EnterAccount = () => {
-    const [enter, setEnter] = useState("login");
-    const navigate = useNavigate();
+  const [enter, setEnter] = useState("login");
+  const navigate = useNavigate();
 
-    const [email, setEmail] = useState("");
-    const [phone, setPhone] = useState("");
-    const [login, setLogin] = useState("");
-    const [surname, setSurname] = useState("");
-    const [patronymic, setPatronymic] = useState("");
-    const [password, setPassword] = useState("");
-    const [repiedPassword, setRepiedPassword] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [login, setLogin] = useState("");
+  const [surname, setSurname] = useState("");
+  const [patronymic, setPatronymic] = useState("");
+  const [password, setPassword] = useState("");
+  const [repiedPassword, setRepiedPassword] = useState("");
 
     const {user, setUser} = useContext(UserData);
     const [cookies, setCookie, removeCookie] = useCookies(["user"]);
 
-    function cleanState() {
-        setEmail("");
-        setPhone("");
-        setLogin("");
-        setSurname("");
-        setPatronymic("");
-        setPassword("");
-        setRepiedPassword("");
-    };
+    const [loginError, setLoginError] = useState(false);
+    const [regsterError, setRegsterError] = useState(false);
 
-    function selectTag(tag) {
-        setEnter(tag);
-        cleanState();
-    };
+  function cleanState() {
+    setEmail("");
+    setPhone("");
+    setLogin("");
+    setSurname("");
+    setPatronymic("");
+    setPassword("");
+    setRepiedPassword("");
+  }
 
-    async function createUser() {
-        const response = await completeRegistration({
-            login: login,
-            password: password,
-            repiedPassword: repiedPassword
-        });
+  function selectTag(tag) {
+    setEnter(tag);
+    cleanState();
+  }
+
+  async function createUser() {
+    const response = await completeRegistration({
+      login: login,
+      password: password,
+      repiedPassword: repiedPassword,
+    });
 
         if (response.status === 200) {
             const responseMe = await verifyUserApi(response.data.token)
@@ -52,12 +59,12 @@ const EnterAccount = () => {
             navigate("/");
         }
         else {
-            console.log("Error")
+            setRegsterError(response)
         }
     };
 
-    async function logInToAccount() {
-        const response = await logIn(login, password)
+  async function logInToAccount() {
+    const response = await logIn(login, password);
 
         if (response.status === 200) {
             setCookie("token", response.data.token);
@@ -68,7 +75,7 @@ const EnterAccount = () => {
             navigate("/")
         }
         else {
-            console.log(response)
+            setLoginError(true);
         }      
     }
 
@@ -92,6 +99,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 +115,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}/>
@@ -124,14 +137,19 @@ const EnterAccount = () => {
                                 <MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>
                             </div> */}
                             <div className={classes.content__wrapper__register__footer}>
-                                <MyButton text={"Создать"} otherStyle={{height: "100%", width: "20%"}} click={() => createUser()}/>
+                                <MyButton
+                                    text={"Создать"}
+                                    otherStyle={{ height: "100%", width: "20%" }}
+                                    click={() => createUser()}
+                                />
                             </div>
-                        </div>}
+                        </div>
+                        }
                     </div>
                 </div>
             </div>
         </div>
-    )
-}
+        );
+    };
 
 export default EnterAccount;

src/pages/Home.jsx

@@ -1,40 +1,54 @@
 import React, { useState } from "react";
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 import classes from "../assets/styles/home.module.scss";
 import MyButton from "../components/MyButton.jsx";
 import MyInput from "../components/MyInput.jsx";
 
 const Home = () => {
-    const [token, setToken] = useState("");
-    const navigate = useNavigate();
+  const [token, setToken] = useState("");
+  const navigate = useNavigate();
 
-    return (
-        <div className={classes.main}>
-            <div className={classes.wrapper}>
-                <div className={classes.header}>
-                    <div className={classes.header__top}>Кажется вы попали на общую страницу.</div>
-                    <div className={classes.header__bottom}>Чтобы перейти к форме ввелите токен ниже или снова перейдите по ссылке.</div>
-                </div>
-                <div className={classes.content}>
-                    <div className={classes.content__title}>
-                        <div className={classes.content__title__wrapper}>
-                            <h3>Перейти к нужной форме</h3>
-                        </div>                     
-                    </div>
-                    <div className={classes.content__token}>
-                        <div className={classes.content__token__wrapper}>
-                            <MyInput placeholder={"Введите токен формы..."} otherMainStyle={{width: "100%"}} otherInputStyle={{width: "100%"}} value={token} change={(e) => setToken(e)}/>
-                        </div>
-                    </div>
-                    <div className={classes.content__search}>
-                        <div className={classes.content__search__wrapper}>
-                            <MyButton text={"Найти форму"} click={() => navigate(`/forms/${token}`)}/>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className={classes.main}>
+      <div className={classes.wrapper}>
+        <div className={classes.header}>
+          <div className={classes.header__top}>
+            Кажется вы попали на общую страницу.
+          </div>
+          <div className={classes.header__bottom}>
+            Чтобы перейти к форме введите токен ниже или снова перейдите по
+            ссылке.
+          </div>
         </div>
-    )
-}
+        <div className={classes.content}>
+          <div className={classes.content__title}>
+            <div className={classes.content__title__wrapper}>
+              <h3>Перейти к нужной форме</h3>
+            </div>
+          </div>
+          <div className={classes.content__token}>
+            <div className={classes.content__token__wrapper}>
+              <MyInput
+                placeholder={"Введите токен формы..."}
+                otherMainStyle={{ width: "100%" }}
+                otherInputStyle={{ width: "100%" }}
+                value={token}
+                change={(e) => setToken(e)}
+              />
+            </div>
+          </div>
+          <div className={classes.content__search}>
+            <div className={classes.content__search__wrapper}>
+              <MyButton
+                text={"Найти форму"}
+                click={() => navigate(`/forms/${token}`)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default Home;

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 }

webpack.config.js

@@ -1,73 +1,74 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const path = require('path');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
 
 module.exports = (env) => {
+  const isDev = env.mode === "development";
 
-    const isDev = env.mode === 'development';
+  const cssLoader = {
+    loader: "css-loader",
+    options: {
+      modules: {
+        localIdentName: isDev ? "[path][name]__[local]" : "[hash:base64:8]",
+      },
+    },
+  };
 
-    const cssLoader = {
-        loader: "css-loader",
-        options: {
-            modules: {
-                localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]'
+  const config = {
+    mode: env.mode ?? "development",
+    performance: {
+      hints: false,
+      maxEntrypointSize: 512000,
+      maxAssetSize: 512000,
+    },
+    entry: "./src/index.js",
+    output: {
+      // filename: '[name].[contenthash].js',
+      filename: "bundle.js",
+      publicPath: "/",
+      path: path.resolve(__dirname, "dist"),
+      clean: true,
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, "public", "index.html"),
+      }),
+      isDev
+        ? undefined
+        : new MiniCssExtractPlugin({
+            filename: "css/[name].[contenthash:8].css",
+            chunkFilename: "css/[name].[contenthash:8].css",
+          }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.(scss|css)$/,
+          use: [
+            isDev ? "style-loader" : MiniCssExtractPlugin.loader,
+            cssLoader,
+            "sass-loader",
+          ],
+        },
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "babel-loader",
+            options: {
+              presets: ["@babel/preset-env", "@babel/preset-react"],
             },
+          },
         },
-    }
+      ],
+    },
+    devServer: {
+      port: env.port ?? 3000,
+      historyApiFallback: true,
+      host: "0.0.0.0",
+      allowedHosts: "all",
+    },
+  };
 
-    const config = {
-        mode: env.mode ?? 'development',
-        performance: {
-            hints: false,
-            maxEntrypointSize: 512000,
-            maxAssetSize: 512000
-        },
-        entry: './src/index.js',
-        output: {
-            // filename: '[name].[contenthash].js',
-            filename: 'bundle.js',
-            publicPath: '/',
-            path: path.resolve(__dirname, 'dist'),
-            clean: true
-        },
-        plugins: [
-            new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public', 'index.html')}),
-            isDev ? undefined : new MiniCssExtractPlugin({
-                filename: 'css/[name].[contenthash:8].css',
-                chunkFilename: 'css/[name].[contenthash:8].css'
-            })
-        ],
-        module: {
-            rules: [
-                {
-                    test: /\.(scss|css)$/,
-                    use: [
-                        isDev ? 'style-loader' : MiniCssExtractPlugin.loader, 
-                        cssLoader, 
-                        'sass-loader'
-                    ],
-                },
-                {
-                    test: /\.(js|jsx)$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: "babel-loader",
-                        options: {
-                            presets: [
-                                '@babel/preset-env',
-                                '@babel/preset-react'
-                            ]
-                        }
-                    }
-                }
-            ]
-        },
-        devServer: {
-            port: env.port ?? 3000,
-            open: true,
-            historyApiFallback: true
-        }
-    };
-
-    return config
-}
+  return config;
+};