extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-07 17:04:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Very basic Loader component for use on Accounts.vue (still needs styling etc.)

Browse Source
This commit is contained in:
Josh 2023-04-24 18:10:13 +12:00
parent d349f09ed4
commit 69c688e4ea
4 changed files with 132 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/js/app.js vendored
View File

@ -20,7 +20,8 @@ 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,
loaderActive: false
}, },
computed: { computed: {
@ -44,8 +45,16 @@ const app = new Vue({
methods: { methods: {
setDarkScheme ({ matches }) { setDarkScheme ({ matches }) {
this.prefersDarkScheme = matches this.prefersDarkScheme = matches
},
showLoader() {
this.loaderActive = true
},
hideLoader() {
this.loaderActive = false
} }
}, },
i18n, i18n,
router, router,
}); });

77
resources/js/components/Loader.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div v-if="active" class="loader-wrapper">
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'Loader',
props: {
active: Boolean,
message: String
}
}
</script>
<style scoped>
.loader-wrapper {
text-align: center;
z-index: 10000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(50,50,50,0.68);
}
.loader-wrapper p {
font-size: 1.2em;
font-weight: 300;
margin-top: 5px;
letter-spacing: 1px;
color: rgb(255, 255, 255);
}
.spinner {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.spinner div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #6916a0;
border-radius: 50%;
animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #6916a0 transparent transparent transparent;
}
.spinner div:nth-child(1) {
animation-delay: -0.45s;
}
.spinner div:nth-child(2) {
animation-delay: -0.3s;
}
.spinner div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

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.hideLoader();
}
} else {
this.$root.hideLoader();
} }
}, },
@ -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>

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

@ -1,5 +1,7 @@
<template> <template>
<div> <div>
<!-- Loading spinner -->
<loader :active="$root.loaderActive" message="calculating..." />
<!-- 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">
@ -141,7 +143,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 +188,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 +198,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 +225,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,12 +250,13 @@
* ~ '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'
import Loader from '../components/Loader'
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'
@ -289,12 +292,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()))
} }
} }
@ -361,6 +364,7 @@
Modal, Modal,
OtpDisplayer, OtpDisplayer,
draggable, draggable,
Loader
}, },
methods: { methods: {
@ -417,6 +421,7 @@
this.selectAccount(account.id) this.selectAccount(account.id)
} }
else { else {
this.$root.showLoader();
this.$refs.OtpDisplayer.show(account.id) this.$refs.OtpDisplayer.show(account.id)
} }
}, },
@ -471,7 +476,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 +534,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 +555,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 +598,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 +626,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 +634,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 +642,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 +667,4 @@
opacity: 1; opacity: 1;
/*background: hsl(0, 0%, 21%);*/ /*background: hsl(0, 0%, 21%);*/
} }
</style> </style>