Browse Source

login page 95%

master
RENOX 3 months ago
parent
commit
97f50713bc
4 changed files with 158 additions and 64 deletions
  1. +9
    -9
      src/main/java/planetrenox/controller/RequestValidation.java
  2. +5
    -0
      src/main/resources/static/css/style.css
  3. +50
    -43
      src/main/resources/static/index.html
  4. +94
    -12
      src/main/resources/static/js/post.js

+ 9
- 9
src/main/java/planetrenox/controller/RequestValidation.java View File

@@ -9,7 +9,7 @@ public class RequestValidation
{
private RequestValidation(){}

private static final Pattern ILLEGAL_NAME_PATTERN = Pattern.compile("[ !*'();:@&=+$,/?%#\\[\\]\\\\<>^\"{}~`]");
private static final Pattern ILLEGAL_NAME_PATTERN = Pattern.compile("[ !*'();:@&=+$,/?%#\\[\\]\\\\<>^\"{}.~`]");

public static Map<String, Object> validateLogin(String name, String password)
{
@@ -17,8 +17,8 @@ public class RequestValidation
"DOCUMENT_TYPE", "VALIDATION_FAILED",
"INVALID", false,
"EMPTY", false,
"NAME_LENGTH>60", false,
"PASS_LENGTH>128", false,
"NAME_LENGTH_OVER60", false,
"PASS_LENGTH_OVER128", false,
"ILLEGAL_CHAR", false,
"CLEAN_NAME", ""
));
@@ -28,12 +28,12 @@ public class RequestValidation
if (name.length()>60)
{
loginDocument.put("INVALID", true);
loginDocument.put("NAME_LENGTH>60", true);
loginDocument.put("NAME_LENGTH_OVER60", true);
}
if(password.length()>128)
{
loginDocument.put("INVALID", true);
loginDocument.put("PASS_LENGTH>128", true);
loginDocument.put("PASS_LENGTH_OVER128", true);
}
if (name.equals("") || password.equals(""))
{
@@ -55,8 +55,8 @@ public class RequestValidation
"DOCUMENT_TYPE", "VALIDATION_FAILED",
"INVALID", false,
"EMPTY", false,
"NAME_LENGTH>60", false,
"PASS_LENGTH>128", false,
"NAME_LENGTH_OVER60", false,
"PASS_LENGTH_OVER128", false,
"ILLEGAL_CHAR", false,
"CLEAN_NAME", "",
"CLEAN_TEXT", ""
@@ -68,12 +68,12 @@ public class RequestValidation
if (name.length()>60)
{
saveDocument.put("INVALID", true);
saveDocument.put("NAME_LENGTH>60", true);
saveDocument.put("NAME_LENGTH_OVER60", true);
}
if(password.length()>128)
{
saveDocument.put("INVALID", true);
saveDocument.put("PASS_LENGTH>128", true);
saveDocument.put("PASS_LENGTH_OVER128", true);
}
if (name.equals("") || password.equals("") || text.equals(""))
{


+ 5
- 0
src/main/resources/static/css/style.css View File

@@ -52,6 +52,11 @@ body
margin-top: 33%;
}

#label-name
{

}

/* filmgrain.js dep */
#canvas
{


+ 50
- 43
src/main/resources/static/index.html View File

@@ -18,61 +18,68 @@
<script src="webjars/uikit/dist/js/uikit.min.js"></script>
<script src="webjars/uikit/dist/js/uikit-icons.min.js"></script>-->

</head>
</head>

<body>
<body>

<!-- filmgrain.js dep -->
<canvas id="canvas"></canvas>
<!-- filmgrain.js dep -->
<canvas id="canvas"></canvas>

<!-- logo -->
<div class="ui center aligned container">
<img id="img-logo" src="imgs/logo.png" alt="logo">
</div>
<!-- logo -->
<div id="div-logo" class="ui center aligned container">
<img id="img-logo" src="imgs/logo.png" alt="logo">
</div>

<!-- login -->
<div class="ui center aligned container">
<div id="div-login" class="ui center aligned container basic segment" >
<div class="ui left attached rail">
<div class="ui basic segment">
<!-- seg -->
<div class="ui large inverted vertical pointing menu" style="background: transparent;">
<a class="active item">
<span style="color: #007373; font-weight: bold;">Enter</span>
</a>
<a class="item">
<span style="color: #005151;">Create</span>
</a>
<a class="item">
<span style="color: #005151;">About</span>
</a>
</div>
<!-- seg -->
<!-- login -->
<div id="div-login-parent" class="ui center aligned container">
<div id="div-login" class="ui center aligned container basic segment">
<div class="ui left attached rail">
<div class="ui basic segment">
<!-- seg -->
<div class="ui large inverted vertical pointing menu" style="background: transparent;">
<a class="active item">
<span style="color: #007373; font-weight: bold;">Enter</span>
</a>
<a class="item">
<span style="color: #005151;">Create</span>
</a>
<a class="item">
<span style="color: #005151;">About</span>
</a>
</div>
<!-- seg -->
</div>
<input id="name" type="text" name="name" placeholder="Name">
<br>
<input id="password" type="password" name="password" placeholder="Password">
<br>
<input id="btn-login" type="button">
</div>
</div>

<input id="name" type="text" name="name" placeholder="Name">

<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">
<div id="label-password" class="ui left pointing label"
style="position: fixed; display: none;">

</div>
<br>
<input id="btn-login" type="button">
</div>
</div>


<!--
<div>
<textarea id="textarea" rows="4" cols="50"></textarea>
<br>
<input id="btn-save" type="button">
</div>
-->
<!--
<div>
<textarea id="textarea" rows="4" cols="50"></textarea>
<br>
<input id="btn-save" type="button">
</div>
-->


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

</html>
</html>

+ 94
- 12
src/main/resources/static/js/post.js View File

@@ -1,33 +1,54 @@
"use strict";


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


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


// LOGIN BUTTON
var btn_login = document.getElementById("btn-login");
btn_login.addEventListener("click", btnLoginEvent);
btn_login.addEventListener("click", validateLogin); // not prod


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


// LOGIN EVENT
function btnLoginEvent(e)
{
let name = document.getElementById("name").value;
let password = document.getElementById("password").value;
function loginEvent() {
let name = input_name.value;
let password = input_password.value;
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 () // not prod
xmlrequest.onload = function ()
{
console.log(xmlrequest.response);
console.log(xmlrequest.response); // not prod
loginResponseEvent(xmlrequest.response);
}
}


// SAVE EVENT
function btnSaveEvent(e)
{
let name = document.getElementById("name").value; // not prod
let password = document.getElementById("password").value; // not prod
function btnSaveEvent() {
let name = input_name.value; // not prod
let password = input_password.value; // not prod
let text = document.getElementById("textarea").value;
let xmlrequest = new XMLHttpRequest();
xmlrequest.open("POST", "/");
@@ -38,3 +59,64 @@ function btnSaveEvent(e)
console.log(xmlrequest.response)
}
}


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


function loginResponseEvent(response) {
let label_name = document.getElementById("label-name");
let label_password = document.getElementById("label-password");
label_name.style.display = "none";
label_password.style.display = "none";
let responseJson = JSON.parse(response);
if (responseJson.DOCUMENT_TYPE === "VALIDATION_FAILED") {
if (responseJson.ILLEGAL_CHAR === true) {
label_name.textContent = "Illegal Character.";
label_name.style.display = "initial";
} else if (responseJson.NAME_LENGTH_OVER60 === true) {
label_name.textContent = "Name too long.";
label_name.style.display = "initial";
} else if (responseJson.EMPTY === true) {
label_name.textContent = "Empty?";
label_name.style.display = "initial";
label_password.textContent = "Empty?";
label_password.style.display = "initial";
} else if (responseJson.PASS_LENGTH_OVER128 === true) {
label_password.textContent = "Password can be at most 128 chars.";
label_password.style.display = "initial";
}
} 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") {
console.log("da");
let div_logo = document.getElementById("div-logo");
div_logo.style.visibility = "hidden"; // display none or ??????
// WIP
}
}

Loading…
Cancel
Save