erin
/
lila-chat
1
0
Fork 0
Code Issues 10 Pull Requests Projects 2 Releases Wiki Activity

Frontend: fixed formatting, added comments, fixed bugs.

pull/5/head
Luna 2021-07-22 10:36:48 -07:00
parent 2e4fdc99b4
commit 64459e93f5
7 changed files with 124 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/login.html
View File

@ -29,8 +29,8 @@
<script src="login.js"></script> <script src="login.js"></script>
<div id="incorrect"></div> <div id="errormessage"></div>
<h2>You are logged in as <span id="username"></span></h2> <span id="username"></span>
</body> </body>
</html> </html>

56
frontend/login.js
View File

@ -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) { //SETTING VARIABLES. GRABBING CONTENTS FROM FORM.
event.preventDefault();
const formData = new FormData(form);
uname = formData.get('uname'); let uname = document.querySelector('#uname').value;
pin = formData.get('pin'); let pin = document.querySelector('#pin').value;
const form = document.querySelector('form');
const response = await fetch(`/api/users/${uname}/${pin}`); // SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API.
const loginInfo = await response.json();
form.addEventListener("submit", async function (event) {
if (loginInfo.status === "ok") { event.preventDefault();
login() const formData = new FormData(form);
} else {
incorrectLogin() 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() { function login() {
console.log('You have logged in!') console.log('You have logged in!')
document.querySelector("#username").innerHTML = `${uname}` document.querySelector("#username").innerHTML = `${uname}`
document.querySelector("#incorrect").innerHTML = '' document.querySelector("#errormessage").innerHTML = ''
localStorage.setItem("username", `${uname}`);
} }
function incorrectLogin() { function incorrectLogin() {
console.log('Incorrect Login!') console.log('Incorrect Login!')
document.querySelector("#incorrect").innerHTML = 'Incorrect Login.' document.querySelector("#errormessage").innerHTML = 'Incorrect Login.'
} }

2
frontend/loginchange.html
View File

@ -36,6 +36,6 @@
<script src="loginchange.js"></script> <script src="loginchange.js"></script>
<div id="incorrect"></div> <div id="errormessage"></div>
</body> </body>
</html> </html>

84
frontend/loginchange.js
View File

@ -1,50 +1,64 @@
//SETTING VARIABLES. GRABBING ELEMENT VALUES FROM FORM.
let uname = document.querySelector('#uname').value; 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 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 selected = document.querySelector('#selected').value;
// let custom = document.querySelector('#custom').value; // let custom = document.querySelector('#custom').value;
// let pronouns = '' // let pronouns = ''
let responseText;
const form = document.querySelector('form');
form.addEventListener("submit", async function(event) { //FORM SUMBIT FUNCTION & GET THE USERS USERNAME AND SEE IF IT IS CORRECT.
event.preventDefault();
const formData = new FormData(form);
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 !== '') { form.addEventListener("submit", async function (event) {
// pronouns = custom event.preventDefault();
// } else { const formData = new FormData(form);
// pronouns = selected
// }
if (newUname === '') { uname = formData.get('uname');
newUname = uname pin = formData.get('pin');
} newUname = formData.get('newuname');
if (newPin === '') { newPin = formData.get('newpin');
newPin = pin
} //TODO
// selected = formData.get('selected');
try { // custom = formData.get('custom')
// if (custom !== '') {
// pronouns = custom
// } else {
// pronouns = selected
// }
if (newUname === '') {
newUname = uname
}
if (newPin === '') {
newPin = pin
}
try {
const userNotFound = await getUname(); const userNotFound = await getUname();
if (userNotFound.status == `fail`) { if (userNotFound.status === 'fail') {
document.querySelector("#incorrect").innerHTML = `user ${uname} was not found` document.querySelector("#errormessage").innerHTML = `user ${uname} was not found`
} else { } else {
loginChange() loginChange()
} }
} catch { } catch {
document.querySelector("#incorrect").innerHTML = 'An Error has Occurred. Try again later.' 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() { async function getUname() {
let response = await fetch(`/api/users/${uname}`); let response = await fetch(`/api/users/${uname}`);
responseJson = await response.json(); responseJson = await response.json();
@ -52,12 +66,12 @@ async function getUname() {
} }
async function loginChange() { 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', method: 'POST',
headers: { headers: {
}, },
body: "" body: ""
}); });
document.querySelector("#incorrect").innerHTML = 'Login Changed!' document.querySelector("#errormessage").innerHTML = 'Login Changed!'
window.location.replace("/login.html") window.location.replace("/login.html")
} }

4
frontend/register.html
View File

@ -28,7 +28,7 @@
<option value="she.her">she/her</option> <option value="she.her">she/her</option>
<option value="he.him">he/him</option> <option value="he.him">he/him</option>
<option value="they.them">they/them</option> <option value="they.them">they/them</option>
<option value="it.its">it</option> <option value="it.its">it/its</option>
<option value="fae.faer">fae/faer</option> <option value="fae.faer">fae/faer</option>
</select> </select>
@ -43,7 +43,7 @@
</form> </form>
</div> </div>
<div id="taken"></div> <div id="errormessage"></div>
<script src="register.js"></script> <script src="register.js"></script>

68
frontend/register.js
View File

@ -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 selected = document.querySelector('#selected').value;
let custom = document.querySelector('#custom').value; let custom = document.querySelector('#custom').value;
let pronouns = '' let pronouns = ''
let responseText; let responseText;
const form = document.querySelector('form'); // grabbing an element on the page const form = document.querySelector('form');
form.addEventListener("submit", async function(event) { //SUBMIT FUNCTION &CHECKING IF USERNAME IS TAKEN
event.preventDefault();
const formData = new FormData(form);
uname = formData.get('uname'); form.addEventListener("submit", async function (event) {
pin = formData.get('pin'); event.preventDefault();
selected = formData.get('selected'); const formData = new FormData(form);
custom = formData.get('custom')
if (custom !== '') { uname = formData.get('uname');
pronouns = custom pin = formData.get('pin');
} else { selected = formData.get('selected');
pronouns = selected custom = formData.get('custom')
}
if (custom !== '') {
try { pronouns = custom
} else {
pronouns = selected
}
try {
const isTaken = await getUname(); const isTaken = await getUname();
if (isTaken === `User ${uname}`) { if (isTaken.status === "fail") {
console.log("This username is taken.")
document.querySelector("#taken").innerHTML = `${uname} is already taken.`
} else {
register() register()
} else {
document.querySelector("#errormessage").innerHTML = `${uname} is already taken.`
} }
} catch { } catch {
document.querySelector("#taken").innerHTML = 'An Error has Occurred. Try again later.' 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() { async function getUname() {
let response = await fetch(`$/api/users/${uname}`); let response = await fetch(`/api/users/${uname}`);
responseText = await response.text(); responseJson = await response.json();
return responseText; return responseJson;
} }
async function register() { 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', method: 'POST',
headers: { headers: {
}, },
body: "" body: ""
}); });
document.querySelector("#taken").innerHTML = 'Registered!' document.querySelector("#errormessage").innerHTML = 'Registered!'
window.location.replace("/login.html") window.location.replace("/login.html")
} }

6
frontend/style.css
View File

@ -21,11 +21,7 @@ form {
width: 20%; width: 20%;
} }
#taken { #errormessage {
padding-top: 1%;
}
#incorrect {
padding-top: 1%; padding-top: 1%;
} }