ticket 16, 4, 18, 19, 20, 21, 22

package.json

@@ -38,10 +38,14 @@
     "@uiw/react-markdown-editor": "^5.12.1",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
+    "inputmask": "^5.0.9",
+    "primereact": "^10.6.6",
+    "qrcode": "^1.5.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-cookie": "^7.1.4",
     "react-dom": "^18.2.0",
+    "react-qr-code": "^2.0.15",
     "react-router-dom": "^6.22.1"
   }
 }

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useLayoutEffect } from "react";
+import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import { FormsData, UserData, TypeAnswerData, answersData } from "./context";
 import { useCookies } from "react-cookie";
@@ -20,6 +20,9 @@ const App = () => {
     const navigate = useNavigate();
     const [forms, setForms] = useState([]);
     const [user, setUser] = useState(false);
+    globalRender(window.location.pathname, user, navigate);
+
+    const userRef = useRef(false)
     const [answersList, setAnswersList] = useState([]);
     const [listTypeAnswer, setListTypeAnswer] = useState([
         {id: 1, text: 'Краткий ответ', typeTag: InputText},
@@ -37,13 +40,16 @@ const App = () => {
   useEffect(() => {
     async function verifyUser() {
       const response = await verifyUserApi(cookies.token);
+            console.log("verifyUser App")
 
             if (response.status === 200) {
                 setUser(response.data);
-                globalRender(window.location.pathname, response.data, navigate);
+                userRef.current = response.data
+                // globalRender(window.location.pathname, response.data, navigate);
             }
             else {
-                globalRender(window.location.pathname, false, navigate);
+                // globalRender(window.location.pathname, false, navigate);
+                setUser(false);
             }
         }
 
@@ -51,7 +57,7 @@ const App = () => {
   }, []);
 
   return (
-    <UserData.Provider value={{ user, setUser }}>
+    <UserData.Provider value={{ user, setUser, userRef }}>
       <answersData.Provider value={{ answersList, setAnswersList }}>
         <FormsData.Provider value={{ forms, setForms }}>
           <TypeAnswerData.Provider

src/assets/styles/adminPanel.module.scss

@@ -12,8 +12,8 @@
 }
 
 .admin {
-  width: 70%;
-  height: 70%;
+  width: 85%;
+  height: 80%;
   background: #fff;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
@@ -84,7 +84,7 @@
         }
         &__item {
           width: 100%;
-          height: 20%;
+          height: 60px;
           border-bottom: 1px solid rgb(200, 200, 200);
           position: relative;
           &__wrapper {

src/assets/styles/components/answerModal.module.scss

@@ -32,7 +32,27 @@
                         padding: 0 1%;
                     }
                     &__file {
+                        // margin-top: 10px;
+                        display: none;
+                    }
+                    &__fileLabel {
                         margin-top: 10px;
+                        border: 1px solid rgb(100, 100, 100);
+                        background-color: rgb(240, 240, 240);
+                        font-family: "Montserrat", sans-serif;
+                        color: rgb(100, 100, 100);
+                        cursor: pointer;
+                        padding: 1%;
+                        transition: 0.3s;
+                        &:hover {
+                            background-color: rgb(230, 230, 230);
+                            transition: 0.3s;
+                        }
+                    }
+                    &__listFile {
+                        margin-left: 10px;
+                        font-family: "Montserrat", sans-serif;
+                        color: rgb(100, 100, 100);
                     }
                 }
                 &__comment {

src/assets/styles/components/bodyModal/editToken.module.scss

@@ -0,0 +1,5 @@
+.main {
+    width: 100%;
+    height: 100%;
+    padding: 2%;
+}

src/assets/styles/components/bodyModal/qrCodeToken.module.scss

@@ -0,0 +1,8 @@
+.main {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2% 0;
+}

src/assets/styles/generatingFormFields.module.scss

@@ -35,6 +35,14 @@
         }
     }
     &__answer {
-
+        &__file {
+            margin-right: 10px;
+            color: rgb(105, 136, 220);
+            text-decoration: none;
+            &:hover {
+                text-decoration: underline;
+                color: rgb(53, 88, 182);
+            }
+        }
     }
 }

src/assets/styles/newArticle.module.scss

@@ -51,7 +51,7 @@
     }
     &__listBtn {
         display: flex;
-        justify-content: space-between;
+        justify-content: end;
 
         width: 30%;
     } 

src/components/AnswerModal.jsx

@@ -26,7 +26,8 @@ const AnswerModal = ({
     setComment,
     setCurrentTypeAnswer,
     setFile,
-    removeOptionAnswer
+    removeOptionAnswer,
+    addFiles
     }) => {
 
     return (
@@ -45,13 +46,15 @@ const AnswerModal = ({
                         <div className={classes.myModal__dialog__content__body__answer}>
                             <span className={classes.myModal__dialog__content__body__answer__title}>Вопрос</span>
                             <MarkDowm mkValue={question} setMkValue={setQuestion}></MarkDowm>
+                            <label for="fileUpload" className={classes.myModal__dialog__content__body__answer__fileLabel}>Добавить файл</label>
+                            <label for="fileUpload" className={classes.myModal__dialog__content__body__answer__listFile}>Файлы : {file ? file.map(item => `${item.name}; `) : Нет}</label>
                             <input 
+                                id="fileUpload"
                                 type="file" 
                                 multiple 
                                 accept="image/*,image/jpeg,video/mp4,video/x-m4v,video/*" 
                                 className={classes.myModal__dialog__content__body__answer__file}
-                                value={file}
-                                onChange={event => setFile(event.target.value)}
+                                onChange={e => addFiles(e.target.files)}
                             ></input>                     
                         </div>
                         <div className={classes.myModal__dialog__content__body__comment}>

src/components/DefaultModal.jsx

@@ -5,14 +5,13 @@ import MyButton from "./MyButton.jsx";
 
 const DefaultModal = ({
     name,
-    postfix,
     btn,
     BodyModal
 }) => {
 
     return (
         <div class="modal fade myModal" className={classes.main} id={`${name}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
-            <div class="modal-dialog myModal__dialog" className={classes.main__dialog}>
+            <div class="modal-dialog modal-dialog-centered myModal__dialog" className={classes.main__dialog}>
                 <div class="modal-content" className={classes.main__dialog__content}>
                     {BodyModal}
                     <div class="modal-footer myModal__dialog__content__footer" className={classes.myModal__dialog__content__footer}>

src/components/GeneratingFormFields.jsx

@@ -4,11 +4,23 @@ import MarkdownEditor from "@uiw/react-markdown-editor";
 import { parseTotalLinkVideo } from "../hooks/sundry/parseLinkVideo";
 
 const GeneratingFormFields = ({listBlock, listTypeAnswer, answers, updateAnswersForm}) => {
+
+    const getUint8Array = (binary) => {
+        let bytesArray = []
+        let len = binary.length
+
+        for (let i = 0; i < len; i++) {
+            bytesArray.push(binary.charCodeAt(i))
+        }
+        
+        return [new Uint8Array(bytesArray)]
+    }
+
     return (
         listBlock.map((item, i) => 
             <div className={classes.item} key={i}>
                 <div className={classes.item__question}>
-                    <p className={classes.item__question__text}>{i + 1}) <MarkdownEditor.Markdown source={item.question}/></p>
+                    <p className={classes.item__question__text}><MarkdownEditor.Markdown source={`${i + 1}) ${item.question}`}/></p>
                     <p className={classes.item__question__comment}>{item.comment}</p>
                     <div className={classes.item__question__video}>
                         {item.video ? 
@@ -37,6 +49,13 @@ const GeneratingFormFields = ({listBlock, listTypeAnswer, answers, updateAnswers
                             updateAnswersForm: updateAnswersForm ? updateAnswersForm : false
                         })
                     }
+                    {
+                        item.file.map(f => <a className={classes.item__answer__file} download={f.name} href={
+                            URL.createObjectURL(
+                                new Blob(getUint8Array(atob(f.binary)), { type: f.type })
+                            )
+                        }>{f.name}</a>)
+                    }
                 </div>
             </div>
         )  

src/components/MyInput.jsx

@@ -1,16 +1,28 @@
 import React from "react";
+import { InputMask } from "primereact/inputmask";
 import classes from "../assets/styles/components/myInput.module.scss";
 
 const MyInput = (props) => {
     return (
         <div className={classes.main} style={{...props.otherMainStyle}}>
-            <input 
-                type={props.type} 
-                placeholder={props.placeholder} 
-                style={{...props.otherInputStyle}} 
-                onChange={(e) => props.change(e.target.value)} 
-                value={props.value}
-            />
+            {
+                props.mask ? 
+                    <InputMask 
+                        type={props.type} 
+                        placeholder={props.placeholder} 
+                        style={{...props.otherInputStyle}} 
+                        onChange={(e) => props.change(e.target.value)} 
+                        value={props.value}
+                        mask={props.mask}
+                    /> :
+                    <input 
+                        type={props.type} 
+                        placeholder={props.placeholder} 
+                        style={{...props.otherInputStyle}} 
+                        onChange={(e) => props.change(e.target.value)} 
+                        value={props.value}
+                    />
+            }
         </div>
     )
 }

src/components/MyQrCode.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import QRCode from "react-qr-code";
+
+
+const MyQrCode = ({value}) => {
+    return (
+        <QRCode value={value}/>
+    )
+}
+
+export default MyQrCode

src/components/TextEditor.jsx

@@ -3,6 +3,33 @@ import { CKEditor } from '@ckeditor/ckeditor5-react';
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
 const TextEditor = ({data, setData}) => {
+
+    function uploadAdapter(loader) {
+        return {
+            upload: () => {
+                return new Promise(async (resolve, reject) => {
+                    try {
+                    const file = await loader.file;
+                    const buff = await file.arrayBuffer()
+                    const bytesArray = new Uint8Array(buff)
+                    const bytesString = btoa(String.fromCharCode.apply(null, bytesArray))
+                    resolve({
+                        default: `data:image/jpg;base64, ${bytesString}`
+                    });
+                    } catch (error) {
+                        reject("Hello");
+                    }
+              });
+            }
+        }
+    }
+
+    function uploadPlugin(editor) {
+        editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
+            return uploadAdapter(loader);
+        };
+    }
+
     return (
         <div className="App">
             <h2>Редактор статьи</h2>
@@ -10,6 +37,7 @@ const TextEditor = ({data, setData}) => {
                 editor={ ClassicEditor }
                 data={data}
                 config = {{
+                    extraPlugins: [uploadPlugin],
                     mediaEmbed: {previewsInData: true }
                 }}
                 onReady={ editor => {
@@ -19,15 +47,11 @@ const TextEditor = ({data, setData}) => {
                 onChange={ ( event, editor ) => {
                     setData(editor.getData())
                 }}
-                onBlur={ ( event, editor ) => {
-                    console.log( 'Blur.', editor );
-                } }
-                onFocus={ ( event, editor ) => {
-                    console.log( 'Focus.', editor );
-                } }
+                onBlur={ ( event, editor ) => {}}
+                onFocus={ ( event, editor ) => {}}
             />
         </div>
     );
 }
 
-export default TextEditor;
+export default TextEditor

src/components/bodyModal/EditToken.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import classes from "../../assets/styles/components/bodyModal/editToken.module.scss";
+import MyInput from "../MyInput.jsx";
+
+
+const EditToken = ({titleToken, setTitleToken}) => {
+    return (
+        <div className={classes.main}>
+            <MyInput type={"text"} value={titleToken} change={setTitleToken} placeholder={"Название"}/>
+        </div>
+    )
+}
+
+export default EditToken

src/components/bodyModal/EditUserAdminPanel.jsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useState, useRef} from "react";
 import classes from "../../assets/styles/components/bodyModal/editUserAdminPanel.module.scss";
 import MyInput from "../../components/MyInput.jsx";
 
@@ -12,6 +12,7 @@ const EditUserAdminPanel = ({
     lastName,
     login,
     phone,
+    pass,
     setEmail,
     setFirstName,
     setIsAdmin,
@@ -19,10 +20,9 @@ const EditUserAdminPanel = ({
     setLastName,
     setLogin,
     setPhone,
+    setPass
 }) => {
 
-    console.log('228', id, isAdmin, isAdmin)
-
     return (
         <div className={classes.main}>
             <MyInput 
@@ -35,6 +35,7 @@ const EditUserAdminPanel = ({
             />
             <MyInput 
                 type={"text"} 
+                mask={"9 (999) 999-99-99"}
                 value={phone} 
                 placeholder={"Телефон"}
                 change={setPhone}
@@ -65,6 +66,14 @@ const EditUserAdminPanel = ({
                 otherMainStyle={{width: "100%", height: "100%", marginTop: "1%"}} 
                 otherInputStyle={{width: "100%", height: "10%"}}
             />
+            <MyInput 
+                type={"text"} 
+                value={pass} 
+                placeholder={"Пароль"}
+                change={setPass}
+                otherMainStyle={{width: "100%", height: "100%", marginTop: "1%"}} 
+                otherInputStyle={{width: "100%", height: "10%"}}
+            />
             <div className={classes.main__status}>
                 <div className={classes.main__status__admin}>
                     <div className={classes.main__status__admin__text}>Администратор</div>

src/components/bodyModal/QrCodeToken.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import classes from "../../assets/styles/components/bodyModal/qrCodeToken.module.scss";
+import MyQrCode from "../MyQrCode.jsx";
+
+
+const QrCodeToken = ({value}) => {
+    return (
+        <div className={classes.main}>
+            <MyQrCode value={`http://localhost:3000/forms/${value}`}/>
+        </div>
+    )
+}
+
+export default QrCodeToken

src/hooks/api/adminApi.js

@@ -1,42 +0,0 @@
-// import axios from "axios";
-
-// async function listUsersApi(token) {
-//     try {
-//         const response = await axios.get(`https://api.minerva.krbl.ru/auth/manage/users`,
-//         {
-//             headers: {
-//                 "Authorization": `Token ${token}`
-//             }
-//         })
-//         return response
-//     }
-//     catch (e) {
-//         return e
-//     }
-// };
-
-// async function editUserApi(token, data) {
-//     try {
-//         const response = await axios.post(`https://api.minerva.krbl.ru/auth/manage/edit`,
-//         {
-//             "email": data.email,
-//             "first_name": data.first_name,
-//             "id": data.id,
-//             "is_admin": data.is_admin,
-//             "last_name": data.last_name,
-//             "login": data.login,
-//             "phone": data.phone
-//         },
-//         {
-//             headers: {
-//                 "Authorization": `Token ${token}`
-//             }
-//         })
-//         return response
-//     }
-//     catch (e) {
-//         return e
-//     }
-// };
-
-// export {listUsersApi, editUserApi}

src/hooks/api/answersApi.js

@@ -11,7 +11,7 @@ async function getAnswersApi(token, formToken) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -29,7 +29,7 @@ async function removeAnswerFormApi(token, formId, answerId) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 

src/hooks/api/articleApi.js

@@ -16,7 +16,7 @@ async function createArticleApi(token, data) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -32,7 +32,7 @@ async function getListArticlesApi(token) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -48,7 +48,7 @@ async function getArticleApi(token, articleId) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -68,7 +68,7 @@ async function editTagsApi(token, articleId, tags, flag) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -88,7 +88,7 @@ async function editTitleArticleApi(token, articleId, title) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -108,7 +108,7 @@ async function addArticleApi(token, articleId, content) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -128,7 +128,7 @@ async function editArticleApi(token, articleId, content) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 

src/hooks/api/enterAccountApi.js

@@ -7,7 +7,7 @@ async function logIn(login, password) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -41,7 +41,7 @@ async function verifyUserApi(token=false) {
             return response
         }
         catch(e) {
-            return e
+            return e.response
         }    
     }
     return false

src/hooks/api/formApi.js

@@ -11,7 +11,7 @@ async function listFormBlockApi(token, formId) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 }
 
@@ -29,7 +29,7 @@ async function addFormBlockApi(token, formId, data) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -48,7 +48,7 @@ async function updateBlockApi(token, formId, data, order) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -67,7 +67,7 @@ async function removeBlockApi(token, formId, order) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -86,7 +86,7 @@ async function updateOrderBlockApi(token, formId, data) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 }
 
@@ -104,7 +104,7 @@ async function saveFormApi(token) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -119,7 +119,7 @@ async function listFormBlockByTokenApi(token, formToken) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -135,7 +135,7 @@ async function saveAnswersApi(token, formToken, data) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -153,7 +153,7 @@ async function getBlockApi(token, formId, order) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 

src/hooks/api/listFormsApi.js

@@ -11,7 +11,7 @@ async function listFormsApi(token) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -30,7 +30,7 @@ async function createFormApi(token) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -44,7 +44,7 @@ async function removeFormApi(token, formId) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -62,15 +62,15 @@ async function updateTitleFormApi(token, formId, title) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
-async function newFormTokenApi(token, formId) {
+async function newFormTokenApi(token, formId, name) {
     try {
         const response = await axios.post(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/access/new`, 
         {
-            "name": "test"
+            "name": name
         },
         {
             headers: {
@@ -80,7 +80,7 @@ async function newFormTokenApi(token, formId) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -96,7 +96,7 @@ async function listFormsByTokenApi(token, formId) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -114,9 +114,29 @@ async function removeTokenFormApi(token, formId, formToken) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
-}
+};
+
+async function editTokenFormApi(token, formId, formToken, name) {
+    try {
+        const response = await axios.post(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/access/revoke`,
+        {
+            "token_id": formToken,
+            "is_active": true,
+            "name": name
+        },
+        {
+            headers: {
+                "Authorization": `Token ${token}`
+            }
+        })
+        return response
+    }
+    catch (e) {
+        return e.response
+    }
+};
 
 export { 
     listFormsApi, 
@@ -125,5 +145,6 @@ export {
     updateTitleFormApi, 
     newFormTokenApi, 
     listFormsByTokenApi, 
-    removeTokenFormApi 
+    removeTokenFormApi,
+    editTokenFormApi
 };

src/hooks/api/profileApi.js

@@ -21,8 +21,7 @@ async function editUserApi(token, data) {
         return response
     }
     catch(e) {
-        console.log(e)
-        return e
+        return e.response
     }
 };
 
@@ -38,7 +37,7 @@ async function getListUserApi(token) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -63,7 +62,7 @@ async function addUserApi(token, data) {
         return response
     }
     catch (e) {
-        return e
+        return e.response
     }
 };
 
@@ -82,8 +81,27 @@ async function removeUserApi(token, login) {
         return response
     }
     catch(e) {
-        console.log(e)
-        return e
+        return e.response
+    }
+};
+
+
+async function editUserPass(token, login, pass) {
+    try {
+        const response = await axios.post("https://api.minerva.krbl.ru/auth/manage/updatePassword", 
+        {
+            "login": login,
+            "password": pass
+        },
+        { 
+            headers: {
+                "Authorization": `Token ${token}`,
+            },
+        })
+        return response
+    }
+    catch(e) {
+        return e.response
     }
 }
 
@@ -91,5 +109,6 @@ export {
     editUserApi,
     getListUserApi,
     addUserApi,
-    removeUserApi
+    removeUserApi,
+    editUserPass
 }

src/hooks/sundry/parseListBlock.js

@@ -13,11 +13,13 @@ function responseDataToListBlock(data) {
         }
 
         for (let param of block.data) {
-
             if (Array.isArray(param.Value) && param.Value.length) {
                 newParam[param.Key] = param.Value.map(item => ({
-                    id: item.find(obj => obj.Key === "id").Value,
-                    text: item.find(obj => obj.Key === "text").Value
+                    id: item.find(obj => obj.Key === "id") ? item.find(obj => obj.Key === "id").Value : null,
+                    text: item.find(obj => obj.Key === "text") ? item.find(obj => obj.Key === "text").Value : null,
+                    name: item.find(obj => obj.Key === "name") ? item.find(obj => obj.Key === "name").Value : null,
+                    type: item.find(obj => obj.Key === "type") ? item.find(obj => obj.Key === "type").Value : null,
+                    binary: item.find(obj => obj.Key === "binary") ? item.find(obj => obj.Key === "binary").Value : null,
                 }))
             }
             else {

src/pages/AdminPanel.jsx

@@ -3,7 +3,7 @@ import { useCookies } from "react-cookie";
 import { useNavigate } from "react-router-dom";
 import classes from "../assets/styles/adminPanel.module.scss";
 import { UserData } from "../context";
-import { getListUserApi, editUserApi, addUserApi, removeUserApi } from "../hooks/api/profileApi.js";
+import { getListUserApi, editUserApi, addUserApi, removeUserApi, editUserPass } from "../hooks/api/profileApi.js";
 import { verifyUser } from "../hooks/services/profile.js";
 import DefaultModal from "../components/DefaultModal.jsx";
 import EditUserAdminPanel from "../components/bodyModal/EditUserAdminPanel.jsx";
@@ -14,33 +14,36 @@ import CheckModal from "../components/CheckModal.jsx";
 const AdminPanel = () => {
     const navigate = useNavigate();
     const [cookies, setCookies] = useCookies(["user"]);
-    const {user, setUser} = useContext(UserData);
+    const {user, setUser, userRef} = useContext(UserData);
     const [listUser, setListUser] = useState([]);
 
-    const [email, setEmail] = useState("")
-    const [firstName, setFirstName] = useState("")
-    const [id, setId] = useState(false)
-    const [isAdmin, setIsAdmin] = useState(false)
-    const [isTeacher, setIsTeacher] = useState(false)
-    const [lastName, setLastName] = useState("")
-    const [login, setLogin] = useState("")
-    const [phone, setPhone] = useState("")
+    const [email, setEmail] = useState("");
+    const [firstName, setFirstName] = useState("");
+    const [id, setId] = useState(false);
+    const [isAdmin, setIsAdmin] = useState(false);
+    const [isTeacher, setIsTeacher] = useState(false);
+    const [lastName, setLastName] = useState("");
+    const [login, setLogin] = useState("");
+    const [phone, setPhone] = useState("");
+    const [pass, setPass] = useState("");
 
     useEffect(() => {
         async function getListUser() {
             const responseListUser = await getListUserApi(cookies.token);
-            const responseCurrentUser = await verifyUser(cookies, user, setUser)
 
             if (
-                responseListUser.status === 200 && 
-                responseCurrentUser.status === 200 && 
-                responseCurrentUser.data.is_admin
+                responseListUser.status === 200
             ) {
-                setListUser([...responseListUser.data].filter(item => item.id !== responseCurrentUser.data.id))
+                setListUser(responseListUser.data)
+            }
+            else if (
+                responseListUser.status === 401
+            ) {
+                // navigate("/enter")
+                setUser(false)
             }
             else {
-                console.log('responseListUser', responseListUser)
-                console.log('responseCurrentUser', responseCurrentUser)
+                console.log(responseListUser)
             }
         }
 
@@ -56,7 +59,8 @@ const AdminPanel = () => {
         setLastName("")
         setLogin("")
         setPhone("")
-    }
+        setPass("")
+    };
 
     async function addUser() {
         const currentState = {
@@ -73,9 +77,22 @@ const AdminPanel = () => {
         
         if (response.status === 200) {
             setListUser([...listUser, currentState])
+
+            if (pass) {
+                await editUserPass(cookies.token, login, pass);
+            }
+        }
+        else if (
+            response.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false)
+        }
+        else {
+            console.log(response)
         }
         clearState()
-    }
+    };
 
     async function editUser() {
         const currentState = {
@@ -87,14 +104,27 @@ const AdminPanel = () => {
             last_name: lastName,
             login: login,
             phone: phone
-        }
-        const response = await editUserApi(cookies.token, currentState)
+        };
+        const response = await editUserApi(cookies.token, currentState);
 
         if (response.status === 200) {
-            setListUser(listUser.map(item => item.id === id ? currentState : item))
+            setListUser(listUser.map(item => item.id === id ? currentState : item));
+
+            if (pass) { 
+                await editUserPass(cookies.token, login, pass);
+            };
         }
-        clearState()
-    }
+        else if (
+            response.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false)
+        }
+        else {
+            console.log(response)
+        }
+        clearState();
+    };
 
     function openUser(user) {
         setEmail(user.email)
@@ -113,6 +143,15 @@ const AdminPanel = () => {
         if (response.status === 200) {
             setListUser(listUser.filter(item => item.login !== login))
         }
+        else if (
+            response.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false)
+        }
+        else {
+            console.log(response)
+        }
     }
 
     return (
@@ -168,7 +207,7 @@ const AdminPanel = () => {
                                             </div>
                                             <div className={classes.admin__wrapper__body__users__item__info}>
                                                 {
-                                                    item.admin ? 
+                                                    item.is_admin ? 
                                                     <i class="fa-solid fa-circle-check" style={{color: "rgb(150, 209, 158)"}}></i> : 
                                                     <i class="fa-solid fa-circle-xmark" style={{color: "rgb(235, 130, 130)"}}></i>}
                                             </div>
@@ -205,6 +244,8 @@ const AdminPanel = () => {
                                             setLastName={setLastName}
                                             setLogin={setLogin}
                                             setPhone={setPhone} 
+                                            pass={pass}
+                                            setPass={setPass}
                                         />
                                     } 
                                     btn={[

src/pages/AnswersForm.jsx

@@ -3,16 +3,18 @@ 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, dateTimeParse } from "../hooks/sundry/parseListBlock";
-import { listFormBlockApi } from "../hooks/api/formApi";
-import { listUsersApi } from "../hooks/api/adminApi";
+import { responseDataToListBlock, dateTimeParse } from "../hooks/sundry/parseListBlock.js";
+import { listFormBlockApi } from "../hooks/api/formApi.js";
+import { getListUserApi } from "../hooks/api/profileApi.js";
 import { removeAnswerFormApi, getAnswersApi } from "../hooks/api/answersApi.js";
 import Loading from "../components/Loading.jsx";
 import CheckModal from "../components/CheckModal.jsx";
+import { UserData } from "../context";
 
 const AnswersForm = () => {
     const { formId } = useParams();
     const {answersList, setAnswersList} = useContext(answersData);
+    const {user, setUser} = useContext(UserData);
     const [data, setData] = useState(false);
     const [cookies, _, __] = useCookies(["user"]);
 
@@ -21,7 +23,7 @@ const AnswersForm = () => {
             const result = []
             const responseBlocks = await listFormBlockApi(cookies.token, formId);
             const responseAnswers = await getAnswersApi(cookies.token, formId);
-            const listUsers = await listUsersApi(cookies.token);
+            const listUsers = await getListUserApi(cookies.token);
 
             if (responseBlocks.status === 200 && responseBlocks.data) {
                 const listBlocks = responseDataToListBlock(responseBlocks.data);
@@ -55,8 +57,14 @@ const AnswersForm = () => {
 
                 setData(result)
             }
+            else if (
+                response.status === 401
+            ) {
+                // navigate("/enter")
+                setUser(false)
+            }
             else {
-                console.log(responseBlocks)
+                console.log(response)
             }
         };
 
@@ -69,6 +77,12 @@ const AnswersForm = () => {
         if (response.status === 200) {
             setData([...data].filter(item => item.id !== answerId))
         }
+        else if (
+            response.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false)
+        }
         else {
             console.log(response)
         }

src/pages/Articles.jsx

@@ -25,6 +25,15 @@ const Articles = () => {
             if (response.status === 200) {
                 setListArticles(response.data)
             }
+            else if (
+                response.status === 401
+            ) {
+                // navigate("/enter")
+                setUser(false)
+            }
+            else {
+                console.log(response)
+            }
         }
 
         getListArticles()
@@ -33,10 +42,18 @@ const Articles = () => {
     async function createArticle() {
         const response = await createArticleApi(cookies.token)
 
-        console.log(response)
         if (response.status === 200) {
             navigate(`/articles/${response.data.id}/edit`)
         }
+        else if (
+            response.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false)
+        }
+        else {
+            console.log(response)
+        }
     }
 
     return (

src/pages/Forms.jsx

@@ -6,6 +6,7 @@ import MyButton from "../components/MyButton.jsx";
 import MyInput from "../components/MyInput.jsx";
 import { FormsData, UserData } from "../context";
 import CheckModal from "../components/CheckModal.jsx";
+import { verifyUserApi } from "../hooks/api/enterAccountApi.js";
 import {
   listFormsApi,
   createFormApi,
@@ -17,22 +18,27 @@ import {
 const Forms = () => {
   const navigate = useNavigate();
   const { forms, setForms } = useContext(FormsData);
-  const { user, setUser } = useContext(UserData);
+  const { user, setUser, userRef } = useContext(UserData);
   const [stateLoading, setStateLoading] = useState(false);
   const [searchForm, setSearchForm] = useState("");
 
-  const [cookies, _, __] = useCookies(["user"]);
+  const [cookies, setCookies, __] = useCookies(["user"]);
 
   useEffect(() => {
     async function listForms() {
-      const response = await listFormsApi(cookies.token);
+      const responseForms = await listFormsApi(cookies.token);
+      const responseUser = await verifyUserApi(cookies.token)
 
-      if (response.data) {
-        setForms(response.data);
-      } else if (response.status === 200 && response.data) {
+      if (responseForms.data && responseUser) {
+        setForms(responseForms.data.filter(item => item.owner_id === responseUser.data.id));
+      } else if (responseForms.status === 200 && response.data) {
         setForms([]);
+      } else if (responseForms.status === 401 || responseUser.status === 401) {
+          // navigate("/enter")
+          setUser(false)
       } else {
-        console.log(response);
+        console.log(responseForms);
+        console.log(responseUser)
       }
     }
 
@@ -44,11 +50,17 @@ const Forms = () => {
     const response = await createFormApi(cookies.token);
     setStateLoading(false);
 
-    if (response.data) {
-      const token = await newFormTokenApi(cookies.token, response.data.id);
+    if (response.data && response.status === 200) {
+      const token = await newFormTokenApi(cookies.token, response.data.id, "Админ");
       navigate(`/forms/${response.data.id}/edit`);
-    } else {
-      console.log(response);
+    } else if (
+      response.status === 401
+    ) {
+      // navigate("/enter")
+      setUser(false)
+    }
+    else {
+      console.log(response)
     }
   }
 
@@ -61,8 +73,15 @@ const Forms = () => {
 
     if (response.status === 200) {
       setForms([...forms.filter((item) => item.id !== id)]);
-    } else {
-      console.log(response);
+    } 
+    else if (
+      response.status === 401
+    ) {
+      // navigate("/enter")
+      setUser(false)
+    }
+    else {
+      console.log(response)
     }
   }
 
@@ -71,8 +90,15 @@ const Forms = () => {
 
     if (response.status === 200 && response.data.tokens) {
       navigate(`/forms/${response.data.tokens[0].id}/`);
-    } else {
-      console.log(response);
+    } 
+    else if (
+      response.status === 401
+    ) {
+      // navigate("/enter")
+      setUser(false)
+    }
+    else {
+      console.log(response)
     }
   }
 
@@ -83,8 +109,15 @@ const Forms = () => {
       navigator.clipboard.writeText(
         `${window.location.host}/forms/${response.data.tokens[0].id}/`
       );
-    } else {
-      console.log(response);
+    } 
+    else if (
+      response.status === 401
+    ) {
+      // navigate("/enter")
+      setUser(false)
+    }
+    else {
+      console.log(response)
     }
   }
 

src/pages/NewArticle.jsx

@@ -6,19 +6,21 @@ import MyButton from "../components/MyButton.jsx";
 import Loading from "../components/Loading.jsx";
 import MyInput from "../components/MyInput.jsx";
 import TextEditor from "../components/TextEditor.jsx";
+import { UserData } from "../context/index.js";
 import { getArticleApi, editTagsApi, editTitleArticleApi, editArticleApi, addArticleApi } from "../hooks/api/articleApi.js";
 
 const NewArticle = () => {
     const navigate = useNavigate();
     const location = useLocation();
     const { articleId } = useParams();
+    const {user, setUser} = useContext(UserData)
+
     const [loading, setLoading] = useState(false);
 
     const [title, setTitle] = useState("");
     const [tags, setTags] = useState([]);
     const [newTag, setNewTag] = useState("")
     const [ownerId, setOwnerId] = useState("");
-
     const [contentArticle, setContentArticle] = useState('');
     const [blocks, setBlocks] = useState('');
 
@@ -29,13 +31,21 @@ const NewArticle = () => {
             const response = await getArticleApi(cookies.token, articleId)
 
             if (response.status === 200) {
-                console.log(response)
                 setTitle(response.data.article.title)
                 setTags(response.data.article.tags ? response.data.article.tags : [])
                 setOwnerId(response.data.article.owner_id)
                 setContentArticle(response.data.blocks ? response.data.blocks[0].data : '')
                 setBlocks(response.data.blocks ? response.data.blocks : false)
             }
+            else if (
+                response.status === 401
+            ) {
+                // navigate("/enter")
+                setUser(false)
+            }
+            else {
+                console.log(response)
+            }
         }
 
         getArticle()
@@ -48,7 +58,16 @@ const NewArticle = () => {
             if (response.status === 200) {
                 setTags([...tags, newTag])
                 setNewTag("")
-            }    
+            }
+            else if (
+                response.status === 401
+            ) {
+                // navigate("/enter")
+                setUser(false)
+            }
+            else {
+                console.log(response)
+            }  
         }
     }
 
@@ -60,20 +79,36 @@ const NewArticle = () => {
             cTags.splice(index, 1)
             setTags(cTags)
         }
+        else if (
+            response.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false)
+        }
+        else {
+            console.log(response)
+        }
     }
 
     async function saveArticle() {
         const responseTitle = await editTitleArticleApi(cookies.token, articleId, title)
-        console.log(blocks)
         const responseContentArticle = blocks ? 
             await editArticleApi(cookies.token, articleId, contentArticle) : 
             await addArticleApi(cookies.token, articleId, contentArticle)
-
-        console.log(responseContentArticle)
-
+        
         if (responseTitle.status === 200 && responseContentArticle.status === 200) {
             navigate("/articles")
         }
+        else if (
+            responseTitle.status === 401 || responseContentArticle.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false)
+        }
+        else {
+            console.log(responseTitle)
+            console.log(responseContentArticle)
+        }
     }
 
     return (

src/pages/NewForm.jsx

@@ -8,6 +8,7 @@ import PreviewModal from "../components/PreviewModal.jsx";
 import Loading from "../components/Loading.jsx";
 import { FormsData, TypeAnswerData } from "../context";
 import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js";
+import { UserData } from "../context";
 import {
   saveFormApi,
   addFormBlockApi,
@@ -27,6 +28,7 @@ const NewForm = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { formId } = useParams();
+  const {user, setUser} = useContext(UserData);
   const [dragElem, setDragElem] = useState(null);
   const [dropElem, setDropElem] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -78,13 +80,19 @@ const NewForm = () => {
         responseBlock.data &&
         responseForms.status === 200
       ) {
+        console.log(responseDataToListBlock(responseBlock.data))
         setListBlock(responseDataToListBlock(responseBlock.data));
         const title = responseForms.data.find(
           (item) => item.id === formId
         ).title;
         setNewTitleForm(title);
         setOldTitleForm(title);
-      } else {
+      } 
+      else if (responseForms.status === 401 || responseBlock.status === 401) {
+        // navigate("/enter")
+        setUser(false)
+      }
+      else {
         setListBlock([]);
         setNewTitleForm("Новыя форма");
         setOldTitleForm("Новыя форма");
@@ -132,6 +140,7 @@ const NewForm = () => {
     setOptionAnswer(obj.optionAnswer);
     setMandatory(obj.mandatory);
     setStateModal(obj.id);
+    console.log(obj.file.map(item => item.name))
   }
 
   async function updateBlock() {
@@ -160,9 +169,16 @@ const NewForm = () => {
       } else {
         setListBlock([]);
       }
-    } else {
-      console.log(response);
+    } 
+    else if (
+      response.status === 401
+    ) {
+      // navigate("/enter")
+      setUser(false)
     }
+    else {
+      console.log(response)
+    } 
 
     cleanStates();
   }
@@ -172,13 +188,42 @@ const NewForm = () => {
 
     if (response.status === 200) {
       setListBlock([...listBlock.filter((item) => item.order !== order)]);
-    } else {
-      console.log(response);
+    } 
+    else if (
+      response.status === 401
+    ) {
+      // navigate("/enter")
+      setUser(false)
+    }
+    else {
+      console.log(response)
+    }
+  }
+
+  async function addFiles(newFile) {
+    const fileData = []
+
+    for (let item of newFile) {
+      let binary = ""
+      const buff = await item.arrayBuffer()
+      const bytesArray = new Uint8Array(buff)
+      let len = bytesArray.byteLength;
+
+      for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode( bytesArray[ i ] );
+      }
+
+      fileData.push({
+        name: item.name,
+        type: item.type,
+        binary: btoa(binary)
+      })
+
+      setFile([...file, ...fileData])
     }
   }
 
   async function addFormBlock() {
-    console.log(optionAnswer);
 
     const newBlock = {
       question: question,
@@ -200,8 +245,15 @@ const NewForm = () => {
       } else {
         setListBlock([]);
       }
-    } else {
-      console.log(response);
+    } 
+    else if (
+      response.status === 401
+    ) {
+      // navigate("/enter")
+      setUser(false)
+    }
+    else {
+      console.log(response)
     }
     cleanStates();
   }
@@ -237,11 +289,30 @@ const NewForm = () => {
 
       setListBlock(numberingBlocks(tListBlock, "order"));
     }
+    else if (
+      response.status === 401
+    ) {
+      // navigate("/enter")
+      setUser(false)
+    }
+    else {
+      console.log(response)
+    }
   }
 
   async function saveForm() {
     if (oldTitleFrom !== newTitleForm) {
-      await updateTitleFormApi(cookies.token, formId, newTitleForm);
+      const response = await updateTitleFormApi(cookies.token, formId, newTitleForm);
+
+      if (
+        response.status === 401
+      ) {
+        // navigate("/enter")
+        setUser(false)
+      }
+      else {
+        console.log(response)
+      }
     }
 
     cleanStates();
@@ -253,14 +324,14 @@ const NewForm = () => {
       <div className={classes.wrapper}>
         <div className={classes.header}>
           <div className={classes.header__listInput}>
-            <div className={classes.header__listInput__date}>
+            {/* <div className={classes.header__listInput__date}>
               <span>Дедлайн выполнения</span>
               <MyInput
                 type={"datetime-local"}
                 value={datetime}
                 change={setDatetime}
               />
-            </div>
+            </div> */}
             <div className={classes.header__listInput__title}>
               <span>Название формы</span>
               <MyInput
@@ -327,6 +398,7 @@ const NewForm = () => {
             updateBlock={updateBlock}
             setCurrentTypeAnswer={setCurrentTypeAnswer}
             removeOptionAnswer={removeOptionAnswer}
+            addFiles={addFiles}
           />
 
           <div className={classes.content__newForm}>

src/pages/Profile.jsx

@@ -33,6 +33,12 @@ const Profile = () => {
                     setFirst_name(response.data.first_name);
                     setLast_name(response.data.last_name);
                 }
+                else if (
+                    response.status === 401
+                ) {
+                    // navigate("/enter")
+                    setUser(false)
+                }
                 else {
                     console.log(response)
                 }
@@ -83,7 +89,16 @@ const Profile = () => {
                     is_admin: user.is_admin
                 })
                 setEdit(!edit)
-            }           
+            }
+            else if (
+                response.status === 401
+            ) {
+                navigate("/enter")
+                setUser(false);
+            }
+            else {
+                console.log(response)
+            }         
         }        
     };
 

src/pages/TokensForm.jsx

@@ -1,29 +1,41 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useCookies } from "react-cookie";
 import classes from "../assets/styles/tokensForm.module.scss";
-import { listFormsByTokenApi, newFormTokenApi, removeTokenFormApi } from "../hooks/api/listFormsApi";
+import { listFormsByTokenApi, newFormTokenApi, removeTokenFormApi, editTokenFormApi} from "../hooks/api/listFormsApi";
 import MyButton from "../components/MyButton.jsx";
-import MyInput from "../components/MyInput.jsx";
-import CheckModal from "../components/CheckModal.jsx";
+import { UserData } from "../context/index.js";
+import DefaultModal from "../components/DefaultModal.jsx";
+import EditToken from "../components/bodyModal/EditToken.jsx";
+import QrCodeToken from "../components/bodyModal/QrCodeToken.jsx";
+import QRCode from "qrcode";
+
 
 const TokensForm = () => {
     const { formId } = useParams();
-    const [tokens, setTokens] = useState([])
-    const [loading, setLoading] = useState(true)
-    const [titleToken, setTitleToken] = useState('')
+    const [tokens, setTokens] = useState([]);
+    const [currentIdToken, setCurrentIdToken] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [titleToken, setTitleToken] = useState("");
+    const {user, setUser} = useContext(UserData);
+    const [qrCodeUrl, setQrcodeUrl] = useState("");
 
     const [cookies, _, __] = useCookies(["user"]);
 
     useEffect(() => {
         async function listFormsByToken() {
             const response = await listFormsByTokenApi(cookies.token, formId)
-            console.log(response)
             
-            if (response.data.tokens) {
-                setTokens(response.data.tokens.filter(item => item.is_active === true))
+            if (response.status === 200) {
+                setTokens(response.data.tokens.filter((item, i) => item.is_active === true && i !== 0))
                 setLoading(false)
             }
+            else if (
+                response.status === 401
+            ) {
+                // navigate("/enter")
+                setUser(false);
+            }
             else {
                 console.log(response)
             }
@@ -33,22 +45,51 @@ const TokensForm = () => {
     }, [])
 
     async function newFormToken() {
-        const response = await newFormTokenApi(cookies.token, formId)
+        const response = await newFormTokenApi(cookies.token, formId, titleToken)
 
         if (response.status === 200) {
             setTokens([...tokens, response.data.token])
         }
+        else if (
+            response.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false);
+        }
         else {
             console.log(response)
         }
     }
 
+    // async function editTokenForm(tokenForm) {
+    //     const response = await editTokenFormApi(cookies.token, formId, tokenForm, titleToken)
+
+    //     if (response.status === 200) {
+    //         setTokens([])
+    //     }
+    //     else if (
+    //         response.status === 401
+    //     ) {
+    //         // navigate("/enter")
+    //         setUser(false);
+    //     }
+    //     else {
+    //         console.log(response)
+    //     }
+    // }
+
     async function removeTokenForm(tokenForm) {
         const response = await removeTokenFormApi(cookies.token, formId, tokenForm)
 
         if (response.status === 200) {
             setTokens(tokens.filter(item => item.id !== tokenForm))
         }
+        else if (
+            response.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false);
+        }
         else {
             console.log(response)
         }
@@ -61,7 +102,16 @@ const TokensForm = () => {
                     <div className={classes.answers__wrapper}>
                         <div className={classes.answers__wrapper__header}>
                             <h3>Токены формы</h3>
-                            <MyButton text={"Создать"} class={"main__green"} click={newFormToken}/>
+                            <MyButton 
+                                text={"Создать"} 
+                                class={"main__green"} 
+                                click={() => {
+                                    setTitleToken("")
+                                    setCurrentIdToken(false)
+                                }}
+                                target={"#tokenModal"} 
+                                toggle={"modal"}
+                            />
                         </div>
                         <div className={classes.answers__wrapper__body}>
                             <div className={classes.answers__wrapper__body__column}>
@@ -76,36 +126,53 @@ const TokensForm = () => {
                                     <div className={classes.answers__wrapper__body__item} key={i}>
                                         <div className={classes.answers__wrapper__body__item__wrapper}>
                                             <div className={classes.answers__wrapper__body__item__wrapper__title}>
-                                                По умолчанию
+                                                {item.name}
                                             </div>
                                             <div className={classes.answers__wrapper__body__item__wrapper__token}>
                                                 {item.id}
                                             </div>
                                         </div>
                                         <div className={classes.answers__wrapper__body__item__btn}>
-                                            <i 
+                                            {/* <i 
                                                 class="fa-solid fa-pen" 
                                                 data-bs-toggle="modal" 
-                                                data-bs-target={`#tokensModal${i}`} 
-                                                onClick={() => setTitleToken("По умолчанию")}>
+                                                data-bs-target={`#tokenModal`} 
+                                                onClick={() => {
+                                                    setTitleToken(item.name)
+                                                    setCurrentIdToken(item.id)
+                                                }}>
+                                            </i> */}
+                                            <i 
+                                                class="fa-solid fa-qrcode"
+                                                onClick={() => {
+                                                    QRCode.toDataURL(
+                                                        `http://localhost:3000/forms/${item.id}`,
+                                                        {},
+                                                        (err , url) => {
+                                                            setQrcodeUrl(url)
+                                                        }
+                                                    )
+                                                }} 
+                                                data-bs-toggle="modal" 
+                                                data-bs-target={`#qrModal`}>
                                             </i>
                                             <i class="fa-solid fa-trash" onClick={() => removeTokenForm(item.id)}></i>
                                         </div>
-                                        
-
-                                        <div class="modal fade myModal" className={classes.myModal} id={`tokensModal${i}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
-                                            <div class="modal-dialog myModal__dialog" className={classes.myModal__dialog}>
-                                                <div class="modal-content" className={classes.myModal__dialog__content}>
-                                                    <div class="modal-body" className={classes.myModal__dialog__content__body}>
-                                                        <MyInput type={"text"} value={titleToken} change={setTitleToken}/>
-                                                    </div>
-                                                    <div class="modal-footer myModal__dialog__content__footer" className={classes.myModal__dialog__content__footer}>
-                                                        <MyButton text={"Сохранить"} class={"main__green"} dismiss={"modal"}/>
-                                                        <MyButton text={"Отмена"} class={"main__white"} dismiss={"modal"}/>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
+                                        <DefaultModal 
+                                            name={"qrModal"} 
+                                            btn={[
+                                                {text: "Скачать", class: "main__green", dismiss: "modal", action: () => {
+                                                    const aElem = document.createElement('a');
+                                                    aElem.href = qrCodeUrl
+                                                    aElem.download = `${item.name}.png`
+                                                    aElem.click()
+                                                }},
+                                                {text: "Отмена", class: "main__white", dismiss: "modal", action: () => {}}   
+                                            ]}
+                                            BodyModal={
+                                                <QrCodeToken value={item.id}/>
+                                            }
+                                        />
                                     </div>
                                 )
                             : 
@@ -114,6 +181,19 @@ const TokensForm = () => {
                                     <span class="visually-hidden">Загрузка...</span>
                                 </div>
                             </div>}
+                            <DefaultModal 
+                                name={"tokenModal"} 
+                                btn={[
+                                    {text: "Сохранить", class: "main__green", dismiss: "modal", action: () => newFormToken()},
+                                    {text: "Отмена", class: "main__white", dismiss: "modal", action: () => {}}   
+                                ]}
+                                BodyModal={
+                                    <EditToken 
+                                        titleToken={titleToken} 
+                                        setTitleToken={setTitleToken}
+                                    />
+                                }
+                            />
                         </div>                        
                     </div>
                 </div>

src/pages/ViewArticle.jsx

@@ -12,6 +12,7 @@ const ViewArticle = () => {
     const navigate = useNavigate();
     // const location = useLocation();
     const { articleId } = useParams();
+    const {user, setUser} = useContext(UserData)
 
     const [title, setTitle] = useState("");
     const [tags, setTags] = useState([]);
@@ -25,15 +26,23 @@ const ViewArticle = () => {
     useEffect(() => {
         async function getArticle() {
             const response = await getArticleApi(cookies.token, articleId)
-            const user = await getListUserApi(cookies.token)
+            const responseUser = await getListUserApi(cookies.token)
 
             if (response.status === 200) {
-                console.log(response)
                 setTitle(response.data.article.title)
                 setTags(response.data.article.tags ? response.data.article.tags : [])
-                setOwner(user.status === 200 ? user.data.find(item => item.id === response.data.article.owner_id).login : response.data.article.owner_id)
+                setOwner(responseUser.status === 200 ? responseUser.data.find(item => item.id === response.data.article.owner_id).login : response.data.article.owner_id)
                 setContentArticle(response.data.blocks ? response.data.blocks[0].data : '')
             }
+            else if (
+                response.status === 401
+            ) {
+                // navigate("/enter")
+                setUser(false);
+            }
+            else {
+                console.log(response)
+            }
         }
 
         getArticle()

src/pages/ViewForm.jsx

@@ -32,6 +32,12 @@ const ViewForm = () => {
                     {id: item.id, answer: []}
                 )));
             }
+            else if (
+                responseBlocks.status === 401
+            ) {
+                // navigate("/enter")
+                setUser(false);
+            }
             else {
                 setResponseStatus(responseBlocks.status)
             }
@@ -52,7 +58,6 @@ const ViewForm = () => {
     };
 
     async function saveAnswers() {
-        console.log(answers)
         const response = await saveAnswersApi(cookies.token, formId, answers);
 
         if (response.status === 200) {
@@ -65,6 +70,15 @@ const ViewForm = () => {
             setAnswers([]);
             navigate("/forms");
         }
+        else if (
+            response.status === 401
+        ) {
+            // navigate("/enter")
+            setUser(false);
+        }
+        else {
+            console.log(response)
+        }
     }
 
     return (

src/router/protectedRouting.js

@@ -6,6 +6,8 @@ const protectedUrl = {
         new RegExp("/forms/\\w+/answers"),
         new RegExp("/tokens/\\w+"),
         new RegExp("/admin"),
+        new RegExp("/articles"),
+        new RegExp("/articles/\\w+/edit"),
     ],
     Authorized: [
         "/enter"
@@ -16,6 +18,8 @@ const protectedUrl = {
         new RegExp("/forms/\\w+/answers"),
         new RegExp("/tokens/\\w+"),
         new RegExp("/admin"),
+        new RegExp("/articles"),
+        new RegExp("/articles/\\w+/edit"),
     ]
 }
 

webpack.config.js

@@ -1,5 +1,6 @@
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+// const Inputmask = require('inputmask'); 
 const path = require("path");
 
 module.exports = (env) => {