From 6ead7708b5048bfb3196d092d8fb363943b5c55c Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 22 Nov 2024 15:01:06 +0100
Subject: [PATCH] Add explicit button type

---
 resources/js/components/AccessLogViewer.vue          | 12 ++++++------
 resources/js/components/ActionButtons.vue            |  4 ++--
 resources/js/components/CopyButton.vue               |  2 +-
 resources/js/components/DestinationGroupSelector.vue |  4 ++--
 resources/js/components/ExportButtons.vue            |  4 ++--
 resources/js/components/GroupSwitch.vue              |  2 +-
 resources/js/components/OtpDisplay.vue               |  2 +-
 resources/js/components/QrContentDisplay.vue         |  4 ++--
 resources/js/components/SearchBox.vue                |  2 +-
 resources/js/components/Toolbar.vue                  |  8 ++++----
 resources/js/layouts/Footer.vue                      |  6 +++---
 resources/js/views/Start.vue                         |  2 +-
 resources/js/views/admin/Users.vue                   |  6 +++---
 resources/js/views/admin/users/Manage.vue            | 10 +++++-----
 resources/js/views/groups/Groups.vue                 |  2 +-
 resources/js/views/settings/OAuth.vue                |  4 ++--
 resources/js/views/settings/WebAuthn.vue             |  2 +-
 resources/js/views/twofaccounts/Accounts.vue         | 10 +++++-----
 resources/js/views/twofaccounts/CreateUpdate.vue     |  4 ++--
 resources/js/views/twofaccounts/Import.vue           | 12 ++++++------
 20 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/resources/js/components/AccessLogViewer.vue b/resources/js/components/AccessLogViewer.vue
index c1f451823..813a8abf9 100644
--- a/resources/js/components/AccessLogViewer.vue
+++ b/resources/js/components/AccessLogViewer.vue
@@ -142,23 +142,23 @@
     <nav v-if="props.showSearch" class="level is-mobile mb-2">
         <div class="level-item has-text-centered">
             <div class="buttons"> 
-                <button id="btnShowOneMonth" :title="$t('admin.show_last_month_log')" v-on:click="setPeriod(periods.aMonth)" :class="{ 'has-text-grey' : period !== periods.aMonth }" class="button is-ghost p-1">
+                <button id="btnShowOneMonth" :title="$t('admin.show_last_month_log')" v-on:click="setPeriod(periods.aMonth)" :class="{ 'has-text-grey' : period !== periods.aMonth }" type="button" class="button is-ghost p-1">
                     {{ $t('commons.one_month') }}
                 </button>
-                <button id="btnShowThreeMonths" :title="$t('admin.show_three_months_log')" v-on:click="setPeriod(periods.threeMonths)" :class="{ 'has-text-grey' : period !== periods.threeMonths }" class="button is-ghost p-1">
+                <button id="btnShowThreeMonths" :title="$t('admin.show_three_months_log')" v-on:click="setPeriod(periods.threeMonths)" :class="{ 'has-text-grey' : period !== periods.threeMonths }" type="button" class="button is-ghost p-1">
                     {{ $t('commons.x_month', { 'x' : '3' }) }}
                 </button>
-                <button id="btnShowSixMonths" :title="$t('admin.show_six_months_log')" v-on:click="setPeriod(periods.halfYear)" :class="{ 'has-text-grey' : period !== periods.halfYear }" class="button is-ghost p-1">
+                <button id="btnShowSixMonths" :title="$t('admin.show_six_months_log')" v-on:click="setPeriod(periods.halfYear)" :class="{ 'has-text-grey' : period !== periods.halfYear }" type="button" class="button is-ghost p-1">
                     {{ $t('commons.x_month', { 'x' : '6' }) }}
                 </button>
-                <button id="btnShowOneYear" :title="$t('admin.show_one_year_log')" v-on:click="setPeriod(periods.aYear)" :class="{ 'has-text-grey' : period !== periods.aYear }" class="button is-ghost p-1 mr-5">
+                <button id="btnShowOneYear" :title="$t('admin.show_one_year_log')" v-on:click="setPeriod(periods.aYear)" :class="{ 'has-text-grey' : period !== periods.aYear }" type="button" class="button is-ghost p-1 mr-5">
                     {{ $t('commons.one_year') }}
                 </button>
