extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-01-20 13:19:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add explicit button type

Browse Source
This commit is contained in:
Bubka 2024-11-22 15:01:06 +01:00
parent 6fa0588d72
commit 6ead7708b5
20 changed files with 51 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/components/AccessLogViewer.vue
View File

@ -142,23 +142,23 @@
<nav v-if="props.showSearch" class="level is-mobile mb-2"> <nav v-if="props.showSearch" class="level is-mobile mb-2">
<div class="level-item has-text-centered"> <div class="level-item has-text-centered">
<div class="buttons"> <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') }} {{ $t('commons.one_month') }}
</button> </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' }) }} {{ $t('commons.x_month', { 'x' : '3' }) }}
</button> </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' }) }} {{ $t('commons.x_month', { 'x' : '6' }) }}
</button> </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') }} {{ $t('commons.one_year') }}
</button> </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="['fas', 'arrow-up-long']" flip="vertical" />
<FontAwesomeIcon :icon="['far', 'calendar']" /> <FontAwesomeIcon :icon="['far', 'calendar']" />
</button> </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="['fas', 'arrow-up-long']" />
<FontAwesomeIcon :icon="['far', 'calendar']" /> <FontAwesomeIcon :icon="['far', 'calendar']" />
</button> </button>

4
resources/js/components/ActionButtons.vue
View File

@ -32,7 +32,7 @@
<UseColorMode v-slot="{ mode }"> <UseColorMode v-slot="{ mode }">
<!-- New item buttons --> <!-- New item buttons -->
<p class="control" v-if="!inManagementMode"> <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>{{ $t('commons.new') }}</span>
<span class="icon is-small"> <span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'qrcode']" /> <FontAwesomeIcon :icon="['fas', 'qrcode']" />
@ -41,7 +41,7 @@
</p> </p>
<!-- Manage button --> <!-- Manage button -->
<p class="control" v-if="!inManagementMode"> <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> </p>
<!-- move button --> <!-- move button -->
<p class="control" v-if="inManagementMode"> <p class="control" v-if="inManagementMode">

2
resources/js/components/CopyButton.vue
View File

@ -15,7 +15,7 @@
</script> </script>
<template> <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']" /> <FontAwesomeIcon :icon="['fas', 'copy']" />
</button> </button>
</template> </template>

4
resources/js/components/DestinationGroupSelector.vue
View File

@ -39,7 +39,7 @@
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-full" v-for="group in groups" :key="group.id"> <div class="column is-full" v-for="group in groups" :key="group.id">
<UseColorMode v-slot="{ mode }"> <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"> <span v-if="group.id === 0" class="is-italic">
{{ $t('groups.no_group') }} {{ $t('groups.no_group') }}
</span> </span>
@ -60,7 +60,7 @@
<VueFooter :showButtons="true"> <VueFooter :showButtons="true">
<!-- Move to selected group button --> <!-- Move to selected group button -->
<p class="control"> <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> </p>
<ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" /> <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
</VueFooter> </VueFooter>

4
resources/js/components/ExportButtons.vue
View File

@ -21,7 +21,7 @@
{{ $t('twofaccounts.twofauth_export_schema') }} {{ $t('twofaccounts.twofauth_export_schema') }}
</a> </a>
</p> </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') }} {{ $t('twofaccounts.twofauth_export_format') }}
</button> </button>
</div> </div>
@ -32,7 +32,7 @@
<p class="is-size-7-mobile"> <p class="is-size-7-mobile">
{{ $t('twofaccounts.otpauth_export_format_desc') }} {{ $t('twofaccounts.otpauth_export_format_desc') }}
</p> </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') }} {{ $t('twofaccounts.otpauth_export_format') }}
</button> </button>
</div> </div>

2
resources/js/components/GroupSwitch.vue
View File

