From 2cf7a8c8b355d4316a2361ea636ceb60540dd8e1 Mon Sep 17 00:00:00 2001
From: Kevin Froman <beardog@mailbox.org>
Date: Thu, 20 Aug 2020 01:29:29 -0500
Subject: [PATCH] Fix unclickable labels in onboarding

---
 static-data/www/onboarding/index.html    | 18 +++++++++---------
 static-data/www/onboarding/onboarding.js | 20 +++++++++++++++++++-
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/static-data/www/onboarding/index.html b/static-data/www/onboarding/index.html
index f02f4b9e..ac105d9c 100644
--- a/static-data/www/onboarding/index.html
+++ b/static-data/www/onboarding/index.html
@@ -144,7 +144,7 @@
                                       <div class="box">
                                         <nav class="level">
                                           <div class="level-left">
-                                            <div class="level-item"><i class="icon fas fa-eye"></i> <input type="checkbox" name="state" checked></div>
+                                            <div class="level-item"><i class="icon fas fa-eye" for="state"></i> <input type="checkbox" name="state" checked></div>
                                             <label for="state">Mass surveillance</label>
                                           </div>
                                           <div class="level-right">
@@ -157,7 +157,7 @@
                                         <nav class="level">
                                           <div class="level-left">
                                             <div class="level-item">
-                                            <i class="icon fas fa-university"></i> <input type="checkbox" name="stateTarget">
+                                            <i class="icon fas fa-university" for="stateTarget"></i> <input type="checkbox" name="stateTarget">
                                             </div>
                                             <label for="stateTarget">State actor (direct target)</label>
                                           </div>
@@ -166,7 +166,7 @@
                                     </div>
                                     <div class="column is-4">
                                       <div class="box">
-                                        <i class="icon fas fa-binoculars"></i> <input type="checkbox" name="local"> <label for="local">Nearby threat</label>
+                                        <i class="icon fas fa-binoculars" for="local"></i> <input type="checkbox" name="local"> <label for="local">Nearby threat</label>
                                       </div>
                                     </div>
                                 </div>
@@ -179,7 +179,7 @@
                                       <div class="box">
                                         <nav class="level">
                                           <div class="level-left">
-                                            <i class="icon fas fa-envelope"></i> <input type="checkbox" name="useMail" checked> <label for="useMail">Use OnionrMail</label>
+                                            <i class="icon fas fa-envelope" for="useMail"></i> <input type="checkbox" name="useMail" checked> <label for="useMail">Use OnionrMail</label>
                                           </div>
                                           <div class="level-right">
                                           </div>
@@ -190,7 +190,7 @@
                                       <div class="box">
                                         <nav class="level">
                                           <div class="level-left">
-                                            <i class="icon fas fa-comments"></i> <input type="checkbox" name="useCircles" checked> <label for="useMail">Use Circles (message board system)</label>
+                                            <i class="icon fas fa-comments" for="useCircles"></i> <input type="checkbox" name="useCircles" checked> <label for="useCircles">Use Circles (message board system)</label>
                                           </div>
                                           <div class="level-right">
                                           </div>
@@ -207,7 +207,7 @@
                                           <div class="box">
                                             <nav class="level">
                                               <div class="level-left">
-                                                <i class="icon fas fa-palette"></i> <input type="checkbox" name="useDarkTheme" checked> <label for="useDark">Use Dark Theme</label>
+                                                <i class="icon fas fa-palette" for="useDarkTheme"></i> <input type="checkbox" name="useDarkTheme" checked> <label for="useDarkTheme">Use Dark Theme</label>
                                               </div>
                                               <div class="level-right">
                                               </div>
@@ -219,7 +219,7 @@
                                             <nav class="level">
                                               <div class="level-left">
                                                 <div class="level-item">
-                                                  <i class="icon fas fa-dollar-sign"></i> <input type="checkbox" name="donate"> <label for="donate">Donating the price of a coffee to fund development</label>
+                                                  <i class="icon fas fa-dollar-sign" for="donate"></i> <input type="checkbox" name="donate"> <label for="donate">Donating the price of a coffee to fund development</label>
                                                 </div>
                                               </div>
                                             </nav>
@@ -236,7 +236,7 @@
                                           <nav class="level">
                                             <div class="level-left">
                                               <div class="level-item">
-                                                <i class="icon fas fa-book-open"></i> <input checked type="checkbox" name="networkContributionPlain"> <label for="networkContributionPlain">Storing plaintext data</label>
+                                                <i class="icon fas fa-book-open" for="networkContributionPlain"></i> <input checked type="checkbox" name="networkContributionPlain"> <label for="networkContributionPlain">Storing plaintext data</label>
                                               </div>
                                             </div>
                                             <div class="level-right">
@@ -249,7 +249,7 @@
                                           <nav class="level">
                                             <div class="level-left">
                                               <div class="level-item">
-                                                <i class="icon fas fa-network-wired"></i> <input checked type="checkbox" name="networkContribution"> <label for="networkContribution">Participating in data storage & sharing</label>
+                                                <i class="icon fas fa-network-wired" for="networkContribution"></i> <input checked type="checkbox" name="networkContribution"> <label for="networkContribution">Participating in data storage & sharing</label>
                                               </div>
                                             </div>
                                           </nav>
diff --git a/static-data/www/onboarding/onboarding.js b/static-data/www/onboarding/onboarding.js
index f5fa50c3..f431d13a 100644
--- a/static-data/www/onboarding/onboarding.js
+++ b/static-data/www/onboarding/onboarding.js
@@ -65,4 +65,22 @@ document.getElementById('onboardingForm').onsubmit = function(e){
     sendConfig(submitInfo)
 
     e.preventDefault()
-}
\ No newline at end of file
+}
+
+/* Fix label clicking since bulma is weird */
+
+let labelClickFix = function(labels) {
+    for (i = 0; i < labels.length; i++){
+        labels[i].onclick = function(event){
+            document.getElementsByName(event.target.getAttribute("for"))[0].checked ^= 1
+        }
+    }
+
+}
+let setupLabelFix = function(){
+    var labels = document.getElementsByTagName('label')
+    var icons = document.getElementsByTagName('i')
+    labelClickFix(labels)
+    labelClickFix(icons)
+}
+setupLabelFix()