|
|
@@ -1,62 +1,33 @@ |
|
|
|
"use strict"; |
|
|
|
|
|
|
|
|
|
|
|
// NAME FIELD |
|
|
|
/* BEGIN KEYBOARD EVENTS */ |
|
|
|
document.getElementById("name").addEventListener("keypress", function (e) { |
|
|
|
if (e.key === 'Enter') { |
|
|
|
validateLogin(document.getElementById("name").value, document.getElementById("password").value); |
|
|
|
initValidateLogin(); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// PASSWORD FIELD |
|
|
|
document.getElementById("password").addEventListener("keypress", function (e) { |
|
|
|
if (e.key === 'Enter') { |
|
|
|
validateLogin(document.getElementById("name").value, document.getElementById("password").value); |
|
|
|
initValidateLogin(); |
|
|
|
} |
|
|
|
}); |
|
|
|
/* END KEYBOARD EVENTS */ |
|
|
|
|
|
|
|
|
|
|
|
// LOGIN BUTTON |
|
|
|
var btn_login = document.getElementById("btn-login"); |
|
|
|
btn_login.addEventListener("click", validateLogin); // not prod |
|
|
|
|
|
|
|
|
|
|
|
// LOGIN EVENT |
|
|
|
function loginEvent(name, password) { |
|
|
|
let xmlrequest = new XMLHttpRequest(); |
|
|
|
xmlrequest.open("POST", "/"); |
|
|
|
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); |
|
|
|
xmlrequest.send("type=login&name=" + name + "&password=" + password); |
|
|
|
xmlrequest.onload = function () { |
|
|
|
console.log(xmlrequest.response); // not prod |
|
|
|
loginResponseEvent(xmlrequest.response); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function initSave(name, password, text) { |
|
|
|
let xmlrequest = new XMLHttpRequest(); |
|
|
|
xmlrequest.open("POST", "/"); |
|
|
|
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); |
|
|
|
xmlrequest.send("name=" + name + "&password=" + password + "&text=" + text); // not prod |
|
|
|
xmlrequest.onload = function () // not prod |
|
|
|
{ |
|
|
|
console.log(xmlrequest.response);// not prod |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// VALIDATE LOGIN |
|
|
|
function validateLogin(name, password) { |
|
|
|
/* BEGIN INIT METHODS ACCESSIBLE BY DOCUMENT */ |
|
|
|
function initValidateLogin() { |
|
|
|
let name = document.getElementById("name").value; |
|
|
|
let password = document.getElementById("password").value; |
|
|
|
let label_name = document.getElementById("label-name"); |
|
|
|
let label_password = document.getElementById("label-password"); |
|
|
|
label_name.style.display = "none"; |
|
|
|
label_password.style.display = "none"; |
|
|
|
if (name === "") { |
|
|
|
if (name === "" || name === null) { |
|
|
|
label_name.textContent = "Empty."; |
|
|
|
label_name.style.display = "initial"; |
|
|
|
} else if (password === "") { |
|
|
|
} else if (password === "" || password === null) { |
|
|
|
label_password.textContent = "Empty."; |
|
|
|
label_password.style.display = "initial"; |
|
|
|
} else if (name.length > 60) { |
|
|
@@ -69,12 +40,123 @@ function validateLogin(name, password) { |
|
|
|
label_name.textContent = "Illegal Character."; |
|
|
|
label_name.style.display = "initial"; |
|
|
|
} else { |
|
|
|
loginEvent(name, password); |
|
|
|
loginLocalEvent(name, password); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function initValidateSave() { |
|
|
|
let name = document.getElementById("name-form").value; |
|
|
|
let text = document.getElementById("textarea").value; |
|
|
|
let password; |
|
|
|
if (document.getElementById("password-form").value === "") // existing user |
|
|
|
password = sessionStorage.getItem(name); |
|
|
|
else |
|
|
|
password = document.getElementById("password-form").value; |
|
|
|
if (name === "" || name === null) { |
|
|
|
blinkUtil(document.getElementById("name-form"), .1, 6, "whitesmoke", "#ff1a1a"); |
|
|
|
} else if (password === "" || password === null) { |
|
|
|
blinkUtil(document.getElementById("password-form"), .1, 6, "whitesmoke", "#ff1a1a"); |
|
|
|
} else if (text === "" || text === null) { |
|
|
|
document.getElementById("textarea").placeholder = "Cannot save an empty form."; |
|
|
|
} else if (name.length > 60) { |
|
|
|
blinkUtil(document.getElementById("name-form"), .1, 6, "whitesmoke", "#ff1a1a"); |
|
|
|
document.getElementById("name-form").value = ""; |
|
|
|
document.getElementById("name-form").placeholder = "Too long."; |
|
|
|
} else if (password.length > 128) { |
|
|
|
blinkUtil(document.getElementById("password-form"), .1, 6, "whitesmoke", "#ff1a1a"); |
|
|
|
document.getElementById("password-form").value = ""; |
|
|
|
document.getElementById("password-form").placeholder = "Too long."; |
|
|
|
} else if (name.match("[ !*'();:@&=+$,/?%#\\[\\]\\\\<>^\"{}.~`]")) { |
|
|
|
blinkUtil(document.getElementById("name-form"), .1, 6, "whitesmoke", "#ff1a1a"); |
|
|
|
document.getElementById("name-form").value = ""; |
|
|
|
document.getElementById("name-form").placeholder = "Avoid special characters."; |
|
|
|
} else { |
|
|
|
sessionStorage.setItem(name, password); |
|
|
|
organizeSaveLocalEvent(name, password, text); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function initEmptyForm() { |
|
|
|
document.getElementById("name").value = ""; |
|
|
|
document.getElementById("password").value = ""; |
|
|
|
document.getElementById("textarea").value = ""; |
|
|
|
document.getElementById("name-form").value = ""; |
|
|
|
document.getElementById("password-form").value = ""; |
|
|
|
document.getElementById("name-form").disabled = false; |
|
|
|
document.getElementById("btn-settings").style.display = "none"; |
|
|
|
document.getElementById("btn-logout").style.display = "none"; |
|
|
|
document.getElementById("password-form").style.display = "inherit"; |
|
|
|
document.getElementById("div-logo").style.display = "none"; |
|
|
|
document.getElementById("div-login-parent").style.display = "none"; |
|
|
|
document.getElementById("textarea").rows = window.innerHeight / 24; |
|
|
|
document.getElementById("page-form-menu").style.display = "inherit"; |
|
|
|
document.getElementById("page-form").style.display = "inherit"; |
|
|
|
} |
|
|
|
|
|
|
|
function initLogout() { |
|
|
|
sessionStorage.clear(); |
|
|
|
document.getElementById("label-name").style.display = "none"; |
|
|
|
document.getElementById("label-password").style.display = "none"; |
|
|
|
document.getElementById("page-form-menu").style.display = "none"; |
|
|
|
document.getElementById("page-form").style.display = "none"; |
|
|
|
document.getElementById("div-logo").style.display = "inherit"; |
|
|
|
document.getElementById("div-login-parent").style.display = "inherit"; |
|
|
|
} |
|
|
|
|
|
|
|
function initAboutPage() { |
|
|
|
// TODO |
|
|
|
} |
|
|
|
|
|
|
|
function initPasswordReset() { |
|
|
|
// TODO |
|
|
|
} |
|
|
|
|
|
|
|
function initDelete() { |
|
|
|
let xmlrequest = new XMLHttpRequest(); |
|
|
|
xmlrequest.open("POST", "/"); |
|
|
|
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); |
|
|
|
xmlrequest.send("name=" + document.getElementById("name-form").value + "&password=" + sessionStorage.getItem(document.getElementById("name-form").value) + "&delete=" + "true"); |
|
|
|
initLogout(); |
|
|
|
} |
|
|
|
|
|
|
|
function initAddTab() { |
|
|
|
// TODO 10 charlength - 2 free |
|
|
|
document.getElementById("tabs").value = parseInt(document.getElementById("tabs").value) + 1; |
|
|
|
let tab = "<a id=\"tab" + document.getElementById("tabs").value + "\" class=\"item\" style=\"border: none;background-color: #252628;display: inherit;\">Tab</a>"; |
|
|
|
document.getElementById('div-helper-tabs').insertAdjacentHTML('beforebegin', tab); |
|
|
|
var newTab = document.getElementById("tab" + document.getElementById("tabs").value); |
|
|
|
newTab.addEventListener("click", function (e) { |
|
|
|
selectTabLocalEvent(e); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
/* END INIT METHODS ACCESSIBLE BY DOCUMENT */ |
|
|
|
|
|
|
|
|
|
|
|
/* BEGIN LOCAL EVENTS */ |
|
|
|
function loginLocalEvent(name, password) { |
|
|
|
let xmlrequest = new XMLHttpRequest(); |
|
|
|
xmlrequest.open("POST", "/"); |
|
|
|
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); |
|
|
|
xmlrequest.send("type=login&name=" + name + "&password=" + password); |
|
|
|
xmlrequest.onload = function () { |
|
|
|
console.log(xmlrequest.response); // not prod |
|
|
|
loginResponseLocalEvent(xmlrequest.response); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function saveLocalEvent(name, password, text) { |
|
|
|
let xmlrequest = new XMLHttpRequest(); |
|
|
|
xmlrequest.open("POST", "/"); |
|
|
|
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); |
|
|
|
xmlrequest.send("name=" + name + "&password=" + password + "&text=" + text); // not prod |
|
|
|
xmlrequest.onload = function () // not prod |
|
|
|
{ |
|
|
|
console.log(xmlrequest.response);// not prod |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function loginResponseEvent(response) { |
|
|
|
function loginResponseLocalEvent(response) { |
|
|
|
let label_name = document.getElementById("label-name"); |
|
|
|
let label_password = document.getElementById("label-password"); |
|
|
|
label_name.style.display = "none"; |
|
|
@@ -104,88 +186,48 @@ function loginResponseEvent(response) { |
|
|
|
} else if (responseJson.DOCUMENT_TYPE === "DECRYPT_SUCCESS") { |
|
|
|
sessionStorage.setItem(responseJson.DUNGEON.name, document.getElementById("password").value); |
|
|
|
initEmptyForm(); |
|
|
|
initPopulateForm(responseJson); |
|
|
|
populateFormLocalEvent(responseJson); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function initEmptyForm() { |
|
|
|
document.getElementById("name").value = ""; |
|
|
|
document.getElementById("password").value = ""; |
|
|
|
document.getElementById("textarea").value = ""; |
|
|
|
document.getElementById("name-form").value = ""; |
|
|
|
document.getElementById("password-form").value = ""; |
|
|
|
document.getElementById("name-form").disabled = false; |
|
|
|
document.getElementById("btn-settings").style.display = "none"; |
|
|
|
document.getElementById("btn-logout").style.display = "none"; |
|
|
|
document.getElementById("password-form").style.display = "inherit"; |
|
|
|
document.getElementById("div-logo").style.display = "none"; |
|
|
|
document.getElementById("div-login-parent").style.display = "none"; |
|
|
|
document.getElementById("textarea").rows = window.innerHeight / 24; |
|
|
|
document.getElementById("page-form-menu").style.display = "inherit"; |
|
|
|
document.getElementById("page-form").style.display = "inherit"; |
|
|
|
} |
|
|
|
|
|
|
|
function initPopulateForm(responseJson) { |
|
|
|
function populateFormLocalEvent(responseJson) { |
|
|
|
|
|
|
|
document.getElementById("name-form").value = responseJson.DUNGEON.name; |
|
|
|
document.getElementById("name-form").disabled = "true"; |
|
|
|
document.getElementById("password-form").style.display = "none"; |
|
|
|
document.getElementById("btn-logout").style.display = "initial"; |
|
|
|
document.getElementById("btn-logout").style.display = "inherit"; |
|
|
|
document.getElementById("btn-settings").style.display = "inherit"; |
|
|
|
document.getElementById("textarea").value = responseJson.DUNGEON.cleartext; |
|
|
|
// TODO Tab Information |
|
|
|
} |
|
|
|
|
|
|
|
function saveEvent() { |
|
|
|
// TODO Validate Save. |
|
|
|
function organizeSaveLocalEvent(name, password, text) { |
|
|
|
// TODO Organize Tabs |
|
|
|
|
|
|
|
let name = document.getElementById("name-form").value; |
|
|
|
let text = document.getElementById("textarea").value; |
|
|
|
let password; |
|
|
|
|
|
|
|
if (document.getElementById("password-form").value === "") // existing user |
|
|
|
password = sessionStorage.getItem(name); |
|
|
|
else { |
|
|
|
password = document.getElementById("password-form").value; |
|
|
|
sessionStorage.setItem(name, password); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
initSave(name, password, text); |
|
|
|
|
|
|
|
saveLocalEvent(name, password, text); |
|
|
|
document.getElementById("name-form").disabled = true; |
|
|
|
document.getElementById("password-form").style.display = "none"; |
|
|
|
document.getElementById("btn-logout").style.display = "initial"; // TODO Logout adds padding? |
|
|
|
document.getElementById("btn-logout").style.display = "inherit"; |
|
|
|
document.getElementById("btn-settings").style.display = "inherit"; |
|
|
|
|
|
|
|
// TODO Notify |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function initAboutPage() { |
|
|
|
function selectTabLocalEvent(e) { //TODO also pass curr selected tab |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function logoutEvent() { |
|
|
|
sessionStorage.clear(); |
|
|
|
document.getElementById("page-form-menu").style.display = "none"; |
|
|
|
document.getElementById("page-form").style.display = "none"; |
|
|
|
document.getElementById("div-logo").style.display = "inherit"; |
|
|
|
document.getElementById("div-login-parent").style.display = "inherit"; |
|
|
|
} |
|
|
|
|
|
|
|
/* END LOCAL EVENTS */ |
|
|
|
|
|
|
|
function passwordResetEvent() { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function deleteEvent() { |
|
|
|
let xmlrequest = new XMLHttpRequest(); |
|
|
|
xmlrequest.open("POST", "/"); |
|
|
|
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); |
|
|
|
xmlrequest.send("name=" + document.getElementById("name-form").value + "&password=" + sessionStorage.getItem(document.getElementById("name-form").value) + "&delete=" + "true"); |
|
|
|
logoutEvent(); |
|
|
|
/* BEGIN UTILITIES */ |
|
|
|
function blinkUtil(el, freq, rounds, color1, color2) { |
|
|
|
let state = false; |
|
|
|
let currRound = 0; |
|
|
|
let interval = setInterval(function () { |
|
|
|
if (currRound === rounds) clearInterval(interval); |
|
|
|
state = !state; |
|
|
|
el.style.backgroundColor = (state ? color1 : color2); |
|
|
|
currRound++; |
|
|
|
}, 1000 * freq); |
|
|
|
} |
|
|
|
|
|
|
|
/* END UTILITIES */ |