hagis/space-smasher-9001
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Login GUI

Browse source
This commit is contained in:
KGrzeg 2021-10-17 18:06:57 +02:00
parent 7250f7f29b
commit 7e1973b74e
3 changed files with 169 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

124
src/gui.ts Normal file
View file

@ -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()
})()

14
src/index.html
View file

@ -2,10 +2,24 @@
<head> <head>
<title>Miner</title> <title>Miner</title>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <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="main.ts"></script>
<script src="gui.ts"></script>
</body> </body>
</html> </html>

31
src/style.css Normal file
View file

@ -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);
}