mrfrys-node-server/sharedViews/login.ejs

124 lines
3.1 KiB
Text

<html>
<body bgcolor="#222426">
<head>
<title>Frylabs</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.6" />
<style>
.center {
width: 340px;
height: 340px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
text-align: center;
}
.text {
font-size: 18px;
color: white;
margin: 20px;
}
.title {
font-size: 50px;
font-weight: bold;
color: white;
}
.inputContainer {
width: 100%;
}
.showpwContainer {
color: white;
width: 40px;
cursor: pointer;
}
input[type=text], input[type=password] {
font-size: 20px;
color: #ffffff;
background-color: #181a1b;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #333333;
text-align: center;
}
input[type=text], input[type=password]:focus {
border: 2px solid #000;
}
button {
background-color: #9999ff;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<div class='center'>
<div class='title'>
Frylabs
</div>
<div id='text' class='text'>
</div>
<div id='form'>
<div class='inputContainer'>
<input type='password' id='pw' name='pw' autocomplete="off"/>
<!-- <span onclick="ShowHidePW()" class='showpwContainer'>
👁
</span> -->
</div>
<button id='sendButton' onclick="Login(this)">Submit</button>
</div>
</div>
</body>
<script>
function ShowHidePW() {
const x = document.getElementById('pw')
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
function HandleResp (resp) {
console.log(resp)
document.getElementById('sendButton').innerText = 'Submit'
const textNode = document.getElementById('text')
if (resp.result === 'success') {
location.reload()
textNode.innerText = resp.msg
} else {
textNode.innerText = resp.msg
}
}
async function Login(button) {
button.innerText = '...'
const rawResponse = await fetch('http://api.frylabs.net/login', {
method: 'POST',
credentials: 'include',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
pw: document.getElementById('pw').value
})
})
rawResponse.json()
.then((resp) => {
HandleResp(resp)
})
}
</script>
</html>