-                <button id="btnSortLogDesc" v-on:click="setDesc" :title="$t('admin.sort_by_date_desc')" :class="{ 'has-text-grey' : !orderIsDesc }" class="button p-1 is-ghost">
+                <button id="btnSortLogDesc" v-on:click="setDesc" :title="$t('admin.sort_by_date_desc')" :class="{ 'has-text-grey' : !orderIsDesc }" type="button" class="button p-1 is-ghost">
                     <FontAwesomeIcon :icon="['fas', 'arrow-up-long']" flip="vertical" />
                     <FontAwesomeIcon :icon="['far', 'calendar']" />
                 </button>
-                <button id="btnSortLogAsc" v-on:click="setAsc" :title="$t('admin.sort_by_date_asc')" :class="{ 'has-text-grey' : orderIsDesc }" class="button p-1 is-ghost">
+                <button id="btnSortLogAsc" v-on:click="setAsc" :title="$t('admin.sort_by_date_asc')" :class="{ 'has-text-grey' : orderIsDesc }" type="button" class="button p-1 is-ghost">
                     <FontAwesomeIcon :icon="['fas', 'arrow-up-long']" />
                     <FontAwesomeIcon :icon="['far', 'calendar']" />
                 </button>
diff --git a/resources/js/components/ActionButtons.vue b/resources/js/components/ActionButtons.vue
index 102359cfc..1a9448580 100644
--- a/resources/js/components/ActionButtons.vue
+++ b/resources/js/components/ActionButtons.vue
@@ -32,7 +32,7 @@
     <UseColorMode v-slot="{ mode }">
         <!-- New item buttons -->
         <p class="control" v-if="!inManagementMode">
-            <button class="button is-link is-rounded is-focus" @click="goAddNewAccount">
+            <button type="button" class="button is-link is-rounded is-focus" @click="goAddNewAccount">
                 <span>{{ $t('commons.new') }}</span>
                 <span class="icon is-small">
                     <FontAwesomeIcon :icon="['fas', 'qrcode']" />
@@ -41,7 +41,7 @@
         </p>
         <!-- Manage button -->
         <p class="control" v-if="!inManagementMode">
-            <button id="btnManage" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="$emit('update:inManagementMode', true)">{{ $t('commons.manage') }}</button>
+            <button type="button" id="btnManage" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="$emit('update:inManagementMode', true)">{{ $t('commons.manage') }}</button>
         </p>
         <!-- move button -->
         <p class="control" v-if="inManagementMode">
diff --git a/resources/js/components/CopyButton.vue b/resources/js/components/CopyButton.vue
index 035b906b6..a6d55fed8 100644
--- a/resources/js/components/CopyButton.vue
+++ b/resources/js/components/CopyButton.vue
@@ -15,7 +15,7 @@
 </script>
 
 <template>
-    <button :aria-label="$t('commons.copy_to_clipboard')" :title="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard()">
+    <button type="button" :aria-label="$t('commons.copy_to_clipboard')" :title="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard()">
         <FontAwesomeIcon :icon="['fas', 'copy']" />
     </button>
 </template>
\ No newline at end of file
diff --git a/resources/js/components/DestinationGroupSelector.vue b/resources/js/components/DestinationGroupSelector.vue
index 3fbdd9ed3..d94bc0269 100644
--- a/resources/js/components/DestinationGroupSelector.vue
+++ b/resources/js/components/DestinationGroupSelector.vue
@@ -39,7 +39,7 @@
                 <div class="columns is-multiline">
                     <div class="column is-full" v-for="group in groups" :key="group.id">
                         <UseColorMode v-slot="{ mode }">
-                            <button class="button is-fullwidth" :class="{'is-link' : destinationGroupId === group.id, 'is-dark has-text-light is-outlined': mode == 'dark'}" @click="destinationGroupId = group.id">
+                            <button type="button" class="button is-fullwidth" :class="{'is-link' : destinationGroupId === group.id, 'is-dark has-text-light is-outlined': mode == 'dark'}" @click="destinationGroupId = group.id">
                                 <span v-if="group.id === 0" class="is-italic">
                                     {{ $t('groups.no_group') }}
                                 </span>
