bibisixtynine
/
Burgernotes
forked from Ailur/burgernotes
1
0
Fork 0
Code Pull Requests Activity

fix dark mode + changes to login page

This commit is contained in:
maaa 2023-10-13 20:00:34 +02:00
parent 0ae584a16d
commit 839d04ebc6
3 changed files with 132 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/css/style.css
View File

@ -61,6 +61,16 @@
.links a {
color: white !important;
}
.inoutdiv p {
color: white !important;
}
.inoutdiv a {
color: #969696 !important;
}
.inoutdiv input {
color: white;
background-color: #202124;
}
}
p, h1, h2, h3, h4, h5, h6 {
@ -363,7 +373,13 @@ body {
margin-bottom: 10px;
}
.sessionDiv {
max-height: 255px;
overflow-y: auto;
}
.sessionDiv div {
position: relative;
background-color: var(--session-color);
border-radius: 8px;
margin-bottom: 5px;
@ -401,7 +417,7 @@ body {
}
.inoutdiv input {
width: calc(100% - 20px);
width: calc(100% - 120px);
height: 30px;
margin-bottom: 10px;
padding-left: 10px;
@ -417,6 +433,7 @@ body {
background-color: var(--theme-color);
color: white;
padding: 10px;
margin-right: 5px;
padding-left: 20px;
padding-right: 20px;
@ -432,7 +449,7 @@ body {
}
.hidden {
display: none;
display: none !important;
}
.w100 {

163
static/js/login.js
View File

@ -13,81 +13,134 @@ let usernameBox = document.getElementById("usernameBox")
let passwordBox = document.getElementById("passwordBox")
let statusBox = document.getElementById("statusBox")
let signupButton = document.getElementById("signupButton")
let inputNameBox = document.getElementById("inputNameBox")
let backButton = document.getElementById("backButton")
usernameBox.classList.remove("hidden")
inputNameBox.innerText = "username:"
let currentInputType = 0
function showInput(inputType) {
if (inputType == 0) {
usernameBox.classList.remove("hidden")
passwordBox.classList.add("hidden")
backButton.classList.add("hidden")
inputNameBox.innerText = "username:"
statusBox.innerText = "log in to your burgernotes account!"
currentInputType = 0
} else if (inputType == 1) {
usernameBox.classList.add("hidden")
passwordBox.classList.remove("hidden")
backButton.classList.remove("hidden")
inputNameBox.innerText = "password:"
currentInputType = 1
} else if (inputType == 2) {
usernameBox.classList.add("hidden")
passwordBox.classList.add("hidden")
signupButton.classList.add("hidden")
backButton.classList.add("hidden")
inputNameBox.classList.add("hidden")
inputNameBox.innerText = "password:"
currentInputType = 2
}
}
function showElements(yesorno) {
if (!yesorno) {
usernameBox.classList.add("hidden")
passwordBox.classList.add("hidden")
signupButton.classList.add("hidden")
backButton.classList.add("hidden")
inputNameBox.classList.add("hidden")
showInput(currentInputType)
}
else {
usernameBox.classList.remove("hidden")
passwordBox.classList.remove("hidden")
signupButton.classList.remove("hidden")
backButton.classList.remove("hidden")
inputNameBox.classList.remove("hidden")
showInput(currentInputType)
}
}
signupButton.addEventListener("click", (event) => {
async function doStuff() {
let username = usernameBox.value
let password = passwordBox.value
if (username == "") {
if (passwordBox.classList.contains("hidden")) {
if (usernameBox.value == "") {
statusBox.innerText = "username required"
return
} else {
statusBox.innerText = "welcome back, " + usernameBox.value + "!"
}
if (password == "") {
statusBox.innerText = "password required"
return
}
showInput(1)
} else {
async function doStuff() {
let username = usernameBox.value
let password = passwordBox.value
showElements(false)
statusBox.innerText = "welcome back!"
async function hashpass(pass) {
const key = await hashwasm.argon2id({
password: pass,
salt: await hashwasm.sha512(pass),
parallelism: 1,
iterations: 256,
memorySize: 512,
hashLength: 32,
outputType: "encoded"
});
return key
};
fetch("/api/login", {
method: "POST",
body: JSON.stringify({
username: username,
password: await hashpass(password)
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
if (password == "") {
statusBox.innerText = "password required"
return
}
})
.then((response) => response)
.then((response) => {
async function doStuff() {
let responseData = await response.json()
if (response.status == 200) {
localStorage.setItem("DONOTSHARE-secretkey", responseData["key"])
localStorage.setItem("DONOTSHARE-password", await hashwasm.sha512(password))
window.location.href = "/app"
}
else if (response.status == 401) {
statusBox.innerText = "wrong username or password :("
showElements(true)
}
else {
statusBox.innerText = "something went wrong! (error code: " + response.status + ")"
showElements(true)
}
showInput(2)
showElements(true)
statusBox.innerText = "signing in.."
async function hashpass(pass) {
const key = await hashwasm.argon2id({
password: pass,
salt: await hashwasm.sha512(pass),
parallelism: 1,
iterations: 256,
memorySize: 512,
hashLength: 32,
outputType: "encoded"
});
return key
};
fetch("/api/login", {
method: "POST",
body: JSON.stringify({
username: username,
password: await hashpass(password)
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
doStuff()
});
})
.then((response) => response)
.then((response) => {
async function doStuff() {
let responseData = await response.json()
if (response.status == 200) {
localStorage.setItem("DONOTSHARE-secretkey", responseData["key"])
localStorage.setItem("DONOTSHARE-password", await hashwasm.sha512(password))
window.location.href = "/app"
}
else if (response.status == 401) {
statusBox.innerText = "wrong username or password :("
showInput(1)
showElements(true)
}
else {
statusBox.innerText = "something went wrong! (error code: " + response.status + ")"
showInput(1)
showElements(true)
}
}
doStuff()
});
}
doStuff()
}
doStuff()
});
});
backButton.addEventListener("click", (event) => {
showInput(0)
});
showInput(0)

10
templates/login.html
View File

@ -14,13 +14,13 @@
<body>
<div class="inoutdiv">
<h2 class="w300">log in</h2>
<p>log in to your burgernotes account!</p>
<p id="statusBox"></p>
<input id="usernameBox" type="text" placeholder="Username">
<input id="passwordBox" type="password" placeholder="Password">
<button id="signupButton">log in</button><br><br>
<span id="inputNameBox" style="margin-right: 10px;"></span><input id="usernameBox" class="hidden" type="text" placeholder="Enter your username">
<input id="passwordBox" class="hidden" type="password" placeholder="Enter your password">
<button id="signupButton">next</button>
<button id="backButton" class="hidden">back</button><br><br>
<p>don't have an account? if so, <a href="/signup">create one here!</a></p>
</div>
<script type="text/javascript" src="/static/js/login.js"></script>
</body>