lunastella/lilachat-frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added comments and formatted code.

Browse source
This commit is contained in:
Luna 2021-07-22 07:01:28 -07:00
parent 213a7e565d
commit 7e6c2db6d2
7 changed files with 121 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
login.html
View file

@ -29,8 +29,8 @@
<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>
</html>

51
login.js
View file

@ -1,32 +1,43 @@
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();
const cookies = document.cookie //TEMP
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 = ''
}
function incorrectLogin() {
console.log('Incorrect Login!')
document.querySelector("#incorrect").innerHTML = 'Incorrect Login.'
console.log('Incorrect Login!')
document.querySelector("#errormessage").innerHTML = 'Incorrect Login.'
}
console.log(cookies) //TEMP

2
loginchange.html
View file

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

78
loginchange.js
View file

@ -1,50 +1,64 @@
//SETTING VARIABLES. GRABBING ELEMENT VALUES FROM FORM.
let uname = document.querySelector('#uname').value;
let pin = document.querySelector('#pin').value;
let newUname = document.querySelector('#newuname').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
}
uname = formData.get('uname');
pin = formData.get('pin');
newUname = formData.get('newuname');
newPin = formData.get('newpin');
try {
//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")
}

4
register.html
View file

@ -28,7 +28,7 @@
<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</option>
<option value="it.its">it/its</option>
<option value="fae.faer">fae/faer</option>
</select>
@ -43,7 +43,7 @@
</form>
</div>
<div id="taken"></div>
<div id="errormessage"></div>
<script src="register.js"></script>

55
register.js
View file

@ -1,40 +1,47 @@
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
}
uname = formData.get('uname');
pin = formData.get('pin');
selected = formData.get('selected');
custom = formData.get('custom')
try {
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.`
document.querySelector("#errormessage").innerHTML = `${uname} is already taken.`
} else {
register()
}
} 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();
@ -42,13 +49,13 @@ async function getUname() {
}
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")
}

6
style.css
View file

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