mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-11-22 08:13:11 +01:00
Complete the G-Auth import feature
This commit is contained in:
Bubka
parent
b56ad6737b
commit
b0a1556d5a
@ -245,7 +245,7 @@
|
||||
|
||||
this.stopLoop()
|
||||
this.internal_id = this.remainingTimeout = this.dotToDotInterval = this.firstDotToNextOneTimeout = this.elapsedTimeInCurrentPeriod = this.internal_counter = null
|
||||
this.internal_service = this.internal_account = this.internal_icon = this.internal_otp_type = ''
|
||||
this.internal_service = this.internal_account = this.internal_icon = this.internal_otp_type = this.internal_secret = ''
|
||||
this.internal_password = '... ...'
|
||||
|
||||
try {
|
||||
|
||||
4
resources/js/packages/fontawesome.js
vendored
4
resources/js/packages/fontawesome.js
vendored
@ -10,6 +10,7 @@ import {
|
||||
faImage,
|
||||
faTrash,
|
||||
faCheck,
|
||||
faTimes,
|
||||
faLock,
|
||||
faLockOpen,
|
||||
faSearch,
|
||||
@ -23,6 +24,7 @@ import {
|
||||
faPenSquare,
|
||||
faTh,
|
||||
faList,
|
||||
faTimesCircle,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import {
|
||||
@ -36,6 +38,7 @@ library.add(
|
||||
faImage,
|
||||
faTrash,
|
||||
faCheck,
|
||||
faTimes,
|
||||
faLock,
|
||||
faLockOpen,
|
||||
faSearch,
|
||||
@ -50,6 +53,7 @@ library.add(
|
||||
faPenSquare,
|
||||
faTh,
|
||||
faList,
|
||||
faTimesCircle,
|
||||
);
|
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon)
|
||||
@ -1,54 +1,110 @@
|
||||
<template>
|
||||
<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">
|
||||
<h1 class="title">
|
||||
{{ $t('twofaccounts.import.import') }}
|
||||
</h1>
|
||||
<div class="is-size-7-mobile">
|
||||
{{ $t('twofaccounts.import.import_legend')}}
|
||||
</div>
|
||||
<div v-if="!migrationUri" class="mt-3 mb-6">
|
||||
<router-link class="is-link mt-5" :to="{ name: 'start' }">
|
||||
<font-awesome-icon :icon="['fas', 'plus-circle']" /> {{ $t('twofaccounts.import.use_a_qr_code') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else>
|
||||
<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">
|
||||
{{ account.account }}
|
||||
<!-- import button -->
|
||||
<a class="tag is-dark is-pulled-right" @click="createAccount(index)" :title="$t('twofaccounts.import.import')">
|
||||
{{ $t('twofaccounts.import.import') }}
|
||||
</a>
|
||||
<!-- remove button -->
|
||||
<a class="tag is-dark is-pulled-right" @click="discardAccount(index)" :title="$t('commons.discard')">
|
||||
{{ $t('commons.discard') }}
|
||||
</a>
|
||||
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ $t('twofaccounts.import.issuer') }}: {{ account.service }}</span>
|
||||
<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">
|
||||
<h1 class="title">
|
||||
{{ $t('twofaccounts.import.import') }}
|
||||
</h1>
|
||||
<div class="is-size-7-mobile" v-html="$t('twofaccounts.import.import_legend')">
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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 -->
|
||||
<div v-if="account.id > -2 && account.imported !== 0" class="has-ellipsis is-clickable" @click="previewAccount(index)" :title="$t('twofaccounts.import.generate_a_test_password')">
|
||||
{{ account.account }}
|
||||
</div>
|
||||
<div v-else class="has-ellipsis">{{ account.account }}</div>
|
||||
<!-- buttons -->
|
||||
<div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
|
||||
<!-- discard button -->
|
||||
<a class="tag is-dark has-text-grey-light" @click="discardAccount(index)" :title="$t('twofaccounts.import.discard_this_account')">
|
||||
<font-awesome-icon :icon="['fas', 'trash']" />
|
||||
</a>
|
||||
<!-- import button -->
|
||||
<a v-if="account.id > -2" class="tag is-link" @click="createAccount(index)" :title="$t('twofaccounts.import.import_this_account')">
|
||||
{{ $t('twofaccounts.import.import') }}
|
||||
</a>
|
||||
</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">
|
||||
<span v-if="duplicateCount">
|
||||
<a @click="discardDuplicates()" class="has-text-grey">{{ $t('twofaccounts.import.discard_duplicates') }} ({{duplicateCount}})</a> -
|
||||
</span>
|
||||
<a @click="discardAccounts()" class="has-text-grey">{{ $t('twofaccounts.import.discard_all') }}</a>
|
||||
</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 class="mt-2 is-size-7 is-pulled-right" v-if="exportedAccounts.length > 0">
|
||||
{{ $t('groups.deleting_group_does_not_delete_accounts')}}
|
||||
</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>
|
||||
<!-- footer -->
|
||||
<vue-footer :showButtons="true">
|
||||
<!-- Import all button -->
|
||||
<p class="control" v-if="importableCount > 0">
|
||||
<a class="button is-link is-rounded is-focus" @click="createAccounts">
|
||||
<span>{{ $t('twofaccounts.import.import_all') }} ({{importableCount}})</span>
|
||||
<!-- <span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'qrcode']" />
|
||||
</span> -->
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<vue-footer :showButtons="true">
|
||||
<!-- close button -->
|
||||
<p class="control">
|
||||
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
|
||||
</p>
|
||||
</vue-footer>
|
||||
</div>
|
||||
<!-- modal -->
|
||||
<modal v-model="ShowTwofaccountInModal">
|
||||
<otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()">
|
||||
</otp-displayer>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from '../../components/Modal'
|
||||
import Form from './../../components/Form'
|
||||
import OtpDisplayer from '../../components/OtpDisplayer'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -62,7 +118,7 @@
|
||||
otp_type: '',
|
||||
icon: '',
|
||||
secret: '',
|
||||
secretIsBase32Encoded: 0,
|
||||
secretIsBase32Encoded: 1,
|
||||
algorithm: '',
|
||||
digits: null,
|
||||
counter: null,
|
||||
@ -70,74 +126,138 @@
|
||||
image: '',
|
||||
qrcode: null,
|
||||
}),
|
||||
ShowTwofaccountInModal : false,
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
},
|
||||
|
||||
mounted: async function() {
|
||||
// A migration URI is provided as route parameter, we extract the accounts from the URI and
|
||||
// list them in the view
|
||||
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 => {
|
||||
// we should receive an array of twofaccounts
|
||||
response.data.forEach((data) => {
|
||||
data.imported = -1;
|
||||
this.exportedAccounts.push(data)
|
||||
})
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
// if( error.response.status === 422 ) {
|
||||
// if( error.response.data.errors.uri ) {
|
||||
// this.showAlternatives = true
|
||||
// this.showAdvancedForm = true
|
||||
// }
|
||||
// }
|
||||
});
|
||||
|
||||
this.$notify({type: 'is-success', text: this.$t('twofaccounts.import.x_valid_accounts_found', { count: this.importableCount }) })
|
||||
this.isFetching = false
|
||||
}
|
||||
else {
|
||||
// move to error because migration uri is missing
|
||||
// todo
|
||||
}
|
||||
|
||||
this.$on('modalClose', function() {
|
||||
this.$refs.AdvancedFormOtpDisplayer.clearOTP()
|
||||
});
|
||||
},
|
||||
|
||||
created: function() {
|
||||
components: {
|
||||
Modal,
|
||||
OtpDisplayer,
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
discardAccount(accountId) {
|
||||
this.exportedAccounts.splice(accountId, 1)
|
||||
},
|
||||
|
||||
async createAccounts() {
|
||||
for (let i = 0; i < this.exportedAccounts.length; i++) {
|
||||
await createAccount(i)
|
||||
|
||||
/**
|
||||
* 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)
|
||||
}
|
||||
},
|
||||
|
||||
async createAccount(accountId) {
|
||||
/**
|
||||
* Clear the accounts list
|
||||
*/
|
||||
discardAccounts() {
|
||||
if(confirm(this.$t('twofaccounts.confirm.discard_all'))) {
|
||||
this.$notify({ clean: true })
|
||||
this.$refs.AdvancedFormOtpDisplayer.clearOTP()
|
||||
this.exportedAccounts = []
|
||||
}
|
||||
},
|
||||
|
||||
let twofaccount = this.exportedAccounts[accountId]
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
async createAccounts() {
|
||||
for (let index = 0; index < this.exportedAccounts.length; index++) {
|
||||
if (this.exportedAccounts[index].imported == -1) {
|
||||
await this.createAccount(index)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Store the provided account
|
||||
*/
|
||||
async createAccount(accountIndex) {
|
||||
|
||||
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()
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
this.form.account = twofaccount.account
|
||||
this.form.service = twofaccount.service
|
||||
this.form.otp_type = twofaccount.otp_type
|
||||
this.form.secret = twofaccount.secret
|
||||
this.form.secretIsBase32Encoded = 1
|
||||
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
|
||||
|
||||
await this.form.post('/api/v1/twofaccounts')
|
||||
|
||||
if( this.form.errors.any() === false ) {
|
||||
console.log('account #' + accountId + 'created')
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,5 +38,6 @@
|
||||
'unsupported_with_reverseproxy' => 'Not applicable when using an auth proxy',
|
||||
'user_deletion_failed' => 'User account deletion failed, no data have been deleted',
|
||||
'auth_proxy_failed' => 'Proxy authentication failed',
|
||||
'auth_proxy_failed_legend' => '2Fauth is configured to run behind an authentication proxy but your proxy does not return the expected header. Check your configuration and try again.'
|
||||
'auth_proxy_failed_legend' => '2Fauth is configured to run behind an authentication proxy but your proxy does not return the expected header. Check your configuration and try again.',
|
||||
'invalid_google_auth_migration' => 'Invalid or unreadable Google Authenticator data',
|
||||
];
|
||||
@ -117,13 +117,26 @@
|
||||
],
|
||||
'confirm' => [
|
||||
'delete' => 'Are you sure you want to delete this account?',
|
||||
'cancel' => 'The account will be lost. Are you sure?'
|
||||
'cancel' => 'The account will be lost. Are you sure?',
|
||||
'discard' => 'Are you sure you want to discard this account?',
|
||||
'discard_all' => 'Are you sure you want to discard all accounts?',
|
||||
'discard_duplicates' => 'Are you sure you want to discard all duplicates?',
|
||||
],
|
||||
'import' => [
|
||||
'import' => 'Import',
|
||||
'import_legend' => 'Import your Google Authenticator accounts.',
|
||||
'use_a_qr_code' => 'Use a QR code',
|
||||
'issuer' => 'Issuer'
|
||||
'use_the_gauth_qr_code' => 'Load a G-Auth QR code',
|
||||
'issuer' => 'Issuer',
|
||||
'imported' => 'Imported',
|
||||
'failure' => 'Failure',
|
||||
'x_valid_accounts_found' => '{count} valid accounts found',
|
||||
'import_all' => 'Import all',
|
||||
'import_this_account' => 'Import this account',
|
||||
'discard_all' => 'Discard all',
|
||||
'discard_duplicates' => 'Discard duplicates',
|
||||
'discard_this_account' => 'Discard this account',
|
||||
'generate_a_test_password' => 'Generate a test pasword',
|
||||
'possible_duplicate' => 'An account with the exact same data already exists',
|
||||
],
|
||||
|
||||
];
|
||||
4
resources/sass/app.scss
vendored
4
resources/sass/app.scss
vendored
@ -286,6 +286,10 @@ a:hover {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.has-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.add-icon-button {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user