Add Import view with basic import functionality

resources/js/routes.js

@@ -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 } },
 

resources/js/views/Capture.vue

@@ -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 } });
             }
         }
     }

resources/js/views/Start.vue

@@ -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 } });
             },
 
             /**

resources/js/views/twofaccounts/Import.vue

@@ -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>

resources/lang/en/commons.php

@@ -43,4 +43,5 @@ return [
     'generate' => 'Generate',
     'open_in_browser' => 'Open in browser',
     'continue' => 'Continue',
+    'discard' => 'Discard'
 ];

resources/lang/en/twofaccounts.php

@@ -119,5 +119,11 @@ return [
         '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'
+    ],
 
 ];