added web interface

src/auth_service.cpp

@@ -18,6 +18,10 @@ int main() {
     srv.Post("/api/users/del", del_user);
     srv.Post("/api/access", user_access);
 
+    srv.set_mount_point("/admin", "../src/web");
+    srv.set_mount_point("/js", "../src/web/js");
+    srv.set_mount_point("/css", "../src/web/css");
+
     srv.listen("localhost", 43243);
     return 0;
 }

src/web/css/header.css

@@ -0,0 +1,19 @@
+.header {
+    width: 100%;
+    padding: 10px;
+    background-color: transparent;
+}
+
+.headerbutton {
+    padding: 10px;
+    border-radius: 10px;
+    border: none;
+    cursor: pointer;
+    background-color: gray;
+    transition: 0.3s;
+    color: white;
+}
+
+.headerbutton:hover {
+    background-color: rgb(83, 83, 83);
+}

src/web/css/index.css

@@ -9,4 +9,5 @@ body {
     height: 100vh;
     background-color: black;
     color: white;
+    position: relative;
 }

src/web/css/loginform.css

@@ -1,17 +1,19 @@
 .loginform {
     position: absolute;
-    width: 0;
+    width: 100%;
     height: 0;
+    top: 0;
+    left: 0;
     display: grid;
     justify-items: center;
     align-items: center;
     overflow: hidden;
     pointer-events: none;
     transition: 0.3s;
+    background-color: black;
 }
 
 .loginform.active {
-    width: 100%;
     height: 100%;
     pointer-events: all;
 }

src/web/css/message.css

@@ -0,0 +1,41 @@
+.message {
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 10;
+    border-radius: 10px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    transition: 0.3s;
+    cursor: pointer;
+    opacity: 0.8;
+}
+
+.messagetextbox {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.messagetext {
+    width: 100%;
+    text-align: center;
+    pointer-events: none;
+}
+
+.message.active.error {
+    pointer-events: all;
+    height: 10%;
+    background-color: rgb(233, 70, 70);
+}
+
+.message.active.success {
+    pointer-events: all;
+    height: 10%;
+    background-color: rgb(76, 209, 76);
+}

src/web/css/userstable.css

@@ -0,0 +1,49 @@
+.table {
+    width: 98vw;
+    height: 60vh;
+    overflow-y: auto;
+    margin: 1vw 2vh;
+}
+
+.headers {
+    width: 98vw;
+    margin: 1vw 2vh;
+}
+
+table {
+    width: 100%;
+}
+
+thead {
+    background-color: azure;
+    color: black;
+}
+
+tbody {
+    background-color: rgb(48, 44, 44);
+}
+
+th {
+    border-radius: 10px;
+    padding: 10px;
+    width: 25%;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: #504f4f;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: gray;
+    border-radius: 10px;
+    transition: 0.3s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #ffffff;
+}

src/web/index.html

@@ -0,0 +1,60 @@
+<!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/index.css">
+    <link rel="stylesheet" href="css/loginform.css">
+    <link rel="stylesheet" href="css/message.css">
+    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/userstable.css">
+    <title>admin</title>
+</head>
+<body>
+    <div class="header">
+        <button class="exitbutton headerbutton">Exit</button>
+    </div>
+
+    <div class="loginform active">
+        <form class="loginformbody">
+            <h1 class="loginformheader">Login</h1>
+            <div class="loginforminputbody">
+                <div class="loginformlabel">Username</div>
+                <input type="text" required id="loginforminputusername" class="loginforminput">
+            </div>
+            <div class="loginforminputbody">
+                <div class="loginformlabel">Username</div>
+                <input type="password" required id="loginforminputpassword" class="loginforminput">
+            </div>
+            <div class="loginforminputbody">
+                <button class="loginformbutton">login</button>
+            </div>
+        </form>
+    </div>
+
+    <div class="message">
+        <div class="messagetextbox">
+            <h3 class="messagetext"></h3>
+        </div>
+    </div>
+    <table class="headers">
+        <thead class="alluserstablehead">
+            <tr>
+                <th>id</th>
+                <th>username</th>
+                <th>group</th>
+                <th>is_superuser</th>
+            </tr>
+        </thead>
+    </table>
+    <div class="table">
+        <table class="alluserstable">
+            <tbody class="alluserstablebody"></tbody>
+        </table>
+    </div>
+    <script src="js/routes.js"></script>
+    <script src="js/window.js"></script>
+    <script src="js/login.js"></script>
+    <script src="js/get_all_users.js"></script>
+</body>
+</html>

src/web/js/get_all_users.js

@@ -0,0 +1,19 @@
+const get_all_users = async () => {
+    const response = await fetch(routes.all_users(), {
+        method: "POST",
+        body: `{"token":"${localStorage.getItem("token")}"}`
+    }).then(data => data.json()).then(jsondata => jsondata)
+    console.log(response)
+    const alluserstablebody = document.querySelector('.alluserstablebody')
+    // alluserstablebody.innerHTML = ""
+    for (const user of response) {
+        alluserstablebody.innerHTML += `
+            <tr>
+                <th>${user.id}</th>
+                <th>${user.username}</th>
+                <th>${user.group}</th>
+                <th>${user.is_superuser}</th>
+            </tr>    
+        `
+    }
+}

src/web/js/login.js

@@ -0,0 +1,79 @@
+const loginform = document.querySelector('.loginform')
+const loginformbody = document.querySelector('.loginformbody')
+const loginforminputusername = document.querySelector('#loginforminputusername')
+const loginforminputpassword = document.querySelector('#loginforminputpassword')
+const loginformbutton = document.querySelector('.loginformbutton')
+const message = document.querySelector('.message')
+const messagetext = document.querySelector('.messagetext')
+const exitbutton = document.querySelector('.exitbutton')
+
+// loginformbody.unbind('submit')
+
+loginformbody.addEventListener('submit', (e) => {
+    e.preventDefault()
+    login(loginforminputusername.value, loginforminputpassword.value)
+    // console.log(loginform, loginforminputpassword, loginforminputusername, loginformbutton)
+})
+
+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)
+    if (response.status === "403") {
+        messagetext.innerHTML = "Неправильный логин или пароль"
+        message.classList.remove('success')
+        message.classList.add("error")
+        message.classList.add("active")
+        setTimeout(() => {
+            message.classList.remove('active')
+        }, 2000)
+    }
+    if (response.token) {
+        messagetext.innerHTML = "Успешно"
+        message.classList.remove('error')
+        message.classList.add("success")
+        message.classList.add("active")
+        setTimeout(() => {
+            message.classList.remove('active')
+        }, 2000)
+        loginform.classList.remove("active")
+        localStorage.setItem("token", response.token)
+        get_user_data(response.token)
+    }
+}
+
+const get_user_data = async (token) => {
+    const response = await fetch(routes.user(), {
+        method: "POST",
+        body: `{"token":"${localStorage.getItem("token")}"}`
+    }).then(data => data.json()).then(jsondata => jsondata)
+    if (response.is_superuser === "1") {
+        get_all_users()
+    }
+    if (response.id) {
+        localStorage.setItem("userdata", JSON.stringify(response))
+    }
+}
+
+message.addEventListener('click', () => {
+    message.classList.remove("active")
+})
+
+exitbutton.addEventListener('click', () => {
+    localStorage.clear()
+    loginform.classList.add('active')
+    messagetext.innerHTML = 'Вы вышли'
+    message.classList.remove('error')
+    message.classList.add('.success')
+    message.classList.add('active')
+    setTimeout(() => {
+        message.classList.remove('active')
+    }, 2000)
+})

