Set Footer as a standalone component

resources/js/components/Footer.vue

@@ -0,0 +1,53 @@
+<template>
+    <footer class="has-background-black-ter">
+        <div class="columns is-gapless" v-if="showButtons">
+            <div class="column has-text-centered">
+                <div class="field is-grouped">
+                    <slot></slot>
+                </div>
+            </div>
+        </div>
+        <div class="content has-text-centered">
+            {{ $t('auth.hello', {username: username}) }} <router-link :to="{ name: 'profile' }" class="has-text-grey">{{ $t('commons.profile') }}</router-link> - <a class="has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</a>
+        </div>
+    </footer>
+</template>
+
+<script>
+    export default {
+        name: 'VueFooter',
+
+        data(){
+            return {
+                username : null,
+            }
+        },
+
+        props: {
+            showButtons: true,
+        },
+
+        created() {
+            this.username = localStorage.getItem('user')
+        },
+
+        methods: {
+
+            async logout(evt) {
+                if(confirm(this.$t('auth.confirm.logout'))) {
+
+                    await this.axios.get('api/logout')
+
+                    localStorage.removeItem('jwt');
+                    localStorage.removeItem('user');
+
+                    delete this.axios.defaults.headers.common['Authorization'];
+
+                    this.$router.go('/login');
+
+                }
+            },
+
+        }
+    };
+</script>

resources/js/components/index.js

@@ -2,12 +2,14 @@ import Vue from 'vue'
 import Button from './Button'
 import FieldError from './FieldError'
 import FormWrapper from './FormWrapper'
+import VueFooter from './Footer'
 
 // Components that are registered globaly.
 [
 	Button,
     FieldError,
     FormWrapper,
+    VueFooter,
 ].forEach(Component => {
 	Vue.component(Component.name, Component)
 })

resources/js/views/Accounts.vue

@@ -92,45 +92,36 @@
             <twofaccount-show ref="TwofaccountShow" ></twofaccount-show>
         </modal>
         <!-- footer -->
-        <footer class="has-background-black-ter">
-            <div class="columns is-gapless" v-if="this.accounts.length > 0">
-                <div class="column has-text-centered">
-                    <div class="field is-grouped">
-                        <!-- New item buttons -->
-                        <p class="control" v-if="!showQuickForm && !editMode">
-                            <a class="button is-link is-rounded is-focus" @click="showQuickForm = true">
-                                <span>{{ $t('twofaccounts.new') }}</span>
-                                <span class="icon is-small">
-                                    <font-awesome-icon :icon="['fas', 'qrcode']" />
-                                </span>
-                            </a>
-                        </p>
-                        <!-- Manage button -->
-                        <p class="control" v-if="!showQuickForm && !editMode">
-                            <a class="button is-dark is-rounded" @click="setEditModeTo(true)">{{ $t('twofaccounts.manage') }}</a>
-                        </p>
-                        <!-- Done button -->
-                        <p class="control" v-if="!showQuickForm && editMode">
-                            <a class="button is-success is-rounded" @click="setEditModeTo(false)">
-                                <span>{{ $t('twofaccounts.done') }}</span>
-                                <span class="icon is-small">
-                                    <font-awesome-icon :icon="['fas', 'check']" />
-                                </span>
-                            </a>
-                        </p>
-                        <!-- Cancel QuickFormButton -->
-                        <p class="control" v-if="showQuickForm">
-                            <a class="button is-dark is-rounded" @click="cancelQuickForm">
-                                {{ $t('commons.cancel') }}
-                            </a>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="content has-text-centered">
-                {{ $t('auth.hello', {username: username}) }} <router-link :to="{ name: 'profile' }" class="has-text-grey">{{ $t('commons.profile') }}</router-link> - <a class="has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</a>
-            </div>
-        </footer>
+        <vue-footer :showButtons="this.accounts.length > 0">
+            <!-- New item buttons -->
+            <p class="control" v-if="!showQuickForm && !editMode">
+                <a class="button is-link is-rounded is-focus" @click="showQuickForm = true">
+                    <span>{{ $t('twofaccounts.new') }}</span>
+                    <span class="icon is-small">
+                        <font-awesome-icon :icon="['fas', 'qrcode']" />
+                    </span>
+                </a>
+            </p>
+            <!-- Manage button -->
+            <p class="control" v-if="!showQuickForm && !editMode">
+                <a class="button is-dark is-rounded" @click="setEditModeTo(true)">{{ $t('twofaccounts.manage') }}</a>
+            </p>
+            <!-- Done button -->
+            <p class="control" v-if="!showQuickForm && editMode">
+                <a class="button is-success is-rounded" @click="setEditModeTo(false)">
+                    <span>{{ $t('twofaccounts.done') }}</span>
+                    <span class="icon is-small">
+                        <font-awesome-icon :icon="['fas', 'check']" />
+                    </span>
+                </a>
+            </p>
+            <!-- Cancel QuickFormButton -->
+            <p class="control" v-if="showQuickForm">
+                <a class="button is-dark is-rounded" @click="cancelQuickForm">
+                    {{ $t('commons.cancel') }}
+                </a>
+            </p>
+        </vue-footer>
     </div>
 </template>
 
@@ -276,21 +267,6 @@
                 }
             },
 
-            async logout(evt) {
-                if(confirm(this.$t('auth.confirm.logout'))) {
-
-                    await this.axios.get('api/logout')
-
-                    localStorage.removeItem('jwt');
-                    localStorage.removeItem('user');
-
-                    delete this.axios.defaults.headers.common['Authorization'];
-
-                    this.$router.go('/login');
-
-                }
-            },
-
             setEditModeTo(state) {
                 if( state === false ) {
                     this.selectedAccounts = []