mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-11-07 17:04:34 +01:00
Very basic Loader component for use on Accounts.vue (still needs styling etc.)
This commit is contained in:
Josh
parent
d349f09ed4
commit
69c688e4ea
13
resources/js/app.js
vendored
13
resources/js/app.js
vendored
@ -20,7 +20,8 @@ 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,
|
||||
loaderActive: false
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -44,8 +45,16 @@ const app = new Vue({
|
||||
methods: {
|
||||
setDarkScheme ({ matches }) {
|
||||
this.prefersDarkScheme = matches
|
||||
},
|
||||
|
||||
showLoader() {
|
||||
this.loaderActive = true
|
||||
},
|
||||
|
||||
hideLoader() {
|
||||
this.loaderActive = false
|
||||
}
|
||||
},
|
||||
i18n,
|
||||
router,
|
||||
});
|
||||
});
|
||||
|
||||
77
resources/js/components/Loader.vue
Normal file
77
resources/js/components/Loader.vue
Normal 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>
|
||||
@ -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.hideLoader();
|
||||
}
|
||||
} else {
|
||||
this.$root.hideLoader();
|
||||
}
|
||||
},
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Loading spinner -->
|
||||
<loader :active="$root.loaderActive" message="calculating..." />
|
||||
<!-- Group switch -->
|
||||
<div class="container groups" v-if="showGroupSwitch">
|
||||
<div class="columns is-centered">
|
||||
@ -141,7 +143,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 +188,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 +198,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 +225,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,12 +250,13 @@
|
||||
* ~ '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'
|
||||
import Loader from '../components/Loader'
|
||||
import OtpDisplayer from '../components/OtpDisplayer'
|
||||
import draggable from 'vuedraggable'
|
||||
import Form from './../components/Form'
|
||||
@ -289,12 +292,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()))
|
||||
}
|
||||
}
|
||||
@ -361,6 +364,7 @@
|
||||
Modal,
|
||||
OtpDisplayer,
|
||||
draggable,
|
||||
Loader
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -417,6 +421,7 @@
|
||||
this.selectAccount(account.id)
|
||||
}
|
||||
else {
|
||||
this.$root.showLoader();
|
||||
this.$refs.OtpDisplayer.show(account.id)
|
||||
}
|
||||
},
|
||||
@ -471,7 +476,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 +534,7 @@
|
||||
|
||||
if ( !objectEquals(groups, this.groups) ) {
|
||||
this.groups = groups
|
||||
}
|
||||
}
|
||||
|
||||
this.$storage.set('groups', this.groups)
|
||||
})
|
||||
@ -550,7 +555,7 @@
|
||||
// everything's fine
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
|
||||
this.$router.push({ name: 'genericError', params: { err: error.response } })
|
||||
});
|
||||
}
|
||||
@ -593,21 +598,21 @@
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
displayService(service) {
|
||||
return service ? service : this.$t('twofaccounts.no_service')
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
clearSelected() {
|
||||
this.selectedAccounts = []
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
selectAll() {
|
||||
if(this.editMode) {
|
||||
@ -621,7 +626,7 @@
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
sortAsc() {
|
||||
this.accounts.sort((a, b) => a.service > b.service ? 1 : -1)
|
||||
@ -629,7 +634,7 @@
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
sortDesc() {
|
||||
this.accounts.sort((a, b) => a.service < b.service ? 1 : -1)
|
||||
@ -637,7 +642,7 @@
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
keyListener : function(e) {
|
||||
if (e.key === "f" && (e.ctrlKey || e.metaKey)) {
|
||||
@ -662,4 +667,4 @@
|
||||
opacity: 1;
|
||||
/*background: hsl(0, 0%, 21%);*/
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user