updated web

web/js/login.js

@@ -1,83 +1,93 @@
-const loginform = document.querySelector('#loginform')
-const loginformbody = document.querySelector('#loginformbody')
-const loginforminputusername = document.querySelector('#loginforminputusername')
-const loginforminputpassword = document.querySelector('#loginforminputpassword')
-const exitbutton = document.querySelector('#exitbutton')
-const usernameheader = document.querySelector('.usernameheader')
+const loginform = document.querySelector("#loginform");
+const loginformbody = document.querySelector("#loginformbody");
+const loginforminputusername = document.querySelector(
+  "#loginforminputusername",
+);
+const loginforminputpassword = document.querySelector(
+  "#loginforminputpassword",
+);
+const exitbutton = document.querySelector("#exitbutton");
+const usernameheader = document.querySelector(".usernameheader");
 
 if (localStorage.getItem("token") === null) {
-    loginform.classList.add("active")
+  loginform.classList.add("active");
 }
 
-loginformbody.addEventListener('submit', (e) => {
-    e.preventDefault()
-    hashPassword(loginforminputpassword.value).then(hashedpassword => {
-      login(loginforminputusername.value, hashedpassword)
-    })
-})
+loginformbody.addEventListener("submit", (e) => {
+  e.preventDefault();
+  hashPassword(loginforminputpassword.value).then((hashedpassword) => {
+    login(loginforminputusername.value, hashedpassword);
+  });
+});
 
 const login = async (username, password) => {
-    const response = await fetch(routes.login(), {
-        method: 'POST',
-        headers: {
-            Accept: 'application/json',
-            // 'Access-Control-Allow-Origin': '*',
-            'Content-Type': 'application/json',
-        },
-        // mode: 'no-cors',
-        body: `{"username":"${username}","password":"${password}"}`
-    }).then(data => data.json()).then(jsondata => jsondata).catch((error) => {
-        if (error.message === "Unexpected end of JSON input") {
-            notification(`Ошибка на сервере: Создайте файл users.json и запишите в него первого пользователя`, "error")
-        } else {
-            notification(`Ошибка на сервере: ${error}`, "error")
-        }
-    })
-    if (response.error) {
-        loginforminputusername.classList.add('is-invalid')
-        loginforminputpassword.classList.add('is-invalid')
-        notification("Неправильный логин или пароль", "error")
-    }
-    if (response.token) {
-        notification("Успешно", "success")
-        loginform.classList.remove("active")
-        localStorage.setItem("token", response.token)
-        await get_user_data()
-        loginforminputusername.value = ""
-        loginforminputpassword.value = ""
-        loginforminputusername.classList.remove('is-invalid')
-        loginforminputpassword.classList.remove('is-invalid')
-    }
-}
+  const response = await fetch(routes.login(), {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: `{"username":"${username}","password":"${password}"}`,
+  })
+    .then((data) => data.json())
+    .then((jsondata) => jsondata)
+    .catch((error) => {
+      if (error.message === "Unexpected end of JSON input") {
+        notification(
+          `Ошибка на сервере: Создайте файл users.json и запишите в него первого пользователя`,
+          "error",
+        );
+      } else {
+        notification(`Ошибка на сервере: ${error}`, "error");
+      }
+    });
+  if (response.error) {
+    loginforminputusername.classList.add("is-invalid");
+    loginforminputpassword.classList.add("is-invalid");
+    notification("Неправильный логин или пароль", "error");
+  }
+  if (response.token) {
+    notification("Успешно", "success");
+    loginform.classList.remove("active");
+    localStorage.setItem("token", response.token);
+    await get_user_data();
+    loginforminputusername.value = "";
+    loginforminputpassword.value = "";
+    loginforminputusername.classList.remove("is-invalid");
+    loginforminputpassword.classList.remove("is-invalid");
+  }
+};
 
 const get_user_data = async () => {
-    const response = await fetch(routes.user(), {
-        method: "POST",
-        body: `{"token":"${localStorage.getItem("token")}"}`
-    }).then(data => data.json()).then(jsondata => jsondata).catch((error) => {
-        notification(`Ошибка на сервере: ${error}`, "error")
-    })
-    if (response.is_superuser) {
-        await get_all_users()
-        usernameheader.innerHTML = response.username
-    } else {
-        document.querySelector('#alluserstablebody').innerHTML = ""
-        loginform.classList.add("active")
-        notification("Вы не можете войти потому что не являетесь администратором", "error")
-        localStorage.clear()
-    }
-    if (response.id) {
-        localStorage.setItem("userdata", JSON.stringify(response))
-    }
-}
+  const response = await fetch(routes.user(), {
+    method: "POST",
+    body: `{"token":"${localStorage.getItem("token")}"}`,
+  })
+    .then((data) => data.json())
+    .then((jsondata) => jsondata)
+    .catch((error) => {
+      notification(`Ошибка на сервере: ${error}`, "error");
+    });
+  if (response.is_superuser) {
+    await get_all_users();
+    usernameheader.innerHTML = response.username;
+  } else {
+    document.querySelector("#alluserstablebody").innerHTML = "";
+    loginform.classList.add("active");
+    notification(
+      "Вы не можете войти потому что не являетесь администратором",
+      "error",
+    );
+    localStorage.clear();
+  }
+  if (response.id) {
+    localStorage.setItem("userdata", JSON.stringify(response));
+  }
+};
 
-message.addEventListener('click', () => {
-    message.classList.remove("active")
-})
-
-exitbutton.addEventListener('click', () => {
-    localStorage.removeItem('token')
-    localStorage.removeItem('userdata')
-    loginform.classList.add('active')
-    notification('Вы вышли', "success")
-})
+exitbutton.addEventListener("click", () => {
+  localStorage.removeItem("token");
+  localStorage.removeItem("userdata");
+  loginform.classList.add("active");
+  notification("Вы вышли", "success");
+});

web/js/message.js

@@ -1,18 +1,34 @@
-const message = document.querySelector('.message')
-const messagetext = document.querySelector('.messagetext')
+const notificationsection = document.querySelector(".notificationsection");
 
 const notification = (text, type) => {
-    if (type === "error") {
-        message.classList.remove('success')
-        message.classList.add('error')
-    } else {
-        message.classList.remove('error')
-        message.classList.add('success')
-    }
-    messagetext.innerHTML = text
-    message.classList.add('active')
+  const notificationbox = document.createElement("div");
+  const notificationtextbox = document.createElement("div");
+  const notificationtext = document.createElement("h3");
+  notificationtext.classList.add("notificationtext");
+  notificationtextbox.append(notificationtext);
+  notificationtextbox.classList.add("notificationtextbox");
+  notificationtextbox.classList.add("card-header");
+  notificationbox.append(notificationtextbox);
+  notificationbox.classList.add("notification");
+  notificationbox.addEventListener("click", () => {
+    notificationbox.classList.remove("active");
+  });
+  notificationsection.append(notificationbox);
+  if (type === "error") {
+    notificationbox.classList.remove("success");
+    notificationbox.classList.add("error");
+  } else {
+    notificationbox.classList.remove("error");
+    notificationbox.classList.add("success");
+  }
+  notificationtext.innerHTML = text;
+  setTimeout(() => {
+    notificationbox.classList.add("active");
+  }, 300);
+  setTimeout(() => {
+    notificationbox.classList.remove("active");
     setTimeout(() => {
-        message.classList.remove('active')
-    }, 2000)
-}
-
+      notificationsection.removeChild(notificationbox);
+    }, 200);
+  }, 3000);
+};