diff options
Diffstat (limited to 'code/index.tmpl.html')
| -rw-r--r-- | code/index.tmpl.html | 162 |
1 files changed, 140 insertions, 22 deletions
diff --git a/code/index.tmpl.html b/code/index.tmpl.html index f60ecf6..4c392bb 100644 --- a/code/index.tmpl.html +++ b/code/index.tmpl.html @@ -11,6 +11,8 @@ The `global_all_data` object has all the data necessary for the application to w TODO(luca): Get rid of PicoCSS, because it does not make a good responsive UI. +TODO(luca): Check error messages maybe sending too much information. (e.g., "invalid person" can be bruteforced to find the person's names) + --> {{ end }} @@ -74,6 +76,27 @@ textarea { } } +div#pin-login { + margin: 2em 5em 0em 5em; + display: flex; + justify-content: center; + align-items: center; +} +div#pin-login > input { + display: flex; + flex: 5; +} +button#pin-login-button { + display: flex; + flex: 1; +} +div.pin-text-container { + display: flex; + align-items: center; +} +div.pin-text-container > span { +} + </style> <script> "use strict"; @@ -113,7 +136,21 @@ function findPersonByName(picking_person_name) { //- Pages function setPageChoose() { + let pinLoginNameID = "pin-login-name"; + let pinLoginCodeID = "pin-login-code"; + let pinLoginButtonID = "pin-login-button"; + document.body.innerHTML = ` + <div id="pin-login"> + <form> + <fieldset role="group"> + <input id="${pinLoginNameID}" type="text" placeholder="Nom"> + <input id="${pinLoginCodeID}" type="text" placeholder="Code"> + <input id="${pinLoginButtonID}" type="submit" value="connecter"> + </fieldset> + </form> + </div> + <div class="centered"> <div class="container"> <h1>Qui es-tu?</h1> @@ -191,6 +228,51 @@ function setPageChoose() { }); // button click even listener } // has_picked } // for loop + + let login_button = document.getElementById(pinLoginButtonID); + login_button.addEventListener("click", function(event) { + event.preventDefault(); + + let name = document.getElementById(pinLoginNameID).value; + let code = document.getElementById(pinLoginCodeID).value; + console.log("name:", name); + console.log("code:", code); + + let messageBody = { + name: name, + code: code + }; + const postBody = new URLSearchParams(messageBody).toString(); + + fetch('/api/pin/', { + method: 'POST', + headers: + { + 'Content-Type': 'application/x-www-form-urlencoded' + }, + body: postBody, + }) + .then(function(response) { + if (!response.ok) { + console.error('Network response was not ok'); + } + return response.json(); + }) + .then(function(response) { + global_all_data.token = response.Token; + global_all_data.thisName = name; + global_all_data.thisWishlist = response.ThisWishlist; + global_all_data.otherName = response.OtherName; + global_all_data.otherWishlist = response.OtherWishlist; + global_all_data.initialized = true; + + localStorage.setItem(local_storage_key, JSON.stringify(global_all_data)); + + setPageThisPerson(); + }) + .catch(function(error) { console.error(error); }); + }); + } function setPageOtherPerson() { @@ -218,7 +300,7 @@ function setPageOtherPerson() { }); let wishlist = document.getElementById(wishlistID); - wishlist.textContent = global_all_data.otherWishlist; + wishlist.value = global_all_data.otherWishlist; fetch(`/api/list/?user=${global_all_data.thisName}&name=${global_all_data.otherName}&token=${global_all_data.token}`) .then(function(response) { @@ -228,10 +310,10 @@ function setPageOtherPerson() { return response.text(); }) .then(function(response) { - if(wishlist.textContent != response) + if(wishlist.value != response) { global_all_data.otherWishlist = response; - wishlist.textContent = response; + wishlist.value = response; localStorage.setItem(local_storage_key, JSON.stringify(global_all_data)); } }) @@ -243,7 +325,9 @@ function setPageOtherPerson() { function setPageThisPerson() { let showPersonButtonID = "show-person"; - let writeLetterButtonID = "write-letter"; + let wishlistButtonID = "write-wishlist"; + let getPinButtonID = "get-pin"; + let pinTextID = "pin-text"; document.body.innerHTML = ` <div class="centered"> @@ -251,7 +335,11 @@ function setPageThisPerson() { <h1>Noël-An de <span class="name">${global_all_data.thisName}</span></h1> <div class="buttons"> <button id="${showPersonButtonID}">Voir qui j'ai choisi</button> - <button id="${writeLetterButtonID}">Ma liste des souhaits</button> + <button id="${wishlistButtonID}">Ma liste des souhaits</button> + <button id="${getPinButtonID}">Code PIN</button> + <div class="pin-text-container"> + <span id="${pinTextID}"></span> + </div> </div> <h4><b>Infos:</b></h4> <ul> @@ -264,6 +352,26 @@ function setPageThisPerson() { </div> `; + let getPinButton = document.getElementById(getPinButtonID); + getPinButton.addEventListener("click", function(event) { + event.preventDefault(); + + fetch(`/api/pin/?name=${global_all_data.thisName}&token=${global_all_data.token}`) + .then(function(response) { + if (!response.ok) { + console.error('Network response was not ok'); + } + return response.text(); + }) + .then(function(text_response) { + let pinText = document.getElementById(pinTextID); + pinText.innerText = text_response; + }) + .catch(function(error) { + console.error('There was a problem with the fetch operation:', error); + }); + }); + let showPersonButton = document.getElementById(showPersonButtonID); showPersonButton.addEventListener("click", function(event) { event.preventDefault(); @@ -271,23 +379,23 @@ function setPageThisPerson() { setPageOtherPerson(); }); - let writeLetterButton = document.getElementById(writeLetterButtonID); - writeLetterButton.addEventListener("click", function(event) { + let writeWishlistButton = document.getElementById(wishlistButtonID); + writeWishlistButton.addEventListener("click", async function(event) { event.preventDefault(); history.pushState({home: "/"}, "", "/"); - let sendLetterButtonID = "send-letter"; - let letterTextAreaID = "letter-text"; + let sendWishlistButtonID = "send-wishlist"; + let wishlistTextAreaID = "wishlist-text"; let backButtonID = "back"; document.body.innerHTML = ` <div class="container"> <h1><span class="name">Ma</span> liste des souhaits</h1> - <textarea id="${letterTextAreaID}" rows="15" cols="40" placeholder="Vide..."></textarea> + <textarea id="${wishlistTextAreaID}" rows="15" cols="40" placeholder="Vide..."></textarea> <div class="buttons"> <button id="${backButtonID}">retour</button> - <button id="${sendLetterButtonID}">sauvegarder</button> + <button id="${sendWishlistButtonID}">sauvegarder</button> </div> </div> `; @@ -299,10 +407,10 @@ function setPageThisPerson() { setPageThisPerson(); }); - let letterTextArea = document.getElementById(letterTextAreaID); - letterTextArea.textContent = global_all_data.thisWishlist; + let wishlist = document.getElementById(wishlistTextAreaID); + wishlist.value = global_all_data.thisWishlist; - fetch(`/api/list/?user=${global_all_data.thisName}&name=${global_all_data.thisName}&token=${global_all_data.token}`) + await fetch(`/api/list/?user=${global_all_data.thisName}&name=${global_all_data.thisName}&token=${global_all_data.token}`) .then(function(response) { if (!response.ok) { console.error('Network response was not ok'); @@ -310,10 +418,18 @@ function setPageThisPerson() { return response.text(); }) .then(function(response) { - if(wishlist.textContent != response) + {{ if false }} + console.log("response:", response); + console.log(typeof(response)); + console.log("wishlist.value:", wishlist.value); + console.log(typeof(wishlist.value)); + console.log("wishlist.value === response:", wishlist.value === response); + {{ end }} + + if(wishlist.value !== response) { global_all_data.thisWishlist = response; - letterTextArea.textContent = response; + wishlist.value = response; localStorage.setItem(local_storage_key, JSON.stringify(global_all_data)); } }) @@ -321,20 +437,22 @@ function setPageThisPerson() { console.error('There was a problem with the fetch operation:', error); }); - - let sendLetterButton = document.getElementById(sendLetterButtonID); - sendLetterButton.addEventListener("click", function(event) { + let sendWishlistButton = document.getElementById(sendWishlistButtonID); + sendWishlistButton.addEventListener("click", function(event) { event.preventDefault(); + {{ if false }} console.log("Sending list of", global_all_data.thisName); + console.log("content:", wishlist.value); + {{ end }} - global_all_data.thisWishlist = letterTextArea.value + global_all_data.thisWishlist = wishlist.value; localStorage.setItem(local_storage_key, JSON.stringify(global_all_data)); let messageBody = { name: global_all_data.thisName, token: global_all_data.token, - text: letterTextArea.value, + text: wishlist.value, }; const postBody = new URLSearchParams(messageBody).toString(); @@ -362,7 +480,7 @@ function setPageThisPerson() { .catch(function(error) { console.error('Error:', error); }); }); // add event listener send button - }); // add event listener write letter + }); // add event listener write wishlist } //- Main |