extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-23 00:33:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Set Footer as a standalone component

Browse Source
This commit is contained in:
Bubka 2020-02-12 21:18:40 +01:00
parent 0610b21fba
commit 4a85c1fd92
3 changed files with 85 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
resources/js/components/Footer.vue Normal file
View File

@ -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>

2
resources/js/components/index.js vendored
View File

@ -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)
})

84
resources/js/views/Accounts.vue
View File

@ -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 = []