clearer login and register errors

see #41
This commit is contained in:
Mystikfluu 2022-10-23 09:14:49 +02:00
parent 01f2888252
commit ea43f26954
4 changed files with 73 additions and 31 deletions

20
js/login.js Normal file
View File

@ -0,0 +1,20 @@
async function login() {
let r = (await post("/login",{
user: document.getElementById("user").value,
pass: document.getElementById("pass").value
}))
if(!r.url.endsWith("/user")) {
document.getElementById("pass").value = ""
console.error("login failed")
alert("Login failed, please make sure you have the right password")
return;
}
window.location = "/user"
}
let passfield = document.getElementById("pass")
function passkeydown(e) {
if(e.code == "Enter") {
login()
}
}

37
js/register.js Normal file
View File

@ -0,0 +1,37 @@
async function register() {
if(document.getElementById("pass").value.length < 10) {
alert("Password has to be at least 10 characters long")
return;
}
if(document.getElementById("user").value.length > 25) {
alert("Username is too long!")
return;
}
if(document.getElementById("user").value.search("@") != -1) {
alert("User cannot contain '@' character!")
return;
}
let r = (await post("/register",{
user: document.getElementById("user").value,
pass: document.getElementById("pass").value
}))
console.log(r)
if(!r.url.endsWith("/user?success=true")) {
if(r.url.endsWith("already_exists")) {
alert("An account with that name already exists! Did you mean to login?")
return
}
//fallback
document.getElementById("pass").value = ""
console.error("registration failed")
alert("Registration failed")
return;
}
window.location = "/user"
}
function passkeydown(e) {
if(e.code == "Enter") {
register()
}
}

View File

@ -4,15 +4,9 @@
<%- newrelic %> <%- newrelic %>
<link rel="stylesheet" href="/css/logon.css"> <link rel="stylesheet" href="/css/logon.css">
<script src="/js/warn_message.js" charset="utf-8"></script> <script src="/js/warn_message.js" charset="utf-8"></script>
<script type="text/javascript">
function login() {
const pw = document.getElementById("pass").value
localStorage.setItem("decryption_key",pw)
//yes I know this is not secure, but at this point I think it'd be better to trust the client for end-to-end encryption
}
</script>
<script src="/js/addnavbar.js" charset="utf-8"></script> <script src="/js/addnavbar.js" charset="utf-8"></script>
<link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="/css/global.css">
<script> <%- httppostjs %> </script>
</head> </head>
<body> <body>
@ -20,22 +14,25 @@
<h1>Login</h1> <h1>Login</h1>
</header> </header>
<main> <main>
<form id="login_form" class="form_class" action="login" method="post"> <div id="login_form" class="form_class">
<div class="form_div"> <div class="form_div">
<label>Username:</label> <label>Username:</label>
<input id="user" class="field_class" name="user" type="text" placeholder="username" autofocus required> <input id="user" class="field_class" name="user" type="text" placeholder="username" autofocus required>
<label>Password:</label> <label>Password:</label>
<input id="pass" class="field_class" name="pass" type="password" placeholder="password" required> <input id="pass" class="field_class" name="pass" type="password" placeholder="password" required onkeydown="passkeydown(event)">
<button class="submit_class" type="submit" form="login_form" onclick="return login()">Login</button> <button class="submit_class" type="submit" form="login_form" onclick="login()">Login</button>
</div> </div>
<div class="info_div"> <div class="info_div">
<p>Do you not have an account? <a href="register">Register now!</a></p> <p>Do you not have an account? <a href="register">Register now!</a></p>
</div> </div>
</form> </div>
</main> </main>
<footer> <footer>
</footer> </footer>
<script>
<%- loadfile("./js/login.js") %>
</script>
</body> </body>
</html> </html>

View File

@ -4,46 +4,34 @@
<%- newrelic %> <%- newrelic %>
<link rel="stylesheet" href="/css/logon.css"> <link rel="stylesheet" href="/css/logon.css">
<script src="/js/warn_message.js" charset="utf-8"></script> <script src="/js/warn_message.js" charset="utf-8"></script>
<script type="text/javascript">
function register() {
const pw = document.getElementById("pass").value
localStorage.setItem("decryption_key",pw)
//yes I know this is not secure, but at this point I think it'd be better to trust the client for end-to-end encryption
}
const input = document.getElementById('pass');
input.addEventListener('input', () => {
if (input.value.length < 10) {
input.style.borderColor = 'red';
return;
}
input.style.borderColor = 'green';
});
</script>
<script src="/js/addnavbar.js" charset="utf-8"></script> <script src="/js/addnavbar.js" charset="utf-8"></script>
<link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="/css/global.css">
<script> <%- httppostjs %> </script>
</head> </head>
<body> <body>
<header> <header>
<h1>Register</h1> <h1>Register</h1>
</header> </header>
<main> <main>
<form id="register_form" class="form_class" action="register" method="post"> <div id="register_form" class="form_class" action="register" method="post">
<div class="form_div"> <div class="form_div">
<label>Username:</label> <label>Username:</label>
<input id="user" class="field_class" name="user" type="text" placeholder="username" autofocus required> <input id="user" class="field_class" name="user" type="text" placeholder="username" autofocus required>
<label>Password:</label> <label>Password:</label>
<input id="pass" class="field_class" name="pass" type="password" placeholder="password" required> <input id="pass" class="field_class" name="pass" type="password" placeholder="password" required onkeydown="passkeydown(event)">
<button class="submit_class" type="submit" form="register_form" onclick="return register()">register</button> <button class="submit_class" type="submit" form="register_form" onclick="register()">register</button>
</div> </div>
<div class="info_div"> <div class="info_div">
<p>Do you already have an account? <a href="/login">Login now!</a></p> <p>Do you already have an account? <a href="/login">Login now!</a></p>
</div> </div>
</form> </div>
</main> </main>
<footer> <footer>
</footer> </footer>
<script>
<%- loadfile("./js/register.js") %>
</script>
</body> </body>
</html> </html>