Browse Source

form page 85%

master
RENOX 5 months ago
parent
commit
a62481ba9d
3 changed files with 138 additions and 67 deletions
  1. +15
    -0
      src/main/java/planetrenox/controller/FormController.java
  2. +28
    -27
      src/main/resources/static/index.html
  3. +95
    -40
      src/main/resources/static/js/post.js

+ 15
- 0
src/main/java/planetrenox/controller/FormController.java View File

@@ -5,6 +5,7 @@ import org.springframework.web.bind.annotation.*;
import planetrenox.encryption.AES256_GCM;
import planetrenox.mongodb.Dungeon;
import planetrenox.mongodb.DungeonRepository;

import java.util.Map;

@RestController
@@ -87,4 +88,18 @@ public class FormController
}
}
}

@PostMapping(path = "/", params = {"name", "password", "delete"})
public void delete(@RequestParam("name") String name, @RequestParam("password") String password)
{
Dungeon dungeon = repository.findByNameIgnoreCase(name);
if (dungeon != null)
{
dungeon.setCleartext(AES256_GCM.decrypt(dungeon.getEncryptionData(), password));
if (dungeon.getCleartext() != null)
{
repository.deleteById(dungeon.getId());
}
}
}
}

+ 28
- 27
src/main/resources/static/index.html View File

@@ -8,12 +8,7 @@
<title>Text Dungeon</title>
<link rel="stylesheet" type="text/css" href="/webjars/Semantic-UI/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>src = "/webjars/Semantic-UI/2.4.1/semantic.min.js"</script>

<script>src="/webjars/Semantic-UI/2.4.1/semantic.min.js"</script>
</head>

<body>
@@ -33,7 +28,7 @@
<div class="ui basic segment">
<!-- seg -->
<div class="ui large inverted vertical pointing menu" style="background: transparent;">
<a class="active item">
<a class="active item" onclick="loginEvent();">
<span style="color: #007373; font-weight: bold;">Enter</span>
</a>
<a class="item" onclick="initEmptyForm();">
@@ -51,7 +46,6 @@

<div id="label-name" class="ui left pointing label"
style="position: fixed; display: none;">

</div>
<br>
<input id="password" type="password" name="password" placeholder="Password">
@@ -67,53 +61,59 @@

<!-- FORM PAGE -->

<div id="page-form-menu" class="ui inverted attached stackable menu" style="display: none; background-color: #0f2229">
<div id="page-form-menu" class="ui inverted attached stackable menu" style="display: none; background-color: #152e38">
<div class="ui container">

<a class="item">
<a id="btn-save" class="item" onclick="saveEvent();">
<i class="save icon"></i> Save
</a>
<div class="ui simple dropdown item">
<div id="btn-settings" class="ui simple dropdown item" style="display: none;">
Settings
<i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="key icon"></i> Change Password</a>
<a class="item"><i class="trash icon"></i> Delete</a>
</div></div>
<a id="btn-resetpass" class="item" onclick="passwordResetEvent();"><i class="key icon"></i> Reset
Password</a>
<a id="btn-delete" class="item" onclick="deleteEvent();"><i class="trash icon"></i> Delete</a>
</div>
</div>

<div class="right item">

<div class="ui input"><input type="text" placeholder="Name"></div>
<div class="ui input"><input id="name-form" type="text" placeholder="Name"
style="background-color: whitesmoke"></div>

<a id="btn-logout" class="ui borderless item" onclick="logoutEvent();" style="display: none;">Logout</a>

<div class="ui input"><input id="password-form" type="password" placeholder="Password"
style="background-color: whitesmoke;" ></div>

<a class="ui item">
Logout
</a>
</div>
</div>
</div>



<div id="page-form" class="ui container" style="display: none">
<div id="page-form" class="ui container" style="display: none;">
<!-- tab container -->
<div class="ui inverted top attached tabular menu">
<a class="active item">
Active Project
<div class="ui inverted top attached tabular menu" style="margin-top: 1%;">
<a class="active item" style="border: none;">
Title
</a>
<a class="item" style="color: aliceblue; background-color: #005151;">
<!-- tabs
<a class="item" style="color: aliceblue; background-color: #224d5d;">
Project #2
</a>
-->
<div class="right menu">
<a class="item">
<i class="add icon"></i> New Tab
</a>
</div>
</div>
<div class="ui bottom attached segment" style="background-color: #1b1c1d;">
<!-- tab segment -->
<div class="ui bottom attached segment" style="background-color: whitesmoke;">
<!-- form segment -->
<div class="ui form">
<div class="field">
<textarea id="textarea" style="background-color: #1b1f23; color: ghostwhite"></textarea>
<textarea id="textarea" style="background-color: whitesmoke; color: black;border: none;"></textarea>
</div>
</div>
</div>
@@ -121,6 +121,7 @@

