extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-02-23 22:01:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #186 from josh-gaby/feature/spinner

Browse Source 
Loading spinner - Closes #183
This commit is contained in:
Bubka 2023-04-25 13:30:16 +02:00 committed by GitHub
commit da93d52cc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 133 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
resources/js/app.js vendored
View File

@ -20,7 +20,11 @@ const app = new Vue({
userPreferences: window.userPreferences, userPreferences: window.userPreferences,
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,
spinner: {
active: false,
message: 'loading'
},
}, },
computed: { computed: {
@ -44,8 +48,18 @@ const app = new Vue({
methods: { methods: {
setDarkScheme ({ matches }) { setDarkScheme ({ matches }) {
this.prefersDarkScheme = matches this.prefersDarkScheme = matches
},
showSpinner(message) {
this.spinner.message = message;
this.spinner.active = true;
},
hideSpinner() {
this.spinner.active = false;
this.spinner.message = 'loading';
} }
}, },
i18n, i18n,
router, router,
}); });

11
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,9 +17,14 @@
</template> </template>
<script> <script>
import Spinner from "./Spinner.vue";
export default { export default {
name: 'App', name: 'App',
components: {
Spinner
},
data(){ data(){
return { return {
} }
@ -31,4 +38,4 @@
} }
} }
</script> </script>

17
resources/js/components/OtpDisplayer.vue
View File

@ -144,7 +144,7 @@
this.internal_account = data.account this.internal_account = data.account
this.internal_icon = data.icon this.internal_icon = data.icon
this.internal_otp_type = data.otp_type this.internal_otp_type = data.otp_type
if( this.isHMacBased(data.otp_type) && data.counter ) { if( this.isHMacBased(data.otp_type) && data.counter ) {
this.internal_counter = data.counter this.internal_counter = data.counter
} }
@ -165,13 +165,18 @@
await this.getHOTP() await this.getHOTP()
} }
else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } }); else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
this.$parent.isActive = true this.$parent.isActive = true
this.focusOnOTP() this.focusOnOTP()
} }
catch(error) { catch(error) {
this.clearOTP() this.clearOTP()
} }
finally {
this.$root.hideSpinner();
}
} else {
this.$root.hideSpinner();
} }
}, },
@ -232,7 +237,7 @@
}, },
startTotpLoop: async function() { startTotpLoop: async function() {
let otp = await this.getOtp() let otp = await this.getOtp()
this.internal_password = otp.password this.internal_password = otp.password
@ -258,7 +263,7 @@
// ● ● ● ● ●|● ◌ ◌ ◌ ◌ | // ● ● ● ● ●|● ◌ ◌ ◌ ◌ |
// | | || | // | | || |
// | | |<-------->|--remainingTimeBeforeEndOfPeriod (for remainingTimeout) // | | |<-------->|--remainingTimeBeforeEndOfPeriod (for remainingTimeout)
// durationBetweenTwoDots-->|-|< || // durationBetweenTwoDots-->|-|< ||
// (for dotToDotInterval) | | >||<---durationFromFirstToNextDot (for firstDotToNextOneTimeout) // (for dotToDotInterval) | | >||<---durationFromFirstToNextDot (for firstDotToNextOneTimeout)
// | // |
// | // |
@ -276,7 +281,7 @@
// We determine the position of the closest dot next to the generated_at timestamp // We determine the position of the closest dot next to the generated_at timestamp
let relativePosition = (elapsedTimeInCurrentPeriod * 10) / period let relativePosition = (elapsedTimeInCurrentPeriod * 10) / period
let dotIndex = (Math.floor(relativePosition) +1) let dotIndex = (Math.floor(relativePosition) +1)
// We switch the dot on // We switch the dot on
this.lastActiveDot = dots.querySelector('li:nth-child(' + dotIndex + ')'); this.lastActiveDot = dots.querySelector('li:nth-child(' + dotIndex + ')');
this.lastActiveDot.setAttribute('data-is-active', true); this.lastActiveDot.setAttribute('data-is-active', true);
@ -365,4 +370,4 @@
this.stopLoop() this.stopLoop()
} }
} }
</script> </script>

41
resources/js/components/Spinner.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div v-if="active" class="spinner-container">
<div class="spinner-wrapper">
<span class="is-size-1 spinner">
<font-awesome-icon :icon="['fas', 'spinner']" spin />
</span>
<span>{{ message }}</span>
</div>
</div>
</template>
<script>
export default {
name: 'Spinner',
props: {
active: {
type: Boolean,
default: false
},
message: String,
}
}
</script>
<style scoped>
.spinner-container {
text-align: center;
z-index: 10000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
display: block;
}
</style>

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

