From 34ba11f3a270a99c615a57d93b6277f7fa6a08b1 Mon Sep 17 00:00:00 2001
From: Jaroslav Rakhmatoullin <jazzoslav@gmail.com>
Date: Tue, 2 Apr 2024 05:46:03 +0200
Subject: [PATCH] fix(settings): select checkbox via adjacent label (text)

---
 .../src/components/settings/Permissions.vue   | 32 +++++++++----------
 frontend/src/components/settings/Rules.vue    |  7 ++--
 frontend/src/components/settings/UserForm.vue |  3 +-
 frontend/src/css/dashboard.css                | 14 +++++---
 frontend/src/css/styles.css                   |  2 ++
 frontend/src/views/settings/Global.vue        | 13 ++++----
 frontend/src/views/settings/Profile.vue       | 12 +++----
 7 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/settings/Permissions.vue b/frontend/src/components/settings/Permissions.vue
index 13d2b936..1eefc88f 100644
--- a/frontend/src/components/settings/Permissions.vue
+++ b/frontend/src/components/settings/Permissions.vue
@@ -4,37 +4,37 @@
     <p class="small">{{ $t("settings.permissionsHelp") }}</p>
 
     <p>
-      <input type="checkbox" v-model="admin" />
-      {{ $t("settings.administrator") }}
+      <input  id="uds-admin" type="checkbox" v-model="admin" />
+      <label for="uds-admin">{{ $t("settings.administrator") }}</label>
     </p>
 
     <p>
-      <input type="checkbox" :disabled="admin" v-model="perm.create" />
-      {{ $t("settings.perm.create") }}
+      <input  id="uds-create" type="checkbox" :disabled="admin" v-model="perm.create" />
+      <label for="uds-create">{{ $t("settings.perm.create") }}</label>
     </p>
     <p>
-      <input type="checkbox" :disabled="admin" v-model="perm.delete" />
-      {{ $t("settings.perm.delete") }}
+      <input  id="uds-delete" type="checkbox" :disabled="admin" v-model="perm.delete" />
+      <label for="uds-delete">{{ $t("settings.perm.delete") }}</label>
     </p>
     <p>
-      <input type="checkbox" :disabled="admin" v-model="perm.download" />
-      {{ $t("settings.perm.download") }}
+      <input  id="uds-download" type="checkbox" :disabled="admin" v-model="perm.download" />
+      <label for="uds-download">{{ $t("settings.perm.download") }}</label>
     </p>
     <p>
-      <input type="checkbox" :disabled="admin" v-model="perm.modify" />
-      {{ $t("settings.perm.modify") }}
+      <input  id="uds-modify" type="checkbox" :disabled="admin" v-model="perm.modify" />
+      <label for="uds-modify">{{ $t("settings.perm.modify") }}</label>
     </p>
     <p v-if="isExecEnabled">
-      <input type="checkbox" :disabled="admin" v-model="perm.execute" />
-      {{ $t("settings.perm.execute") }}
+      <input  id="uds-execute" type="checkbox" :disabled="admin" v-model="perm.execute" />
+      <label for="uds-execute">{{ $t("settings.perm.execute") }}</label>
     </p>
     <p>
-      <input type="checkbox" :disabled="admin" v-model="perm.rename" />
-      {{ $t("settings.perm.rename") }}
+      <input  id="uds-rename" type="checkbox" :disabled="admin" v-model="perm.rename" />
+      <label for="uds-rename">{{ $t("settings.perm.rename") }}</label>
     </p>
     <p>
-      <input type="checkbox" :disabled="admin" v-model="perm.share" />
-      {{ $t("settings.perm.share") }}
+      <input  id="uds-share" type="checkbox" :disabled="admin" v-model="perm.share" />
+      <label for="uds-share">{{ $t("settings.perm.share") }}</label>
     </p>
   </div>
 </template>
diff --git a/frontend/src/components/settings/Rules.vue b/frontend/src/components/settings/Rules.vue
index 8f3c45eb..dfa10d8b 100644
--- a/frontend/src/components/settings/Rules.vue
+++ b/frontend/src/components/settings/Rules.vue
@@ -1,8 +1,11 @@
 <template>
   <form class="rules small">
     <div v-for="(rule, index) in rules" :key="index">
-      <input type="checkbox" v-model="rule.regex" /><label>Regex</label>
-      <input type="checkbox" v-model="rule.allow" /><label>Allow</label>
+      <input :id="'regex-'+index" type="checkbox" v-model="rule.regex" />
+      <label :for="'regex-'+index" >Regex</label>
+
+      <input :id="'allow-'+index" type="checkbox" v-model="rule.allow" />
+      <label :for="'allow-'+index">Allow</label>
 
       <input
         @keypress.enter.prevent
