Implement twofaccounts & groups stores & Add ActionButtons component

resources/js_vue3/components/ActionButtons.vue

@@ -0,0 +1,79 @@
+<script setup>
+    import { UseColorMode  } from '@vueuse/components'
+    import { useUserStore } from '@/stores/user'
+
+    const router = useRouter()
+    const user = useUserStore()
+
+    const props = defineProps({
+        inManagementMode: Boolean,
+        areDisabled: Boolean
+    }) 
+    
+    const emit = defineEmits(['update:inManagementMode, move-button-clicked', 'delete-button-clicked', 'export-button-clicked'])
+
+    /**
+     * Routes user to the appropriate submitting view
+     */
+    function goAddNewAccount() {
+        if( user.preferences.useDirectCapture && user.preferences.defaultCaptureMode === 'advancedForm' ) {
+            router.push({ name: 'createAccount' })
+        }
+        else if( user.preferences.useDirectCapture && user.preferences.defaultCaptureMode === 'livescan' ) {
+            router.push({ name: 'capture' })
+        }
+        else {
+            router.push({ name: 'start' })
+        }
+    }
+</script>
+
+<template>
+    <UseColorMode v-slot="{ mode }">
+        <!-- New item buttons -->
+        <p class="control" v-if="!inManagementMode">
+            <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']" />
+                </span>
+            </button>
+        </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>
+        </p>
+        <!-- move button -->
+        <p class="control" v-if="inManagementMode">
+            <button
+                id="btnMove" 
+                :disabled='areDisabled' class="button is-rounded"
+                :class="[{ 'is-outlined': mode == 'dark' || areDisabled }, areDisabled ? 'is-dark': 'is-link']"
+                @click="$emit('move-button-clicked')"
+                :title="$t('groups.move_selected_to_group')" >
+                    {{ $t('commons.move') }}
+            </button>
+        </p>
+        <!-- delete button -->
+        <p class="control" v-if="inManagementMode">
+            <button
+                id="btnDelete" 
+                :disabled='areDisabled' class="button is-rounded"
+                :class="[{ 'is-outlined': mode == 'dark' || areDisabled }, areDisabled ? 'is-dark': 'is-link']"
+                @click="$emit('delete-button-clicked')" >
+                    {{ $t('commons.delete') }}
+            </button>
+        </p>
+        <!-- export button -->
+        <p class="control" v-if="inManagementMode">
+            <button
+                id="btnExport" 
+                :disabled='areDisabled' class="button is-rounded"
+                :class="[{ 'is-outlined': mode == 'dark' || areDisabled }, areDisabled ? 'is-dark': 'is-link']"
+                @click="$emit('export-button-clicked')"
+                :title="$t('twofaccounts.export_selected_to_json')" >
+                    {{ $t('commons.export') }}
+            </button>
+        </p>
+    </UseColorMode>
+</template>

resources/js_vue3/stores/groups.js

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { useUserStore } from '@/stores/user'
+import groupService from '@/services/groupService'
+
+export const useGroups = defineStore({
+    id: 'groups',
+
+    state: () => {
+        return {
+            items: [],
+        }
+    },
+
+    getters: {
+        current(state) {
+            const group = state.items.find(item => item.id === parseInt(useUserStore().preferences.activeGroup))
+
+            return group ? group.name : trans('commons.all')
+        }
+    },
+
+    actions: {
+
+        /**
+         * Refreshes the groups collection using the backend
+         */
+        refresh() {
+            groupService.getAll().then(response => {
+                this.items = response.data
+            })
+        },
+
+    },
+})

resources/js_vue3/stores/twofaccounts.js

