Replace navbar by footer

resources/js/app.js

@@ -11,10 +11,10 @@ import Create       from './views/Create'
 import Edit         from './views/Edit'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faPlusCircle, faQrcode, faImage, faTrash, faEdit } from '@fortawesome/free-solid-svg-icons'
+import { faPlus, faQrcode, faImage, faTrash, faEdit, faCheck } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(faPlusCircle, faQrcode, faImage, faTrash, faEdit);
+library.add(faPlus, faQrcode, faImage, faTrash, faEdit, faCheck);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 

resources/js/views/Accounts.vue

@@ -1,10 +1,6 @@
 <template>
     <div>
         <div class="container">
-            <div class="has-text-centered">
-                <a class="button is-dark" @click="editMode = true" v-if="!editMode">Manage</a>
-                <a class="button is-dark" @click="editMode = false" v-if="editMode">Done</a>
-            </div>
             <div class="buttons are-large is-centered">
                 <span v-for="account in accounts" class="button is-black twofaccount" >
                     <span @click.stop="getAccount(account.id)">
@@ -13,11 +9,12 @@
                         <span class="is-family-primary is-size-7 has-text-grey">{{ account.account }}</span>
                     </span>
                     <span v-if="editMode">
-                        <a v-on:click="deleteAccount(account.id)" class="is-size-6 has-text-grey-dark">
-                            <font-awesome-icon :icon="['fas', 'trash']" />
-                        </a> <router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="is-size-6 has-text-grey-dark">
+                        <router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark">
                             <font-awesome-icon :icon="['fas', 'edit']" />
                         </router-link>
+                        <a class="tag is-dark" v-on:click="deleteAccount(account.id)">
+                            <font-awesome-icon :icon="['fas', 'trash']" />
+                        </a>
                     </span>
                 </span>
             </div>
@@ -31,6 +28,44 @@
                 <one-time-password ref="OneTimePassword"></one-time-password>
             </twofaccount-show>
         </modal>
+        <footer class="has-background-black-ter">
+            <div class="columns is-gapless">
+                <div class="column has-text-centered">
+                    <a class="button is-dark is-rounded" @click="editMode = true" v-if="!editMode">Manage</a>
+                    <div class="field has-addons" v-if="editMode">
+                        <p class="control">
+                            <button class="button is-success is-rounded" @click="editMode = false">
+                                <span class="icon is-small">
+                                    <font-awesome-icon :icon="['fas', 'check']" />
+                                </span>
+                                <span>Done</span>
+                            </button>
+                        </p>
+                        <p class="control">
+                            <router-link :to="{ name: 'create' }" class="button is-dark is-rounded">
+                                <span class="icon is-small">
+                                    <font-awesome-icon :icon="['fas', 'plus']" />
+                                </span>
+                            </router-link>
+                        </p>
+                    </div>
+
+                </div>
+            </div>
+            <div class="content has-text-centered">
+                <span v-if="token">
+                    Hi {{username}} ! <a class="" @click="logout">Sign out</a>
+                </span>
+                <span v-else>
+                    <router-link :to="{ name: 'login' }" class="button is-black">
+                        Sign in
+                    </router-link>
+                    <router-link :to="{ name: 'register' }" class="button is-black">
+                        Register
+                    </router-link>
+                </span>
+            </div>
+        </footer>
     </div>
 </template>
 
@@ -47,13 +82,16 @@
                 ShowTwofaccountInModal : false,
                 twofaccount: {},
                 editMode : false,
