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 Pull to Refresh feature on Accounts list

Browse Source
This commit is contained in:
Bubka 2020-02-09 23:04:46 +01:00
parent 0db83e9908
commit 94d57aff4f
2 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,28 +27,35 @@
</div>
<!-- accounts -->
<div class="accounts columns is-multiline is-centered">
<div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts">
<div class="tfa-container">
<div class="tfa-checkbox" v-if="editMode">
<div class="field">
<input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts">
<label :for="'ckb_' + account.id"></label>
<vue-pull-refresh :on-refresh="onRefresh" :config="{
errorLabel: 'error',
startLabel: '',
readyLabel: '',
loadingLabel: 'refreshing'
}">
<div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts">
<div class="tfa-container">
<div class="tfa-checkbox" v-if="editMode">
<div class="field">
<input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts">
<label :for="'ckb_' + account.id"></label>
</div>
</div>
</div>
<div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">
<div class="tfa-text has-ellipsis">
<img :src="'/storage/icons/' + account.icon" v-if="account.icon">
{{ account.service }}
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
<div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">
<div class="tfa-text has-ellipsis">
<img :src="'/storage/icons/' + account.icon" v-if="account.icon">
{{ account.service }}
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
</div>
</div>
<div class="tfa-dots has-text-grey" v-if="editMode">
<router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark is-rounded">
{{ $t('commons.edit') }}
</router-link>
</div>
</div>
<div class="tfa-dots has-text-grey" v-if="editMode">
<router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark is-rounded">
{{ $t('commons.edit') }}
</router-link>
</div>
</div>
</div>
</vue-pull-refresh>
</div>
</div>
<!-- No account -->
@ -131,6 +138,7 @@
import Modal from '../components/Modal'
import TwofaccountShow from '../components/TwofaccountShow'
import Form from './../components/Form'
import vuePullRefresh from 'vue-pull-refresh';
export default {
data(){
@ -141,11 +149,10 @@
search: '',
username : null,
editMode: this.InitialEditMode,
QuickFormIsVisible: false,
showQuickForm: false,
form: new Form({
qrcode: null
}),
axiosIsComplete: null,
}
},
@ -159,14 +166,8 @@
},
showAccounts() {
return this.accounts.length > 0 && !this.QuickFormIsVisible ? true : false
return this.accounts.length > 0 && !this.showQuickForm ? true : false
},
showQuickForm: {
get: function() { return (this.QuickFormIsVisible || this.accounts.length === 0) && this.axiosIsComplete },
set: function(value) { this.QuickFormIsVisible = value }
},
},
props: ['InitialEditMode'],
@ -187,10 +188,22 @@
components: {
Modal,
TwofaccountShow,
'vue-pull-refresh': vuePullRefresh
},
methods: {
onRefresh() {
var that = this
return new Promise(function (resolve, reject) {
setTimeout(function () {
that.fetchAccounts()
resolve();
}, 1000);
});
},
async uploadQrcode(event) {
let imgdata = new FormData();
@ -216,7 +229,7 @@
})
})
this.axiosIsComplete = true
this.showQuickForm = response.data.length === 0 ? true: false
})
},

4
resources/sass/app.scss vendored
View File

@ -52,6 +52,10 @@ a:hover {
background-color: hsl(0, 0%, 14%) !important;
}
.pull-down-header {
background-color: hsl(0, 0%, 21%) !important;
}
.tfa {
border-radius: 6px;
text-align: center;