@@ -60,7 +60,7 @@
         <VueFooter :showButtons="true">
             <!-- Move to selected group button -->
             <p class="control">
-                <button class="button is-link is-rounded" @click="moveAccounts">{{ $t('commons.move') }}</button>
+                <button type="button" class="button is-link is-rounded" @click="moveAccounts">{{ $t('commons.move') }}</button>
             </p>
             <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
         </VueFooter>
diff --git a/resources/js/components/ExportButtons.vue b/resources/js/components/ExportButtons.vue
index bb2ebf7af..9a0571619 100644
--- a/resources/js/components/ExportButtons.vue
+++ b/resources/js/components/ExportButtons.vue
@@ -21,7 +21,7 @@
                 {{ $t('twofaccounts.twofauth_export_schema') }}
             </a>
         </p>
-        <button id="btnExport2FAuth" class="button is-link is-rounded is-focus my-3" @click="$emit('export-twofauth-format')" :title="$t('twofaccounts.twofauth_export_format_sub')">
+        <button type="button" id="btnExport2FAuth" class="button is-link is-rounded is-focus my-3" @click="$emit('export-twofauth-format')" :title="$t('twofaccounts.twofauth_export_format_sub')">
             {{ $t('twofaccounts.twofauth_export_format') }}
         </button>
     </div>
@@ -32,7 +32,7 @@
         <p class="is-size-7-mobile">
             {{ $t('twofaccounts.otpauth_export_format_desc') }}
         </p>
-        <button id="btnExportOtpauth" class="button is-link is-rounded is-focus my-3" @click="$emit('export-otpauth-format')" :title="$t('twofaccounts.otpauth_export_format_sub')">
+        <button type="button" id="btnExportOtpauth" class="button is-link is-rounded is-focus my-3" @click="$emit('export-otpauth-format')" :title="$t('twofaccounts.otpauth_export_format_sub')">
             {{ $t('twofaccounts.otpauth_export_format') }}
         </button>
     </div>
diff --git a/resources/js/components/GroupSwitch.vue b/resources/js/components/GroupSwitch.vue
index 19568a921..0d3c43086 100644
--- a/resources/js/components/GroupSwitch.vue
+++ b/resources/js/components/GroupSwitch.vue
@@ -33,7 +33,7 @@
                 <div class="columns is-multiline">
                     <div class="column is-full" v-for="group in groups" :key="group.id">
                         <UseColorMode v-slot="{ mode }">
-                            <button class="button is-fullwidth" :class="{'is-dark has-text-light is-outlined': mode == 'dark'}" @click="setActiveGroup(group.id)">{{ group.name }}</button>
+                            <button type="button" class="button is-fullwidth" :class="{'is-dark has-text-light is-outlined': mode == 'dark'}" @click="setActiveGroup(group.id)">{{ group.name }}</button>
                         </UseColorMode>
                     </div>
                 </div>
diff --git a/resources/js/components/OtpDisplay.vue b/resources/js/components/OtpDisplay.vue
index 925255c26..4adf6075e 100644
--- a/resources/js/components/OtpDisplay.vue
+++ b/resources/js/components/OtpDisplay.vue
@@ -333,7 +333,7 @@
             {{ $t('twofaccounts.forms.counter.label') }}: {{ otpauthParams.counter }}
         </p>
         <p v-if="user.preferences.showOtpAsDot && user.preferences.revealDottedOTP" class="mt-3">
-            <button class="button is-ghost has-text-grey-dark" @click.stop="revealPassword = !revealPassword">
+            <button type="button" class="button is-ghost has-text-grey-dark" @click.stop="revealPassword = !revealPassword">
                 <font-awesome-icon v-if="revealPassword" :icon="['fas', 'eye']" />
                 <font-awesome-icon v-else :icon="['fas', 'eye-slash']" />
             </button>
