mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-02-23 13:51:13 +01:00
Merge pull request #186 from josh-gaby/feature/spinner
Loading spinner - Closes #183
This commit is contained in:
Bubka
GitHub
commit
da93d52cc8
18
resources/js/app.js
vendored
18
resources/js/app.js
vendored
@ -20,7 +20,11 @@ const app = new Vue({
|
||||
userPreferences: window.userPreferences,
|
||||
isDemoApp: window.isDemoApp,
|
||||
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: {
|
||||
@ -44,8 +48,18 @@ const app = new Vue({
|
||||
methods: {
|
||||
setDarkScheme ({ matches }) {
|
||||
this.prefersDarkScheme = matches
|
||||
},
|
||||
|
||||
showSpinner(message) {
|
||||
this.spinner.message = message;
|
||||
this.spinner.active = true;
|
||||
},
|
||||
|
||||
hideSpinner() {
|
||||
this.spinner.active = false;
|
||||
this.spinner.message = 'loading';
|
||||
}
|
||||
},
|
||||
i18n,
|
||||
router,
|
||||
});
|
||||
});
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
<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') }}
|
||||
</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" />
|
||||
<main class="main-section">
|
||||
<router-view></router-view>
|
||||
@ -15,9 +17,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Spinner from "./Spinner.vue";
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
components: {
|
||||
Spinner
|
||||
},
|
||||
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
@ -31,4 +38,4 @@
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
this.internal_account = data.account
|
||||
this.internal_icon = data.icon
|
||||
this.internal_otp_type = data.otp_type
|
||||
|
||||
|
||||
if( this.isHMacBased(data.otp_type) && data.counter ) {
|
||||
this.internal_counter = data.counter
|
||||
}
|
||||
@ -165,13 +165,18 @@
|
||||
await this.getHOTP()
|
||||
}
|
||||
else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
|
||||
|
||||
|
||||
this.$parent.isActive = true
|
||||
this.focusOnOTP()
|
||||
}
|
||||
catch(error) {
|
||||
this.clearOTP()
|
||||
}
|
||||
finally {
|
||||
this.$root.hideSpinner();
|
||||
}
|
||||
} else {
|
||||
this.$root.hideSpinner();
|
||||
}
|
||||
},
|
||||
|
||||
@ -232,7 +237,7 @@
|
||||
},
|
||||
|
||||
startTotpLoop: async function() {
|
||||
|
||||
|
||||
let otp = await this.getOtp()
|
||||
|
||||
this.internal_password = otp.password
|
||||
@ -258,7 +263,7 @@
|
||||
// ● ● ● ● ●|● ◌ ◌ ◌ ◌ |
|
||||
// | | || |
|
||||
// | | |<-------->|--remainingTimeBeforeEndOfPeriod (for remainingTimeout)
|
||||
// durationBetweenTwoDots-->|-|< ||
|
||||
// durationBetweenTwoDots-->|-|< ||
|
||||
// (for dotToDotInterval) | | >||<---durationFromFirstToNextDot (for firstDotToNextOneTimeout)
|
||||
// |
|
||||
// |
|
||||
@ -276,7 +281,7 @@
|
||||
// We determine the position of the closest dot next to the generated_at timestamp
|
||||
let relativePosition = (elapsedTimeInCurrentPeriod * 10) / period
|
||||
let dotIndex = (Math.floor(relativePosition) +1)
|
||||
|
||||
|
||||
// We switch the dot on
|
||||
this.lastActiveDot = dots.querySelector('li:nth-child(' + dotIndex + ')');
|
||||
this.lastActiveDot.setAttribute('data-is-active', true);
|
||||
@ -365,4 +370,4 @@
|
||||
this.stopLoop()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
41
resources/js/components/Spinner.vue
Normal file
41
resources/js/components/Spinner.vue
Normal 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>
|
||||
@ -141,7 +141,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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']" />
|
||||
@ -186,9 +186,9 @@
|
||||
</p>
|
||||
<!-- move button -->
|
||||
<p class="control" v-if="editMode">
|
||||
<button
|
||||
:disabled='selectedAccounts.length == 0' class="button is-rounded"
|
||||
:class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
|
||||
<button
|
||||
:disabled='selectedAccounts.length == 0' class="button is-rounded"
|
||||
:class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
|
||||
@click="showGroupSelector = true"
|
||||
:title="$t('groups.move_selected_to_group')" >
|
||||
{{ $t('commons.move') }}
|
||||
@ -196,19 +196,19 @@
|
||||
</p>
|
||||
<!-- delete button -->
|
||||
<p class="control" v-if="editMode">
|
||||
<button
|
||||
:disabled='selectedAccounts.length == 0' class="button is-rounded"
|
||||
:class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
|
||||
<button
|
||||
:disabled='selectedAccounts.length == 0' class="button is-rounded"
|
||||
:class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
|
||||
@click="destroyAccounts" >
|
||||
{{ $t('commons.delete') }}
|
||||
</button>
|
||||
</p>
|
||||
<!-- export button -->
|
||||
<p class="control" v-if="editMode">
|
||||
<button
|
||||
:disabled='selectedAccounts.length == 0' class="button is-rounded"
|
||||
:class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
|
||||
@click="exportAccounts"
|
||||
<button
|
||||
:disabled='selectedAccounts.length == 0' class="button is-rounded"
|
||||
:class="[{'is-outlined': $root.showDarkMode||selectedAccounts.length == 0}, selectedAccounts.length == 0 ? 'is-dark': 'is-link']"
|
||||
@click="exportAccounts"
|
||||
:title="$t('twofaccounts.export_selected_to_json')" >
|
||||
{{ $t('commons.export') }}
|
||||
</button>
|
||||
@ -223,9 +223,9 @@
|
||||
|
||||
/**
|
||||
* Accounts view
|
||||
*
|
||||
*
|
||||
* route: '/account' (alias: '/')
|
||||
*
|
||||
*
|
||||
* The main view of 2FAuth that list all existing account recorded in DB.
|
||||
* Available feature in this view :
|
||||
* - {{OTP}} generation
|
||||
@ -248,9 +248,9 @@
|
||||
* ~ 'userPreferences.showAccountsIcons' toggle the icon visibility
|
||||
* ~ 'userPreferences.displayMode' change the account appearance
|
||||
*
|
||||
* Input :
|
||||
* Input :
|
||||
* - The 'initialEditMode' props : allows to load the view directly in Edit mode
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import Modal from '../components/Modal'
|
||||
@ -289,12 +289,12 @@
|
||||
return this.accounts.filter(
|
||||
item => {
|
||||
if( parseInt(this.$root.userPreferences.activeGroup) > 0 ) {
|
||||
return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) ||
|
||||
item.account.toLowerCase().includes(this.search.toLowerCase())) &&
|
||||
return ((item.service ? item.service.toLowerCase().includes(this.search.toLowerCase()) : false) ||
|
||||
item.account.toLowerCase().includes(this.search.toLowerCase())) &&
|
||||
(item.group_id == parseInt(this.$root.userPreferences.activeGroup))
|
||||
}
|
||||
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()))
|
||||
}
|
||||
}
|
||||
@ -360,7 +360,7 @@
|
||||
components: {
|
||||
Modal,
|
||||
OtpDisplayer,
|
||||
draggable,
|
||||
draggable
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -417,11 +417,11 @@
|
||||
this.selectAccount(account.id)
|
||||
}
|
||||
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
|
||||
*/
|
||||
@ -471,7 +471,7 @@
|
||||
})
|
||||
this.$notify({ type: 'is-success', text: this.$t('twofaccounts.accounts_deleted') })
|
||||
})
|
||||
|
||||
|
||||
// we fetch the accounts again to prevent the js collection being
|
||||
// desynchronize from the backend php collection
|
||||
this.fetchAccounts(true)
|
||||
@ -529,7 +529,7 @@
|
||||
|
||||
if ( !objectEquals(groups, this.groups) ) {
|
||||
this.groups = groups
|
||||
}
|
||||
}
|
||||
|
||||
this.$storage.set('groups', this.groups)
|
||||
})
|
||||
@ -550,7 +550,7 @@
|
||||
// everything's fine
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
|
||||
this.$router.push({ name: 'genericError', params: { err: error.response } })
|
||||
});
|
||||
}
|
||||
@ -593,21 +593,21 @@
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
displayService(service) {
|
||||
return service ? service : this.$t('twofaccounts.no_service')
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
clearSelected() {
|
||||
this.selectedAccounts = []
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
selectAll() {
|
||||
if(this.editMode) {
|
||||
@ -621,7 +621,7 @@
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
sortAsc() {
|
||||
this.accounts.sort((a, b) => a.service > b.service ? 1 : -1)
|
||||
@ -629,7 +629,7 @@
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
sortDesc() {
|
||||
this.accounts.sort((a, b) => a.service < b.service ? 1 : -1)
|
||||
@ -637,7 +637,7 @@
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
keyListener : function(e) {
|
||||
if (e.key === "f" && (e.ctrlKey || e.metaKey)) {
|
||||
@ -662,4 +662,4 @@
|
||||
opacity: 1;
|
||||
/*background: hsl(0, 0%, 21%);*/
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
'reload' => 'Reload',
|
||||
'some_data_have_changed' => 'Some data have changed. You should',
|
||||
'generate' => 'Generate',
|
||||
'generating_otp' => 'Generating OTP',
|
||||
'open_in_browser' => 'Open in browser',
|
||||
'continue' => 'Continue',
|
||||
'discard' => 'Discard',
|
||||
@ -70,4 +71,4 @@
|
||||
'file' => 'File',
|
||||
'or' => 'OR',
|
||||
'close_the_x_page' => 'Close the {pagetitle} page',
|
||||
];
|
||||
];
|
||||
|
||||
24
resources/sass/app.scss
vendored
24
resources/sass/app.scss
vendored
@ -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 {
|
||||
animation: fadeIn 500ms
|
||||
}
|
||||
@ -1374,4 +1396,4 @@ footer .field.is-grouped {
|
||||
to {
|
||||
transform: translateY(-2rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user