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

Added comments and formatted code.

main
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> <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>

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) { //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}`); const cookies = document.cookie //TEMP
const loginInfo = await response.json();
if (loginInfo.status === "ok") { // SUBMIT FORM FUNCTION. AND FETCH USERNAME AND PIN FROM API.
login()
} else { form.addEventListener("submit", async function (event) {
incorrectLogin() 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() { 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 = ''
} }
function incorrectLogin() { function incorrectLogin() {
console.log('Incorrect Login!') console.log('Incorrect Login!')
document.querySelector("#incorrect").innerHTML = '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> <script src="loginchange.js"></script>
<div id="incorrect"></div> <div id="errormessage"></div>
</body> </body>
</html> </html>

78
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
}
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(); 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
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>

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 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')
}
try { if (custom !== '') {
pronouns = custom
} else {
pronouns = selected
}
try {
const isTaken = await getUname(); const isTaken = await getUname();
if (isTaken === `User ${uname}`) { if (isTaken === `User ${uname}`) {
console.log("This username is taken.") console.log("This username is taken.")
document.querySelector("#taken").innerHTML = `${uname} is already taken.` document.querySelector("#errormessage").innerHTML = `${uname} is already taken.`
} else { } else {
register() register()
} }
} 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(); responseText = await response.text();
@ -42,13 +49,13 @@ async function getUname() {
} }
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
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%;
} }