extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-08-16 00:27:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Complete the Import view with Aegis and 2FAS migrations support

Browse Source 
Close #128
This commit is contained in:
Bubka
2022-10-11 12:09:46 +02:00
parent ed19b482cd
commit e99c684018
4 changed files with 130 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/packages/fontawesome.js vendored
View File

@ -37,6 +37,7 @@ import {
faEye, faEye,
faEyeSlash, faEyeSlash,
faExternalLinkAlt, faExternalLinkAlt,
faCamera
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { import {
@ -78,6 +79,7 @@ library.add(
faEye, faEye,
faEyeSlash, faEyeSlash,
faExternalLinkAlt, faExternalLinkAlt,
faCamera
); );
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)

48
resources/js/views/twofaccounts/Import.vue
View File

@ -5,36 +5,42 @@
<h1 class="title has-text-grey-dark"> <h1 class="title has-text-grey-dark">
{{ $t('twofaccounts.import.import') }} {{ $t('twofaccounts.import.import') }}
</h1> </h1>
<div>
<div v-if="exportedAccounts.length == 0"> <div v-if="exportedAccounts.length == 0">
<div class="block is-size-7-mobile" v-html="$t('twofaccounts.import.import_legend')"></div> <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 --> <!-- scan button that launch camera stream -->
<div class="block"> <div class="block">
<button tabindex="0" class="button is-link is-rounded" @click="capture()"> <div class="buttons mb-0">
{{ $t('twofaccounts.forms.scan_qrcode') }} <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> </button>
</div> <span class="p-2 mb-2">{{ $t('commons.or') }}</span>
<!-- </div> -->
<!-- upload a qr code (with basic file field and backend decoding) --> <!-- upload a qr code (with basic file field and backend decoding) -->
<div class="block"> <!-- <div class="block"> -->
<label role="button" tabindex="0" class="button is-link is-rounded is-outlined" ref="qrcodeInputLabel" @keyup.enter="$refs.qrcodeInputLabel.click()"> <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"> <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput">
{{ $t('twofaccounts.forms.upload_qrcode') }}
</label> </label>
<field-error :form="form" field="qrcode" /> </div>
<field-error :form="uploadForm" field="qrcode" />
<p class="help">{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}</p> <p class="help">{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}</p>
</div> </div>
<h5 class="title is-5 mb-3 has-text-grey">{{ $t('commons.file') }}</h5>
<!-- upload a file --> <!-- upload a file -->
<div class="block"> <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()"> <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"> <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_a_file') }} {{ $t('twofaccounts.import.upload') }}
</label> </label>
<field-error :form="uploadForm" field="file" /> <field-error :form="uploadForm" field="file" />
<p class="help">{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}</p> <p class="help">{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}</p>
</div> </div>
<!-- Supported migration resources --> <!-- Supported migration resources -->
<h5 class="title is-5 mb-3">{{ $t('twofaccounts.import.supported_migration_formats') }}</h5> <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="field is-grouped is-grouped-multiline pt-0">
<div class="control"> <div class="control">
<div class="tags has-addons"> <div class="tags has-addons">
@ -61,6 +67,7 @@
</div> </div>
</div> </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-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 v-for="(account, index) in exportedAccounts" :key="account.name" class="group-item has-text-light is-size-5 is-size-6-mobile">
@ -123,7 +130,6 @@
<font-awesome-icon :icon="['fas', 'spinner']" spin /> <font-awesome-icon :icon="['fas', 'spinner']" spin />
</span> </span>
</div> </div>
</div>
<!-- footer --> <!-- footer -->
<vue-footer :showButtons="true"> <vue-footer :showButtons="true">
<!-- Import all button --> <!-- Import all button -->
@ -342,9 +348,12 @@
this.notifyValidAccountFound() this.notifyValidAccountFound()
}) })
.catch(error => { .catch(error => {
if( error.response.status !== 422 ) { if( error.response.status === 422 ) {
this.$notify({type: 'is-danger', text: this.$t(error.response.data.message) }) if (error.response.data.errors.file == undefined) {
this.$notify({type: 'is-danger', text: this.$t('errors.invalid_2fa_data') })
} }
}
else this.$notify({type: 'is-danger', text: error.response.data.message})
}); });
this.isFetching = false this.isFetching = false
@ -363,9 +372,16 @@
this.migrate(response.data.data) this.migrate(response.data.data)
}) })
.catch(error => { .catch(error => {
if( error.response.status !== 422 ) { if( error.response.status === 422 ) {
this.$notify({type: 'is-danger', text: this.$t(error.response.data.message) }) if (error.response.data.errors.qrcode == undefined) {
this.$notify({type: 'is-danger', text: this.$t('errors.invalid_2fa_data') })
} }
}
else this.$notify({type: 'is-danger', text: error.response.data.message})
// if( error.response.status !== 422 ) {
// this.$notify({type: 'is-danger', text: this.$t(error.response.data.message) })
// }
}); });
}, },

2
resources/lang/en/commons.php
View File

@ -64,4 +64,6 @@ return [
'check_for_update_help' => 'Automatically check (once a week) and warn when a new release of 2FAuth is published on Github', 'check_for_update_help' => 'Automatically check (once a week) and warn when a new release of 2FAuth is published on Github',
'2fauth_description' => 'A web app to manage your Two-Factor Authentication (2FA) accounts and generate their security codes', '2fauth_description' => 'A web app to manage your Two-Factor Authentication (2FA) accounts and generate their security codes',
'image_of_qrcode_to_scan' => 'Image of a QR code to scan', 'image_of_qrcode_to_scan' => 'Image of a QR code to scan',
'file' => 'File',
'or' => 'OR',
]; ];

8
resources/lang/en/twofaccounts.php
View File

@ -134,12 +134,13 @@ return [
'import' => [ 'import' => [
'import' => 'Import', 'import' => 'Import',
'to_import' => 'Import', 'to_import' => 'Import',
'import_legend' => '2FAuth can import data from various 2FA apps.<br />Use the Export feature of these apps to get a migration resource (a QR code or a file) and submit it using your preferred method below.', 'import_legend' => '2FAuth can import data from various 2FA apps.<br />Use the Export feature of these apps to get a migration resource (a QR code or a file) and load it using your preferred method below.',
'upload_a_file' => 'Upload a file', 'upload' => 'Upload',
'scan' => 'Scan',
'supported_formats_for_qrcode_upload' => 'Accepted: jpg, jpeg, png, bmp, gif, svg, or webp', 'supported_formats_for_qrcode_upload' => 'Accepted: jpg, jpeg, png, bmp, gif, svg, or webp',
'supported_formats_for_file_upload' => 'Accepted: Plain text, json, 2fas', 'supported_formats_for_file_upload' => 'Accepted: Plain text, json, 2fas',
'supported_migration_formats' => 'Supported migration formats', 'supported_migration_formats' => 'Supported migration formats',
'qr_code' => 'QR code', 'qr_code' => 'QR Code',
'plain_text' => 'Plain text', 'plain_text' => 'Plain text',
'issuer' => 'Issuer', 'issuer' => 'Issuer',
'imported' => 'Imported', 'imported' => 'Imported',
@ -154,6 +155,7 @@ return [
'possible_duplicate' => 'An account with the exact same data already exists', 'possible_duplicate' => 'An account with the exact same data already exists',
'invalid_account' => '- invalid account -', 'invalid_account' => '- invalid account -',
'invalid_service' => '- invalid service -', 'invalid_service' => '- invalid service -',
'do_not_set_password_or_encryption' => 'Do NOT set a password or encryption On when you export data from a 2FA app.',
], ],
]; ];