diff --git a/frontend/src/components/settings/UserForm.vue b/frontend/src/components/settings/UserForm.vue
index 0f3b06e0..4defdcde 100644
--- a/frontend/src/components/settings/UserForm.vue
+++ b/frontend/src/components/settings/UserForm.vue
@@ -51,8 +51,9 @@
         type="checkbox"
         :disabled="user.perm.admin"
         v-model="user.lockPassword"
+        id="user-lock-pass"
       />
-      {{ t("settings.lockPassword") }}
+      <label for="user-lock-pass">{{ t("settings.lockPassword") }}</label>
     </p>
 
     <permissions v-model:perm="user.perm" />
diff --git a/frontend/src/css/dashboard.css b/frontend/src/css/dashboard.css
index 48be3ee0..01bc404a 100644
--- a/frontend/src/css/dashboard.css
+++ b/frontend/src/css/dashboard.css
@@ -32,12 +32,16 @@ a {
   color: inherit;
 }
 
-.dashboard p label {
+.dashboard p input[type="checkbox"] {
+  cursor: pointer;
+  vertical-align: middle;
   margin-bottom: 0.2em;
-  display: block;
-  font-size: 0.8em;
-  font-weight: 500;
-  color: var(--textPrimary);
+}
+.dashboard p label {
+  margin-left: 0.35em;
+  vertical-align: bottom;
+  display: inline-block;
+  cursor: pointer;
 }
 
 li code,
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 8eed50fc..d3cd6ba3 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -417,6 +417,7 @@ html[dir="rtl"] .breadcrumbs .chevron {
 
 .rules input[type="checkbox"] {
   margin-right: 0.2rem;
+  cursor: pointer;
 }
 
 .rules input[type="text"] {
@@ -426,6 +427,7 @@ html[dir="rtl"] .breadcrumbs .chevron {
 
 .rules label {
   margin-right: 0.5rem;
+  cursor: pointer;
 }
 
 .rules button {
diff --git a/frontend/src/views/settings/Global.vue b/frontend/src/views/settings/Global.vue
index 40a3ec04..b1ac82f5 100644
--- a/frontend/src/views/settings/Global.vue
+++ b/frontend/src/views/settings/Global.vue
@@ -9,13 +9,14 @@
 
         <div class="card-content">
           <p>
-            <input type="checkbox" v-model="settings.signup" />
-            {{ t("settings.allowSignup") }}
+            <input id="allowSignup" type="checkbox" v-model="settings.signup" />
+            <label for="allowSignup">{{ t("settings.allowSignup") }}</label>
           </p>
 
           <p>
-            <input type="checkbox" v-model="settings.createUserDir" />
-            {{ t("settings.createUserDir") }}
+            <input id="createUserDir" type="checkbox" v-model="settings.createUserDir" />
+            <label for="createUserDir">{{ t("settings.createUserDir") }}</label>
+
           </p>
 
           <div>
@@ -64,7 +65,7 @@
               v-model="settings.branding.disableExternal"
               id="branding-links"
             />
-            {{ t("settings.disableExternalLinks") }}
+            <label for="branding-links">{{ t("settings.disableExternalLinks") }}</label>
           </p>
 
           <p>
@@ -73,7 +74,7 @@
               v-model="settings.branding.disableUsedPercentage"
               id="branding-used-disk"
             />
-            {{ t("settings.disableUsedDiskPercentage") }}
+            <label for="branding-used-disk">{{ t("settings.disableUsedDiskPercentage") }}</label>
           </p>
 
           <p>
diff --git a/frontend/src/views/settings/Profile.vue b/frontend/src/views/settings/Profile.vue
index c677092f..5e3a7994 100644
--- a/frontend/src/views/settings/Profile.vue
+++ b/frontend/src/views/settings/Profile.vue
@@ -8,16 +8,16 @@
 
         <div class="card-content">
           <p>
-            <input type="checkbox" name="hideDotfiles" v-model="hideDotfiles" />
-            {{ t("settings.hideDotfiles") }}
+            <input id="hideDotfiles" type="checkbox" name="hideDotfiles" v-model="hideDotfiles" />
+            <label for="hideDotfiles">{{ t("settings.hideDotfiles") }}</label>
           </p>
           <p>
-            <input type="checkbox" name="singleClick" v-model="singleClick" />
-            {{ t("settings.singleClick") }}
+            <input id="singleClick" type="checkbox" name="singleClick" v-model="singleClick" />
+            <label for="singleClick">{{ t("settings.singleClick") }}</label>
           </p>
           <p>
-            <input type="checkbox" name="dateFormat" v-model="dateFormat" />
-            {{ t("settings.setDateFormat") }}
+            <input id="dateFormat" type="checkbox" name="dateFormat" v-model="dateFormat" />
+            <label for="dateFormat">{{ t("settings.setDateFormat") }}</label>
           </p>
           <h3>{{ t("settings.language") }}</h3>
           <languages