+                token : null,
+                username : null,
             }
         },
         mounted(){
-            let token = localStorage.getItem('jwt')
+            this.token = localStorage.getItem('jwt')
+            this.username = localStorage.getItem('user')
 
             axios.defaults.headers.common['Content-Type'] = 'application/json'
-            axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+            axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.token
 
             axios.get('api/twofaccounts').then(response => {
                 response.data.forEach((data) => {
@@ -79,11 +117,10 @@
         },
         methods: {
             getAccount: function (id) {
-                let token = localStorage.getItem('jwt')
                 let accountId = id
 
                 axios.defaults.headers.common['Content-Type'] = 'application/json'
-                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+                axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.token
 
                 axios.get('api/twofaccounts/' + id).then(response => {
 
@@ -101,16 +138,34 @@
 
             deleteAccount:  function (id) {
                 if(confirm("Are you sure you want to delete this account?")) {
-                    let token = localStorage.getItem('jwt')
 
                     axios.defaults.headers.common['Content-Type'] = 'application/json'
-                    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+                    axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.token
 
                     axios.delete('/api/twofaccounts/' + id).then(response => {
                         this.accounts.splice(this.accounts.findIndex(x => x.id === id), 1);
                     })
                 }
+            },
+
+            logout(evt) {
+                if(confirm("Are you sure you want to log out?")) {
+                    axios.post('api/logout').then(response => {
+
+                        localStorage.removeItem('jwt');
+                        delete axios.defaults.headers.common['Authorization'];
+
+                        this.$router.go('/login');
+                    })
+                    .catch(error => {
+                        localStorage.removeItem('jwt');
+                        delete axios.defaults.headers.common['Authorization'];
+
+                        this.$router.go('/login');
+                    });       
+                }
             }
+
         },
         beforeRouteEnter (to, from, next) {
             if ( ! localStorage.getItem('jwt')) {

resources/js/views/App.vue

@@ -1,38 +1,5 @@
 <template>
-    <div>
-        <nav class="navbar is-black level is-mobile has-text-grey-lighter">
-            <div class="level-left">
-                <router-link :to="{ name: 'accounts' }" class="is-size-4 has-text-weight-light">2FAccount</router-link>
-            </div>
-            <div class="level-right">
-                <p class="level-item" v-if="isLoggedIn">
-                    <router-link :to="{ name: 'create' }" class="button is-black">
-                        <span class="icon has-text-grey-light">
-                            <font-awesome-icon :icon="['fas', 'plus-circle']" />
-                        </span>
-                    </router-link>
-                </p>
-                <p class="level-item" v-if="!isLoggedIn">
-                    <router-link :to="{ name: 'login' }" class="button is-black">
-                        Sign in
-                    </router-link>
-                </p>
-                <p class="level-item" v-if="isLoggedIn">
-                    <a class="button is-black" @click="logout">
-                        Sign out
-                    </a>
-                </p>
-                <p class="level-item" v-if="!isLoggedIn">
-                    <router-link :to="{ name: 'register' }" class="button is-black">
-                        Register
-                    </router-link>
-                </p>
-                <p class="level-item" v-if="isLoggedIn">
-                    Hi, {{username}}
-                </p>
-            </div>
-        </nav>
-
+    <div class="section">
         <main class="py-4">
             <router-view></router-view>
         </main>
@@ -42,34 +9,10 @@
 <script>
     export default {
         name: 'App',
+        
         data(){
             return {
-                isLoggedIn : null,
-                username : null
-            }
-        },
-        mounted(){
-            this.isLoggedIn = localStorage.getItem('jwt')
-            this.username = localStorage.getItem('user')
-        },
 
-        methods: {
-            logout(evt) {
-                if(confirm("Are you sure you want to log out?")) {
-                    axios.post('api/logout').then(response => {
-
-                        localStorage.removeItem('jwt');
-                        delete axios.defaults.headers.common['Authorization'];
-
-                        this.$router.go('/login');
-                    })
-                    .catch(error => {
-                        localStorage.removeItem('jwt');
-                        delete axios.defaults.headers.common['Authorization'];
-
-                        this.$router.go('/login');
-                    });       
-                }
             }
         }
     }

resources/sass/app.scss

@@ -87,11 +87,15 @@ nav.level {
   padding-top: 20px;
 }
 
-.modal-action-links {
-  position: absolute;
-  display: block;
-  bottom: 0px;
-  left: 0px;
-  width: 100%;
-  text-align: center;
+footer {
+  padding: 10px 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+  z-index: 30;
+}
+
+footer .field.has-addons {
+  justify-content: center;
 }