From 64459e93f51ccae36bd3e5efb1c079351c7928eb Mon Sep 17 00:00:00 2001 From: Luna Date: Thu, 22 Jul 2021 10:36:48 -0700 Subject: [PATCH] Frontend: fixed formatting, added comments, fixed bugs. --- frontend/login.html | 4 +- frontend/login.js | 56 +++++++++++++++----------- frontend/loginchange.html | 2 +- frontend/loginchange.js | 84 +++++++++++++++++++++++---------------- frontend/register.html | 4 +- frontend/register.js | 68 ++++++++++++++++--------------- frontend/style.css | 6 +-- 7 files changed, 124 insertions(+), 100 deletions(-) diff --git a/frontend/login.html b/frontend/login.html index 8df89f8..6915897 100644 --- a/frontend/login.html +++ b/frontend/login.html @@ -29,8 +29,8 @@ -
+
-

You are logged in as

+ diff --git a/frontend/login.js b/frontend/login.js index 2a905d3..e8af605 100644 --- a/frontend/login.js +++ b/frontend/login.js @@ -1,32 +1,40 @@ -let uname = document.querySelector('#uname').value; // grabbing the username submitted and putting it in the variable uname -let pin = document.querySelector('#pin').value; // grabbing the pin submitted and putting it in the variable pin -const form = document.querySelector('form'); // grabbing an element on the page -form.addEventListener("submit", async function(event) { - event.preventDefault(); - const formData = new FormData(form); +//SETTING VARIABLES. GRABBING CONTENTS FROM FORM. - uname = formData.get('uname'); - pin = formData.get('pin'); +let uname = document.querySelector('#uname').value; +let pin = document.querySelector('#pin').value; +const form = document.querySelector('form'); - const response = await fetch(`/api/users/${uname}/${pin}`); - const loginInfo = await response.json(); - - if (loginInfo.status === "ok") { - login() - } else { - incorrectLogin() - } +// SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API. + +form.addEventListener("submit", async function (event) { + event.preventDefault(); + const formData = new FormData(form); + + uname = formData.get('uname'); + pin = formData.get('pin'); + + const response = await fetch(`/api/users/${uname}/${pin}`); + const loginInfo = await response.json(); + + if (loginInfo.status === "ok") { + login() + } else { + incorrectLogin() + } }) + +// FUNCTIONS FOR WHETHER THE LOGIN WAS A SUCCESS OR FAILURE + function login() { - console.log('You have logged in!') - document.querySelector("#username").innerHTML = `${uname}` - document.querySelector("#incorrect").innerHTML = '' + console.log('You have logged in!') + document.querySelector("#username").innerHTML = `${uname}` + document.querySelector("#errormessage").innerHTML = '' + localStorage.setItem("username", `${uname}`); } - + function incorrectLogin() { - console.log('Incorrect Login!') - document.querySelector("#incorrect").innerHTML = 'Incorrect Login.' -} - \ No newline at end of file + console.log('Incorrect Login!') + document.querySelector("#errormessage").innerHTML = 'Incorrect Login.' +} \ No newline at end of file diff --git a/frontend/loginchange.html b/frontend/loginchange.html index 74f4d1a..3fbf4c1 100644 --- a/frontend/loginchange.html +++ b/frontend/loginchange.html @@ -36,6 +36,6 @@ -
+
diff --git a/frontend/loginchange.js b/frontend/loginchange.js index 6f792f0..1fc0941 100644 --- a/frontend/loginchange.js +++ b/frontend/loginchange.js @@ -1,50 +1,64 @@ + +//SETTING VARIABLES. GRABBING ELEMENT VALUES FROM FORM. + let uname = document.querySelector('#uname').value; -let pin = document.querySelector('#pin').value; +let pin = document.querySelector('#pin').value; let newUname = document.querySelector('#newuname').value; -let newPin = document.querySelector('#newpin').value; +let newPin = document.querySelector('#newpin').value; +const form = document.querySelector('form'); +let responseText; + + +//TODO // let selected = document.querySelector('#selected').value; // let custom = document.querySelector('#custom').value; // let pronouns = '' -let responseText; -const form = document.querySelector('form'); -form.addEventListener("submit", async function(event) { - event.preventDefault(); - const formData = new FormData(form); +//FORM SUMBIT FUNCTION & GET THE USERS USERNAME AND SEE IF IT IS CORRECT. - uname = formData.get('uname'); - pin = formData.get('pin'); - newUname = formData.get('newuname'); - newPin = formData.get('newpin'); - // selected = formData.get('selected'); - // custom = formData.get('custom') - // if (custom !== '') { - // pronouns = custom - // } else { - // pronouns = selected - // } +form.addEventListener("submit", async function (event) { + event.preventDefault(); + const formData = new FormData(form); - if (newUname === '') { - newUname = uname - } - if (newPin === '') { - newPin = pin - } - - try { + uname = formData.get('uname'); + pin = formData.get('pin'); + newUname = formData.get('newuname'); + newPin = formData.get('newpin'); + + //TODO + // selected = formData.get('selected'); + // custom = formData.get('custom') + + // if (custom !== '') { + // pronouns = custom + // } else { + // pronouns = selected + // } + + if (newUname === '') { + newUname = uname + } + if (newPin === '') { + newPin = pin + } + + try { const userNotFound = await getUname(); - if (userNotFound.status == `fail`) { - document.querySelector("#incorrect").innerHTML = `user ${uname} was not found` + if (userNotFound.status === 'fail') { + document.querySelector("#errormessage").innerHTML = `user ${uname} was not found` } else { loginChange() } - } catch { - document.querySelector("#incorrect").innerHTML = 'An Error has Occurred. Try again later.' - } + } catch { + document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later.' + } }) + +//FETCH FUNTIONS. FETCHING USERNAME FROM API AND SUBMITTING NEW PIN AND USERNAME TO API. + async function getUname() { let response = await fetch(`/api/users/${uname}`); responseJson = await response.json(); @@ -52,12 +66,12 @@ async function getUname() { } async function loginChange() { -const rawResponse = await fetch(`/api/users/change/${uname}/${pin}/${newUname}/${newPin}`, { + const rawResponse = await fetch(`/api/users/change/${uname}/${pin}/${newUname}/${newPin}`, { method: 'POST', headers: { }, body: "" -}); -document.querySelector("#incorrect").innerHTML = 'Login Changed!' -window.location.replace("/login.html") + }); + document.querySelector("#errormessage").innerHTML = 'Login Changed!' + window.location.replace("/login.html") } diff --git a/frontend/register.html b/frontend/register.html index c24d683..66b3201 100644 --- a/frontend/register.html +++ b/frontend/register.html @@ -28,7 +28,7 @@ - + @@ -43,7 +43,7 @@ -
+
diff --git a/frontend/register.js b/frontend/register.js index 2fde99e..dea709f 100644 --- a/frontend/register.js +++ b/frontend/register.js @@ -1,54 +1,60 @@ -let uname = document.querySelector('#uname').value; // grabbing the username submitted and putting it in the variable uname -let pin = document.querySelector('#pin').value; // grabbing the pin submitted and putting it in the variable pin + +//DECLARING VARIABLES AND GRABBING VALUES FROM FORM. + +let uname = document.querySelector('#uname').value; +let pin = document.querySelector('#pin').value; let selected = document.querySelector('#selected').value; let custom = document.querySelector('#custom').value; let pronouns = '' let responseText; -const form = document.querySelector('form'); // grabbing an element on the page +const form = document.querySelector('form'); -form.addEventListener("submit", async function(event) { - event.preventDefault(); - const formData = new FormData(form); +//SUBMIT FUNCTION &CHECKING IF USERNAME IS TAKEN - uname = formData.get('uname'); - pin = formData.get('pin'); - selected = formData.get('selected'); - custom = formData.get('custom') +form.addEventListener("submit", async function (event) { + event.preventDefault(); + const formData = new FormData(form); - if (custom !== '') { - pronouns = custom - } else { - pronouns = selected - } - - try { + uname = formData.get('uname'); + pin = formData.get('pin'); + selected = formData.get('selected'); + custom = formData.get('custom') + + if (custom !== '') { + pronouns = custom + } else { + pronouns = selected + } + + try { const isTaken = await getUname(); - if (isTaken === `User ${uname}`) { - console.log("This username is taken.") - document.querySelector("#taken").innerHTML = `${uname} is already taken.` - } else { + if (isTaken.status === "fail") { register() + } else { + document.querySelector("#errormessage").innerHTML = `${uname} is already taken.` } - } catch { - document.querySelector("#taken").innerHTML = 'An Error has Occurred. Try again later.' - } + } catch { + document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later.' + } }) +//FETCH FUNCTIONS. GETTING USERNAME FROM API & REGISTERING USER ASSIGNED NAME AND PIN. + async function getUname() { - let response = await fetch(`$/api/users/${uname}`); - responseText = await response.text(); - return responseText; + let response = await fetch(`/api/users/${uname}`); + responseJson = await response.json(); + return responseJson; } async function register() { -const rawResponse = await fetch(`/api/register/${uname.toString().toLowerCase()}/${pin.toString()}/${pronouns.toString().toLowerCase().replace("/", ".")}`, { + const rawResponse = await fetch(`/api/register/${uname.toString().toLowerCase()}/${pin.toString()}/${pronouns.toString().toLowerCase().replace("/", ".")}`, { method: 'POST', headers: { }, body: "" -}); -document.querySelector("#taken").innerHTML = 'Registered!' -window.location.replace("/login.html") + }); + document.querySelector("#errormessage").innerHTML = 'Registered!' + window.location.replace("/login.html") } diff --git a/frontend/style.css b/frontend/style.css index aba18d7..1ea339f 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -21,11 +21,7 @@ form { width: 20%; } -#taken { - padding-top: 1%; -} - -#incorrect { +#errormessage { padding-top: 1%; }