@ -141,7 +141,7 @@
</div> </div>
</div> </div>
</transition> </transition>
<div tabindex="0" class="tfa-cell tfa-content is-size-3 is-size-4-mobile" @click="showAccount(account)" @keyup.enter="showAccount(account)" role="button"> <div tabindex="0" class="tfa-cell tfa-content is-size-3 is-size-4-mobile" @click="showAccount(account)" @keyup.enter="showAccount(account)" role="button">
<div class="tfa-text has-ellipsis"> <div class="tfa-text has-ellipsis">
<img :src="$root.appConfig.subdirectory + '/storage/icons/' + account.icon" v-if="account.icon && $root.userPreferences.showAccountsIcons" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, service: account.service})"> <img :src="$root.appConfig.subdirectory + '/storage/icons/' + account.icon" v-if="account.icon && $root.userPreferences.showAccountsIcons" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, service: account.service})">
{{ displayService(account.service) }}<font-awesome-icon class="has-text-danger is-size-5 ml-2" v-if="$root.appSettings.useEncryption && account.account === $t('errors.indecipherable')" :icon="['fas', 'exclamation-circle']" /> {{ displayService(account.service) }}<font-awesome-icon class="has-text-danger is-size-5 ml-2" v-if="$root.appSettings.useEncryption && account.account === $t('errors.indecipherable')" :icon="['fas', 'exclamation-circle']" />
@ -186,9 +186,9 @@
</p> </p>
<!-- move button --> <!-- move button -->
<p class="control" v-if="editMode"> <p class="control" v-if="editMode">
<button <button
:disabled='selectedAccounts.length == 0' class="button is-rounded" :disabled='selectedAccounts.length == 0' class="button is-rounded"
:class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']" :class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
@click="showGroupSelector = true" @click="showGroupSelector = true"
:title="$t('groups.move_selected_to_group')" > :title="$t('groups.move_selected_to_group')" >
{{ $t('commons.move') }} {{ $t('commons.move') }}
@ -196,19 +196,19 @@
</p> </p>
<!-- delete button --> <!-- delete button -->
<p class="control" v-if="editMode"> <p class="control" v-if="editMode">
<button <button
:disabled='selectedAccounts.length == 0' class="button is-rounded" :disabled='selectedAccounts.length == 0' class="button is-rounded"
:class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']" :class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
@click="destroyAccounts" > @click="destroyAccounts" >
{{ $t('commons.delete') }} {{ $t('commons.delete') }}
</button> </button>
</p> </p>
<!-- export button --> <!-- export button -->
<p class="control" v-if="editMode"> <p class="control" v-if="editMode">
<button <button
:disabled='selectedAccounts.length == 0' class="button is-rounded" :disabled='selectedAccounts.length == 0' class="button is-rounded"
:class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']" :class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
@click="exportAccounts" @click="exportAccounts"
:title="$t('twofaccounts.export_selected_to_json')" > :title="$t('twofaccounts.export_selected_to_json')" >
{{ $t('commons.export') }} {{ $t('commons.export') }}
</button> </button>
@ -223,9 +223,9 @@
/** /**
* Accounts view * Accounts view
* *
* route: '/account' (alias: '/') * route: '/account' (alias: '/')
* *
* The main view of 2FAuth that list all existing account recorded in DB. * The main view of 2FAuth that list all existing account recorded in DB.
* Available feature in this view : * Available feature in this view :
* - {{OTP}} generation * - {{OTP}} generation
@ -248,9 +248,9 @@
* ~ 'userPreferences.showAccountsIcons' toggle the icon visibility * ~ 'userPreferences.showAccountsIcons' toggle the icon visibility
* ~ 'userPreferences.displayMode' change the account appearance * ~ 'userPreferences.displayMode' change the account appearance
* *
* Input : * Input :
* - The 'initialEditMode' props : allows to load the view directly in Edit mode * - The 'initialEditMode' props : allows to load the view directly in Edit mode
* *
*/ */
import Modal from '../components/Modal' import Modal from '../components/Modal'
@ -289,12 +289,12 @@
return this.accounts.filter( return this.accounts.filter(
item => { item => {
if( parseInt(this.$root.userPreferences.activeGroup) > 0 ) { if( parseInt(this.$root.userPreferences.activeGroup) > 0 ) {
return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) || return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) ||
item.account.toLowerCase().includes(this.search.toLowerCase())) && item.account.toLowerCase().includes(this.search.toLowerCase())) &&
(item.group_id == parseInt(this.$root.userPreferences.activeGroup)) (item.group_id == parseInt(this.$root.userPreferences.activeGroup))
} }
else { else {
return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) || return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) ||
item.account.toLowerCase().includes(this.search.toLowerCase())) item.account.toLowerCase().includes(this.search.toLowerCase()))
} }
} }
@ -360,7 +360,7 @@
components: { components: {
Modal, Modal,
OtpDisplayer, OtpDisplayer,
draggable, draggable
}, },
methods: { methods: {
@ -417,11 +417,11 @@
this.selectAccount(account.id) this.selectAccount(account.id)
} }
else { else {
this.$refs.OtpDisplayer.show(account.id) this.$root.showSpinner(this.$t('commons.generating_otp'));
this.$refs.OtpDisplayer.show(account.id);
} }
}, },
/** /**
* Select an account while in edit mode * Select an account while in edit mode
*/ */
@ -471,7 +471,7 @@
}) })
this.$notify({ type: 'is-success', text: this.$t('twofaccounts.accounts_deleted') }) this.$notify({ type: 'is-success', text: this.$t('twofaccounts.accounts_deleted') })
}) })
// we fetch the accounts again to prevent the js collection being // we fetch the accounts again to prevent the js collection being
// desynchronize from the backend php collection // desynchronize from the backend php collection
this.fetchAccounts(true) this.fetchAccounts(true)
@ -529,7 +529,7 @@
if ( !objectEquals(groups, this.groups) ) { if ( !objectEquals(groups, this.groups) ) {
this.groups = groups this.groups = groups
} }
this.$storage.set('groups', this.groups) this.$storage.set('groups', this.groups)
}) })
@ -550,7 +550,7 @@
// everything's fine // everything's fine
}) })
.catch(error => { .catch(error => {
this.$router.push({ name: 'genericError', params: { err: error.response } }) this.$router.push({ name: 'genericError', params: { err: error.response } })
}); });
} }
@ -593,21 +593,21 @@
}, },
/** /**
* *
*/ */
displayService(service) { displayService(service) {
return service ? service : this.$t('twofaccounts.no_service') return service ? service : this.$t('twofaccounts.no_service')
}, },
/** /**
* *
*/ */
clearSelected() { clearSelected() {
this.selectedAccounts = [] this.selectedAccounts = []
}, },
/** /**
* *
*/ */
selectAll() { selectAll() {
if(this.editMode) { if(this.editMode) {
@ -621,7 +621,7 @@
}, },
/** /**
* *
*/ */
sortAsc() { sortAsc() {
this.accounts.sort((a, b) => a.service > b.service ? 1 : -1) this.accounts.sort((a, b) => a.service > b.service ? 1 : -1)
@ -629,7 +629,7 @@
}, },
/** /**
* *
*/ */
sortDesc() { sortDesc() {
this.accounts.sort((a, b) => a.service < b.service ? 1 : -1) this.accounts.sort((a, b) => a.service < b.service ? 1 : -1)
@ -637,7 +637,7 @@
}, },
/** /**
* *
*/ */
keyListener : function(e) { keyListener : function(e) {
if (e.key === "f" && (e.ctrlKey || e.metaKey)) { if (e.key === "f" && (e.ctrlKey || e.metaKey)) {
@ -662,4 +662,4 @@
opacity: 1; opacity: 1;
/*background: hsl(0, 0%, 21%);*/ /*background: hsl(0, 0%, 21%);*/
} }
</style> </style>

3
resources/lang/en/commons.php
View File

@ -49,6 +49,7 @@
'reload' => 'Reload', 'reload' => 'Reload',
'some_data_have_changed' => 'Some data have changed. You should', 'some_data_have_changed' => 'Some data have changed. You should',
'generate' => 'Generate', 'generate' => 'Generate',
'generating_otp' => 'Generating OTP',
'open_in_browser' => 'Open in browser', 'open_in_browser' => 'Open in browser',
'continue' => 'Continue', 'continue' => 'Continue',
'discard' => 'Discard', 'discard' => 'Discard',
@ -70,4 +71,4 @@
'file' => 'File', 'file' => 'File',
'or' => 'OR', 'or' => 'OR',
'close_the_x_page' => 'Close the {pagetitle} page', 'close_the_x_page' => 'Close the {pagetitle} page',
]; ];

24
resources/sass/app.scss vendored
View File

@ -1204,6 +1204,28 @@ footer .field.is-grouped {
} }
} }
// Themed Spinner
.spinner-container {
background-color: $white-ter;
.spinner {
color: $dark;
}
}
:root[data-theme="dark"] .spinner-container {
background-color: $black-ter;
.spinner {
color: $light;
}
}
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] .spinner-container {
background-color: $black-ter;
.spinner {
color: $light;
}
}
}
.fadeInOut-enter-active { .fadeInOut-enter-active {
animation: fadeIn 500ms animation: fadeIn 500ms
} }
@ -1374,4 +1396,4 @@ footer .field.is-grouped {
to { to {
transform: translateY(-2rem); transform: translateY(-2rem);
} }
} }