diff --git a/resources/js_vue3/assets/app.scss b/resources/js_vue3/assets/app.scss index c53b80bc..aded7cda 100644 --- a/resources/js_vue3/assets/app.scss +++ b/resources/js_vue3/assets/app.scss @@ -1281,3 +1281,30 @@ footer.main .field.is-grouped { transform: translateY(-2rem); } } + +:root[data-theme="dark"] .table { + background-color: $black-ter; + color: $white-bis; +} +:root[data-theme="dark"] .table th, +:root[data-theme="dark"] .table thead th { + color: $grey; +} +:root[data-theme="dark"] .table td, +:root[data-theme="dark"] .table th { + border: 1px solid $grey-darker; + border-width: 0 0 1px; +} + +:root[data-theme="dark"] .card { + background-color: $black-ter; + border: 1px solid $grey-darker; +} + +:root[data-theme="dark"] .card-footer { + border-top: 1px solid $grey-darker; +} + +:root[data-theme="dark"] .card-footer-item:not(:last-child) { + border-right: 1px solid $grey-darker; +} \ No newline at end of file diff --git a/resources/js_vue3/icons.js b/resources/js_vue3/icons.js index 1a54e0b1..d1da8bcc 100644 --- a/resources/js_vue3/icons.js +++ b/resources/js_vue3/icons.js @@ -1,5 +1,3 @@ -// import Vue from 'vue' - import { library } from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' @@ -42,7 +40,10 @@ import { faSun, faMoon, faDesktop, - faCircleNotch + faCircleNotch, + faCircleCheck, + faTriangleExclamation, + faFileLines } from '@fortawesome/free-solid-svg-icons' import { @@ -89,9 +90,10 @@ library.add( faSun, faMoon, faDesktop, - faCircleNotch + faCircleNotch, + faCircleCheck, + faTriangleExclamation, + faFileLines ); -export default FontAwesomeIcon - -// Vue.component('font-awesome-icon', FontAwesomeIcon) \ No newline at end of file +export default FontAwesomeIcon \ No newline at end of file diff --git a/resources/js_vue3/views/twofaccounts/Import.vue b/resources/js_vue3/views/twofaccounts/Import.vue index 91023665..8c5a564f 100644 --- a/resources/js_vue3/views/twofaccounts/Import.vue +++ b/resources/js_vue3/views/twofaccounts/Import.vue @@ -2,6 +2,7 @@ import Form from '@/components/formElements/Form' import twofaccountService from '@/services/twofaccountService' import OtpDisplay from '@/components/OtpDisplay.vue' + import Spinner from '@/components/Spinner.vue' import { useNotifyStore } from '@/stores/notify' import { useUserStore } from '@/stores/user' import { useBusStore } from '@/stores/bus' @@ -15,9 +16,7 @@ const twofaccounts = useTwofaccounts() const otpDisplay = ref(null) const fileInput = ref(null) - const fileInputLabel = ref(null) const qrcodeInput = ref(null) - const qrcodeInputLabel = ref(null) const form = reactive(new Form({ service: '', account: '', @@ -234,53 +233,111 @@

{{ $t('twofaccounts.import.import') }}

-
+
-
{{ $t('twofaccounts.import.qr_code') }}
- -
-
- - - - - {{ $t('twofaccounts.import.scan') }} - - {{ $t('commons.or') }} - - -
- -

{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}

-
-
{{ $t('commons.file') }}
- -
- - -

{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}

-
- -
{{ $t('twofaccounts.import.supported_migration_formats') }}
-
-
-
- - {{ source.app }} - {{ source.format }} - +
+
+
+
+
+
+
+
+ +
+
+
+

+

{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}

+
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+
+
+

{{ $t('twofaccounts.import.text_file') }}

+

{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}

+
+
+ +
+ +
- + +

{{ $t('twofaccounts.import.supported_migration_formats') }}

+
+ + {{ $t('twofaccounts.import.do_not_set_password_or_encryption') }} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Plain textQR codeJSON
Google Authenticator
Aegis Auth
2FAS auth
2FAuth
+
+
+
+
@@ -338,11 +395,6 @@
-
- - - -
diff --git a/resources/lang/en/twofaccounts.php b/resources/lang/en/twofaccounts.php index e6f29695..e89101bf 100644 --- a/resources/lang/en/twofaccounts.php +++ b/resources/lang/en/twofaccounts.php @@ -135,18 +135,21 @@ 'import' => [ 'import' => 'Import', 'to_import' => 'Import', - 'import_legend' => '2FAuth can import data from various 2FA apps.
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.', + 'import_legend' => '2FAuth can import data from various 2FA apps.
Use the Export feature of these apps to get a migration resource like a QR code or a JSON file then load it here.', 'upload' => 'Upload', 'scan' => 'Scan', '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_migration_formats' => 'Supported migration formats', 'qr_code' => 'QR Code', + 'text_file' => 'Text file', 'plain_text' => 'Plain text', + 'parsing_data' => 'Parsing data...', 'issuer' => 'Issuer', 'imported' => 'Imported', 'failure' => 'Failure', 'x_valid_accounts_found' => ':count valid accounts found', + 'submitted_data_parsed_now_accounts_are_awaiting_import' => 'The following 2FA accounts were found in the migration resource, so far none of them have been added to 2FAuth. Use the available buttons to permanently save them to your 2FA collection or discard them.', 'import_all' => 'Import all', 'import_this_account' => 'Import this account', 'discard_all' => 'Discard all', @@ -156,7 +159,7 @@ 'possible_duplicate' => 'An account with the exact same data already exists', 'invalid_account' => '- invalid account -', 'invalid_service' => '- invalid service -', - 'do_not_set_password_or_encryption' => 'Do NOT enable Password protection or Encryption when you export data (from a 2FA app) you want to import into 2FAuth.', + 'do_not_set_password_or_encryption' => 'Do NOT enable Password protection or Encryption when you export data from a 2FA app otherwise 2FAuth will not be able to decipher them.', ], ]; \ No newline at end of file