diff --git a/resources/js/components/QrContentDisplay.vue b/resources/js/components/QrContentDisplay.vue
index 27b6fd166..bb1900dc6 100644
--- a/resources/js/components/QrContentDisplay.vue
+++ b/resources/js/components/QrContentDisplay.vue
@@ -50,13 +50,13 @@
     <div class="block mb-6 light-or-darker">{{ qrContent ? qrContent : '[' + trans('commons.nothing') + ']' }}</div>
     <!-- Copy to clipboard -->
     <div class="block has-text-link" v-if="qrContent">
-        <button class="button is-link is-outlined is-rounded" @click.stop="copyToClipboard(qrContent)">
+        <button type="button" class="button is-link is-outlined is-rounded" @click.stop="copyToClipboard(qrContent)">
             {{ $t('commons.copy_to_clipboard') }}
         </button>
     </div>
     <!-- Open in browser -->
     <div class="block has-text-link" v-if="isUrl(qrContent)" @click="openInBrowser(qrContent)">
-        <button class="button is-link is-outlined is-rounded">
+        <button type="button" class="button is-link is-outlined is-rounded">
             <span>{{ $t('commons.open_in_browser') }}</span>
             <span class="icon is-small">
                 <FontAwesomeIcon :icon="['fas', 'external-link-alt']" />
diff --git a/resources/js/components/SearchBox.vue b/resources/js/components/SearchBox.vue
index efa9e7364..447d5cc97 100644
--- a/resources/js/components/SearchBox.vue
+++ b/resources/js/components/SearchBox.vue
@@ -44,7 +44,7 @@
                 :value="keyword"
                 v-on:keyup="$emit('update:keyword', $event.target.value)">
             <span class="icon is-small is-right">
-                <button v-if="keyword != ''" id="btnClearSearch" tabindex="1" :title="$t('commons.clear_search')" class="clear-selection delete" @click="$emit('update:keyword','')"></button>
+                <button type="button" v-if="keyword != ''" id="btnClearSearch" tabindex="1" :title="$t('commons.clear_search')" class="clear-selection delete" @click="$emit('update:keyword','')"></button>
                 <FontAwesomeIcon v-else :icon="['fas', 'search']" />
             </span>
         </div>
diff --git a/resources/js/components/Toolbar.vue b/resources/js/components/Toolbar.vue
index affa8c679..584c90c90 100644
--- a/resources/js/components/Toolbar.vue
+++ b/resources/js/components/Toolbar.vue
@@ -11,17 +11,17 @@
                 <!-- selected label -->
                 <span class="has-text-grey mr-1">{{ $t('commons.x_selected', { count: selectedCount }) }}</span>
                 <!-- deselect all -->
-                <button id="btnUnselectAll" @click="$emit('clear-selected')" class="clear-selection delete mr-4" :style="{visibility: selectedCount > 0 ? 'visible' : 'hidden'}" :title="$t('commons.clear_selection')"></button>
+                <button type="button" id="btnUnselectAll" @click="$emit('clear-selected')" class="clear-selection delete mr-4" :style="{visibility: selectedCount > 0 ? 'visible' : 'hidden'}" :title="$t('commons.clear_selection')"></button>
                 <!-- select all button -->
-                <button id="btnSelectAll" @click="$emit('select-all')" class="button mr-5 has-line-height p-1 is-ghost has-text-grey" :title="$t('commons.select_all')">
+                <button type="button" id="btnSelectAll" @click="$emit('select-all')" class="button mr-5 has-line-height p-1 is-ghost has-text-grey" :title="$t('commons.select_all')">
                     <span>{{ $t('commons.check_all') }}</span>
                     <FontAwesomeIcon class="ml-1" :icon="['fas', 'check-square']" />
                 </button>
                 <!-- sort asc/desc buttons -->
-                <button id="btnSortAscending" @click="$emit('sort-asc')" class="button has-line-height p-1 is-ghost has-text-grey" :title="$t('commons.sort_ascending')">
+                <button type="button" id="btnSortAscending" @click="$emit('sort-asc')" class="button has-line-height p-1 is-ghost has-text-grey" :title="$t('commons.sort_ascending')">
                     <FontAwesomeIcon :icon="['fas', 'sort-alpha-down']" />
                 </button>
