A few more design changesg
This commit is contained in:
parent
f32a21be4a
commit
4893836149
|
|
@ -1,66 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<html lang="en"><head>
|
||||
<title>Burgernotes</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/style.css" media="">
|
||||
<script type="text/javascript" src="/static/js/crypto-js.js"></script>
|
||||
<script type="text/javascript" src="/static/js/marked.js"></script>
|
||||
<link rel="icon" href="/static/svg/favicon.svg">
|
||||
</head>
|
||||
|
||||
<noscript>
|
||||
<body><noscript>
|
||||
<head>
|
||||
<meta http-equiv="refresh" content="0; url=/login"/>
|
||||
</head>
|
||||
</noscript>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="topBar">
|
||||
<p tabindex="0" class="logo" id="burgerButton"></p>
|
||||
<button tabindex="0" class="logo hidden" style="font-size: 17px;margin-left: 0;" onclick="handleGesture()" id="backButton"><img src="/static/svg/arrow-back.svg"></button>
|
||||
<div class="modernToolbar">
|
||||
<button class="count" id="wordCountBox">0 words</button>
|
||||
<button class="count" id="wordCountBox">6 words</button>
|
||||
<button onclick="toggleMarkdown()" class="usernameBox"><div class="vcenter"><img src="/static/svg/markdown.svg"></div></button>
|
||||
<button id="usernameBox" class="usernameBox"><div class="vcenter"><img src="/static/svg/acct-settings.svg"></div></button>
|
||||
<button id="usernameBox" class="usernameBox settings"><div class="vcenter"><img src="/static/svg/acct-settings.svg"></div></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="notesBar" class="notesBar">
|
||||
<button id="newNote" class="newNote" style="margin-left: 5px;">
|
||||
<div class="toolBar">
|
||||
<button id="newNote" class="newNote" style="">
|
||||
<div class="vcenter"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/add.svg"></div>
|
||||
</button>
|
||||
<button class="newNote" style="margin-left: 37.5px; background-color: var(--bar) !important;">
|
||||
|
||||
</button>
|
||||
<button id="removeBox" class="newNote">
|
||||
<button id="removeBox" class="newNote deleteNote
|
||||
">
|
||||
<div class="vcenter"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/delete.svg"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div id="notesDiv" class="notesDiv">
|
||||
<button class="loadingStuff" id="loadingStuff"></button>
|
||||
</div>
|
||||
|
||||
<button class="noteButton selected" id="273">The bloody mass..</button><button class="noteButton" id="275">Deadline June 2..</button><button class="noteButton" id="274">Making a point</button><button class="noteButton" id="229"><link rel="styl..</button><button class="noteButton" id="271">Results</button><button class="noteButton" id="22">SSH Keys</button><button class="noteButton" id="249">import os</button><button class="noteButton" id="268">Reminders </button><button class="noteButton" id="224"># Hello</button><button class="noteButton" id="243">Script:</button><button class="noteButton" id="239">; Zonefile for ..</button><button class="noteButton" id="234">Element thing</button><button class="noteButton" id="228">Hoi!!!</button><button class="noteButton" id="217">monero key</button><button class="noteButton" id="203">hi</button><button class="noteButton" id="199">Mirrorbot</button><button class="noteButton" id="183">SuperList</button><button class="noteButton" id="126">NewLine</button><button class="noteButton" id="13">Bank details</button></div>
|
||||
</div>
|
||||
|
||||
<div id="optionsCoverDiv" class="optionsCoverDiv hidden">
|
||||
<div id="optionsDiv" class="optionsDiv hidden">
|
||||
<div id="optionsCoverDiv" class="optionsCoverDiv">
|
||||
<div id="optionsDiv" class="optionsDiv">
|
||||
<button class="exit" id="exitThing">X</button>
|
||||
<h3 class="w300">Your account</h3>
|
||||
<p id="usernameThing">Cannot connect to the server</p>
|
||||
<p id="usernameThing">Username: arzumify</p>
|
||||
<div class="section"></div>
|
||||
<p>Device settings</p>
|
||||
<div class="fontManipulator">
|
||||
<span>Font size</span>
|
||||
<button class="textMinusBox" id="textMinusBox">-</button>
|
||||
<button class="textSizeBox" style="background-color: var(--nonimporant-theme-color) !important;" id="textSizeBox">16px</button>
|
||||
<button class="textPlusBox" id="textPlusBox">+</button>
|
||||
<div class="vAlign"><text>Font size</text></div>
|
||||
<div class="vAlign textMinusBox"><button id="textMinusBox">-</button></div>
|
||||
<div class="vAlign"><text class="textSizeBox" style="" id="textSizeBox">16px</text></div>
|
||||
<div class="vAlign"><button class="textPlusBox" id="textPlusBox">+</button></div>
|
||||
</div>
|
||||
<div class="section"></div>
|
||||
<p>Storage</p>
|
||||
<progress id="storageProgressThing" value="0" max="100"></progress><br>
|
||||
<p id="storageThing">Cannot connect to the server</p>
|
||||
<progress id="storageProgressThing" value="44652" max="25000000"></progress><br>
|
||||
<p id="storageThing">You've used 44.65 KB out of 25 MB</p>
|
||||
<div class="section"></div>
|
||||
<p>Account managment</p>
|
||||
<button id="deleteMyAccountButton"><img src="/static/svg/delete_forever.svg" alt="">Delete account</button>
|
||||
|
|
@ -85,7 +83,11 @@
|
|||
<form><input type="file" id="importFile" style="border: 0;"></form>
|
||||
</div>
|
||||
<div id="errorDiv" class="optionsDiv hidden">
|
||||
<p id="errorMessageThing"></p>
|
||||
<p id="errorMessageThing">What's new in Burgernotes 2.0?
|
||||
Restyled client
|
||||
Added changing passwords
|
||||
Migrated to OAuth2
|
||||
Added importing notes</p>
|
||||
<input class="hidden" id="errorInput" type="text" placeholder=""><br>
|
||||
<button class="normalButton" id="closeErrorButton">Ok</button>
|
||||
<button class="normalButton hidden" id="cancelErrorButton">Cancel</button>
|
||||
|
|
@ -93,8 +95,8 @@
|
|||
</div>
|
||||
|
||||
<div class="noteBox" id="noteBoxDiv">
|
||||
<textarea id="noteBox" class="noteBoxText"></textarea>
|
||||
<iframe id="markdown" style="display: none;" sandbox="allow-scripts"></iframe>
|
||||
<textarea id="noteBox" class="noteBoxText" style="font-size: 16px;" placeholder="Type something!"></textarea>
|
||||
<iframe id="markdown" style="display: none;" sandbox="allow-scripts" srcdoc="<!DOCTYPE html><html lang='en'><style>html { height: 100% } pre { white-space: pre-wrap; overflow-wrap: break-word; } body { white-space: pre-wrap; overflow-wrap: break-word; font-family: 'Inter', sans-serif; height: 100%; color: #000000; font-size: 16px; }</style></html>"></iframe>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/static/js/main.js"></script>
|
||||
|
|
@ -104,6 +106,7 @@
|
|||
}
|
||||
loadingStuff.remove()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
</body><style type="text/css"></style><style type="text/css"></style></html>
|
||||
|
|
|
|||
|
|
@ -221,8 +221,8 @@ body {
|
|||
}
|
||||
|
||||
.topBar .modernToolbar {
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.topBar .modernToolbar .count {
|
||||
|
|
@ -230,7 +230,10 @@ body {
|
|||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.topBar .modernToolbar .settings {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.topBar .modernToolbar .textmod {
|
||||
|
|
@ -291,10 +294,12 @@ body {
|
|||
border-color: var(--border-color);
|
||||
border-width: 0;
|
||||
border-right-width: 1px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.notesDiv {
|
||||
height: calc(100% - 50px);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -309,7 +314,7 @@ body {
|
|||
color: var(--unselected-note-button-text-color);
|
||||
border-radius: 8px;
|
||||
|
||||
border: none;
|
||||
border: dashed;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
font-size: 15px;
|
||||
|
|
@ -347,7 +352,7 @@ body {
|
|||
|
||||
.notesBar .selected {
|
||||
background-color: var(--note-theme-color) !important;
|
||||
border: none;
|
||||
border-style: solid;
|
||||
color: var(--note-button-text-color);
|
||||
}
|
||||
|
||||
|
|
@ -355,6 +360,11 @@ body {
|
|||
background-color: var(--note-theme-color) !important;
|
||||
}
|
||||
|
||||
.notesBar .toolBar {
|
||||
display: flex;
|
||||
border-top: 1px var(--border-color) solid;
|
||||
}
|
||||
|
||||
.notesBar .newNote {
|
||||
height: 41px;
|
||||
width: 41px;
|
||||
|
|
@ -362,13 +372,16 @@ body {
|
|||
text-align: left;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
background-color: var(--bar);
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
transition: 0.125s;
|
||||
}
|
||||
|
||||
.notesBar .deleteNote {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.notesBar .newNote:hover {
|
||||
background-color: var(--icon-button-hover);
|
||||
}
|
||||
|
|
@ -387,7 +400,7 @@ body {
|
|||
color: var(--text-color);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
width: calc(100% - 200px);
|
||||
height: calc(100% - 50px - 30px);
|
||||
height: calc(100% - 50px);
|
||||
font-family: "Inter", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -555,11 +568,17 @@ iframe#markdown {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.optionsDiv .fontManipulator {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.optionsDiv .fontManipulator button {
|
||||
width: 43.5px;
|
||||
height: 43.5px;
|
||||
background-color: var(--nonimporant-theme-color);
|
||||
color: var(--nonimportant-text-color);
|
||||
transition: 0.125s;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.optionsDiv .fontManipulator button:hover {
|
||||
|
|
@ -567,7 +586,12 @@ iframe#markdown {
|
|||
}
|
||||
|
||||
.optionsDiv .fontManipulator .textMinusBox {
|
||||
margin-left: 83.5px
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.optionsDiv .fontManipulator .textSizeBox {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.sessionDiv {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,198 @@
|
|||
if (localStorage.getItem("DONOTSHARE-secretkey") !== null) {
|
||||
window.location.replace("/app/")
|
||||
document.body.innerHTML = "Redirecting..."
|
||||
throw new Error();
|
||||
}
|
||||
if (localStorage.getItem("DONOTSHARE-password") !== null) {
|
||||
window.location.replace("/app/")
|
||||
document.body.innerHTML = "Redirecting..."
|
||||
throw new Error();
|
||||
}
|
||||
|
||||
let remote = localStorage.getItem("homeserverURL")
|
||||
if (remote == null) {
|
||||
localStorage.setItem("homeserverURL", "https://notes.hectabit.org")
|
||||
remote = "https://notes.hectabit.org"
|
||||
}
|
||||
|
||||
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 = "Login 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)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById("homeserver").innerText = "Your homeserver is: " + remote + ". "
|
||||
});
|
||||
|
||||
signupButton.addEventListener("click", () => {
|
||||
if (passwordBox.classList.contains("hidden")) {
|
||||
if (usernameBox.value === "") {
|
||||
statusBox.innerText = "A username is required!"
|
||||
return
|
||||
} else {
|
||||
statusBox.innerText = "Welcome back, " + usernameBox.value + "!"
|
||||
}
|
||||
showInput(1)
|
||||
} else {
|
||||
async function doStuff() {
|
||||
let username = usernameBox.value
|
||||
let password = passwordBox.value
|
||||
|
||||
if (password === "") {
|
||||
statusBox.innerText = "A password is required!"
|
||||
return
|
||||
}
|
||||
|
||||
showInput(2)
|
||||
showElements(true)
|
||||
statusBox.innerText = "Signing in..."
|
||||
|
||||
async function hashpassold(pass) {
|
||||
return await hashwasm.argon2id({
|
||||
password: pass,
|
||||
salt: await hashwasm.sha512(pass),
|
||||
parallelism: 1,
|
||||
iterations: 256,
|
||||
memorySize: 512,
|
||||
hashLength: 32,
|
||||
outputType: "encoded"
|
||||
})
|
||||
}
|
||||
|
||||
async function hashpass(pass) {
|
||||
let key = pass
|
||||
for (let i = 0; i < 128; i++) {
|
||||
key = await hashwasm.sha3(key)
|
||||
}
|
||||
return key
|
||||
}
|
||||
|
||||
fetch(remote + "/api/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
username: username,
|
||||
password: await hashpass(password),
|
||||
passwordchange: "no",
|
||||
newpass: "null"
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=UTF-8"
|
||||
}
|
||||
})
|
||||
.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) {
|
||||
console.log("Trying oldhash")
|
||||
fetch(remote + "/api/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
username: username,
|
||||
password: await hashpassold(password),
|
||||
passwordchange: "yes",
|
||||
newpass: await hashpass(password)
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=UTF-8"
|
||||
}
|
||||
})
|
||||
.then((response) => response)
|
||||
.then((response) => {
|
||||
async function doStuff2() {
|
||||
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)
|
||||
}
|
||||
}
|
||||
doStuff2()
|
||||
});
|
||||
}
|
||||
else {
|
||||
statusBox.innerText = "Something went wrong! (error code: " + response.status + ")"
|
||||
showInput(1)
|
||||
showElements(true)
|
||||
}
|
||||
}
|
||||
doStuff()
|
||||
});
|
||||
}
|
||||
doStuff()
|
||||
}
|
||||
});
|
||||
|
||||
backButton.addEventListener("click", () => {
|
||||
showInput(0)
|
||||
});
|
||||
|
||||
showInput(0)
|
||||
Reference in New Issue