From 4511df5764dcce0912c4b3f6b69d7f1b3cafd020 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 12 Oct 2022 12:56:16 +0200
Subject: [PATCH] Refactor views to use a responsive width wrapper component

---
 resources/js/components/FormWrapper.vue       |  12 +-
 .../js/components/ResponsiveWidthWrapper.vue  |  19 ++
 resources/js/components/SettingTabs.vue       |  18 +-
 resources/js/components/index.js              |   4 +-
 resources/js/views/About.vue                  | 148 +++++----
 resources/js/views/Groups.vue                 |  84 +++--
 resources/js/views/twofaccounts/Import.vue    | 290 +++++++++---------
 7 files changed, 293 insertions(+), 282 deletions(-)
 create mode 100644 resources/js/components/ResponsiveWidthWrapper.vue

diff --git a/resources/js/components/FormWrapper.vue b/resources/js/components/FormWrapper.vue
index 2b3ea90a..81856793 100644
--- a/resources/js/components/FormWrapper.vue
+++ b/resources/js/components/FormWrapper.vue
@@ -1,11 +1,9 @@
 <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 has-text-grey-dark" v-html="title" v-if="title"></h1>
-            <div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
-            <slot />
-        </div>
-    </div>    
+    <responsive-width-wrapper>
+        <h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1>
+        <div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
+        <slot />
+    </responsive-width-wrapper>   
 </template>
 
 <script>