@ -33,7 +33,7 @@
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-full" v-for="group in groups" :key="group.id"> <div class="column is-full" v-for="group in groups" :key="group.id">
<UseColorMode v-slot="{ mode }"> <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> </UseColorMode>
</div> </div>
</div> </div>

2
resources/js/components/OtpDisplay.vue
View File

@ -333,7 +333,7 @@
{{ $t('twofaccounts.forms.counter.label') }}: {{ otpauthParams.counter }} {{ $t('twofaccounts.forms.counter.label') }}: {{ otpauthParams.counter }}
</p> </p>
<p v-if="user.preferences.showOtpAsDot && user.preferences.revealDottedOTP" class="mt-3"> <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-if="revealPassword" :icon="['fas', 'eye']" />
<font-awesome-icon v-else :icon="['fas', 'eye-slash']" /> <font-awesome-icon v-else :icon="['fas', 'eye-slash']" />
</button> </button>

4
resources/js/components/QrContentDisplay.vue
View File

@ -50,13 +50,13 @@
<div class="block mb-6 light-or-darker">{{ qrContent ? qrContent : '[' + trans('commons.nothing') + ']' }}</div> <div class="block mb-6 light-or-darker">{{ qrContent ? qrContent : '[' + trans('commons.nothing') + ']' }}</div>
<!-- Copy to clipboard --> <!-- Copy to clipboard -->
<div class="block has-text-link" v-if="qrContent"> <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') }} {{ $t('commons.copy_to_clipboard') }}
</button> </button>
</div> </div>
<!-- Open in browser --> <!-- Open in browser -->
<div class="block has-text-link" v-if="isUrl(qrContent)" @click="openInBrowser(qrContent)"> <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>{{ $t('commons.open_in_browser') }}</span>
<span class="icon is-small"> <span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'external-link-alt']" /> <FontAwesomeIcon :icon="['fas', 'external-link-alt']" />

2
resources/js/components/SearchBox.vue
View File

@ -44,7 +44,7 @@
:value="keyword" :value="keyword"
v-on:keyup="$emit('update:keyword', $event.target.value)"> v-on:keyup="$emit('update:keyword', $event.target.value)">
<span class="icon is-small is-right"> <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']" /> <FontAwesomeIcon v-else :icon="['fas', 'search']" />
</span> </span>
</div> </div>

8
resources/js/components/Toolbar.vue
View File

@ -11,17 +11,17 @@
<!-- selected label --> <!-- selected label -->
<span class="has-text-grey mr-1">{{ $t('commons.x_selected', { count: selectedCount }) }}</span> <span class="has-text-grey mr-1">{{ $t('commons.x_selected', { count: selectedCount }) }}</span>
<!-- deselect all --> <!-- 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 --> <!-- 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> <span>{{ $t('commons.check_all') }}</span>
<FontAwesomeIcon class="ml-1" :icon="['fas', 'check-square']" /> <FontAwesomeIcon class="ml-1" :icon="['fas', 'check-square']" />
</button> </button>
<!-- sort asc/desc buttons --> <!-- 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']" /> <FontAwesomeIcon :icon="['fas', 'sort-alpha-down']" />
</button> </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']" /> <FontAwesomeIcon :icon="['fas', 'sort-alpha-up']" />
</button> </button>
</div> </div>

6
resources/js/layouts/Footer.vue
View File

