updated web
Prepare Build and Testing executable binary / Prepare-Build-Testing-With-Make (push) Successful in 10s
Prepare Build and Testing executable binary / Prepare-Build-Testing-With-CMake (push) Successful in 15s
Prepare Build and Testing executable binary / Prepare-Build-Testing-With-Meson (push) Successful in 12s
Prepare Build and Testing executable binary / Prepare-Build-Testing-With-Make (push) Successful in 10s
Prepare Build and Testing executable binary / Prepare-Build-Testing-With-CMake (push) Successful in 15s
Prepare Build and Testing executable binary / Prepare-Build-Testing-With-Meson (push) Successful in 12s
This commit is contained in:
@@ -28,7 +28,6 @@
|
||||
background-color: gray;
|
||||
backdrop-filter: blur(5px);
|
||||
border-radius: 10px;
|
||||
/* box-shadow: -5px -5px 30px 30px gray; */
|
||||
}
|
||||
|
||||
.loginformheader {
|
||||
@@ -51,7 +50,7 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.loginforminputbodyflex>button {
|
||||
.loginforminputbodyflex > button {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
||||
+23
-9
@@ -1,19 +1,33 @@
|
||||
.message {
|
||||
width: 100%;
|
||||
* {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.notificationsection {
|
||||
width: max-content;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
z-index: 16;
|
||||
}
|
||||
|
||||
.notification {
|
||||
width: max-content;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
border-radius: 10px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: 0.3s;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
margin: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.messagetextbox {
|
||||
.notificationtextbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
@@ -22,19 +36,19 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.messagetext {
|
||||
.notificationtext {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.message.active.error {
|
||||
.notification.active.error {
|
||||
pointer-events: all;
|
||||
height: 10%;
|
||||
background-color: rgb(233, 70, 70);
|
||||
}
|
||||
|
||||
.message.active.success {
|
||||
.notification.active.success {
|
||||
pointer-events: all;
|
||||
height: 10%;
|
||||
background-color: rgb(76, 209, 76);
|
||||
|
||||
+218
-142
@@ -1,155 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/css/loginform.css">
|
||||
<link rel="stylesheet" href="/css/message.css">
|
||||
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
||||
<title>admin</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar navbar-expand-lg bg-body-tertiary gap-3 p-2">
|
||||
<button class="btn btn-danger" id="exitbutton">Exit</button>
|
||||
<button class="btn btn-warning" id="adduserbutton">Adduser</button>
|
||||
<h1 class="usernameheader"></h1>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="themecheckbox" class="form-check-input">
|
||||
<label for="themecheckbox" class="form-check-label">Dark theme</label>
|
||||
</div>
|
||||
</div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="/css/loginform.css" />
|
||||
<link rel="stylesheet" href="/css/message.css" />
|
||||
<link rel="stylesheet" href="/css/bootstrap.min.css" />
|
||||
<title>admin</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar navbar-expand-lg bg-body-tertiary gap-3 p-2">
|
||||
<button class="btn btn-danger" id="exitbutton">Exit</button>
|
||||
<button class="btn btn-warning" id="adduserbutton">Adduser</button>
|
||||
<h1 class="usernameheader"></h1>
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="themecheckbox"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label for="themecheckbox" class="form-check-label"
|
||||
>Dark theme</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form loginform" id="loginform">
|
||||
<form class="formbody loginformbody" id="loginformbody">
|
||||
<h1 class="loginformheader">Login</h1>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" required id="loginforminputusername" class="form-control" placeholder="John">
|
||||
<label for="loginforminputusername">Username</label>
|
||||
<div class="form loginform" id="loginform">
|
||||
<form class="formbody loginformbody" id="loginformbody">
|
||||
<h1 class="loginformheader">Login</h1>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
id="loginforminputusername"
|
||||
class="form-control"
|
||||
placeholder="John"
|
||||
/>
|
||||
<label for="loginforminputusername">Username</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
id="loginforminputpassword"
|
||||
class="form-control"
|
||||
placeholder="***"
|
||||
/>
|
||||
<label for="loginforminputpassword">Password</label>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary">login</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="password" required id="loginforminputpassword" class="form-control" placeholder="***">
|
||||
<label for="loginforminputpassword">Password</label>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary">login</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="form adduserform">
|
||||
<form class="formbody adduserformbody">
|
||||
<h1 class="loginformheader">Add User</h1>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" required id="adduserformusername" class="form-control">
|
||||
<label for="adduserformusername">Username</label>
|
||||
<div class="form adduserform">
|
||||
<form class="formbody adduserformbody">
|
||||
<h1 class="loginformheader">Add User</h1>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
id="adduserformusername"
|
||||
class="form-control"
|
||||
/>
|
||||
<label for="adduserformusername">Username</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
id="adduserformemail"
|
||||
class="form-control"
|
||||
/>
|
||||
<label for="adduserformemail">Email</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
id="adduserformpassword"
|
||||
class="form-control"
|
||||
/>
|
||||
<label for="adduserformpassword">Password</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
id="adduserformgroup"
|
||||
class="form-control"
|
||||
/>
|
||||
<label for="adduserformgroup">Group</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="adduserformissuperuser"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label for="adduserformissuperuser" class="form-check-label"
|
||||
>Is Superuser</label
|
||||
>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary">Add</button>
|
||||
<button id="canceladduser" class="btn btn-primary">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" required id="adduserformemail" class="form-control">
|
||||
<label for="adduserformemail">Email</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="password" required id="adduserformpassword" class="form-control">
|
||||
<label for="adduserformpassword">Password</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" required id="adduserformgroup" class="form-control">
|
||||
<label for="adduserformgroup">Group</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="adduserformissuperuser" class="form-check-input">
|
||||
<label for="adduserformissuperuser" class="form-check-label">Is Superuser</label>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary">Add</button>
|
||||
<button id="canceladduser" class="btn btn-primary">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="form changeuserform">
|
||||
<form class="formbody changeuserformbody">
|
||||
<h1 class="loginformheader">Change User Data</h1>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" required id="changeuserformusername" class="form-control" placeholder="Username">
|
||||
<label for="changeuserformusername">Username</label>
|
||||
<div class="form changeuserform">
|
||||
<form class="formbody changeuserformbody">
|
||||
<h1 class="loginformheader">Change User Data</h1>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
id="changeuserformusername"
|
||||
class="form-control"
|
||||
placeholder="Username"
|
||||
/>
|
||||
<label for="changeuserformusername">Username</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="text"
|
||||
id="changeuserformemail"
|
||||
class="form-control"
|
||||
placeholder="***"
|
||||
/>
|
||||
<label for="changeuserformemail">email</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
id="changeuserformgroup"
|
||||
class="form-control"
|
||||
/>
|
||||
<label for="changeuserformgroup">Group</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="changeuserformissuperuser"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label
|
||||
for="changeuserformissuperuser"
|
||||
class="form-check-label"
|
||||
>Is Superuser</label
|
||||
>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary">Change</button>
|
||||
<button id="cancelchangeuser" class="btn btn-primary">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" id="changeuserformemail" class="form-control" placeholder="***">
|
||||
<label for="changeuserformemail">email</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" required id="changeuserformgroup" class="form-control">
|
||||
<label for="changeuserformgroup">Group</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="changeuserformissuperuser" class="form-check-input">
|
||||
<label for="changeuserformissuperuser" class="form-check-label">Is Superuser</label>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary">Change</button>
|
||||
<button id="cancelchangeuser" class="btn btn-primary">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="form confirmform">
|
||||
<div class="formbody confirmformbody">
|
||||
<h1>Are you sure?</h1>
|
||||
<div class="d-grid gap-2">
|
||||
<button id="yes" class="btn btn-primary">Confirm</button>
|
||||
<button id="no" class="btn btn-primary">Cancel</button>
|
||||
<div class="form confirmform">
|
||||
<div class="formbody confirmformbody">
|
||||
<h1>Are you sure?</h1>
|
||||
<div class="d-grid gap-2">
|
||||
<button id="yes" class="btn btn-primary">Confirm</button>
|
||||
<button id="no" class="btn btn-primary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form changepasswordform">
|
||||
<form class="formbody changepasswordformbody">
|
||||
<h1 class="loginformheader">Change Password</h1>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" required id="changepasswordnewpassword" class="form-control" placeholder="***">
|
||||
<label for="changepasswordnewpassword">New password</label>
|
||||
<div class="form changepasswordform">
|
||||
<form class="formbody changepasswordformbody">
|
||||
<h1 class="loginformheader">Change Password</h1>
|
||||
<div class="form-floating mb-3">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
id="changepasswordnewpassword"
|
||||
class="form-control"
|
||||
placeholder="***"
|
||||
/>
|
||||
<label for="changepasswordnewpassword">New password</label>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary">Change</button>
|
||||
<button class="btn btn-primary" id="cancelchangepassword">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary">Change</button>
|
||||
<button class="btn btn-primary" id="cancelchangepassword">Cancel</button>
|
||||
|
||||
<div class="notificationsection"></div>
|
||||
|
||||
<div class="table">
|
||||
<table class="table">
|
||||
<thead class="alluserstablehead">
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>username</th>
|
||||
<th>email</th>
|
||||
<th>group</th>
|
||||
<th>is_superuser</th>
|
||||
<th>delete</th>
|
||||
<th>change password</th>
|
||||
<th>change user data</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="alluserstablebody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="message">
|
||||
<div class="messagetextbox">
|
||||
<h3 class="messagetext"></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<table class="table">
|
||||
<thead class="alluserstablehead">
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>username</th>
|
||||
<th>email</th>
|
||||
<th>group</th>
|
||||
<th>is_superuser</th>
|
||||
<th>delete</th>
|
||||
<th>change password</th>
|
||||
<th>change user data</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="alluserstablebody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script src="/js/security.js"></script>
|
||||
<script src="/js/message.js"></script>
|
||||
<script src="/js/routes.js"></script>
|
||||
<script src="/js/window.js"></script>
|
||||
<script src="/js/theme.js"></script>
|
||||
<script src="/js/login.js"></script>
|
||||
<script src="/js/get_all_users.js"></script>
|
||||
<script src="/js/add_user.js"></script>
|
||||
<script src="/js/del_user.js"></script>
|
||||
<script src="/js/change_password.js"></script>
|
||||
<script src="/js/change_user.js"></script>
|
||||
<script src="/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
<script src="/js/security.js"></script>
|
||||
<script src="/js/message.js"></script>
|
||||
<script src="/js/routes.js"></script>
|
||||
<script src="/js/window.js"></script>
|
||||
<script src="/js/theme.js"></script>
|
||||
<script src="/js/login.js"></script>
|
||||
<script src="/js/get_all_users.js"></script>
|
||||
<script src="/js/add_user.js"></script>
|
||||
<script src="/js/del_user.js"></script>
|
||||
<script src="/js/change_password.js"></script>
|
||||
<script src="/js/change_user.js"></script>
|
||||
<script src="/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+84
-74
@@ -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");
|
||||
});
|
||||
|
||||
+31
-15
@@ -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);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user