diff --git a/resources/js/components/ResponsiveWidthWrapper.vue b/resources/js/components/ResponsiveWidthWrapper.vue
new file mode 100644
index 00000000..6bee8850
--- /dev/null
+++ b/resources/js/components/ResponsiveWidthWrapper.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="columns is-centered">
+        <div class="form-column column is-two-thirds-tablet is-half-desktop is-half-widescreen is-one-third-fullhd">
+            <slot />
+        </div>
+    </div>    
+</template>
+
+<script>
+    export default {
+        name: 'ResponsiveWidthWrapper',
+        
+        data() {
+            return {
+
+            }
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/resources/js/components/SettingTabs.vue b/resources/js/components/SettingTabs.vue
index 1d5ef4b2..eba41294 100644
--- a/resources/js/components/SettingTabs.vue
+++ b/resources/js/components/SettingTabs.vue
@@ -1,16 +1,14 @@
 <template>
     <div class="options-header has-background-black-ter">
-        <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">
-                <div class="tabs is-centered is-fullwidth">
-                    <ul>
-                        <li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
-                            <router-link :id="tab.id" :to="{ name: tab.view }">{{ tab.name }}</router-link>
-                        </li>
-                    </ul>
-                </div>
+        <responsive-width-wrapper>
+            <div class="tabs is-centered is-fullwidth">
+                <ul>
+                    <li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
+                        <router-link :id="tab.id" :to="{ name: tab.view }">{{ tab.name }}</router-link>
+                    </li>
+                </ul>
             </div>
-        </div>
+        </responsive-width-wrapper>
     </div>
 </template>
 
diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index a5cbb8b5..9b545490 100644
--- a/resources/js/components/index.js
+++ b/resources/js/components/index.js
@@ -13,6 +13,7 @@ import FormButtons      from './FormButtons'
 import VueFooter        from './Footer'
 import Kicker           from './Kicker'
 import SettingTabs      from './SettingTabs'
+import ResponsiveWidthWrapper from './ResponsiveWidthWrapper'
 
 // Components that are registered globaly.
 [
@@ -29,7 +30,8 @@ import SettingTabs      from './SettingTabs'
     FormButtons,
     VueFooter,
     Kicker,
-    SettingTabs
+    SettingTabs,
+    ResponsiveWidthWrapper
 ].forEach(Component => {
 	Vue.component(Component.name, Component)
 })
diff --git a/resources/js/views/About.vue b/resources/js/views/About.vue
index f30b55f3..edaa458f 100644
--- a/resources/js/views/About.vue
+++ b/resources/js/views/About.vue
@@ -1,87 +1,85 @@
 <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 has-text-grey-dark">{{ $t('commons.about') }}</h1>
-            <p class="block">
-                <span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br />
-                {{ $t('commons.2fauth_teaser')}}
-            </p>
-            <img src="logo.svg" style="height: 32px" alt="2FAuth logo" />
-            <p class="block" :class="showUserOptions ? 'mb-5' : '' ">
-                ©Bubka <a class="is-size-7" href="https://github.com/Bubka/2FAuth/blob/master/LICENSE">AGPL-3.0 license</a>
-            </p>
+    <responsive-width-wrapper>
+        <h1 class="title has-text-grey-dark">{{ $t('commons.about') }}</h1>
+        <p class="block">
+            <span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br />
+            {{ $t('commons.2fauth_teaser')}}
+        </p>
+        <img src="logo.svg" style="height: 32px" alt="2FAuth logo" />
+        <p class="block" :class="showUserOptions ? 'mb-5' : '' ">
+            ©Bubka <a class="is-size-7" href="https://github.com/Bubka/2FAuth/blob/master/LICENSE">AGPL-3.0 license</a>
+        </p>
+        <h2 class="title is-5 has-text-grey-light">
+            {{ $t('commons.resources') }}
+        </h2>
+        <div class="buttons">
+            <a class="button is-dark" href="https://github.com/Bubka/2FAuth">
+                <span class="icon is-small">
+                    <font-awesome-icon :icon="['fab', 'github-alt']" />
+                </span>
+                <span>Github</span>
+            </a>
+            <a class="button is-dark" href="https://docs.2fauth.app/">
+                <span class="icon is-small">
+                    <font-awesome-icon :icon="['fas', 'book']" />
+                </span>
+                <span>Docs</span>
+            </a>
+            <a class="button is-dark" href="https://demo.2fauth.app/">
+                <span class="icon is-small">
+                    <font-awesome-icon :icon="['fas', 'flask']" />
+                </span>
+                <span>Demo</span>
+            </a>
+            <a class="button is-dark" href="https://docs.2fauth.app/resources/rapidoc.html">
+                <span class="icon is-small">
+                    <font-awesome-icon :icon="['fas', 'code']" />
+                </span>
+                <span>API</span>
+            </a>
+        </div>
+        <h2 class="title is-5 has-text-grey-light">
+            {{ $t('commons.credits') }}
+        </h2>
+        <p class="block">
+            <ul>
+                <li>{{ $t('commons.made_with')}}&nbsp;<a href="https://docs.2fauth.app/credits/">Laravel, Bulma CSS, Vue.js and more</a></li>
+                <li>{{ $t('commons.ui_icons_by')}}&nbsp;<a href="https://fontawesome.com/">Font Awesome</a>&nbsp;<a class="is-size-7" href="https://fontawesome.com/license/free">(CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)</a></li>
+                <li>{{ $t('commons.logos_by')}}&nbsp;<a href="https://2fa.directory/">2FA Directory</a>&nbsp;<a class="is-size-7" href="https://github.com/2factorauth/twofactorauth/blob/master/LICENSE.md">(MIT License)</a></li>
+            </ul>
+        </p>
+        <h2 class="title is-5 has-text-grey-light">
+            {{ $t('commons.environment') }}
+        </h2>
+        <div class="box has-background-black-bis is-family-monospace is-size-7">
+            <button class="button is-like-text is-pulled-right is-small is-text" v-clipboard="() => this.$refs.listInfos.innerText" v-clipboard:success="clipboardSuccessHandler">
+                <font-awesome-icon :icon="['fas', 'copy']" />
+            </button>
+            <ul ref="listInfos">
+                <li v-for="(value, key) in infos" :value="value" :key="key"><b>{{key}}</b>: {{value}}</li>
+            </ul>
+        </div>
+        <div v-if="showUserOptions">
             <h2 class="title is-5 has-text-grey-light">
-                {{ $t('commons.resources') }}
-            </h2>
-            <div class="buttons">
-                <a class="button is-dark" href="https://github.com/Bubka/2FAuth">
-                    <span class="icon is-small">
-                        <font-awesome-icon :icon="['fab', 'github-alt']" />
-                    </span>
-                    <span>Github</span>
-                </a>
-                <a class="button is-dark" href="https://docs.2fauth.app/">
-                    <span class="icon is-small">
-                        <font-awesome-icon :icon="['fas', 'book']" />
-                    </span>
-                    <span>Docs</span>
-                </a>
-                <a class="button is-dark" href="https://demo.2fauth.app/">
-                    <span class="icon is-small">
-                        <font-awesome-icon :icon="['fas', 'flask']" />
-                    </span>
-                    <span>Demo</span>
-                </a>
-                <a class="button is-dark" href="https://docs.2fauth.app/resources/rapidoc.html">
-                    <span class="icon is-small">
-                        <font-awesome-icon :icon="['fas', 'code']" />
-                    </span>
-                    <span>API</span>
-                </a>
-            </div>
-            <h2 class="title is-5 has-text-grey-light">
-                {{ $t('commons.credits') }}
-            </h2>
-            <p class="block">
-                <ul>
-                    <li>{{ $t('commons.made_with')}}&nbsp;<a href="https://docs.2fauth.app/credits/">Laravel, Bulma CSS, Vue.js and more</a></li>
-                    <li>{{ $t('commons.ui_icons_by')}}&nbsp;<a href="https://fontawesome.com/">Font Awesome</a>&nbsp;<a class="is-size-7" href="https://fontawesome.com/license/free">(CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)</a></li>
-                    <li>{{ $t('commons.logos_by')}}&nbsp;<a href="https://2fa.directory/">2FA Directory</a>&nbsp;<a class="is-size-7" href="https://github.com/2factorauth/twofactorauth/blob/master/LICENSE.md">(MIT License)</a></li>
-                </ul>
-            </p>
-            <h2 class="title is-5 has-text-grey-light">
-                {{ $t('commons.environment') }}
+                {{ $t('settings.user_options') }}
             </h2>
             <div class="box has-background-black-bis is-family-monospace is-size-7">
-                <button class="button is-like-text is-pulled-right is-small is-text" v-clipboard="() => this.$refs.listInfos.innerText" v-clipboard:success="clipboardSuccessHandler">
+                <button class="button is-like-text is-pulled-right is-small is-text" v-clipboard="() => this.$refs.listUserOptions.innerText" v-clipboard:success="clipboardSuccessHandler">
                     <font-awesome-icon :icon="['fas', 'copy']" />
                 </button>
-                <ul ref="listInfos">
-                    <li v-for="(value, key) in infos" :value="value" :key="key"><b>{{key}}</b>: {{value}}</li>
+                <ul ref="listUserOptions">
+                    <li v-for="(value, option) in options" :value="value" :key="option"><b>{{option}}</b>: {{value}}</li>
                 </ul>
             </div>
-            <div v-if="showUserOptions">
-                <h2 class="title is-5 has-text-grey-light">
-                    {{ $t('settings.user_options') }}
-                </h2>
-                <div class="box has-background-black-bis is-family-monospace is-size-7">
-                    <button class="button is-like-text is-pulled-right is-small is-text" v-clipboard="() => this.$refs.listUserOptions.innerText" v-clipboard:success="clipboardSuccessHandler">
-                        <font-awesome-icon :icon="['fas', 'copy']" />
-                    </button>
-                    <ul ref="listUserOptions">
-                        <li v-for="(value, option) in options" :value="value" :key="option"><b>{{option}}</b>: {{value}}</li>
-                    </ul>
-                </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>
+        <!-- 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>
+    </responsive-width-wrapper>
 </template>
 
 <script>
diff --git a/resources/js/views/Groups.vue b/resources/js/views/Groups.vue
index d57b9e1d..343bd789 100644
--- a/resources/js/views/Groups.vue
+++ b/resources/js/views/Groups.vue
@@ -1,48 +1,46 @@
 <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 has-text-grey-dark">
-                {{ $t('groups.groups') }}
-            </h1>
-            <div class="is-size-7-mobile">
-                {{ $t('groups.manage_groups_legend')}}
-            </div>
-            <div class="mt-3 mb-6">
-                <router-link class="is-link mt-5" :to="{ name: 'createGroup' }">
-                    <font-awesome-icon :icon="['fas', 'plus-circle']" /> {{ $t('groups.create_group') }}
-                </router-link>
-            </div>
-            <div v-if="groups.length > 0">
-                <div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
-                    {{ group.name }}
-                    <!-- delete icon -->
-                    <button class="button tag is-dark is-pulled-right" @click="deleteGroup(group.id)"  :title="$t('commons.delete')">
-                        {{ $t('commons.delete') }}
-                    </button>
-                    <!-- edit link -->
-                    <router-link :to="{ name: 'editGroup', params: { id: group.id, name: group.name }}" class="has-text-grey pl-1" :title="$t('commons.rename')">
-                        <font-awesome-icon :icon="['fas', 'pen-square']" />
-                    </router-link>
-                    <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.twofaccounts_count }} {{ $t('twofaccounts.accounts') }}</span>
-                </div>
-                <div class="mt-2 is-size-7 is-pulled-right" v-if="groups.length > 0">
-                    {{ $t('groups.deleting_group_does_not_delete_accounts')}}
-                </div>
-            </div>
-            <div v-if="isFetching && groups.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">
-                <!-- 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>
+    <responsive-width-wrapper>
+        <h1 class="title has-text-grey-dark">
+            {{ $t('groups.groups') }}
+        </h1>
+        <div class="is-size-7-mobile">
+            {{ $t('groups.manage_groups_legend')}}
         </div>