-                <button id="btnSortDescending" @click="$emit('sort-desc')" class="button has-line-height p-1 is-ghost has-text-grey" :title="$t('commons.sort_descending')">
+                <button type="button" id="btnSortDescending" @click="$emit('sort-desc')" class="button has-line-height p-1 is-ghost has-text-grey" :title="$t('commons.sort_descending')">
                     <FontAwesomeIcon :icon="['fas', 'sort-alpha-up']" />
                 </button>
             </div>
diff --git a/resources/js/layouts/Footer.vue b/resources/js/layouts/Footer.vue
index 631b44879..dcfd91a2c 100644
--- a/resources/js/layouts/Footer.vue
+++ b/resources/js/layouts/Footer.vue
@@ -36,7 +36,7 @@
         <!-- sub-links -->
         <div v-if="internalFooterType == 'doneButton'" class="content has-text-centered">
             <!-- done link -->
-            <button id="lnkExitEdit" class="button is-ghost is-like-text" @click.stop="$emit('doneButtonClicked', true)">{{ $t('commons.done') }}</button>
+            <button type="button" id="lnkExitEdit" class="button is-ghost is-like-text" @click.stop="$emit('doneButtonClicked', true)">{{ $t('commons.done') }}</button>
         </div>
         <div v-else-if="internalFooterType == 'modal'" class="content has-text-centered">
             <!-- back to home link -->
@@ -69,7 +69,7 @@
                     <!-- sign-out button -->
                     <li v-if="!$2fauth.config.proxyAuth || ($2fauth.config.proxyAuth && $2fauth.config.proxyLogoutUrl)" class="column">
                         <UseColorMode v-slot="{ mode }">
-                            <button id="lnkSignOut" class="button is-text is-like-text" :class="mode == 'dark' ? 'has-text-grey-lighter' : 'has-text-grey-darker'" @click="logout">
+                            <button type="button" id="lnkSignOut" class="button is-text is-like-text" :class="mode == 'dark' ? 'has-text-grey-lighter' : 'has-text-grey-darker'" @click="logout">
                                 {{ $t('auth.sign_out') }}
                             </button>
                         </UseColorMode>
@@ -98,7 +98,7 @@
                 </span>
                 <!-- sign-out button -->
                 <span v-if="!$2fauth.config.proxyAuth || ($2fauth.config.proxyAuth && $2fauth.config.proxyLogoutUrl)">
-                    - <button id="lnkSignOut" class="button is-text is-like-text has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</button>
+                    - <button type="button" id="lnkSignOut" class="button is-text is-like-text has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</button>
                 </span>
             </div>
         </div>
diff --git a/resources/js/views/Start.vue b/resources/js/views/Start.vue
index 7bec1ec2c..5ec3ad4a7 100644
--- a/resources/js/views/Start.vue
+++ b/resources/js/views/Start.vue
@@ -76,7 +76,7 @@
                         {{ $t('twofaccounts.forms.upload_qrcode') }}
                     </label>
                     <!-- scan button that launch camera stream -->
-                    <button v-else class="button is-link is-medium is-rounded is-main" @click="capture()">
+                    <button v-else type="button" class="button is-link is-medium is-rounded is-main" @click="capture()">
                         {{ $t('twofaccounts.forms.scan_qrcode') }}
                     </button>
                 </div>
diff --git a/resources/js/views/admin/Users.vue b/resources/js/views/admin/Users.vue
index 37fe66374..c67dcbb0e 100644
--- a/resources/js/views/admin/Users.vue
+++ b/resources/js/views/admin/Users.vue
@@ -131,9 +131,9 @@
                     </div>
                     <div class="level-item has-text-centered is-justify-content-start">
                         <div class="buttons">
-                            <button class="button is-small is-ghost p-0" @click="addFilter('admin:1')">admin</button>
-                            <button class="button is-small is-ghost p-0" @click="addFilter('oauth:github')">github</button>
-                            <button class="button is-small is-ghost p-0" @click="addFilter('oauth:openid')">openId</button>
+                            <button type="button" class="button is-small is-ghost p-0" @click="addFilter('admin:1')">admin</button>
+                            <button type="button" class="button is-small is-ghost p-0" @click="addFilter('oauth:github')">github</button>
+                            <button type="button" class="button is-small is-ghost p-0" @click="addFilter('oauth:openid')">openId</button>
                         </div>
                     </div>
                 </div>