</div>


<script src="js/post.js"></script>
<script src="js/filmgrain.js"></script>
</body>


+ 95
- 40
src/main/resources/static/js/post.js View File

@@ -2,19 +2,17 @@


// NAME FIELD
var input_name = document.getElementById("name");
input_name.addEventListener("keypress", function (e) {
document.getElementById("name").addEventListener("keypress", function (e) {
if (e.key === 'Enter') {
validateLogin();
validateLogin(document.getElementById("name").value, document.getElementById("password").value);
}
});


// PASSWORD FIELD
var input_password = document.getElementById("password");
input_password.addEventListener("keypress", function (e) {
document.getElementById("password").addEventListener("keypress", function (e) {
if (e.key === 'Enter') {
validateLogin();
validateLogin(document.getElementById("name").value, document.getElementById("password").value);
}
});

@@ -24,15 +22,8 @@ var btn_login = document.getElementById("btn-login");
btn_login.addEventListener("click", validateLogin); // not prod


// SAVE BUTTON
var btn_save = document.getElementById("btn-save");
btn_save.addEventListener("click", btnSaveEvent); // not prod


// LOGIN EVENT
function loginEvent() {
let name = input_name.value;
let password = input_password.value;
function loginEvent(name, password) {
let xmlrequest = new XMLHttpRequest();
xmlrequest.open("POST", "/");
xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
@@ -44,45 +35,41 @@ function loginEvent() {
}


// SAVE EVENT
function btnSaveEvent() {
let name = input_name.value; // not prod
let password = input_password.value; // not prod
let text = document.getElementById("textarea").value;
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);
xmlrequest.send("name=" + name + "&password=" + password + "&text=" + text); // not prod
xmlrequest.onload = function () // not prod
{
console.log(xmlrequest.response) // not prod
console.log(xmlrequest.response);// not prod
}
}


// VALIDATE LOGIN
function validateLogin() {
function validateLogin(name, password) {
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 (input_name.value === "") {
if (name === "") {
label_name.textContent = "Empty.";
label_name.style.display = "initial";
} else if (input_password.value === "") {
} else if (password === "") {
label_password.textContent = "Empty.";
label_password.style.display = "initial";
} else if (input_name.value.length > 60) {
} else if (name.length > 60) {
label_name.textContent = "Name too long.";
label_name.style.display = "initial";
} else if (input_password.value.length > 128) {
} else if (password.length > 128) {
label_password.textContent = "Password can be at most 128 chars.";
label_password.style.display = "initial";
} else if (input_name.value.match("[ !*'();:@&=+$,/?%#\\[\\]\\\\<>^\"{}.~`]")) {
} else if (name.match("[ !*'();:@&=+$,/?%#\\[\\]\\\\<>^\"{}.~`]")) {
label_name.textContent = "Illegal Character.";
label_name.style.display = "initial";
} else {
loginEvent();
loginEvent(name, password);
}
}

@@ -112,25 +99,93 @@ function loginResponseEvent(response) {
} else if (responseJson.DOCUMENT_TYPE === "DECRYPT_FAILURE") {
label_password.textContent = "Incorrect.";
label_password.style.display = "initial";
} else if (responseJson.DOCUMENT_TYPE === "NEW_USER" || responseJson.DOCUMENT_TYPE === "DECRYPT_SUCCESS") {
} else if (responseJson.DOCUMENT_TYPE === "NEW_USER") {
initEmptyForm();
} else if (responseJson.DOCUMENT_TYPE === "DECRYPT_SUCCESS") {
sessionStorage.setItem(responseJson.DUNGEON.name, document.getElementById("password").value);
initEmptyForm();
initPopulateForm(responseJson);
}
}


function initEmptyForm() {
let div_logo = document.getElementById("div-logo");
let div_login = document.getElementById("div-login-parent");
let page_form_menu = document.getElementById("page-form-menu");
let page_form = document.getElementById("page-form");
div_logo.style.display = "none";
div_login.style.display = "none";
document.getElementById("textarea").rows = window.innerHeight/24;
page_form_menu.style.display = "inherit";
page_form.style.display = "inherit";
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) {

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-settings").style.display = "inherit";
document.getElementById("textarea").value = responseJson.DUNGEON.cleartext;
// TODO Tab Information
}

function saveEvent() {
// TODO Validate Save.
// 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);

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-settings").style.display = "inherit";

// TODO Notify
}


function initAboutPage() {

}

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";
}


function initAboutPage(){
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();
}

}

Loading…
Cancel
Save