extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-20 11:47:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add the spinner component to App.vue instead of Accounts.vue so that is usable from all pages.

Browse Source 
Update showSpinner function to accept the message to be displayed, defaults to 'loading' if none is provided.
This commit is contained in:
Josh 2023-04-24 23:09:50 +12:00
parent b9780087cc
commit 68e3a8d100
3 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/js/app.js vendored
View File

@ -21,7 +21,10 @@ const app = new Vue({
isDemoApp: window.isDemoApp, isDemoApp: window.isDemoApp,
isTestingApp: window.isTestingApp, isTestingApp: window.isTestingApp,
prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches, prefersDarkScheme: window.matchMedia('(prefers-color-scheme: dark)').matches,
spinnerActive: false spinner: {
active: false,
message: 'loading'
},
}, },
computed: { computed: {
@ -47,12 +50,14 @@ const app = new Vue({
this.prefersDarkScheme = matches this.prefersDarkScheme = matches
}, },
showSpinner() { showSpinner(message) {
this.spinnerActive = true this.spinner.message = message;
this.spinner.active = true;
}, },
hideSpinner() { hideSpinner() {
this.spinnerActive = false this.spinner.active = false;
this.spinner.message = 'loading';
} }
}, },
i18n, i18n,

7
resources/js/components/App.vue
View File

@ -7,6 +7,8 @@
<div v-if="this.$root.isTestingApp" class="demo has-background-warning has-text-centered is-size-7-mobile"> <div v-if="this.$root.isTestingApp" class="demo has-background-warning has-text-centered is-size-7-mobile">
{{ $t('commons.testing_do_not_post_sensitive_data') }} {{ $t('commons.testing_do_not_post_sensitive_data') }}
</div> </div>
<!-- Loading spinner -->
<spinner :active="$root.spinner.active" :message="$root.spinner.message"/>
<notifications id="vueNotification" role="alert" width="100%" position="top" :duration="4000" :speed="0" :max="1" classes="notification is-radiusless" /> <notifications id="vueNotification" role="alert" width="100%" position="top" :duration="4000" :speed="0" :max="1" classes="notification is-radiusless" />
<main class="main-section"> <main class="main-section">
<router-view></router-view> <router-view></router-view>
@ -15,8 +17,13 @@
</template> </template>
<script> <script>
import Spinner from "./Spinner.vue";
export default { export default {
name: 'App', name: 'App',
components: {
Spinner
},
data(){ data(){
return { return {

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

@ -1,7 +1,5 @@
<template> <template>
<div> <div>
<!-- Loading spinner -->
<spinner :active="$root.spinnerActive" :message="$t('commons.generating_otp')"/>
<!-- Group switch --> <!-- Group switch -->
<div class="container groups" v-if="showGroupSwitch"> <div class="container groups" v-if="showGroupSwitch">
<div class="columns is-centered"> <div class="columns is-centered">
@ -256,7 +254,6 @@
*/ */
import Modal from '../components/Modal' import Modal from '../components/Modal'
import Spinner from '../components/Spinner'
import OtpDisplayer from '../components/OtpDisplayer' import OtpDisplayer from '../components/OtpDisplayer'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import Form from './../components/Form' import Form from './../components/Form'
@ -363,8 +360,7 @@
components: { components: {
Modal, Modal,
OtpDisplayer, OtpDisplayer,
draggable, draggable
Spinner
}, },
methods: { methods: {
@ -421,7 +417,7 @@
this.selectAccount(account.id) this.selectAccount(account.id)
} }
else { else {
this.$root.showSpinner(); this.$root.showSpinner(this.$t('commons.generating_otp'));
this.$refs.OtpDisplayer.show(account.id); this.$refs.OtpDisplayer.show(account.id);
} }
}, },