diff --git a/resources/js/views/admin/users/Manage.vue b/resources/js/views/admin/users/Manage.vue
index fdf11bcc0..0678cd566 100644
--- a/resources/js/views/admin/users/Manage.vue
+++ b/resources/js/views/admin/users/Manage.vue
@@ -230,11 +230,11 @@
                             <div class="tags ml-3 is-right">
                                 <UseColorMode v-slot="{ mode }">
                                     <!-- resend email button -->
-                                    <button v-if="managedUser.password_reset" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resendPasswordEmail" :title="$t('admin.resend_email_title')">
+                                    <button type="button" v-if="managedUser.password_reset" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resendPasswordEmail" :title="$t('admin.resend_email_title')">
                                         {{ $t('admin.resend_email') }}
                                     </button>
                                     <!-- reset password button -->
-                                    <button class="button tag is-pulled-right " :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resetPassword" :title="$t('admin.reset_password_title')">
+                                    <button type="button" class="button tag is-pulled-right " :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resetPassword" :title="$t('admin.reset_password_title')">
                                         {{ $t('admin.reset_password') }}
                                     </button>
                                 </UseColorMode>
@@ -260,7 +260,7 @@
                         <div class="tags ml-3 is-right">
                             <UseColorMode v-slot="{ mode }">
                                 <!-- manage link -->
-                                <button class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="revokePATs" :title="$t('admin.revoke_all_pat_for_user')">
+                                <button type="button" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="revokePATs" :title="$t('admin.revoke_all_pat_for_user')">
                                     {{ $t('settings.revoke') }}
                                 </button>
                             </UseColorMode>
@@ -279,7 +279,7 @@
                         <div class="tags ml-3 is-right">
                             <UseColorMode v-slot="{ mode }">
                                 <!-- manage link -->
-                                <button class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" :title="$t('admin.revoke_all_devices_for_user')">
+                                <button type="button" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" :title="$t('admin.revoke_all_devices_for_user')">
                                     {{ $t('settings.revoke') }}
                                 </button>
                             </UseColorMode>
@@ -316,7 +316,7 @@
                         {{  $t('admin.this_is_not_soft_delete') }}
                     </span>
                 </div>
-                <button class="button is-danger" @click="deleteUser" title="delete">
+                <button type="button" class="button is-danger" @click="deleteUser" title="delete">
                     {{  $t('admin.delete_this_user') }}
                 </button>
             </div>
diff --git a/resources/js/views/groups/Groups.vue b/resources/js/views/groups/Groups.vue
index 1a4cd3d2a..f5492c17a 100644
--- a/resources/js/views/groups/Groups.vue
+++ b/resources/js/views/groups/Groups.vue
@@ -49,7 +49,7 @@
                 {{ group.name }}
                 <!-- delete icon -->
                 <UseColorMode v-slot="{ mode }">
-                    <button class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="groups.delete(group.id)"  :title="$t('commons.delete')">
+                    <button type="button" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="groups.delete(group.id)"  :title="$t('commons.delete')">
                         {{ $t('commons.delete') }}
                     </button>
                 </UseColorMode>
diff --git a/resources/js/views/settings/OAuth.vue b/resources/js/views/settings/OAuth.vue
index e05520d54..79d37423f 100644
--- a/resources/js/views/settings/OAuth.vue
+++ b/resources/js/views/settings/OAuth.vue
@@ -165,10 +165,10 @@
                         <!-- revoke link -->
                         <div class="tags is-pulled-right">
                             <UseColorMode v-slot="{ mode }">
-                                <button v-if="token.value" class="button tag" :class="{'is-link': mode != 'dark'}" @click.stop="copyToClipboard(token.value)">
+                                <button type="button" v-if="token.value" class="button tag" :class="{'is-link': mode != 'dark'}" @click.stop="copyToClipboard(token.value)">
                                     {{ $t('commons.copy') }}
                                 </button>
