Complete the G-Auth import feature

resources/js/components/OtpDisplayer.vue

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

resources/js/packages/fontawesome.js

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

resources/js/views/twofaccounts/Import.vue

@@ -1,54 +1,110 @@
 <template>
-    <div class="columns is-centered">
+    <div>
-        <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
+        <div class="columns is-centered">
-            <h1 class="title">
+            <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
-                {{ $t('twofaccounts.import.import') }}
+                <h1 class="title">
-            </h1>
+                    {{ $t('twofaccounts.import.import') }}
-            <div class="is-size-7-mobile">
+                </h1>
-                {{ $t('twofaccounts.import.import_legend')}}
+                <div class="is-size-7-mobile" v-html="$t('twofaccounts.import.import_legend')">
-            </div>
+                </div>
-            <div v-if="!migrationUri" class="mt-3 mb-6">
+                <div class="mt-3 mb-6">
-                <router-link class="is-link mt-5" :to="{ name: 'start' }">
+                    <router-link class="is-link" :to="{ name: 'start', params: {showAdvancedFormButton: false, returnToView: 'importAccounts'} }">
-                    <font-awesome-icon :icon="['fas', 'plus-circle']" /> {{ $t('twofaccounts.import.use_a_qr_code') }}
+                        <span class="tag is-black">
-                </router-link>
+                            <font-awesome-icon :icon="['fas', 'qrcode']" size="lg" class="mr-1" />{{ $t('twofaccounts.import.use_the_gauth_qr_code') }}
-            </div>
+                        </span>
-            <div v-else>
+                    </router-link>
-                <div v-if="exportedAccounts.length > 0">
+                </div>
-                    <div v-for="(account, index) in exportedAccounts" :key="account.name" class="group-item has-text-light is-size-5 is-size-6-mobile">
+                <div>
-                        {{ account.account }}
+                    <div v-if="exportedAccounts.length > 0">
-                        <!-- import button -->
+                        <div v-for="(account, index) in exportedAccounts" :key="account.name" class="group-item has-text-light is-size-5 is-size-6-mobile">
-                        <a class="tag is-dark is-pulled-right" @click="createAccount(index)"  :title="$t('twofaccounts.import.import')">
+                            <div class="is-flex is-justify-content-space-between">
-                            {{ $t('twofaccounts.import.import') }}
+                                <!-- Account name -->
-                        </a>
+                                <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')">
-                        <!-- remove button -->
+                                    {{ account.account }}
-                        <a class="tag is-dark is-pulled-right" @click="discardAccount(index)"  :title="$t('commons.discard')">
+                                </div>
-                            {{ $t('commons.discard') }}
+                                <div v-else class="has-ellipsis">{{ account.account }}</div>
-                        </a>
+                                <!-- buttons -->
-                        <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ $t('twofaccounts.import.issuer') }}: {{ account.service }}</span>
+                                <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
+            this.$on('modalClose', function() {
-                // todo
+                this.$refs.AdvancedFormOtpDisplayer.clearOTP()
-            }
+            });
         },
 
-        created: function() {
+        components: {
+            Modal,
+            OtpDisplayer,
         },
 
         methods: {
 
-            discardAccount(accountId) {
+            /**
-                this.exportedAccounts.splice(accountId, 1)
+             * Remove all duplicates from the accounts list
-            },
+             */
-
+            discardDuplicates() {
-            async createAccounts() {
+                if(confirm(this.$t('twofaccounts.confirm.discard_duplicates'))) {
-                for (let i = 0; i < this.exportedAccounts.length; i++) {
+                    this.$notify({ clean: true })
-                    await createAccount(i)
+                    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')
-                }
-
             },
         }
     }

resources/lang/en/errors.php

@@ -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',
 ];

resources/lang/en/twofaccounts.php

@@ -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',
+        'use_the_gauth_qr_code' => 'Load a G-Auth QR code',
-        'issuer' => 'Issuer'
+        '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',
     ],
 
 ];

resources/sass/app.scss

@@ -286,6 +286,10 @@ a:hover {
   white-space: nowrap;
 }
 
+.has-nowrap {
+  white-space: nowrap;
+}
+
 .add-icon-button {
   height: 64px;
   width: 64px;