-    </div>
+        <div class="mt-3 mb-6">
+            <router-link class="is-link mt-5" :to="{ name: 'createGroup' }">
+                <font-awesome-icon :icon="['fas', 'plus-circle']" /> {{ $t('groups.create_group') }}
+            </router-link>
+        </div>
+        <div v-if="groups.length > 0">
+            <div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
+                {{ group.name }}
+                <!-- delete icon -->
+                <button class="button tag is-dark is-pulled-right" @click="deleteGroup(group.id)"  :title="$t('commons.delete')">
+                    {{ $t('commons.delete') }}
+                </button>
+                <!-- edit link -->
+                <router-link :to="{ name: 'editGroup', params: { id: group.id, name: group.name }}" class="has-text-grey pl-1" :title="$t('commons.rename')">
+                    <font-awesome-icon :icon="['fas', 'pen-square']" />
+                </router-link>
+                <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.twofaccounts_count }} {{ $t('twofaccounts.accounts') }}</span>
+            </div>
+            <div class="mt-2 is-size-7 is-pulled-right" v-if="groups.length > 0">
+                {{ $t('groups.deleting_group_does_not_delete_accounts')}}
+            </div>
+        </div>
+        <div v-if="isFetching && groups.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">
+            <!-- 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>
+    </responsive-width-wrapper>
 </template>
 
 <script>
