Fixed update info?
This commit is contained in:
		
							parent
							
								
									a7ab390b32
								
							
						
					
					
						commit
						e4496eecec
					
				
					 2 changed files with 179 additions and 0 deletions
				
			
		
							
								
								
									
										60
									
								
								updateinfo.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										60
									
								
								updateinfo.html
									
									
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,60 @@ | |||
| <!DOCTYPE html> | ||||
| <html> | ||||
| 
 | ||||
|     <head> | ||||
|         <title>Update Info</title> | ||||
|         <meta name="author" content="Luna"> | ||||
|         <meta name="description" content="Chat Login Change"> | ||||
|         <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||||
|         <meta charset="UTF-8"> | ||||
|         <link rel="stylesheet" href="style.css"> | ||||
|         <link rel="icon" href="/favicon.svg"> | ||||
|     </head> | ||||
| 
 | ||||
|     <body> | ||||
| 
 | ||||
|         <h1>Change username/pin/pronouns.</h1> | ||||
|         <p>(leave field blank if not changing)</p> | ||||
| 
 | ||||
|         <div id="box"> | ||||
|             <form autocomplete="off"> | ||||
|                 <label for="uname">Current Username:</label><br> | ||||
|                 <input type="text" id="uname" name="uname" required><br> | ||||
| 
 | ||||
|                 <label for="pin">Current Pin:</label><br> | ||||
|                 <input type="number" id="pin" name="pin" required><br><br> | ||||
| 
 | ||||
|                 <p>What are you changing?</p> | ||||
| 
 | ||||
|                 <label for="newuname">New Username:</label><br> | ||||
|                 <input type="text" id="newuname" name="newuname"><br> | ||||
| 
 | ||||
|                 <label for="newpin">New Pin:</label><br> | ||||
|                 <input type="number" id="newpin" name="newpin"><br><br> | ||||
| 
 | ||||
|                 <label for="selected">New pronouns:</label><br> | ||||
|                 <select id="selected" name="selected"> | ||||
|                     <option value="none"></option> | ||||
|                     <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/its</option> | ||||
|                     <option value="fae.faer">fae/faer</option> | ||||
|                   </select> | ||||
| 
 | ||||
|                   <p>Or.</p> | ||||
| 
 | ||||
|                   <label for="custom">Custom Pronouns:</label><br> | ||||
|                   <input type="text" id="custom" name="custom"> | ||||
| 
 | ||||
|                   <p>Format: pronoun/pronoun</p><br> | ||||
| 
 | ||||
|                 <input type="submit" value="Change"> | ||||
|               </form>  | ||||
|         </div> | ||||
| 
 | ||||
|         <script src="updateinfo.js"></script> | ||||
| 
 | ||||
|         <div id="errormessage"></div> | ||||
|     </body> | ||||
| </html> | ||||
							
								
								
									
										119
									
								
								updateinfo.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										119
									
								
								updateinfo.js
									
									
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,119 @@ | |||
| 
 | ||||
| //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 selected = document.querySelector('#selected').value; | ||||
| let custom = document.querySelector('#custom').value; | ||||
| let responseText; | ||||
| let updateEvent = '' | ||||
| let newEvent = '' | ||||
| let newPronouns = '' | ||||
| 
 | ||||
| //FORM SUMBIT FUNCTION & GET THE USERS USERNAME AND SEE IF IT IS CORRECT.
 | ||||
| 
 | ||||
| 
 | ||||
| form.addEventListener("submit", async function (event) { | ||||
|   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 === '' && selected === 'none') { | ||||
|     newPronouns = '' | ||||
|   } else if (custom !== '') { | ||||
|     newPronouns = custom | ||||
|   } else { | ||||
|     newPronouns = selected | ||||
|   } | ||||
| 
 | ||||
| //CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME
 | ||||
|   let onlyChangeOne = document.querySelector("#errormessage").innerHTML = 'You can only change one at a time!' | ||||
|   if (newUname !== '' && newPin !== '') { | ||||
|     onlyChangeOne | ||||
|   } else if (newUname !== '' && newPronouns !== '') { | ||||
|     onlyChangeOne | ||||
|   } else if (newPin !== '' && newPronouns !== '') { | ||||
|     onlyChangeOne | ||||
|   } else { | ||||
|     checkLoginInfo() | ||||
|   } | ||||
| 
 | ||||
| 
 | ||||
| // ASSIGNS VARIABLES TO BE SENT TO API
 | ||||
|   if (newUname === '' && newPin === '' && newPronouns !== '') { | ||||
|     newEvent = newPronouns | ||||
|     updateEvent = 'pronouns' | ||||
|   } else if (newUname === '' && newPronouns === '' && newPin !== '') { | ||||
|     newEvent = newPin | ||||
|     updateEvent = 'pin' | ||||
|   } else if (newPin === '' && newPronouns === '' && newUname !== '') { | ||||
|     newEvent = newUname | ||||
|     updateEvent = 'name' | ||||
|   } else if (newPin === '' && newUname === '' && newPronouns === '') { | ||||
|     document.querySelector("#errormessage").innerHTML = 'Please enter a new name, pin, or pronouns!' | ||||
|   } else { | ||||
|     checkLoginInfo() | ||||
|   } | ||||
| 
 | ||||
|   //CHECKS IF USERNAME IS TAKEN
 | ||||
|     const isTaken = await getUname(); | ||||
| 
 | ||||
|     if (isTaken.status === 'ok') { | ||||
|       document.querySelector("#errormessage").innerHTML = `username ${newUname} is already taken! ` | ||||
|     } | ||||
| }) | ||||
| 
 | ||||
| 
 | ||||
| // FETCH FUNTIONS. FETCHING USERNAME TO SEE IF ITS TAKEN.
 | ||||
| 
 | ||||
| async function getUname() { | ||||
|   let response = await fetch(`/api/users/${newUname}`); | ||||
|   responseJson = await response.json(); | ||||
|   return responseJson; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| //FETCH FUNCTION TO UPDATE USER INFO
 | ||||
| 
 | ||||
|   //TODO ADD CHECKING THE TOKEN with LOGIN IN IF STATEMENT
 | ||||
| //CHECKING IF THE USER CAN LOGIN WITH GIVEN CURRENT USERNAME AND PIN
 | ||||
| async function checkLoginInfo() { | ||||
|   const response = await fetch(`/api/users/${uname}/${pin}`); | ||||
|   const loginInfo = await response.json(); | ||||
| 
 | ||||
|   if (loginInfo.status === "ok") { | ||||
|     updateInfo() | ||||
|   } else { | ||||
|     incorrectLogin() | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| async function updateInfo() { | ||||
|   let sendUpdateInfo = { "name": uname, "pin": pin, "changed_event": updateEvent, "new_event": newEvent } | ||||
|   fetch('/api/users/change', { | ||||
|     method: 'POST', | ||||
|     headers: { | ||||
|       'Content-Type': 'application/json', | ||||
|     }, | ||||
|     body: JSON.stringify(sendUpdateInfo), | ||||
|   }); | ||||
|   //document.querySelector("#errormessage").innerHTML = 'Login Changed!'
 | ||||
|   //window.location.replace("/login.html")
 | ||||
| } | ||||
| 
 | ||||
| function incorrectLogin() { | ||||
|   document.querySelector("#errormessage").innerHTML = 'Username and pin combination do not match! Or user not found.' | ||||
| } | ||||
| 
 | ||||
| function errorMessage() { | ||||
|   document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later.' | ||||
| } | ||||
		Loading…
	
		Reference in a new issue