@ -36,7 +36,7 @@
<!-- sub-links --> <!-- sub-links -->
<div v-if="internalFooterType == 'doneButton'" class="content has-text-centered"> <div v-if="internalFooterType == 'doneButton'" class="content has-text-centered">
<!-- done link --> <!-- 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>
<div v-else-if="internalFooterType == 'modal'" class="content has-text-centered"> <div v-else-if="internalFooterType == 'modal'" class="content has-text-centered">
<!-- back to home link --> <!-- back to home link -->
@ -69,7 +69,7 @@
<!-- sign-out button --> <!-- sign-out button -->
<li v-if="!$2fauth.config.proxyAuth || ($2fauth.config.proxyAuth && $2fauth.config.proxyLogoutUrl)" class="column"> <li v-if="!$2fauth.config.proxyAuth || ($2fauth.config.proxyAuth && $2fauth.config.proxyLogoutUrl)" class="column">
<UseColorMode v-slot="{ mode }"> <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') }} {{ $t('auth.sign_out') }}
</button> </button>
</UseColorMode> </UseColorMode>
@ -98,7 +98,7 @@
</span> </span>
<!-- sign-out button --> <!-- sign-out button -->
<span v-if="!$2fauth.config.proxyAuth || ($2fauth.config.proxyAuth && $2fauth.config.proxyLogoutUrl)"> <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> </span>
</div> </div>
</div> </div>

2
resources/js/views/Start.vue
View File

@ -76,7 +76,7 @@
{{ $t('twofaccounts.forms.upload_qrcode') }} {{ $t('twofaccounts.forms.upload_qrcode') }}
</label> </label>
<!-- scan button that launch camera stream --> <!-- 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') }} {{ $t('twofaccounts.forms.scan_qrcode') }}
</button> </button>
</div> </div>

6
resources/js/views/admin/Users.vue
View File

@ -131,9 +131,9 @@
</div> </div>
<div class="level-item has-text-centered is-justify-content-start"> <div class="level-item has-text-centered is-justify-content-start">
<div class="buttons"> <div class="buttons">
<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('admin:1')">admin</button>
<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: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('oauth:openid')">openId</button>
</div> </div>
</div> </div>
</div> </div>

10
resources/js/views/admin/users/Manage.vue
View File

@ -230,11 +230,11 @@
<div class="tags ml-3 is-right"> <div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }"> <UseColorMode v-slot="{ mode }">
<!-- resend email button --> <!-- 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') }} {{ $t('admin.resend_email') }}
</button> </button>
<!-- reset password 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') }} {{ $t('admin.reset_password') }}
</button> </button>
</UseColorMode> </UseColorMode>
@ -260,7 +260,7 @@
<div class="tags ml-3 is-right"> <div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }"> <UseColorMode v-slot="{ mode }">
<!-- manage link --> <!-- 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') }} {{ $t('settings.revoke') }}
</button> </button>
</UseColorMode> </UseColorMode>
@ -279,7 +279,7 @@
<div class="tags ml-3 is-right"> <div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }"> <UseColorMode v-slot="{ mode }">
<!-- manage link --> <!-- 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') }} {{ $t('settings.revoke') }}
</button> </button>
</UseColorMode> </UseColorMode>
@ -316,7 +316,7 @@
{{ $t('admin.this_is_not_soft_delete') }} {{ $t('admin.this_is_not_soft_delete') }}
</span> </span>
</div> </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') }} {{ $t('admin.delete_this_user') }}
</button> </button>
</div> </div>

2
resources/js/views/groups/Groups.vue
View File

@ -49,7 +49,7 @@
{{ group.name }} {{ group.name }}
<!-- delete icon --> <!-- delete icon -->
<UseColorMode v-slot="{ mode }"> <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') }} {{ $t('commons.delete') }}
</button> </button>
</UseColorMode> </UseColorMode>

4
resources/js/views/settings/OAuth.vue
View File

@ -165,10 +165,10 @@
<!-- revoke link --> <!-- revoke link -->
<div class="tags is-pulled-right"> <div class="tags is-pulled-right">
<UseColorMode v-slot="{ mode }"> <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') }} {{ $t('commons.copy') }}
</button> </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') }} {{ $t('settings.revoke') }}
</button> </button>
</UseColorMode> </UseColorMode>

2
resources/js/views/settings/WebAuthn.vue
View File

@ -143,7 +143,7 @@
{{ displayName(credential) }} {{ displayName(credential) }}
<!-- revoke link --> <!-- revoke link -->
<UseColorMode v-slot="{ mode }"> <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') }} {{ $t('settings.revoke') }}
</button> </button>
</UseColorMode> </UseColorMode>

