Login GUI

2021-10-17 18:06:57 +02:00 · 2021-10-17 18:06:57 +02:00 · 7e1973b74e
commit 7e1973b74e
parent 7250f7f29b
3 changed files with 169 additions and 0 deletions
--- a/src/gui.ts
+++ b/src/gui.ts
@ -0,0 +1,124 @@
+declare interface Window { myStuff: any }
+
+(() => {
+  const elements = {
+    bar: {
+      logged: document.getElementById("loggedbar"),
+      loggedout: document.getElementById("loggedoutbar"),
+    },
+    buttons: {
+      login: document.getElementById("login"),
+      logout: document.getElementById("logout"),
+      signup: document.getElementById("signup"),
+    },
+    name: document.getElementById("name"),
+    key: document.getElementById("key"),
+  }
+
+  function checkIfLogged() {
+    const token = localStorage.getItem("token")
+    const name = localStorage.getItem("name")
+    if (token !== null) {
+      window.myStuff.token = token
+      window.myStuff.name = name
+      console.log("my stuff", window.myStuff)
+
+      elements.bar.logged!.style.display = ""
+      elements.bar.loggedout!.style.display = "none"
+      elements.name!.innerText = name!;
+      elements.key!.innerText = token!;
+    } else {
+      console.log("not logged in")
+      elements.bar.logged!.style.display = "none"
+      elements.bar.loggedout!.style.display = ""
+    }
+  }
+
+  function loginByKey() {
+    const key = prompt("Type in the #key")
+
+    if (!key) {
+      alert("Login cancelled")
+      return
+    }
+
+    //TODO: fetch data from server
+    const response = {
+      token: Math.random().toString() + '.abc',
+      name: 'Hagis'
+    }
+
+    localStorage.setItem('token', response.token)
+    localStorage.setItem('name', response.name)
+
+    window.myStuff.token = response.token
+    window.myStuff.name = response.name
+
+    elements.bar.logged!.style.display = ''
+    elements.bar.loggedout!.style.display = 'none'
+    elements.name!.innerText = response.name
+    elements.key!.innerText = response.token
+  }
+
+  function signup() {
+    const nickname = prompt("Your nickname:")
+
+    if (!nickname) {
+      alert("Signup cancelled")
+      return
+    }
+
+    // TODO: Fetch data from server
+
+    //mock bad request
+    if (nickname == 'Hgs') {
+      alert("The name is occupied by someone else, try again with another nickname")
+      return
+    }
+
+    const response = {
+      token: Math.random().toString() + '.abc',
+      name: nickname!
+    }
+
+    localStorage.setItem('token', response.token)
+    localStorage.setItem('name', response.name)
+
+    window.myStuff.token = response.token
+    window.myStuff.name = response.name
+
+    elements.bar.logged!.style.display = ''
+    elements.bar.loggedout!.style.display = 'none'
+    elements.name!.innerText = response.name
+    elements.key!.innerText = response.token
+  }
+
+  function logout() {
+    const sure = confirm("Are you sure you want to logout? " +
+      "You won't be able to login again without #key. " +
+      "Make sure you copied key before log out!")
+
+    if (!sure)
+      return
+
+    localStorage.clear()
+    window.myStuff = {}
+
+    elements.bar.logged!.style.display = 'none'
+    elements.bar.loggedout!.style.display = ''
+    elements.name!.innerText = ''
+    elements.key!.innerText = ''
+  }
+
+  function setup() {
+    window.myStuff = {}
+
+    elements.buttons.login!.addEventListener("click", loginByKey)
+    elements.buttons.logout!.addEventListener("click", logout)
+    elements.buttons.signup!.addEventListener("click", signup)
+
+    checkIfLogged()
+  }
+
+  setup()
+})()
--- a/src/index.html
+++ b/src/index.html
@ -2,10 +2,24 @@

 <head>
 	<title>Miner</title>
+	<link rel="stylesheet" href="style.css">
 </head>

 <body>
+	<div class="bar">
+		<div id="loggedbar" class="logged-in" style="display: none">
+			Logged in as <span id="name">username</span>
+			<span id="key" class="key">#asdasdasdasd</span>
+			<button id="logout">Log out</button>
+		</div>
+		<div id="loggedoutbar" class="logged-out" style="display: none">
+			Not logged in
+			<button id="login">Log in with #key</button>
+			<button id="signup">Sign up</button>
+		</div>
+	</div>
 	<script src="main.ts"></script>
+	<script src="gui.ts"></script>
 </body>

 </html>
--- a/src/style.css
+++ b/src/style.css
@ -0,0 +1,31 @@
+html,body{
+  padding: 0;
+  margin: 0;
+  position: relative;
+  background-color: black;
+  font-family: "Verdana", "Geneva", "Tahoma", "sans-serif";
+}
+
+body {
+  background-image: url('../public/assets/img/stars.png');
+}
+
+.bar {
+  width: 100%;
+  background-color: aqua;
+  width: 800px;
+  margin:auto;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.key {
+  font-family: 'Courier New', Courier, monospace;
+}
+
+canvas {
+  display: block;
+  width: 800px;
+  margin: auto;
+  box-shadow: 0 0 35px rgba(0,255,255,0.3);
+}