Clean up JavaScript code and make it more reliable

Update version
This commit is contained in:
Michał Gdula 2023-03-30 15:51:06 +00:00
parent 95a116ef50
commit c2e42e7179
14 changed files with 446 additions and 365 deletions

View file

@ -1,14 +1,43 @@
// Function to show login
function showLogin() {
// Create elements
cancelBtn = document.createElement('button');
cancelBtn.classList.add('btn-block');
cancelBtn.innerHTML = 'nuuuuuuuu';
cancelBtn.onclick = popupDissmiss;
loginBtn = document.createElement('button');
loginBtn.classList.add('btn-block');
loginBtn.classList.add('primary');
loginBtn.innerHTML = 'Login';
loginBtn.type = 'submit';
loginBtn.setAttribute('form', 'loginForm');
// Create form
loginForm = document.createElement('form');
loginForm.id = 'loginForm';
loginForm.setAttribute('onsubmit', 'return login(event);');
usernameInput = document.createElement('input');
usernameInput.classList.add('input-block');
usernameInput.type = 'text';
usernameInput.placeholder = 'Namey';
usernameInput.id = 'username';
passwordInput = document.createElement('input');
passwordInput.classList.add('input-block');
passwordInput.type = 'password';
passwordInput.placeholder = 'Passywassy';
passwordInput.id = 'password';
loginForm.appendChild(usernameInput);
loginForm.appendChild(passwordInput);
popUpShow(
'Login!',
'Need an account? <span class="link" onclick="showRegister()">Register!</span>',
'<button class="btn-block" onclick="popupDissmiss()">Cancelee</button>' +
'<button class="btn-block primary" form="loginForm" type="submit">Login</button>',
'<form id="loginForm" onsubmit="return login(event)">' +
'<input class="input-block" type="text" placeholder="Namey" id="username"/>' +
'<input class="input-block" type="password" placeholder="Passywassy" id="password"/>' +
'</form>'
loginForm,
[cancelBtn, loginBtn]
);
}
// Function to login
@ -29,16 +58,13 @@ function login(event) {
formData.append("username", formUsername);
formData.append("password", formPassword);
$.ajax({
url: '/auth/login',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (response) {
fetch('/auth/login', {
method: 'POST',
body: formData
}).then(response => {
if (response.status === 200) {
location.reload();
},
error: function (response) {
} else {
switch (response.status) {
case 500:
addNotification('Server exploded, F\'s in chat', 2);
@ -51,25 +77,68 @@ function login(event) {
break;
}
}
}).catch(error => {
addNotification('Error logging in, blame someone', 2);
});
}
// Function to show register
function showRegister() {
// Create buttons
cancelBtn = document.createElement('button');
cancelBtn.classList.add('btn-block');
cancelBtn.innerHTML = 'nuuuuuuuu';
cancelBtn.onclick = popupDissmiss;
registerBtn = document.createElement('button');
registerBtn.classList.add('btn-block');
registerBtn.classList.add('primary');
registerBtn.innerHTML = 'Register';
registerBtn.type = 'submit';
registerBtn.setAttribute('form', 'registerForm');
// Create form
registerForm = document.createElement('form');
registerForm.id = 'registerForm';
registerForm.setAttribute('onsubmit', 'return register(event);');
usernameInput = document.createElement('input');
usernameInput.classList.add('input-block');
usernameInput.type = 'text';
usernameInput.placeholder = 'Namey';
usernameInput.id = 'username';
emailInput = document.createElement('input');
emailInput.classList.add('input-block');
emailInput.type = 'text';
emailInput.placeholder = 'E mail!';
emailInput.id = 'email';
passwordInput = document.createElement('input');
passwordInput.classList.add('input-block');
passwordInput.type = 'password';
passwordInput.placeholder = 'Passywassy';
passwordInput.id = 'password';
passwordInputRepeat = document.createElement('input');
passwordInputRepeat.classList.add('input-block');
passwordInputRepeat.type = 'password';
passwordInputRepeat.placeholder = 'Passywassy again!';
passwordInputRepeat.id = 'password-repeat';
registerForm.appendChild(usernameInput);
registerForm.appendChild(emailInput);
registerForm.appendChild(passwordInput);
registerForm.appendChild(passwordInputRepeat);
popUpShow(
'Who are you?',
'Already have an account? <span class="link" onclick="showLogin()">Login!</span>',
'<button class="btn-block" onclick="popupDissmiss()">Canceleee</button>\
<button class="btn-block primary" form="registerForm" type="submit">Register</button>',
'<form id="registerForm" onsubmit="return register(event)">\
<input class="input-block" type="text" placeholder="Namey" id="username"/>\
<input class="input-block" type="text" placeholder="E mail!" id="email"/>\
<input class="input-block" type="password" placeholder="Passywassy" id="password"/>\
<input class="input-block" type="password" placeholder="Passywassy again!" id="password-repeat"/>\
</form>'
registerForm,
[cancelBtn, registerBtn]
);
}
// Function to register
function register(obj) {
function register(event) {
// AJAX takes control of subby form
event.preventDefault();
@ -90,13 +159,12 @@ function register(obj) {
formData.append("password", formPassword);
formData.append("password-repeat", formPasswordRepeat);
$.ajax({
url: '/auth/register',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (response) {
// Send form to server
fetch('/auth/login', {
method: 'POST',
body: formData
}).then(response => {
if (response.status === 200) {
if (response === "gwa gwa") {
addNotification('Registered successfully! Now please login to continue', 1);
showLogin();
@ -105,19 +173,20 @@ function register(obj) {
addNotification(response[i], 2);
}
}
},
error: function (response) {
} else {
switch (response.status) {
case 500:
addNotification('Server exploded, F\'s in chat', 2);
break;
case 403:
addNotification('None but devils play past here...', 2);
addNotification('None but devils play past here... Wrong information', 2);
break;
default:
addNotification('Error logging in, blame someone', 2);
break;
}
}
}).catch(error => {
addNotification('Error logging in, blame someone', 2);
});
}