mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-02-23 05:41:05 +01:00
Add Import view with basic import functionality
This commit is contained in:
Bubka
parent
0cccdf32ed
commit
e97f6cfbc6
2
resources/js/routes.js
vendored
2
resources/js/routes.js
vendored
@ -8,6 +8,7 @@ import Capture from './views/Capture'
|
||||
import Accounts from './views/Accounts'
|
||||
import CreateAccount from './views/twofaccounts/Create'
|
||||
import EditAccount from './views/twofaccounts/Edit'
|
||||
import ImportAccount from './views/twofaccounts/Import'
|
||||
import QRcodeAccount from './views/twofaccounts/QRcode'
|
||||
import Groups from './views/Groups'
|
||||
import CreateGroup from './views/groups/Create'
|
||||
@ -34,6 +35,7 @@ const router = new Router({
|
||||
|
||||
{ path: '/accounts', name: 'accounts', component: Accounts, meta: { requiresAuth: true }, alias: '/', props: true },
|
||||
{ path: '/account/create', name: 'createAccount', component: CreateAccount, meta: { requiresAuth: true } },
|
||||
{ path: '/account/import', name: 'importAccounts', component: ImportAccount, meta: { requiresAuth: true } },
|
||||
{ path: '/account/:twofaccountId/edit', name: 'editAccount', component: EditAccount, meta: { requiresAuth: true } },
|
||||
{ path: '/account/:twofaccountId/qrcode', name: 'showQRcode', component: QRcodeAccount, meta: { requiresAuth: true } },
|
||||
|
||||
|
||||
@ -90,11 +90,11 @@
|
||||
},
|
||||
|
||||
/**
|
||||
* Push a decoded URI to the Create form
|
||||
* Push a decoded URI to the Create or Import form
|
||||
*
|
||||
* The basicQRcodeReader option is Off, so qrcode decoding has already be done by vue-qrcode-reader, whether
|
||||
* from livescan or file input.
|
||||
* We simply check the uri validity to prevent useless push to the Create form, but the form will check uri validity too.
|
||||
* We simply check the uri validity to prevent useless push to the form, but the form will check uri validity too.
|
||||
*/
|
||||
async submitUri(event) {
|
||||
|
||||
@ -103,7 +103,10 @@
|
||||
if( !this.form.uri ) {
|
||||
this.$notify({type: 'is-warning', text: this.$t('errors.qrcode_cannot_be_read') })
|
||||
}
|
||||
else if( this.form.uri.slice(0, 15 ).toLowerCase() !== "otpauth://totp/" && this.form.uri.slice(0, 15 ).toLowerCase() !== "otpauth://hotp/" ) {
|
||||
else if( this.form.uri.slice(0, 33).toLowerCase() == "otpauth-migration://offline?data=" ) {
|
||||
this.pushUriToImportForm(this.form.uri)
|
||||
}
|
||||
else if( this.form.uri.slice(0, 15).toLowerCase() !== "otpauth://totp/" && this.form.uri.slice(0, 15).toLowerCase() !== "otpauth://hotp/" ) {
|
||||
this.$notify({type: 'is-warning', text: this.$t('errors.no_valid_otp') })
|
||||
}
|
||||
else {
|
||||
@ -113,6 +116,10 @@
|
||||
|
||||
pushUriToCreateForm(data) {
|
||||
this.$router.push({ name: 'createAccount', params: { decodedUri: data } });
|
||||
},
|
||||
|
||||
pushUriToImportForm(data) {
|
||||
this.$router.push({ name: 'importAccounts', params: { migrationUri: data } });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
|
||||
/**
|
||||
* Upload the submitted QR code file to the backend for decoding, then route the user
|
||||
* to the Create form with decoded URI to prefill the form
|
||||
* to the Create or Import form with decoded URI to prefill the form
|
||||
*/
|
||||
async submitQrCode() {
|
||||
|
||||
@ -107,7 +107,10 @@
|
||||
|
||||
const { data } = await this.form.upload('/api/v1/qrcode/decode', imgdata)
|
||||
|
||||
this.$router.push({ name: 'createAccount', params: { decodedUri: data.data } });
|
||||
if( data.data.slice(0, 33).toLowerCase() === "otpauth-migration://offline?data=" ) {
|
||||
this.$router.push({ name: 'importAccounts', params: { migrationUri: data.data } });
|
||||
}
|
||||
else this.$router.push({ name: 'createAccount', params: { decodedUri: data.data } });
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
145
resources/js/views/twofaccounts/Import.vue
Normal file
145
resources/js/views/twofaccounts/Import.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<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="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>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Form from './../../components/Form'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
migrationUri: '',
|
||||
exportedAccounts: [],
|
||||
isFetching: false,
|
||||
form: new Form({
|
||||
service: '',
|
||||
account: '',
|
||||
otp_type: '',
|
||||
icon: '',
|
||||
secret: '',
|
||||
secretIsBase32Encoded: 0,
|
||||
algorithm: '',
|
||||
digits: null,
|
||||
counter: null,
|
||||
period: null,
|
||||
image: '',
|
||||
qrcode: null,
|
||||
}),
|
||||
}
|
||||
},
|
||||
|
||||
mounted: async function() {
|
||||
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) => {
|
||||
this.exportedAccounts.push(data)
|
||||
})
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
// if( error.response.status === 422 ) {
|
||||
// if( error.response.data.errors.uri ) {
|
||||
// this.showAlternatives = true
|
||||
// this.showAdvancedForm = true
|
||||
// }
|
||||
// }
|
||||
});
|
||||
|
||||
this.isFetching = false
|
||||
}
|
||||
else {
|
||||
// move to error because migration uri is missing
|
||||
// todo
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
discardAccount(accountId) {
|
||||
this.exportedAccounts.splice(accountId, 1)
|
||||
},
|
||||
|
||||
async createAccounts() {
|
||||
for (let i = 0; i < this.exportedAccounts.length; i++) {
|
||||
await createAccount(i)
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
async createAccount(accountId) {
|
||||
|
||||
let twofaccount = this.exportedAccounts[accountId]
|
||||
|
||||
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')
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -43,4 +43,5 @@
|
||||
'generate' => 'Generate',
|
||||
'open_in_browser' => 'Open in browser',
|
||||
'continue' => 'Continue',
|
||||
'discard' => 'Discard'
|
||||
];
|
||||
@ -119,5 +119,11 @@
|
||||
'delete' => 'Are you sure you want to delete this account?',
|
||||
'cancel' => 'The account will be lost. Are you sure?'
|
||||
],
|
||||
'import' => [
|
||||
'import' => 'Import',
|
||||
'import_legend' => 'Import your Google Authenticator accounts.',
|
||||
'use_a_qr_code' => 'Use a QR code',
|
||||
'issuer' => 'Issuer'
|
||||
],
|
||||
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user