src/web/js/routes.js

@@ -0,0 +1,9 @@
+const host = 'http://localhost:43243'
+const prefix = 'api'
+
+const routes = {
+    login: () => [host, prefix, 'token'].join('/'),
+    user: () => [host, prefix, 'users', 'user'].join('/'),
+    all_users: () => [host, prefix, 'users', 'all'].join('/'),
+    access: () => [host, prefix, 'access'].join('/')
+}

src/web/js/window.js

@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", () => {
+    if (localStorage.getItem('token')) {
+        fetch(routes.access(), {
+            method: 'POST',
+            body: `{"token": "${localStorage.getItem('token')}"}`
+        }).then(data => data.json()).then(jsondata => {
+            if (jsondata.access === "success") {
+                document.querySelector('.loginform').classList.remove('active')
+                get_all_users()
+            }
+        })
+    }
+})

web/index.html

@@ -1,29 +0,0 @@
-<!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/index.css">
-    <link rel="stylesheet" href="css/loginform.css">
-    <title>admin</title>
-</head>
-<body>
-    <div class="loginform active">
-        <form class="loginformbody">
-            <h1 class="loginformheader">Login</h1>
-            <div class="loginforminputbody">
-                <input type="text" required id="loginforminputusername" class="loginforminput">
-            </div>
-            <div class="loginforminputbody">
-                <input type="password" required id="loginforminputpassword" class="loginforminput">
-            </div>
-            <div class="loginforminputbody">
-                <button class="loginformbutton">login</button>
-            </div>
-        </form>
-    </div>
-
-    <script src="js/routes.js"></script>
-    <script src="js/login.js"></script>
-</body>
-</html>

web/js/login.js

@@ -1,27 +0,0 @@
-const loginform = document.querySelector('.loginform')
-const loginformbody = document.querySelector('.loginformbody')
-const loginforminputusername = document.querySelector('#loginforminputusername')
-const loginforminputpassword = document.querySelector('#loginforminputpassword')
-const loginformbutton = document.querySelector('.loginformbutton')
-
-// loginformbody.unbind('submit')
-
-loginformbody.addEventListener('submit', (e) => {
-    e.preventDefault()
-    console.log('login clicked')
-    console.log(loginforminputusername.value, loginforminputpassword.value)
-    login(loginforminputusername.value, loginforminputpassword.value)
-    // console.log(loginform, loginforminputpassword, loginforminputusername, loginformbutton)
-})
-
-const login = async (username, password) => {
-    const response = await fetch(routes.login(), {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        mode: 'no-cors',
-        body: `{"username":"${username}","password":"${password}"}`
-    })
-    console.log(response.json())
-}

web/js/routes.js

@@ -1,6 +0,0 @@
-const host = 'http://localhost:43243'
-const prefix = 'api'
-
-const routes = {
-    login: () => [host, prefix, 'token'].join('/')
-}