-                                <button class="button tag" :class="mode === 'dark' ? 'is-dark':'is-white'" @click="revokeToken(token.id)" :title="$t('settings.revoke')">
+                                <button type="button" class="button tag" :class="mode === 'dark' ? 'is-dark':'is-white'" @click="revokeToken(token.id)" :title="$t('settings.revoke')">
                                     {{ $t('settings.revoke') }}
                                 </button>
                             </UseColorMode>
diff --git a/resources/js/views/settings/WebAuthn.vue b/resources/js/views/settings/WebAuthn.vue
index 8168a969f..3bf47b716 100644
--- a/resources/js/views/settings/WebAuthn.vue
+++ b/resources/js/views/settings/WebAuthn.vue
@@ -143,7 +143,7 @@
                         {{ displayName(credential) }}
                         <!-- revoke link -->
                         <UseColorMode v-slot="{ mode }">
-                            <button class="button tag is-pulled-right" :class="mode === 'dark' ? 'is-dark':'is-white'" @click="revokeCredential(credential.id)" :title="$t('settings.revoke')">
+                            <button type="button" class="button tag is-pulled-right" :class="mode === 'dark' ? 'is-dark':'is-white'" @click="revokeCredential(credential.id)" :title="$t('settings.revoke')">
                                 {{ $t('settings.revoke') }}
                             </button>
                         </UseColorMode>
diff --git a/resources/js/views/twofaccounts/Accounts.vue b/resources/js/views/twofaccounts/Accounts.vue
index d9051b185..5d18ceeb3 100644
--- a/resources/js/views/twofaccounts/Accounts.vue
+++ b/resources/js/views/twofaccounts/Accounts.vue
@@ -343,12 +343,12 @@
                         <div class="columns">
                             <UseColorMode v-slot="{ mode }">
                                 <div class="column" v-if="showGroupSwitch">
-                                    <button id="btnHideGroupSwitch" :title="$t('groups.hide_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
+                                    <button type="button" id="btnHideGroupSwitch" :title="$t('groups.hide_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
                                         {{ $t('groups.select_accounts_to_show') }}
                                     </button>
                                 </div>
                                 <div class="column" v-else>
-                                    <button id="btnShowGroupSwitch" :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
+                                    <button type="button" id="btnShowGroupSwitch" :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
                                         {{ groups.current }} ({{ twofaccounts.filteredCount }})&nbsp;
                                         <FontAwesomeIcon  :icon="['fas', 'caret-down']" />
                                     </button>
@@ -432,7 +432,7 @@
                                     <span v-else>
                                         <!-- get hotp button -->
                                         <UseColorMode v-slot="{ mode }">
-                                            <button class="button tag" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="showOTP(account)" :title="$t('twofaccounts.import.import_this_account')">
+                                            <button type="button" class="button tag" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="showOTP(account)" :title="$t('twofaccounts.import.import_this_account')">
                                                 {{ $t('commons.generate') }}
                                             </button>
                                         </UseColorMode>
@@ -441,10 +441,10 @@
                             </transition>
                             <transition name="popLater" v-if="user.preferences.showOtpAsDot && user.preferences.revealDottedOTP">
                                 <div v-show="user.preferences.getOtpOnRequest == false && !bus.inManagementMode" class="has-text-right">
-                                    <button v-if="revealPassword == account.id" class="pr-0 button is-ghost has-text-grey-dark" @click.stop="revealPassword = null">
+                                    <button v-if="revealPassword == account.id" type="button" class="pr-0 button is-ghost has-text-grey-dark" @click.stop="revealPassword = null">
                                         <font-awesome-icon :icon="['fas', 'eye']" />
                                     </button>
-                                    <button v-else class="pr-0 button is-ghost has-text-grey-dark" @click.stop="revealPassword = account.id">
+                                    <button v-else type="button" class="pr-0 button is-ghost has-text-grey-dark" @click.stop="revealPassword = account.id">
                                         <font-awesome-icon :icon="['fas', 'eye-slash']" />
                                     </button>
                                 </div>
