2022-05-25 13:42:43 +02:00
|
|
|
<template>
|
2022-06-20 17:50:32 +02:00
|
|
|
<div>
|
|
|
|
<div class="columns is-centered">
|
|
|
|
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
|
2022-09-17 19:32:34 +02:00
|
|
|
<h1 class="title has-text-grey-dark">
|
2022-06-20 17:50:32 +02:00
|
|
|
{{ $t('twofaccounts.import.import') }}
|
|
|
|
</h1>
|
|
|
|
<div class="is-size-7-mobile" v-html="$t('twofaccounts.import.import_legend')">
|
2022-05-25 13:42:43 +02:00
|
|
|
</div>
|
2022-06-20 17:50:32 +02:00
|
|
|
<div class="mt-3 mb-6">
|
|
|
|
<router-link class="is-link" :to="{ name: 'start', params: {showAdvancedFormButton: false, returnToView: 'importAccounts'} }">
|
|
|
|
<span class="tag is-black">
|
|
|
|
<font-awesome-icon :icon="['fas', 'qrcode']" size="lg" class="mr-1" />{{ $t('twofaccounts.import.use_the_gauth_qr_code') }}
|
|
|
|
</span>
|
|
|
|
</router-link>
|
2022-05-25 13:42:43 +02:00
|
|
|
</div>
|
2022-06-20 17:50:32 +02:00
|
|
|
<div>
|
|
|
|
<div v-if="exportedAccounts.length > 0">
|
|
|
|
<div v-for="(account, index) in exportedAccounts" :key="account.name" class="group-item has-text-light is-size-5 is-size-6-mobile">
|
|
|
|
<div class="is-flex is-justify-content-space-between">
|
|
|
|
<!-- Account name -->
|
2022-07-28 13:17:22 +02:00
|
|
|
<div v-if="account.id > -2 && account.imported !== 0" class="is-flex-grow-1 has-ellipsis is-clickable" @click="previewAccount(index)" :title="$t('twofaccounts.import.generate_a_test_password')">
|
2022-09-18 17:04:37 +02:00
|
|
|
<img v-if="account.icon && $root.appSettings.showAccountsIcons" class="import-icon" :src="'/storage/icons/' + account.icon" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, service: account.service})">
|
2022-06-20 17:50:32 +02:00
|
|
|
{{ account.account }}
|
|
|
|
</div>
|
2022-07-28 13:17:22 +02:00
|
|
|
<div v-else class="is-flex-grow-1 has-ellipsis">{{ account.account }}</div>
|
2022-06-20 17:50:32 +02:00
|
|
|
<!-- buttons -->
|
|
|
|
<div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
|
|
|
|
<!-- discard button -->
|
2022-09-18 16:04:59 +02:00
|
|
|
<button class="button tag is-dark has-text-grey-light" @click="discardAccount(index)" :title="$t('twofaccounts.import.discard_this_account')">
|
2022-06-20 17:50:32 +02:00
|
|
|
<font-awesome-icon :icon="['fas', 'trash']" />
|
2022-09-18 16:04:59 +02:00
|
|
|
</button>
|
2022-06-20 17:50:32 +02:00
|
|
|
<!-- import button -->
|
2022-09-18 16:04:59 +02:00
|
|
|
<button v-if="account.id > -2" class="button tag is-link" @click="createAccount(index)" :title="$t('twofaccounts.import.import_this_account')">
|
2022-07-12 22:47:36 +02:00
|
|
|
{{ $t('twofaccounts.import.to_import') }}
|
2022-09-18 16:04:59 +02:00
|
|
|
</button>
|
2022-06-20 17:50:32 +02:00
|
|
|
</div>
|
|
|
|
<!-- result label -->
|
|
|
|
<div v-else class="has-nowrap">
|
|
|
|
<span v-if="account.imported === 1" class="has-text-success">
|
|
|
|
{{ $t('twofaccounts.import.imported') }} <font-awesome-icon :icon="['fas', 'check']" />
|
|
|
|
</span>
|
|
|
|
<span v-else class="has-text-danger">
|
|
|
|
{{ $t('twofaccounts.import.failure') }} <font-awesome-icon :icon="['fas', 'times']" />
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="is-size-6 is-size-7-mobile">
|
|
|
|
<!-- service name -->
|
|
|
|
<div class="is-family-primary has-text-grey">{{ $t('twofaccounts.import.issuer') }}: {{ account.service }}</div>
|
|
|
|
<!-- reasons to invalid G-Auth data -->
|
|
|
|
<div v-if="account.id === -2" class="has-text-danger">
|
|
|
|
<font-awesome-icon class="mr-1" :icon="['fas', 'times-circle']" />{{ account.secret }}
|
|
|
|
</div>
|
|
|
|
<!-- possible duplicates -->
|
|
|
|
<div v-if="account.id === -1 && account.imported !== 1 && !account.errors" class="has-text-warning">
|
|
|
|
<font-awesome-icon class="mr-1" :icon="['fas', 'exclamation-circle']" />{{ $t('twofaccounts.import.possible_duplicate') }}
|
|
|
|
</div>
|
|
|
|
<!-- errors during account creation -->
|
|
|
|
<ul v-if="account.errors">
|
|
|
|
<li v-for="(error) in account.errors" :key="error" class="has-text-danger">{{ error }}</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- discard links -->
|
|
|
|
<div v-if="importableCount > 0" class="mt-2 is-size-7 is-pulled-right">
|
2022-09-18 16:04:59 +02:00
|
|
|
<button v-if="duplicateCount" @click="discardDuplicates()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_duplicates') }} ({{duplicateCount}})</button>
|
|
|
|
<button @click="discardAccounts()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_all') }}</button>
|
2022-06-20 17:50:32 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="isFetching && exportedAccounts.length === 0" class="has-text-centered">
|
|
|
|
<span class="is-size-4">
|
|
|
|
<font-awesome-icon :icon="['fas', 'spinner']" spin />
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- footer -->
|
|
|
|
<vue-footer :showButtons="true">
|
|
|
|
<!-- Import all button -->
|
|
|
|
<p class="control" v-if="importableCount > 0">
|
2022-09-17 19:31:11 +02:00
|
|
|
<button class="button is-link is-rounded is-focus" @click="createAccounts">
|
2022-06-20 17:50:32 +02:00
|
|
|
<span>{{ $t('twofaccounts.import.import_all') }} ({{importableCount}})</span>
|
|
|
|
<!-- <span class="icon is-small">
|
|
|
|
<font-awesome-icon :icon="['fas', 'qrcode']" />
|
|
|
|
</span> -->
|
2022-09-17 19:31:11 +02:00
|
|
|
</button>
|
2022-06-20 17:50:32 +02:00
|
|
|
</p>
|
|
|
|
<!-- close button -->
|
|
|
|
<p class="control">
|
|
|
|
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></router-link>
|
|
|
|
</p>
|
|
|
|
</vue-footer>
|
2022-05-25 13:42:43 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-06-20 17:50:32 +02:00
|
|
|
<!-- modal -->
|
|
|
|
<modal v-model="ShowTwofaccountInModal">
|
|
|
|
<otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()">
|
|
|
|
</otp-displayer>
|
|
|
|
</modal>
|
2022-05-25 13:42:43 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-06-20 17:50:32 +02:00
|
|
|
import Modal from '../../components/Modal'
|
2022-05-25 13:42:43 +02:00
|
|
|
import Form from './../../components/Form'
|
2022-06-20 17:50:32 +02:00
|
|
|
import OtpDisplayer from '../../components/OtpDisplayer'
|
2022-05-25 13:42:43 +02:00
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
migrationUri: '',
|
|
|
|
exportedAccounts: [],
|
|
|
|
isFetching: false,
|
|
|
|
form: new Form({
|
|
|
|
service: '',
|
|
|
|
account: '',
|
|
|
|
otp_type: '',
|
|
|
|
icon: '',
|
|
|
|
secret: '',
|
2022-06-20 17:50:32 +02:00
|
|
|
secretIsBase32Encoded: 1,
|
2022-05-25 13:42:43 +02:00
|
|
|
algorithm: '',
|
|
|
|
digits: null,
|
|
|
|
counter: null,
|
|
|
|
period: null,
|
|
|
|
image: '',
|
|
|
|
qrcode: null,
|
|
|
|
}),
|
2022-06-20 17:50:32 +02:00
|
|
|
ShowTwofaccountInModal : false,
|
2022-05-25 13:42:43 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2022-06-20 17:50:32 +02:00
|
|
|
computed: {
|
|
|
|
importableCount() {
|
|
|
|
return this.exportedAccounts.filter(account => account.imported == -1 && account.id > -2).length;
|
|
|
|
},
|
|
|
|
|
|
|
|
duplicateCount() {
|
|
|
|
return this.exportedAccounts.filter(account => account.id === -1 && account.imported === -1).length;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-05-25 13:42:43 +02:00
|
|
|
mounted: async function() {
|
2022-06-20 17:50:32 +02:00
|
|
|
// A migration URI is provided as route parameter, we extract the accounts from the URI and
|
|
|
|
// list them in the view
|
2022-05-25 13:42:43 +02:00
|
|
|
if( this.$route.params.migrationUri ) {
|
|
|
|
this.migrationUri = this.$route.params.migrationUri
|
|
|
|
this.isFetching = true
|
|
|
|
|
|
|
|
await this.axios.post('/api/v1/twofaccounts/import', { uri: this.migrationUri }).then(response => {
|
|
|
|
response.data.forEach((data) => {
|
2022-06-20 17:50:32 +02:00
|
|
|
data.imported = -1;
|
2022-05-25 13:42:43 +02:00
|
|
|
this.exportedAccounts.push(data)
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
2022-06-20 17:50:32 +02:00
|
|
|
this.$notify({type: 'is-success', text: this.$t('twofaccounts.import.x_valid_accounts_found', { count: this.importableCount }) })
|
2022-05-25 13:42:43 +02:00
|
|
|
this.isFetching = false
|
|
|
|
}
|
2022-06-20 17:50:32 +02:00
|
|
|
|
|
|
|
this.$on('modalClose', function() {
|
|
|
|
this.$refs.AdvancedFormOtpDisplayer.clearOTP()
|
|
|
|
});
|
2022-05-25 13:42:43 +02:00
|
|
|
},
|
|
|
|
|
2022-06-20 17:50:32 +02:00
|
|
|
components: {
|
|
|
|
Modal,
|
|
|
|
OtpDisplayer,
|
2022-05-25 13:42:43 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
2022-06-20 17:50:32 +02:00
|
|
|
/**
|
|
|
|
* Remove all duplicates from the accounts list
|
|
|
|
*/
|
|
|
|
discardDuplicates() {
|
|
|
|
if(confirm(this.$t('twofaccounts.confirm.discard_duplicates'))) {
|
|
|
|
this.$notify({ clean: true })
|
|
|
|
this.$refs.AdvancedFormOtpDisplayer.clearOTP()
|
|
|
|
// console.log(this.exportedAccounts.filter(account => account.id >= 0 && account.imported > -1))
|
|
|
|
this.exportedAccounts = this.exportedAccounts.filter(account => account.id !== -1)
|
|
|
|
}
|
2022-05-25 13:42:43 +02:00
|
|
|
},
|
|
|
|
|
2022-06-20 17:50:32 +02:00
|
|
|
/**
|
|
|
|
* Clear the accounts list
|
|
|
|
*/
|
|
|
|
discardAccounts() {
|
|
|
|
if(confirm(this.$t('twofaccounts.confirm.discard_all'))) {
|
|
|
|
this.$notify({ clean: true })
|
|
|
|
this.$refs.AdvancedFormOtpDisplayer.clearOTP()
|
|
|
|
this.exportedAccounts = []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Remove one duplicate from the accounts list
|
|
|
|
*/
|
|
|
|
discardAccount(accountIndex) {
|
|
|
|
if(confirm(this.$t('twofaccounts.confirm.discard'))) {
|
|
|
|
this.exportedAccounts.splice(accountIndex, 1)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Batch store valid accounts, even duplicates
|
|
|
|
*/
|
2022-05-25 13:42:43 +02:00
|
|
|
async createAccounts() {
|
2022-06-20 17:50:32 +02:00
|
|
|
for (let index = 0; index < this.exportedAccounts.length; index++) {
|
|
|
|
if (this.exportedAccounts[index].imported == -1) {
|
|
|
|
await this.createAccount(index)
|
|
|
|
}
|
2022-05-25 13:42:43 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2022-06-20 17:50:32 +02:00
|
|
|
/**
|
|
|
|
* Store the provided account
|
|
|
|
*/
|
|
|
|
async createAccount(accountIndex) {
|
2022-05-25 13:42:43 +02:00
|
|
|
|
2022-06-20 17:50:32 +02:00
|
|
|
let twofaccount = this.exportedAccounts[accountIndex]
|
|
|
|
this.mapAccountToForm(twofaccount)
|
|
|
|
|
|
|
|
await this.form.post('/api/v1/twofaccounts', {returnError: true})
|
|
|
|
.then(response => {
|
|
|
|
this.exportedAccounts[accountIndex].imported = 1
|
|
|
|
this.exportedAccounts[accountIndex].id = response.data.id
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
this.exportedAccounts[accountIndex].imported = 0
|
|
|
|
this.exportedAccounts[accountIndex].id = 0
|
|
|
|
this.exportedAccounts[accountIndex].errors = this.form.errors.flatten()
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
2022-05-25 13:42:43 +02:00
|
|
|
|
2022-06-20 17:50:32 +02:00
|
|
|
/**
|
|
|
|
* Generate a fresh OTP password and display it
|
|
|
|
*/
|
|
|
|
previewAccount(accountIndex) {
|
|
|
|
this.mapAccountToForm(this.exportedAccounts[accountIndex])
|
|
|
|
.then(() => {
|
|
|
|
this.$refs.AdvancedFormOtpDisplayer.$forceUpdate()
|
|
|
|
this.$refs.AdvancedFormOtpDisplayer.show()
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Map account field with the Form object
|
|
|
|
*/
|
|
|
|
async mapAccountToForm(twofaccount) {
|
2022-05-25 13:42:43 +02:00
|
|
|
this.form.account = twofaccount.account
|
|
|
|
this.form.service = twofaccount.service
|
|
|
|
this.form.otp_type = twofaccount.otp_type
|
|
|
|
this.form.secret = twofaccount.secret
|
|
|
|
this.form.algorithm = twofaccount.algorithm
|
|
|
|
this.form.digits = twofaccount.digits
|
|
|
|
this.form.counter = twofaccount.otp_type === 'hotp' ? twofaccount.counter : null
|
|
|
|
this.form.period = twofaccount.otp_type === 'totp' ? twofaccount.period : null
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|