Added comments and formatted code.

2021-07-22 07:01:28 -07:00 · 2021-07-22 07:01:28 -07:00 · 7e6c2db6d2
commit 7e6c2db6d2
parent 213a7e565d
7 changed files with 121 additions and 93 deletions
--- a/login.html
+++ b/login.html
@ -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>
--- a/login.js
+++ b/login.js
@ -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();
-    
-    if (loginInfo.status === "ok") {
-      login()
-    } else {
-      incorrectLogin()
-    }
+const cookies = document.cookie //TEMP
+
+// 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
--- a/loginchange.html
+++ b/loginchange.html
@ -36,6 +36,6 @@

        <script src="loginchange.js"></script>

-        <div id="incorrect"></div>
+        <div id="errormessage"></div>
    </body>
 </html>
--- a/loginchange.js
+++ b/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")
 }
--- a/register.html
+++ b/register.html
@ -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>

--- a/register.js
+++ b/register.js
@ -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
-    }
-    
-    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.`
+      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")
 }

--- a/style.css
+++ b/style.css
@ -21,11 +21,7 @@ form {
    width: 20%;
 }

-#taken {
-    padding-top: 1%;
-}
-
-#incorrect {
+#errormessage {
    padding-top: 1%;
 }