From 821ca31cf1b655e856e47e46848535d02946a343 Mon Sep 17 00:00:00 2001
From: TolaMironcenko <mironcenkotola@gmail.com>
Date: Thu, 23 May 2024 14:31:23 +0700
Subject: [PATCH] added web interface template

---
 web/css/index.css     | 12 ++++++++++
 web/css/loginform.css | 55 +++++++++++++++++++++++++++++++++++++++++++
 web/index.html        | 29 +++++++++++++++++++++++
 web/js/login.js       | 27 +++++++++++++++++++++
 web/js/routes.js      |  6 +++++
 5 files changed, 129 insertions(+)
 create mode 100644 web/css/index.css
 create mode 100644 web/css/loginform.css
 create mode 100644 web/index.html
 create mode 100644 web/js/login.js
 create mode 100644 web/js/routes.js

diff --git a/web/css/index.css b/web/css/index.css
new file mode 100644
index 0000000..a9ffe37
--- /dev/null
+++ b/web/css/index.css
@@ -0,0 +1,12 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    background-color: black;
+    color: white;
+}
\ No newline at end of file
diff --git a/web/css/loginform.css b/web/css/loginform.css
new file mode 100644
index 0000000..f5aca17
--- /dev/null
+++ b/web/css/loginform.css
@@ -0,0 +1,55 @@
+.loginform {
+    position: absolute;
+    width: 0;
+    height: 0;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    overflow: hidden;
+    pointer-events: none;
+    transition: 0.3s;
+}
+
+.loginform.active {
+    width: 100%;
+    height: 100%;
+    pointer-events: all;
+}
+
+.loginformbody {
+    padding: 10px;
+    background-color: gray;
+    border-radius: 10px;
+    box-shadow: -5px -5px 30px 30px gray;
+}
+
+.loginformheader {
+    text-align: center;
+}
+
+.loginforminputbody {
+    padding: 10px;
+}
+
+.loginforminput {
+    padding: 10px;
+    border-radius: 10px;
+    border: none;
+    transition: 0.3s;
+}
+
+.loginformbutton {
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    position: relative;
+    width: 100%;
+    cursor: pointer;
+    background-color: rgb(59, 59, 197);
+    color: white;
+    transition: 0.3s;
+}
+
+.loginformbutton:hover {
+    background-color: rgb(151, 151, 241);
+}
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..3df37fb
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,29 @@
+<!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>
\ No newline at end of file
diff --git a/web/js/login.js b/web/js/login.js
new file mode 100644
index 0000000..a7f6a8d
--- /dev/null
+++ b/web/js/login.js
@@ -0,0 +1,27 @@
+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())
+}
diff --git a/web/js/routes.js b/web/js/routes.js
new file mode 100644
index 0000000..e1c81a4
--- /dev/null
+++ b/web/js/routes.js
@@ -0,0 +1,6 @@
+const host = 'http://localhost:43243'
+const prefix = 'api'
+
+const routes = {
+    login: () => [host, prefix, 'token'].join('/')
+}
\ No newline at end of file