10
resources/js/views/twofaccounts/Accounts.vue
View File

@ -343,12 +343,12 @@
<div class="columns"> <div class="columns">
<UseColorMode v-slot="{ mode }"> <UseColorMode v-slot="{ mode }">
<div class="column" v-if="showGroupSwitch"> <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') }} {{ $t('groups.select_accounts_to_show') }}
</button> </button>
</div> </div>
<div class="column" v-else> <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; {{ groups.current }} ({{ twofaccounts.filteredCount }})&nbsp;
<FontAwesomeIcon :icon="['fas', 'caret-down']" /> <FontAwesomeIcon :icon="['fas', 'caret-down']" />
</button> </button>
@ -432,7 +432,7 @@
<span v-else> <span v-else>
<!-- get hotp button --> <!-- get hotp button -->
<UseColorMode v-slot="{ mode }"> <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') }} {{ $t('commons.generate') }}
</button> </button>
</UseColorMode> </UseColorMode>
@ -441,10 +441,10 @@
</transition> </transition>
<transition name="popLater" v-if="user.preferences.showOtpAsDot && user.preferences.revealDottedOTP"> <transition name="popLater" v-if="user.preferences.showOtpAsDot && user.preferences.revealDottedOTP">
<div v-show="user.preferences.getOtpOnRequest == false && !bus.inManagementMode" class="has-text-right"> <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']" /> <font-awesome-icon :icon="['fas', 'eye']" />
</button> </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']" /> <font-awesome-icon :icon="['fas', 'eye-slash']" />
</button> </button>
</div> </div>

4
resources/js/views/twofaccounts/CreateUpdate.vue
View File

@ -428,7 +428,7 @@
<input inert class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput"> <input inert class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
<FontAwesomeIcon :icon="['fas', 'image']" size="2x" /> <FontAwesomeIcon :icon="['fas', 'image']" size="2x" />
</label> </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 <OtpDisplay
ref="OtpDisplayForQuickForm" ref="OtpDisplayForQuickForm"
v-bind="form.data()" v-bind="form.data()"
@ -515,7 +515,7 @@
</div> </div>
<span class="tag is-large" :class="mode =='dark' ? 'is-dark' : 'is-white'" v-if="tempIcon"> <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')"> <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> </span>
</UseColorMode> </UseColorMode>
</div> </div>

12
resources/js/views/twofaccounts/Import.vue
View File

@ -409,12 +409,12 @@
<div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap"> <div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
<!-- discard button --> <!-- discard button -->
<UseColorMode v-slot="{ mode }"> <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']" /> <FontAwesomeIcon :icon="['fas', 'trash']" />
</button> </button>
</UseColorMode> </UseColorMode>
<!-- import button --> <!-- 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') }} {{ $t('twofaccounts.import.to_import') }}
</button> </button>
</div> </div>
@ -447,18 +447,18 @@
</div> </div>
<!-- discard links --> <!-- discard links -->
<div v-if="importableCount > 0" class="mt-2 is-size-7 is-pulled-right"> <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 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()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_all') }}</button> <button @click="discardAccounts()" type="button" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_all') }}</button>
</div> </div>
<div v-if="importedCount == exportedAccounts.length" class="mt-2 is-size-7 is-pulled-right"> <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>
</div> </div>
<!-- footer --> <!-- footer -->
<VueFooter :showButtons="true"> <VueFooter :showButtons="true">
<!-- Import all button --> <!-- Import all button -->
<p class="control" v-if="importableCount > 0"> <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>{{ $t('twofaccounts.import.import_all') }} ({{ importableCount }})</span>
<!-- <span class="icon is-small"> <!-- <span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'qrcode']" /> <FontAwesomeIcon :icon="['fas', 'qrcode']" />