From 59ad1e5e366f6b601fcaa816be00e593918cef33 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Tue, 10 Jan 2023 22:58:20 +0100
Subject: [PATCH] Toggle switch shouldn't submit form

This patch fixes the problem that toggling one of the options in the
user account dialog will automatically submit the form.

The problem got introduced as a combination of the recent accessibility
fixes where some elements got turned into HTML button elements to make
them keyboard accessible. Doing that, I did not realize that the default
type of a button is `submit` [1]. This causes no problems at most places,
but will cause problem within a form (e.g. the user account settings)
where toggling an option is now identical to clicking submit.

This patch fixes the issue by setting the `type` attribute to `button`.
Not only for the toggle switch, but also for a few other elements which
have been recently converted to buttons.

[1] https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#attr-button-type
---
 client/components/app/SettingsContent.vue | 2 +-
 client/components/tables/UsersTable.vue   | 4 ++--
 client/components/ui/ToggleSwitch.vue     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/components/app/SettingsContent.vue b/client/components/app/SettingsContent.vue
index b6dbd6ae..233839e7 100644
--- a/client/components/app/SettingsContent.vue
+++ b/client/components/app/SettingsContent.vue
@@ -4,7 +4,7 @@
       <h1 class="text-xl">{{ headerText }}</h1>
 
       <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
-        <button class="material-icons" :aria-label="$strings.ButtonAdd + ': ' + headerText" style="font-size: 1.4rem">add</button>
+        <button type="button" class="material-icons" :aria-label="$strings.ButtonAdd + ': ' + headerText" style="font-size: 1.4rem">add</button>
       </div>
     </div>
 
diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue
index 2f19a7ba..79876ca3 100644
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -38,10 +38,10 @@
             <div class="w-full flex justify-left">
               <!-- Dont show edit for non-root users -->
               <div v-if="user.type !== 'root' || userIsRoot" class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-opacity-100 cursor-pointer" @click.stop="editUser(user)">
-                <button :aria-label="$getString('ButtonUserEdit', [user.username])" class="material-icons text-base">edit</button>
+                <button type="button" :aria-label="$getString('ButtonUserEdit', [user.username])" class="material-icons text-base">edit</button>
               </div>
               <div v-show="user.type !== 'root'" class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-error cursor-pointer" @click.stop="deleteUserClick(user)">
-                <button :aria-label="$getString('ButtonUserDelete', [user.username])" class="material-icons text-base">delete</button>
+                <button type="button" :aria-label="$getString('ButtonUserDelete', [user.username])" class="material-icons text-base">delete</button>
               </div>
             </div>
           </td>
diff --git a/client/components/ui/ToggleSwitch.vue b/client/components/ui/ToggleSwitch.vue
index 0806ff82..b5511d96 100644
--- a/client/components/ui/ToggleSwitch.vue
+++ b/client/components/ui/ToggleSwitch.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button :aria-labelledby="labeledBy" role="checkbox" class="border rounded-full border-black-100 flex items-center cursor-pointer w-10 justify-start" :aria-checked="toggleValue" :class="className" @click="clickToggle">
+    <button :aria-labelledby="labeledBy" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer w-10 justify-start" :aria-checked="toggleValue" :class="className" @click="clickToggle">
       <span class="rounded-full border w-5 h-5 border-black-50 shadow transform transition-transform duration-100" :class="switchClassName"></span>
     </button>
   </div>