diff --git a/resources/js/views/twofaccounts/Import.vue b/resources/js/views/twofaccounts/Import.vue
index 9862e09e..49ad38f8 100644
--- a/resources/js/views/twofaccounts/Import.vue
+++ b/resources/js/views/twofaccounts/Import.vue
@@ -1,153 +1,151 @@
 <template>
     <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 has-text-grey-dark">
-                    {{ $t('twofaccounts.import.import') }}
-                </h1>
-                <div v-if="exportedAccounts.length == 0">
-                    <div class="block is-size-7-mobile" v-html="$t('twofaccounts.import.import_legend')"></div>
-                    <h5 class="title is-5 mb-3 has-text-grey">{{ $t('twofaccounts.import.qr_code') }}</h5>
-                    <!-- scan button that launch camera stream -->
-                    <div class="block">
-                        <div class="buttons mb-0">
-                            <button tabindex="0" class="button is-link is-rounded mr-0" @click="capture()">
-                                <span class="icon">
-                                    <font-awesome-icon :icon="['fas', 'camera']" />
-                                </span>
-                                <span>{{ $t('twofaccounts.import.scan') }}</span>
-                            </button>
-                            <span class="p-2 mb-2">{{ $t('commons.or') }}</span>
-                            <!-- </div> -->
-                            <!-- upload a qr code (with basic file field and backend decoding) -->
-                            <!-- <div class="block"> -->
-                            <label role="button" tabindex="0" class="button is-link is-rounded is-outlined" ref="qrcodeInputLabel"  @keyup.enter="$refs.qrcodeInputLabel.click()">
-                                {{ $t('twofaccounts.import.upload') }}
-                                <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput">
-                            </label>
-                        </div>
-                        <field-error :form="uploadForm" field="qrcode" />
-                        <p class="help">{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}</p>
-                    </div>
-                    <h5 class="title is-5 mb-3 has-text-grey">{{ $t('commons.file') }}</h5>
-                    <!-- upload a file -->
-                    <div class="block mb-6">
-                        <label role="button" tabindex="0" class="button is-link is-rounded is-outlined" ref="fileInputLabel" @keyup.enter="$refs.fileInputLabel.click()">
-                            <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="text/plain,application/json,text/csv,.2fas" v-on:change="submitFile" ref="fileInput">
-                            {{ $t('twofaccounts.import.upload') }}
-                        </label>
-                        <field-error :form="uploadForm" field="file" />
-                        <p class="help">{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}</p>
-                    </div>
-                    <!-- Supported migration resources -->
-                    <h5 class="title is-5 mb-3 has-text-grey-dark">{{ $t('twofaccounts.import.supported_migration_formats') }}</h5>
-                    <div class="field is-grouped is-grouped-multiline pt-0">
-                        <div class="control">
-                            <div class="tags has-addons">
-                            <span class="tag is-dark">Google Auth</span>
-                            <span class="tag is-black">{{ $t('twofaccounts.import.qr_code') }}</span>
-                            </div>
-                        </div>
-                        <div class="control">
-                            <div class="tags has-addons">
-                            <span class="tag is-dark">Aegis Auth</span>
-                            <span class="tag is-black">JSON</span>
-                            </div>
-                        </div>
-                        <div class="control">
-                            <div class="tags has-addons">
-                            <span class="tag is-dark">Aegis Auth</span>
-                            <span class="tag is-black">{{ $t('twofaccounts.import.plain_text') }}</span>
-                            </div>
-                        </div>
-                        <div class="control">
-                            <div class="tags has-addons">
-                            <span class="tag is-dark">2FAS Auth</span>
-                            <span class="tag is-black">JSON</span>
-                            </div>
-                        </div>
-                    </div>
-                    <span class="is-size-7" v-html="$t('twofaccounts.import.do_not_set_password_or_encryption')"></span>
-                </div>
-                <div v-else>
-                    <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="is-flex-grow-1 has-ellipsis is-clickable" @click="previewAccount(index)" :title="$t('twofaccounts.import.generate_a_test_password')">
-                                <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})">
-                                {{ account.account }}
-                            </div>
-                            <div v-else class="is-flex-grow-1 has-ellipsis">{{ account.account }}</div>
-                            <!-- buttons -->
-                            <div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
-                                <!-- discard button -->
-                                <button class="button tag is-dark has-text-grey-light" @click="discardAccount(index)"  :title="$t('twofaccounts.import.discard_this_account')">
-                                    <font-awesome-icon :icon="['fas', 'trash']" />
-                                </button>
-                                <!-- import button -->
-                                <button v-if="account.id > -2" class="button tag is-link" @click="createAccount(index)"  :title="$t('twofaccounts.import.import_this_account')">
-                                    {{ $t('twofaccounts.import.to_import') }}
-                                </button>
-                            </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">
-                        <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>
-                    </div>
-                    <div v-if="importedCount == exportedAccounts.length"  class="mt-2 is-size-7 is-pulled-right">
-                        <button @click="exportedAccounts = []" class="has-text-grey button is-small is-ghost">{{ $t('commons.clear') }}</button>
-                    </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">
-                        <button 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> -->
+        <responsive-width-wrapper>
+            <h1 class="title has-text-grey-dark">
+                {{ $t('twofaccounts.import.import') }}
+            </h1>
+            <div v-if="exportedAccounts.length == 0">
+                <div class="block is-size-7-mobile" v-html="$t('twofaccounts.import.import_legend')"></div>
+                <h5 class="title is-5 mb-3 has-text-grey">{{ $t('twofaccounts.import.qr_code') }}</h5>
+                <!-- scan button that launch camera stream -->
+                <div class="block">
+                    <div class="buttons mb-0">
+                        <button tabindex="0" class="button is-link is-rounded mr-0" @click="capture()">
+                            <span class="icon">
+                                <font-awesome-icon :icon="['fas', 'camera']" />
+                            </span>
+                            <span>{{ $t('twofaccounts.import.scan') }}</span>
                         </button>
