Frontend now makes use of server responses

implement-websockets
Luna 2021-07-25 16:32:31 -07:00
parent ebcda9b067
commit adb6d054dd
3 changed files with 76 additions and 33 deletions

View File

@ -24,12 +24,12 @@
<label for="selected">Pronouns:</label><br>
<select id="selected" name="selected">
<option value="nothing"></option>
<option value="she.her">she/her</option>
<option value="he.him">he/him</option>
<option value="they.them">they/them</option>
<option value="it.its">it/its</option>
<option value="fae.faer">fae/faer</option>
<option value="none"></option>
<option value="she/her">she/her</option>
<option value="he/him">he/him</option>
<option value="they/them">they/them</option>
<option value="it/its">it/its</option>
<option value="fae/faer">fae/faer</option>
</select>
<p>Or.</p>

View File

@ -8,7 +8,7 @@ let custom = document.querySelector('#custom').value;
let pronouns = ''
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) {
event.preventDefault();
@ -20,39 +20,61 @@ form.addEventListener("submit", async function (event) {
custom = formData.get('custom')
if (custom === '' && selected === 'none') {
newPronouns = ''
pronouns = ''
} else if (custom !== '') {
newPronouns = custom
pronouns = custom
} 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 isTaken = await response.json();
//YES THIS IS CONFUSING I KNOW.
if (isTaken.status === "fail") {
register()
return await register()
} else {
document.querySelector('#errormessage').innerHTML = `${uname} is already taken.`
}
})
}
//FETCH FUNCTIONS. GETTING USERNAME FROM API & REGISTERING USER ASSIGNED NAME AND PIN.
async function register() {
let sendRegisterInfo = { "name": uname, "pin": pin, "pronouns": pronouns }
fetch('/api/register/', {
const response = await fetch('/api/register/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(sendRegisterInfo),
});
document.querySelector("#errormessage").innerHTML = 'Registered!'
window.location.replace("/login.html")
return await response.json()
}
// function errorMessage() {

View File

@ -36,17 +36,7 @@ form.addEventListener("submit", async function (event) {
newPronouns = selected
}
//CHECKS IF A USERNAME IS TAKEN
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 {
}
}
unameCheck()
//CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME
if (newUname !== '' && newPin !== '') {
@ -80,17 +70,49 @@ form.addEventListener("submit", async function (event) {
return;
} 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
async function loginStatus() {
const loginInfo = await checkLoginInfo();
if (loginInfo.status === 'ok') {
updateInfo()
return await updateInfo()
} else {
incorrectLogin()
}
@ -116,15 +138,14 @@ async function checkLoginInfo() {
async function updateInfo() {
let sendUpdateInfo = { "name": uname, "pin": pin, "changed_event": updateEvent, "new_event": newEvent }
fetch('/api/change', {
const response = await fetch('/api/change', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(sendUpdateInfo),
});
document.querySelector("#errormessage").innerHTML = 'Login Changed!'
//window.location.replace("/login.html")
return await response.json()
}
function incorrectLogin() {