Frontend now makes use of server responses
This commit is contained in:
		
							parent
							
								
									ba03ae8a6c
								
							
						
					
					
						commit
						48443d7d39
					
				
					 2 changed files with 70 additions and 27 deletions
				
			
		
							
								
								
									
										38
									
								
								register.js
									
									
									
									
									
								
							
							
						
						
									
										38
									
								
								register.js
									
									
									
									
									
								
							|  | @ -20,39 +20,61 @@ form.addEventListener("submit", async function (event) { | ||||||
|   custom = formData.get('custom') |   custom = formData.get('custom') | ||||||
| 
 | 
 | ||||||
|   if (custom === '' && selected === 'none') { |   if (custom === '' && selected === 'none') { | ||||||
|     newPronouns = '' |     pronouns = '' | ||||||
|   } else if (custom !== '') { |   } else if (custom !== '') { | ||||||
|     newPronouns = custom |     pronouns = custom | ||||||
|   } else { |   } else { | ||||||
|     newPronouns = selected |     pronouns = selected | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|  | 
 | ||||||
|  |   //IF THE API SUCCESSFULLY REGISTERS A USER THEN DO THIS
 | ||||||
|  |   try { | ||||||
|  |     const regRes = await isUnameTaken(); | ||||||
|  | 
 | ||||||
|  |     if (regRes == null) { | ||||||
|  |       return; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     if (regRes.status === 'ok') { | ||||||
|  |       document.querySelector("#errormessage").innerHTML = 'Registered!' | ||||||
|  |       window.location.replace("/login.html") | ||||||
|  |     } else { | ||||||
|  |       document.querySelector("#errormessage").innerHTML = 'Failed to register. Try again later.' | ||||||
|  |     } | ||||||
|  |   } catch (e) { | ||||||
|  |     console.log(e); | ||||||
|  |     document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later. ' + e.toString(); | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  | }) | ||||||
|  | 
 | ||||||
| //CHECKS IF A USERNAME IS TAKEN
 | //CHECKS IF A USERNAME IS TAKEN
 | ||||||
|  | async function isUnameTaken() { | ||||||
| 
 | 
 | ||||||
|   const response = await fetch(`api/users/${uname}/`); |   const response = await fetch(`api/users/${uname}/`); | ||||||
|   const isTaken = await response.json(); |   const isTaken = await response.json(); | ||||||
| 
 | 
 | ||||||
|   //YES THIS IS CONFUSING I KNOW.
 |   //YES THIS IS CONFUSING I KNOW.
 | ||||||
|   if (isTaken.status === "fail") { |   if (isTaken.status === "fail") { | ||||||
|     register() |     return await register() | ||||||
|   } else { |   } else { | ||||||
|     document.querySelector('#errormessage').innerHTML = `${uname} is already taken.` |     document.querySelector('#errormessage').innerHTML = `${uname} is already taken.` | ||||||
|   } |   } | ||||||
| }) | } | ||||||
| 
 | 
 | ||||||
| //FETCH FUNCTIONS. GETTING USERNAME FROM API & REGISTERING USER ASSIGNED NAME AND PIN. 
 | //FETCH FUNCTIONS. GETTING USERNAME FROM API & REGISTERING USER ASSIGNED NAME AND PIN. 
 | ||||||
| 
 | 
 | ||||||
| async function register() { | async function register() { | ||||||
|   let sendRegisterInfo = { "name": uname, "pin": pin, "pronouns": pronouns } |   let sendRegisterInfo = { "name": uname, "pin": pin, "pronouns": pronouns } | ||||||
|   fetch('/api/register/', { |   const response = await fetch('/api/register/', { | ||||||
|     method: 'POST', |     method: 'POST', | ||||||
|     headers: { |     headers: { | ||||||
|       'Content-Type': 'application/json', |       'Content-Type': 'application/json', | ||||||
|     }, |     }, | ||||||
|     body: JSON.stringify(sendRegisterInfo), |     body: JSON.stringify(sendRegisterInfo), | ||||||
|   }); |   }); | ||||||
|   document.querySelector("#errormessage").innerHTML = 'Registered!' |   return await response.json() | ||||||
|   window.location.replace("/login.html") |  | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| // function errorMessage() {
 | // function errorMessage() {
 | ||||||
|  |  | ||||||
|  | @ -36,17 +36,7 @@ form.addEventListener("submit", async function (event) { | ||||||
|     newPronouns = selected |     newPronouns = selected | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   //CHECKS IF A USERNAME IS TAKEN
 |   unameCheck() | ||||||
|   if (newUname !== '') { |  | ||||||
|     const response = await fetch(`api/users/${newUname}/`); |  | ||||||
|     const isTaken = await response.json(); |  | ||||||
| 
 |  | ||||||
|     if (isTaken.status === "ok") { |  | ||||||
|       document.querySelector('#errormessage').innerHTML = `${newUname} is already taken.` |  | ||||||
|       return; |  | ||||||
|     } else { |  | ||||||
|     } |  | ||||||
|   } |  | ||||||
| 
 | 
 | ||||||
|   //CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME
 |   //CHECKS IF THE USER IS CHANGING MORE THAN ONE TEXT FIELD AT A TIME
 | ||||||
|   if (newUname !== '' && newPin !== '') { |   if (newUname !== '' && newPin !== '') { | ||||||
|  | @ -81,16 +71,48 @@ form.addEventListener("submit", async function (event) { | ||||||
|   } else { |   } else { | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   loginStatus() | 
 | ||||||
|  |   //IF THE API SUCCESSFULLY UPDATES INFO FOR A USER THEN DO THIS
 | ||||||
|  |   try { | ||||||
|  |     const updateResponse = await loginStatus(); | ||||||
|  | 
 | ||||||
|  |     if (updateResponse == null) { | ||||||
|  |       return; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     if (updateResponse.status === 'ok') { | ||||||
|  |       document.querySelector("#errormessage").innerHTML = 'Login Changed!' | ||||||
|  |       window.location.replace("/login.html") | ||||||
|  |     } else { | ||||||
|  |       document.querySelector("#errormessage").innerHTML = 'Failed to update info. Try again later.' | ||||||
|  |     } | ||||||
|  |   } catch (e) { | ||||||
|  |     console.log(e); | ||||||
|  |     document.querySelector("#errormessage").innerHTML = 'An Error has Occurred. Try again later. ' + e.toString(); | ||||||
|  |   } | ||||||
| 
 | 
 | ||||||
| }) | }) | ||||||
| 
 | 
 | ||||||
|  |   //CHECKS IF A USERNAME IS TAKEN
 | ||||||
|  |   async function unameCheck(){ | ||||||
|  |   if (newUname !== '') { | ||||||
|  |     const response = await fetch(`api/users/${newUname}/`); | ||||||
|  |     const isTaken = await response.json(); | ||||||
|  | 
 | ||||||
|  |     if (isTaken.status === "ok") { | ||||||
|  |       document.querySelector('#errormessage').innerHTML = `${newUname} is already taken.` | ||||||
|  |       return; | ||||||
|  |     } else { | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
| //CHECKS IF THE LOGIN IS A SUCCESS
 | //CHECKS IF THE LOGIN IS A SUCCESS
 | ||||||
| async function loginStatus() { | async function loginStatus() { | ||||||
|   const loginInfo = await checkLoginInfo(); |   const loginInfo = await checkLoginInfo(); | ||||||
| 
 | 
 | ||||||
|   if (loginInfo.status === 'ok') { |   if (loginInfo.status === 'ok') { | ||||||
|     updateInfo() |     return await updateInfo() | ||||||
|   } else { |   } else { | ||||||
|     incorrectLogin() |     incorrectLogin() | ||||||
|   } |   } | ||||||
|  | @ -116,15 +138,14 @@ async function checkLoginInfo() { | ||||||
| 
 | 
 | ||||||
| async function updateInfo() { | async function updateInfo() { | ||||||
|   let sendUpdateInfo = { "name": uname, "pin": pin, "changed_event": updateEvent, "new_event": newEvent } |   let sendUpdateInfo = { "name": uname, "pin": pin, "changed_event": updateEvent, "new_event": newEvent } | ||||||
|   fetch('/api/change', { |   const response = await fetch('/api/change', { | ||||||
|     method: 'POST', |     method: 'POST', | ||||||
|     headers: { |     headers: { | ||||||
|       'Content-Type': 'application/json', |       'Content-Type': 'application/json', | ||||||
|     }, |     }, | ||||||
|     body: JSON.stringify(sendUpdateInfo), |     body: JSON.stringify(sendUpdateInfo), | ||||||
|   }); |   }); | ||||||
|   document.querySelector("#errormessage").innerHTML = 'Login Changed!' |   return await response.json() | ||||||
|   //window.location.replace("/login.html")
 |  | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function incorrectLogin() { | function incorrectLogin() { | ||||||
|  |  | ||||||
		Loading…
	
		Reference in a new issue