From 1cac115ab1e89eaf110b27e48caa271310cf2ade Mon Sep 17 00:00:00 2001
From: Tuure Kaunisto <tuure.kaunisto@gmail.com>
Date: Fri, 26 Jan 2024 00:06:01 +0200
Subject: [PATCH] Refactor setting inputs based on the url hash

---
 index.html | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 0062d36..caabf36 100644
--- a/index.html
+++ b/index.html
@@ -188,16 +188,26 @@ <h3>Availability for <span id="availability-participant"></span></h3>
             });
         }
 
+        function setInputValueFromUrl(input, value) {
+            // assign task in an XSS safe manner ( https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html#guideline-3-use-documentcreateelement-elementsetattributevalue-elementappendchild-and-similar-to-build-dynamic-interfaces )
+            input.value = decodeURIComponent(value);
+        }
+
+        function getUrlHashValues() {
+            const [urlParticipantString, urlTaskString] = location.hash.replace(/^#/, '').split('//');
+            return [
+                urlParticipantString ? urlParticipantString?.split('/') : undefined,
+                urlTaskString?.split('/')
+            ]
+        }
+
         function setInitialTasks() {
-            const [, urlTaskString] = location.hash.replace(/^#/, '').split('//');
+            const [, urlTasks] = getUrlHashValues();
             const taskPlaceholder = 'Task name';
-            if (urlTaskString) {
-                const urlTasks = urlTaskString.split('/');
-
+            if (urlTasks) {
                 [...urlTasks, ''].forEach(urlTask => {
                     const newInput = addInput(document.querySelector('#tasks'), '', taskPlaceholder, true);
-                    // assign task in an XSS safe manner ( https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html#guideline-3-use-documentcreateelement-elementsetattributevalue-elementappendchild-and-similar-to-build-dynamic-interfaces )
-                    newInput.value = decodeURIComponent(urlTask);
+                    setInputValueFromUrl(newInput, urlTask)
                 })
             } else {
                 ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', '']
@@ -206,18 +216,16 @@ <h3>Availability for <span id="availability-participant"></span></h3>
         }
 
         function setInitialParticipants() {
+            const [urlParticipants] = getUrlHashValues();
             const participantPlaceholder = 'Participant name';
 
-            if (location.hash) {
-                const [urlParticipantString] = location.hash.replace(/^#/, '').split('//');
-                const urlParticipants = urlParticipantString.split('/');
+            if (urlParticipants) {
                 const tasks = getTasks();
 
                 [...urlParticipants, ''].forEach(urlParticipant => {
                     const [urlName, availabilityAsHex] = urlParticipant.split(';');
                     const newInput = addInput(document.querySelector('#participants'), '', participantPlaceholder);
-                    // assign name in an XSS safe manner ( https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html#guideline-3-use-documentcreateelement-elementsetattributevalue-elementappendchild-and-similar-to-build-dynamic-interfaces )
-                    newInput.value = decodeURIComponent(urlName);
+                    setInputValueFromUrl(newInput, urlName)
                     if (availabilityAsHex) {
                         const bitmask = parseInt(availabilityAsHex, 16).toString(2).padStart(tasks.length, '0');
                         tasks.forEach((task, index) => setAvailability(task.id, newInput.dataset.id, bitmask[index] !== '0'));