Frontend now makes use of server responses

main
Luna 2021-07-25 16:25:48 -07:00
parent ba03ae8a6c
commit 48443d7d39
2 changed files with 70 additions and 27 deletions

View File

@ -8,7 +8,7 @@ let custom = document.querySelector('#custom').value;
let pronouns = '' let pronouns = ''
const form = document.querySelector('form'); const form = document.querySelector('form');
//SUBMIT FUNCTION &CHECKING IF USERNAME IS TAKEN //SUBMIT FUNCTION & CHECKING IF USERNAME IS TAKEN
form.addEventListener("submit", async function (event) { form.addEventListener("submit", async function (event) {
event.preventDefault(); event.preventDefault();
@ -20,39 +20,61 @@ form.addEventListener("submit", async function (event) {
custom = formData.get('custom') custom = formData.get('custom')
if (custom === '' && selected === 'none') { if (custom === '' && selected === 'none') {
newPronouns = '' pronouns = ''
} else if (custom !== '') { } else if (custom !== '') {
newPronouns = custom pronouns = custom
} else { } else {
newPronouns = selected pronouns = selected
} }
//CHECKS IF A USERNAME IS TAKEN
//IF THE API SUCCESSFULLY REGISTERS A USER THEN DO THIS
try {
const regRes = await isUnameTaken();
if (regRes == null) {
return;
}
if (regRes.status === 'ok') {
document.querySelector("#errormessage").innerHTML = 'Registered!'
window.location.replace("/login.html")
} else {
document.querySelector("#errormessage").innerHTML = 'Failed to register. Try again later.'
}
} catch (e) {
console.log(e);
document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later. ' + e.toString();
}
})
//CHECKS IF A USERNAME IS TAKEN
async function isUnameTaken() {
const response = await fetch(`api/users/${uname}/`); const response = await fetch(`api/users/${uname}/`);
const isTaken = await response.json(); const isTaken = await response.json();
//YES THIS IS CONFUSING I KNOW. //YES THIS IS CONFUSING I KNOW.
if (isTaken.status === "fail") { if (isTaken.status === "fail") {
register() return await register()
} else { } else {
document.querySelector('#errormessage').innerHTML = `${uname} is already taken.` document.querySelector('#errormessage').innerHTML = `${uname} is already taken.`
} }
}) }
//FETCH FUNCTIONS. GETTING USERNAME FROM API & REGISTERING USER ASSIGNED NAME AND PIN. //FETCH FUNCTIONS. GETTING USERNAME FROM API & REGISTERING USER ASSIGNED NAME AND PIN.
async function register() { async function register() {
let sendRegisterInfo = { "name": uname, "pin": pin, "pronouns": pronouns } let sendRegisterInfo = { "name": uname, "pin": pin, "pronouns": pronouns }
fetch('/api/register/', { const response = await fetch('/api/register/', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify(sendRegisterInfo), body: JSON.stringify(sendRegisterInfo),
}); });
document.querySelector("#errormessage").innerHTML = 'Registered!' return await response.json()
window.location.replace("/login.html")
} }
// function errorMessage() { // function errorMessage() {

View File

@ -36,17 +36,7 @@ form.addEventListener("submit", async function (event) {
newPronouns = selected newPronouns = selected
} }
//CHECKS IF A USERNAME IS TAKEN unameCheck()
if (newUname !== '') {
const response = await fetch(`api/users/${newUname}/`);
const isTaken = await response.json();
if (isTaken.status === "ok") {
document.querySelector('#errormessage').innerHTML = `${newUname} is already taken.`
return;
} else {
}
}
//CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME //CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME
if (newUname !== '' && newPin !== '') { if (newUname !== '' && newPin !== '') {
@ -81,16 +71,48 @@ form.addEventListener("submit", async function (event) {
} else { } else {
} }
loginStatus()
//IF THE API SUCCESSFULLY UPDATES INFO FOR A USER THEN DO THIS
try {
const updateResponse = await loginStatus();
if (updateResponse == null) {
return;
}
if (updateResponse.status === 'ok') {
document.querySelector("#errormessage").innerHTML = 'Login Changed!'
window.location.replace("/login.html")
} else {
document.querySelector("#errormessage").innerHTML = 'Failed to update info. Try again later.'
}
} catch (e) {
console.log(e);
document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later. ' + e.toString();
}
}) })
//CHECKS IF A USERNAME IS TAKEN
async function unameCheck(){
if (newUname !== '') {
const response = await fetch(`api/users/${newUname}/`);
const isTaken = await response.json();
if (isTaken.status === "ok") {
document.querySelector('#errormessage').innerHTML = `${newUname} is already taken.`
return;
} else {
}
}
}
//CHECKS IF THE LOGIN IS A SUCCESS //CHECKS IF THE LOGIN IS A SUCCESS
async function loginStatus() { async function loginStatus() {
const loginInfo = await checkLoginInfo(); const loginInfo = await checkLoginInfo();
if (loginInfo.status === 'ok') { if (loginInfo.status === 'ok') {
updateInfo() return await updateInfo()
} else { } else {
incorrectLogin() incorrectLogin()
} }
@ -116,15 +138,14 @@ async function checkLoginInfo() {
async function updateInfo() { async function updateInfo() {
let sendUpdateInfo = { "name": uname, "pin": pin, "changed_event": updateEvent, "new_event": newEvent } let sendUpdateInfo = { "name": uname, "pin": pin, "changed_event": updateEvent, "new_event": newEvent }
fetch('/api/change', { const response = await fetch('/api/change', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify(sendUpdateInfo), body: JSON.stringify(sendUpdateInfo),
}); });
document.querySelector("#errormessage").innerHTML = 'Login Changed!' return await response.json()
//window.location.replace("/login.html")
} }
function incorrectLogin() { function incorrectLogin() {