-                    </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>
+                        <span class="p-2 mb-2">{{ $t('commons.or') }}</span>
+                        <!-- </div> -->
+                        <!-- upload a qr code (with basic file field and backend decoding) -->
+                        <!-- <div class="block"> -->
+                        <label role="button" tabindex="0" class="button is-link is-rounded is-outlined" ref="qrcodeInputLabel"  @keyup.enter="$refs.qrcodeInputLabel.click()">
+                            {{ $t('twofaccounts.import.upload') }}
+                            <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput">
+                        </label>
+                    </div>
+                    <field-error :form="uploadForm" field="qrcode" />
+                    <p class="help">{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}</p>
+                </div>
+                <h5 class="title is-5 mb-3 has-text-grey">{{ $t('commons.file') }}</h5>
+                <!-- upload a file -->
+                <div class="block mb-6">
+                    <label role="button" tabindex="0" class="button is-link is-rounded is-outlined" ref="fileInputLabel" @keyup.enter="$refs.fileInputLabel.click()">
+                        <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="text/plain,application/json,text/csv,.2fas" v-on:change="submitFile" ref="fileInput">
+                        {{ $t('twofaccounts.import.upload') }}
+                    </label>
+                    <field-error :form="uploadForm" field="file" />
+                    <p class="help">{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}</p>
+                </div>
+                <!-- Supported migration resources -->
+                <h5 class="title is-5 mb-3 has-text-grey-dark">{{ $t('twofaccounts.import.supported_migration_formats') }}</h5>
+                <div class="field is-grouped is-grouped-multiline pt-0">
+                    <div class="control">
+                        <div class="tags has-addons">
+                        <span class="tag is-dark">Google Auth</span>
+                        <span class="tag is-black">{{ $t('twofaccounts.import.qr_code') }}</span>
+                        </div>
+                    </div>
+                    <div class="control">
+                        <div class="tags has-addons">
+                        <span class="tag is-dark">Aegis Auth</span>
+                        <span class="tag is-black">JSON</span>
+                        </div>
+                    </div>
+                    <div class="control">
+                        <div class="tags has-addons">
+                        <span class="tag is-dark">Aegis Auth</span>
+                        <span class="tag is-black">{{ $t('twofaccounts.import.plain_text') }}</span>
+                        </div>
+                    </div>
+                    <div class="control">
+                        <div class="tags has-addons">
+                        <span class="tag is-dark">2FAS Auth</span>
+                        <span class="tag is-black">JSON</span>
+                        </div>
+                    </div>
+                </div>
+                <span class="is-size-7" v-html="$t('twofaccounts.import.do_not_set_password_or_encryption')"></span>
             </div>
