extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-26 10:15:40 +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 Button from './Button'
import FieldError from './FieldError' import FieldError from './FieldError'
import FormWrapper from './FormWrapper' import FormWrapper from './FormWrapper'
import VueFooter from './Footer'
// Components that are registered globaly. // Components that are registered globaly.
[ [
Button, Button,
FieldError, FieldError,
FormWrapper, FormWrapper,
VueFooter,
].forEach(Component => { ].forEach(Component => {
Vue.component(Component.name, Component) Vue.component(Component.name, Component)
}) })

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

@ -92,45 +92,36 @@
<twofaccount-show ref="TwofaccountShow" ></twofaccount-show> <twofaccount-show ref="TwofaccountShow" ></twofaccount-show>
</modal> </modal>
<!-- footer --> <!-- footer -->
<footer class="has-background-black-ter"> <vue-footer :showButtons="this.accounts.length > 0">
<div class="columns is-gapless" v-if="this.accounts.length > 0"> <!-- New item buttons -->
<div class="column has-text-centered"> <p class="control" v-if="!showQuickForm && !editMode">
<div class="field is-grouped"> <a class="button is-link is-rounded is-focus" @click="showQuickForm = true">
<!-- New item buttons --> <span>{{ $t('twofaccounts.new') }}</span>
<p class="control" v-if="!showQuickForm && !editMode"> <span class="icon is-small">
<a class="button is-link is-rounded is-focus" @click="showQuickForm = true"> <font-awesome-icon :icon="['fas', 'qrcode']" />
<span>{{ $t('twofaccounts.new') }}</span> </span>
<span class="icon is-small"> </a>
<font-awesome-icon :icon="['fas', 'qrcode']" /> </p>
</span> <!-- Manage button -->
</a> <p class="control" v-if="!showQuickForm && !editMode">
</p> <a class="button is-dark is-rounded" @click="setEditModeTo(true)">{{ $t('twofaccounts.manage') }}</a>
<!-- Manage button --> </p>
<p class="control" v-if="!showQuickForm && !editMode"> <!-- Done button -->
<a class="button is-dark is-rounded" @click="setEditModeTo(true)">{{ $t('twofaccounts.manage') }}</a> <p class="control" v-if="!showQuickForm && editMode">
</p> <a class="button is-success is-rounded" @click="setEditModeTo(false)">
<!-- Done button --> <span>{{ $t('twofaccounts.done') }}</span>
<p class="control" v-if="!showQuickForm && editMode"> <span class="icon is-small">
<a class="button is-success is-rounded" @click="setEditModeTo(false)"> <font-awesome-icon :icon="['fas', 'check']" />
<span>{{ $t('twofaccounts.done') }}</span> </span>
<span class="icon is-small"> </a>
<font-awesome-icon :icon="['fas', 'check']" /> </p>
</span> <!-- Cancel QuickFormButton -->
</a> <p class="control" v-if="showQuickForm">
</p> <a class="button is-dark is-rounded" @click="cancelQuickForm">
<!-- Cancel QuickFormButton --> {{ $t('commons.cancel') }}
<p class="control" v-if="showQuickForm"> </a>
<a class="button is-dark is-rounded" @click="cancelQuickForm"> </p>
{{ $t('commons.cancel') }} </vue-footer>
</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>
</div> </div>
</template> </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) { setEditModeTo(state) {
if( state === false ) { if( state === false ) {
this.selectedAccounts = [] this.selectedAccounts = []