diff --git a/resources/js/views/twofaccounts/CreateUpdate.vue b/resources/js/views/twofaccounts/CreateUpdate.vue
index b481b531e..275a542a8 100644
--- a/resources/js/views/twofaccounts/CreateUpdate.vue
+++ b/resources/js/views/twofaccounts/CreateUpdate.vue
@@ -428,7 +428,7 @@
                             <input inert class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
                             <FontAwesomeIcon :icon="['fas', 'image']" size="2x" />
                         </label>
-                        <button class="delete delete-icon-button is-medium" v-if="tempIcon" @click.prevent="deleteTempIcon"></button>
+                        <button type="button" class="delete delete-icon-button is-medium" v-if="tempIcon" @click.prevent="deleteTempIcon"></button>
                         <OtpDisplay
                             ref="OtpDisplayForQuickForm"
                             v-bind="form.data()"
@@ -515,7 +515,7 @@
                             </div>
                             <span class="tag is-large" :class="mode =='dark' ? 'is-dark' : 'is-white'" v-if="tempIcon">
                                 <img class="icon-preview" :src="$2fauth.config.subdirectory + '/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
-                                <button class="clear-selection delete is-small" @click.prevent="deleteTempIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
+                                <button type="button" class="clear-selection delete is-small" @click.prevent="deleteTempIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
                             </span>
                         </UseColorMode>
                     </div>
diff --git a/resources/js/views/twofaccounts/Import.vue b/resources/js/views/twofaccounts/Import.vue
index 537e59cde..9cf4e6584 100644
--- a/resources/js/views/twofaccounts/Import.vue
+++ b/resources/js/views/twofaccounts/Import.vue
@@ -409,12 +409,12 @@
                         <div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
                             <!-- discard button -->
                             <UseColorMode v-slot="{ mode }">
-                                <button class="button tag" :class="{'is-dark has-text-grey-light' : mode == 'dark'}" @click="discardAccount(index)"  :title="$t('twofaccounts.import.discard_this_account')">
+                                <button type="button" class="button tag" :class="{'is-dark has-text-grey-light' : mode == 'dark'}" @click="discardAccount(index)"  :title="$t('twofaccounts.import.discard_this_account')">
                                     <FontAwesomeIcon :icon="['fas', 'trash']" />
                                 </button>
                             </UseColorMode>
                             <!-- import button -->
-                            <button v-if="account.id > -2" class="button tag is-link" @click="createAccount(index)"  :title="$t('twofaccounts.import.import_this_account')">
+                            <button v-if="account.id > -2" type="button" class="button tag is-link" @click="createAccount(index)"  :title="$t('twofaccounts.import.import_this_account')">
                                 {{ $t('twofaccounts.import.to_import') }}
                             </button>
                         </div>
@@ -447,18 +447,18 @@
                 </div>
                 <!-- discard links -->
                 <div v-if="importableCount > 0" class="mt-2 is-size-7 is-pulled-right">
-                    <button v-if="duplicateCount" @click="discardDuplicates()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_duplicates') }} ({{duplicateCount}})</button>
-                    <button @click="discardAccounts()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_all') }}</button>
+                    <button v-if="duplicateCount" @click="discardDuplicates()" type="button" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_duplicates') }} ({{duplicateCount}})</button>
+                    <button @click="discardAccounts()" type="button" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_all') }}</button>
                 </div>
                 <div v-if="importedCount == exportedAccounts.length"  class="mt-2 is-size-7 is-pulled-right">
-                    <button @click="exportedAccounts = []" class="has-text-grey button is-small is-ghost">{{ $t('commons.clear') }}</button>
+                    <button @click="exportedAccounts = []" type="button" class="has-text-grey button is-small is-ghost">{{ $t('commons.clear') }}</button>
                 </div>
             </div>
             <!-- footer -->
             <VueFooter :showButtons="true">
                 <!-- Import all button -->
                 <p class="control" v-if="importableCount > 0">
-                    <button class="button is-link is-rounded is-focus" @click="createAccounts">
+                    <button type="button" class="button is-link is-rounded is-focus" @click="createAccounts">
                         <span>{{ $t('twofaccounts.import.import_all') }} ({{ importableCount }})</span>
                         <!-- <span class="icon is-small">
                             <FontAwesomeIcon :icon="['fas', 'qrcode']" />