@@ -0,0 +1,151 @@
+import { defineStore } from 'pinia'
+import { useUserStore } from '@/stores/user'
+import { useNotifyStore } from '@/stores/notify'
+import twofaccountService from '@/services/twofaccountService'
+import { saveAs } from 'file-saver'
+
+export const useTwofaccounts = defineStore({
+    id: 'twofaccounts',
+
+    state: () => {
+        return {
+            items: [],
+            selectedIds: [],
+            filter: '',
+        }
+    },
+
+    getters: {
+        filtered(state) {
+            const user = useUserStore()
+
+            return state.items.filter(
+                item => {
+                    if (parseInt(user.preferences.activeGroup) > 0 ) {
+                        return ((item.service ? item.service.toLowerCase().includes(state.filter.toLowerCase()) : false) ||
+                            item.account.toLowerCase().includes(state.filter.toLowerCase())) &&
+                            (item.group_id == parseInt(user.preferences.activeGroup))
+                    }
+                    else {
+                        return ((item.service ? item.service.toLowerCase().includes(state.filter.toLowerCase()) : false) ||
+                            item.account.toLowerCase().includes(state.filter.toLowerCase()))
+                    }
+                }
+            )
+        },
+
+        orderedIds(state) {
+            return state.items.map(a => a.id)
+        },
+
+        isNotEmpty(state) {
+            return state.items.length > 0
+        },
+
+        count(state) {
+            return state.items.length
+        },
+
+        filteredCount(state) {
+            return state.filtered.length
+        },
+
+        selectedCount(state) {
+            return state.selectedIds.length
+        },
+
+        hasNoneSelected(state) {
+            return state.selectedIds.length == 0
+        },
+    },
+
+    actions: {
+
+        /**
+         * Refreshes the accounts collection using the backend
+         */
+        async refresh() {
+            await twofaccountService.getAll(! useUserStore().preferences.getOtpOnRequest).then(response => {
+                this.items = response.data
+            })
+        },
+
+        /**
+         * Adds an account to the current selection
+         */
+        select(id) {
+            for (var i=0 ; i < this.selectedIds.length ; i++) {
+                if ( this.selectedIds[i] === id ) {
+                    this.selectedIds.splice(i,1);
+                    return
+                }
+            }
+            this.selectedIds.push(id)
+        },
+
+        /**
+         * Selects all accounts
+         */
+        selectAll() {
+            this.selectedIds = this.items.map(a => a.id)
+        },
+
+        /**
+         * Selects no account
+         */
+        selectNone() {
+            this.selectedIds = []
+        },
+
+        /**
+         * Deletes selected accounts
+         */
+        async deleteSelected() {
+            if(confirm(trans('twofaccounts.confirm.delete')) && this.selectedIds.length > 0) {
+                await twofaccountService.batchDelete(this.selectedIds.join())
+                .then(response => {
+                    ids.forEach(function(id) {
+                        this.items = this.items.filter(a => a.id !== id)
+                    })
+                    useNotifyStore().info({ text: trans('twofaccounts.accounts_deleted') })
+                })
+
+                this.refresh()
+            }
+        },
+
+        /**
+         * Exports selected accounts to a json file
+         */
+        export() {
+            twofaccountService.export(this.selectedIds.join(), {responseType: 'blob'})
+            .then((response) => {
+                var blob = new Blob([response.data], {type: "application/json;charset=utf-8"});
+                saveAs.saveAs(blob, "2fauth_export.json");
+            })
+        },
+
+        /**
+         * Saves the accounts order to db
+         */
+        saveOrder() {
+            twofaccountService.saveOrder(this.orderedIds)
+        },
+        
+        /**
+         * Sorts accounts ascending
+         */
+        sortAsc() {
+            this.items.sort((a, b) => a.service > b.service ? 1 : -1)
+            this.saveOrder()
+        },
+
+        /**
+         *Sorts accounts descending
+        */
+        sortDesc() {
+            this.items.sort((a, b) => a.service < b.service ? 1 : -1)
+            this.saveOrder()
+        },
+    },
+})

resources/js_vue3/views/Accounts.vue

@@ -8,13 +8,15 @@
     import SearchBox from '@/components/SearchBox.vue'
     import Toolbar from '@/components/Toolbar.vue'
     import OtpDisplay from '@/components/OtpDisplay.vue'
+    import ActionButtons from '@/components/ActionButtons.vue'
     import { UseColorMode } from '@vueuse/components'
     import { useUserStore } from '@/stores/user'
     import { useNotifyStore } from '@/stores/notify'
     import { useBusStore } from '@/stores/bus'
+    import { useTwofaccounts } from '@/stores/twofaccounts'
+    import { useGroups } from '@/stores/groups'
     import { useAppSettingsStore } from '@/stores/appSettings'
     import { useDisplayablePassword } from '@/composables/helpers'
-    import { saveAs } from 'file-saver';
 
     const $2fauth = inject('2fauth')
     const notify = useNotifyStore()
@@ -23,41 +25,27 @@
     const router = useRouter()
     const appSettings = useAppSettingsStore()
     const { copy, copied } = useClipboard({ legacy: true })
+    const twofaccounts = useTwofaccounts()
+    const groups = useGroups()
 