-        </div>
+            <div v-else>
+                <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="is-flex-grow-1 has-ellipsis is-clickable" @click="previewAccount(index)" :title="$t('twofaccounts.import.generate_a_test_password')">
+                            <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})">
+                            {{ account.account }}
+                        </div>
+                        <div v-else class="is-flex-grow-1 has-ellipsis">{{ account.account }}</div>
+                        <!-- buttons -->
+                        <div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
+                            <!-- discard button -->
+                            <button class="button tag is-dark has-text-grey-light" @click="discardAccount(index)"  :title="$t('twofaccounts.import.discard_this_account')">
+                                <font-awesome-icon :icon="['fas', 'trash']" />
+                            </button>
+                            <!-- import button -->
+                            <button v-if="account.id > -2" class="button tag is-link" @click="createAccount(index)"  :title="$t('twofaccounts.import.import_this_account')">
+                                {{ $t('twofaccounts.import.to_import') }}
+                            </button>
+                        </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">
+                    <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>
+                </div>
+                <div v-if="importedCount == exportedAccounts.length"  class="mt-2 is-size-7 is-pulled-right">
+                    <button @click="exportedAccounts = []" class="has-text-grey button is-small is-ghost">{{ $t('commons.clear') }}</button>
+                </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">
+                    <button 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> -->
+                    </button>
+                </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>
+        </responsive-width-wrapper>
         <!-- modal -->
         <modal v-model="ShowTwofaccountInModal">
             <otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()">