-    const search = ref('')
-    const accounts = ref([])
-    const groups = ref([])
-    const selectedAccounts = ref([])
     const showOtpInModal = ref(false)
-    const isDragging = ref(false)
     const showGroupSwitch = ref(false)
     const showDestinationGroupSelector = ref(false)
+    const isDragging = ref(false)
+
     const otpDisplay = ref(null)
 
-    const selectedAccountsIds = computed(() => {
+    watch(showOtpInModal, (val) => {
-        return selectedAccounts.value.forEach(id => ids.push(id))
+        if (val == false) {
-    })
+            otpDisplay.value?.clearOTP()
-
+        }
-    /**
-     * Returns the name of a group
-     */
-    const activeGroupName = computed(() => {
-        const g = groups.value.find(el => el.id === parseInt(user.preferences.activeGroup))
-
-        return g ? g.name : trans('commons.all')
     })
 
     /**
      * Returns whether or not the accounts should be displayed
     */
     const showAccounts = computed(() => {
-        return accounts.value.length > 0 && !showGroupSwitch.value && !showDestinationGroupSelector.value
+        return twofaccounts.isNotEmpty && !showGroupSwitch.value && !showDestinationGroupSelector.value
-    })
-
-    watch(showOtpInModal, (val) => {
-        if (val == false) {
-            otpDisplay.value?.clearOTP()
-        }
     })
 
     onMounted(() => {
@@ -70,8 +58,14 @@
         //     if( groups ) this.groups = groups
         // }
 
-        // we fetch fresh data whatever. The user will be notified to reload the page if there are any data changes
+        // We fetch fresh data whatever. The user will be notified to reload the page if there are any data changes
-        fetchAccounts()
+        twofaccounts.refresh()
+        groups.refresh()
+
+        // if (twofaccounts.count === 0) {
+        //     // No account yet, we force user to land on the start view.
+        //     router.push({ name: 'start' });
+        // }
 
         // stop OTP generation on modal close
         // this.$on('modalClose', function() {
@@ -80,107 +74,7 @@
     })
 
     /**
-     * The actual list of displayed accounts
+     * Runs some updates after accounts assignement/withdrawal
-     */
-    const filteredAccounts = computed({
-        get() {
-            return accounts.value.filter(
-                item => {
-                    if (parseInt(user.preferences.activeGroup) > 0 ) {
-                        return ((item.service ? item.service.toLowerCase().includes(search.value.toLowerCase()) : false) ||
-                            item.account.toLowerCase().includes(search.value.toLowerCase())) &&
-                            (item.group_id == parseInt(user.preferences.activeGroup))
-                    }
-                    else {
-                        return ((item.service ? item.service.toLowerCase().includes(search.value.toLowerCase()) : false) ||
-                            item.account.toLowerCase().includes(search.value.toLowerCase()))
-                    }
-                }
-            )
-        },
-        set(newValue) {
-            accounts.value = newValue
-        }
-    })
-
-    /**
-     * Fetch accounts from db
-     */
-    function fetchAccounts(forceRefresh = false) {
-        let _accounts = []
-        selectedAccounts.value = []
-
-        twofaccountService.getAll(!user.preferences.getOtpOnRequest).then(response => {
-            response.data.forEach((data) => {
-                _accounts.push(data)
-            })
-
-            // if ( accounts.value.length > 0 && !objectEquals(_accounts, accounts.value, { depth: 1 }) && !forceRefresh ) {
-            //     notify.action({
-            //         text: '<span class="is-size-7">' + trans('commons.some_data_have_changed') + '</span><br /><a href="." class="button is-rounded is-warning is-small">' + trans('commons.reload') + '</a>',
-            //         duration:-1,
-            //         closeOnClick: false
-            //     })
-            // }
-            if( accounts.value.length === 0 && _accounts.length === 0 ) {
-                // No account yet, we force user to land on the start view.
-                //this.$storage.set('accounts', this.accounts)
-                router.push({ name: 'start' });
-            }
-            else {
-                accounts.value = _accounts
-                //this.$storage.set('accounts', accounts.value)
-                fetchGroups()
-            }
-        })
-    }
-
-    /**
-     * Select an account while in edit mode
-     */
-    function selectAccount(accountId) {
-        for (var i=0 ; i < selectedAccounts.value.length ; i++) {
-            if ( selectedAccounts.value[i] === accountId ) {
-                selectedAccounts.value.splice(i,1);
-                return
-            }
-        }
-
-        selectedAccounts.value.push(accountId)
-    }
-
-    /**
-     * Delete accounts selected from the Edit mode
-     */
-    async function destroyAccounts() {
-        if(confirm(trans('twofaccounts.confirm.delete'))) {
-            await twofaccountService.batchDelete(selectedAccountsIds.join())
-                .then(response => {
-                    ids.forEach(function(id) {
-                        accounts.value = accounts.filter(a => a.id !== id)
-                    })
-                    notify.info({ text: trans('twofaccounts.accounts_deleted') })
-                })
-
-            // we fetch the accounts again to prevent the js collection being
-            // desynchronize from the backend php collection
-            fetchAccounts(true)
-        }
-    }
-
-    /**
-     * Export selected accounts to a downloadable file
-     */
-    function exportAccounts() {
-        twofaccountService.export(selectedAccountsIds.join(), {responseType: 'blob'})
-        .then((response) => {
-            var blob = new Blob([response.data], {type: "application/json;charset=utf-8"});
-            saveAs.saveAs(blob, "2fauth_export.json");
-        })
-    }
-
-    /**
-     * Runs some updates after accounts assignement/withdraw
      */
     function postGroupAssignementUpdate() {
         // we fetch the accounts again to prevent the js collection being
@@ -193,9 +87,9 @@
      * Shows rotating OTP for the provided account
      */
     function showOTP(account) {
-        // In Edit mode, clicking an account does not show the otpDisplay, it selects the account
+        // In Management mode, clicking an account does not show the otpDisplay, it selects the account
         if(bus.inManagementMode) {
-            selectAccount(account.id)
+            twofaccounts.select(account.id)
         }
         else {
             showOtpInModal.value = true
@@ -203,46 +97,12 @@
         }
     }
 
-    /**
-     * Gets groups list from backend
-     */
-    function fetchGroups() {
-        groupService.getAll().then(response => {
-            let _groups = []
-
-            response.data.forEach((data) => {
-                _groups.push(data)
-            })
-
-            // if ( !objectEquals(_groups, groups.value) ) {
-                groups.value = _groups
-            // }
-
-            //this.$storage.set('groups', this.groups)
-        })
-    }
-
-    /**
-     * Routes user to the appropriate submitting view
-     */
-    function start() {
-        if( user.preferences.useDirectCapture && user.preferences.defaultCaptureMode === 'advancedForm' ) {
-            router.push({ name: 'createAccount' })
-        }
-        else if( user.preferences.useDirectCapture && user.preferences.defaultCaptureMode === 'livescan' ) {
-            router.push({ name: 'capture' })
-        }
-        else {
-            router.push({ name: 'start' })
-        }
-    }
-
     /**
      * Shows an OTP in a modal or directly copies it to the clipboard
      */
     function showOrCopy(account) {
         if (!user.preferences.getOtpOnRequest && account.otp_type.includes('totp')) {
-            copyOTP(account.otp.password)
+            copyToClipboard(account.otp.password)
         }
         else {
             showOTP(account)
@@ -250,9 +110,9 @@
     }
 
     /**
-     * Copies an OTP
+     * Copies a string to the clipboard
      */
-    function copyOTP (password) {
+    function copyToClipboard (password) {
         copy(password)
 
         if (copied) {
@@ -266,10 +126,10 @@
     /**
      * Gets a fresh OTP from backend and copies it
      */
-     async function getAndCopyOTP(account) {
+    async function getAndCopyOTP(account) {
         twofaccountService.getOtpById(account.id).then(response => {
             let otp = response.data
-            copyOTP(otp.password)
+            copyToClipboard(otp.password)
 
             if (otp.otp_type == 'hotp') {
                 let hotpToIncrement = accounts.value.find((acc) => acc.id == account.id)
@@ -281,52 +141,6 @@
             }
         })
     }
-
-    /**
-     * Save the account order in db
-     */
-    function saveOrder() {
-        isDragging.value = false
-        const orderedIds = accounts.value.map(a => a.id)
-        twofaccountService.saveOrder(orderedIds)
-    }
-
-    /**
-     * Sort accounts ascending
-     */
-    function sortAsc() {
-        accounts.value.sort((a, b) => a.service > b.service ? 1 : -1)
-        saveOrder()
-    }
-
-    /**
-     *Sort accounts descending
-     */
-     function sortDesc() {
-        accounts.value.sort((a, b) => a.service < b.service ? 1 : -1)
-        saveOrder()
-    }
-
-    /**
-     * Select all accounts while in edit mode
-     */
-    function selectAll() {
-        if(bus.inManagementMode) {
-            accounts.value.forEach(function(account) {
-                if ( !selectedAccounts.value.includes(account.id) ) {
-                    selectedAccounts.value.push(account.id)
-                }
-            })
-        }
-    }
-
-    /**
-     * Unselect all accounts
-     */
-    function unselectAll() {
-        selectedAccounts.value = []
-    }
-
 </script>
 
 <template>
@@ -335,7 +149,7 @@
         <DestinationGroupSelector
             v-if="showDestinationGroupSelector"
             v-model:showDestinationGroupSelector="showDestinationGroupSelector"
-            v-model:selectedAccountsIds="selectedAccountsIds"
+            v-model:selectedAccountsIds="twofaccounts.selectedIds"
             @account-moved="postGroupAssignementUpdate">
         </DestinationGroupSelector>
         <!-- header -->
@@ -343,28 +157,28 @@
             <div class="columns is-gapless is-mobile is-centered">
                 <div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
                     <!-- search -->
-                    <SearchBox v-model:keyword="search"/>
+                    <SearchBox v-model:keyword="twofaccounts.filter"/>
                     <!-- toolbar -->
                     <Toolbar v-if="bus.inManagementMode"
-                        :selectedCount="selectedAccounts.length"
+                        :selectedCount="twofaccounts.selectedCount"
-                        @clear-selected="selectedAccounts = []"
+                        @clear-selected="twofaccounts.selectNone()"
-                        @select-all="selectAll"
+                        @select-all="twofaccounts.selectAll()"
-                        @sort-asc="sortAsc"
+                        @sort-asc="twofaccounts.sortAsc()"
-                        @sort-desc="sortDesc">
+                        @sort-desc="twofaccounts.sortDesc()">
                     </Toolbar>
                     <!-- group switch toggle -->
                     <div v-else class="has-text-centered">
                         <div class="columns">
                             <UseColorMode v-slot="{ mode }">
-                                <div class="column" v-if="!showGroupSwitch">
+                                <div class="column" v-if="showGroupSwitch">
-                                    <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 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">
-                                        {{ activeGroupName }} ({{ filteredAccounts.length }})&nbsp;
+                                        {{ $t('groups.select_accounts_to_show') }}
-                                        <FontAwesomeIcon  :icon="['fas', 'caret-down']" />
                                     </button>
                                 </div>
                                 <div class="column" v-else>
-                                    <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 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">
-                                        {{ $t('groups.select_accounts_to_show') }}
+                                        {{ groups.current }} ({{ twofaccounts.filteredCount }})&nbsp;
+                                        <FontAwesomeIcon  :icon="['fas', 'caret-down']" />
                                     </button>
                                 </div>
                             </UseColorMode>
@@ -389,19 +203,19 @@
                 readyLabel: '',
                 loadingLabel: 'refreshing'
                 }" > -->
-                <!-- <draggable v-model="filteredAccounts" @start="isDragging = true" @end="saveOrder" ghost-class="ghost" handle=".tfa-dots" animation="200" class="accounts"> -->
+                <!-- <draggable v-model="twofaccounts.filtered" @start="isDragging = true" @end="() => {isDragging = false; twofaccounts.saveOrder()}" ghost-class="ghost" handle=".tfa-dots" animation="200" class="accounts"> -->
                 <div class="accounts">
                     <!-- <transition-group class="columns is-multiline" :class="{ 'is-centered': user.preferences.displayMode === 'grid' }" type="transition" :name="!isDragging ? 'flip-list' : null"> -->
                     <span class="columns is-multiline">
-                        <div :class="[user.preferences.displayMode === 'grid' ? 'tfa-grid' : 'tfa-list']" class="column is-narrow" v-for="account in filteredAccounts" :key="account.id">
+                        <div :class="[user.preferences.displayMode === 'grid' ? 'tfa-grid' : 'tfa-list']" class="column is-narrow" v-for="account in twofaccounts.filtered" :key="account.id">
                             <div class="tfa-container">
         	                    <!-- <transition name="slideCheckbox"> -->
         	                        <div class="tfa-cell tfa-checkbox" v-if="bus.inManagementMode">
         	                            <div class="field">
                                             <UseColorMode v-slot="{ mode }">
-                                                <input class="is-checkradio is-small" :class="mode == 'dark' ? 'is-white':'is-info'" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts">
+                                                <input class="is-checkradio is-small" :class="mode == 'dark' ? 'is-white':'is-info'" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="twofaccounts.selectedIds">
                                             </UseColorMode>
-        	                                <label tabindex="0" :for="'ckb_' + account.id" v-on:keypress.space.prevent="selectAccount(account.id)"></label>
+        	                                <label tabindex="0" :for="'ckb_' + account.id" v-on:keypress.space.prevent="twofaccounts.select(account.id)"></label>
         	                            </div>
         	                        </div>
         	                    <!-- </transition> -->
@@ -417,7 +231,7 @@
                                         <span v-if="account.otp != undefined && isRenewingOTPs" class="has-nowrap has-text-grey has-text-centered is-size-5">
                                             <FontAwesomeIcon :icon="['fas', 'circle-notch']" spin />
                                         </span>
-                                        <span v-else-if="account.otp != undefined && isRenewingOTPs == false" class="always-on-otp is-clickable has-nowrap has-text-grey is-size-5 ml-4" @click="copyOTP(account.otp.password)" @keyup.enter="copyOTP(account.otp.password)" :title="$t('commons.copy_to_clipboard')">
+                                        <span v-else-if="account.otp != undefined && isRenewingOTPs == false" class="always-on-otp is-clickable has-nowrap has-text-grey is-size-5 ml-4" @click="copyToClipboard(account.otp.password)" @keyup.enter="copyToClipboard(account.otp.password)" :title="$t('commons.copy_to_clipboard')">
                                             {{ useDisplayablePassword(account.otp.password) }}
                                         </span>
                                         <span v-else>
@@ -455,54 +269,14 @@
                 </div>
                 <!-- </draggable> -->
             <!-- </vue-pull-refresh> -->
-            <VueFooter :showButtons="true" v-on:management-mode-exited="unselectAll">
+            <VueFooter :showButtons="true" v-on:management-mode-exited="twofaccounts.selectNone()">
-                <UseColorMode v-slot="{ mode }">
+                <ActionButtons
-                    <!-- New item buttons -->
+                    v-model:inManagementMode="bus.inManagementMode"
-                    <p class="control" v-if="!bus.inManagementMode">
+                    :areDisabled="twofaccounts.hasNoneSelected"
-                        <button class="button is-link is-rounded is-focus" @click="start">
+                    @move-button-clicked="showDestinationGroupSelector = true"
-                            <span>{{ $t('commons.new') }}</span>
+                    @delete-button-clicked="twofaccounts.deleteSelected()"
-                            <span class="icon is-small">
+                    @export-button-clicked="twofaccounts.export()">
-                                <FontAwesomeIcon :icon="['fas', 'qrcode']" />
+                </ActionButtons>
-                            </span>
-                        </button>
-                    </p>
-                    <!-- Manage button -->
-                    <p class="control" v-if="!bus.inManagementMode">
-                        <button id="btnManage" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="bus.inManagementMode = true">{{ $t('commons.manage') }}</button>
-                    </p>
-                    <!-- move button -->
-                    <p class="control" v-if="bus.inManagementMode">
-                        <button
-                            id="btnMove" 
-                            :disabled='selectedAccounts.length == 0' class="button is-rounded"
-                            :class="[{ 'is-outlined': mode == 'dark' || selectedAccounts.length == 0 }, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
-                            @click="showDestinationGroupSelector = true"
-                            :title="$t('groups.move_selected_to_group')" >
-                                {{ $t('commons.move') }}
-                        </button>
-                    </p>
-                    <!-- delete button -->
-                    <p class="control" v-if="bus.inManagementMode">
-                        <button
-                            id="btnDelete" 
-                            :disabled='selectedAccounts.length == 0' class="button is-rounded"
-                            :class="[{ 'is-outlined': mode == 'dark' || selectedAccounts.length == 0 }, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
-                            @click="destroyAccounts" >
-                                {{ $t('commons.delete') }}
-                        </button>
-                    </p>
-                    <!-- export button -->
-                    <p class="control" v-if="bus.inManagementMode">
-                        <button
-                            id="btnExport" 
-                            :disabled='selectedAccounts.length == 0' class="button is-rounded"
-                            :class="[{ 'is-outlined': mode == 'dark' || selectedAccounts.length == 0 }, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
-                            @click="exportAccounts"
-                            :title="$t('twofaccounts.export_selected_to_json')" >
-                                {{ $t('commons.export') }}
-                        </button>
-                    </p>
-                </UseColorMode>
             </VueFooter>
         </div>
         <!-- totp loopers -->