From 30b812e8a3aeb1775fc1c0d5d7fe46f7583a4ba0 Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Wed, 26 Mar 2025 14:54:17 +0100 Subject: [PATCH] Add importer help text (#542) --- .../Pages/Settings/BrowserExtensions.razor | 2 +- .../Components/ImportServiceAliasVault.razor | 1 + .../Components/ImportServiceBitwarden.razor | 2 + .../Components/ImportServiceCard.razor | 10 ++-- .../Components/ImportServiceKeePass.razor | 2 + .../wwwroot/css/tailwind.css | 51 +++++++++++++++++++ 6 files changed, 64 insertions(+), 4 deletions(-) diff --git a/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor b/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor index 5bb159058..68e6941a3 100644 --- a/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor +++ b/src/AliasVault.Client/Main/Pages/Settings/BrowserExtensions.razor @@ -29,7 +29,7 @@ {

Recommended for Your Browser

-
+
@CurrentBrowserExtension?.Name diff --git a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceAliasVault.razor b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceAliasVault.razor index 9e8062dfb..91e0b6559 100644 --- a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceAliasVault.razor +++ b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceAliasVault.razor @@ -9,6 +9,7 @@ Description="Import passwords from another AliasVault instance or manual back-up" LogoUrl="img/logo.svg" ProcessFileCallback="ProcessFile"> +

If you have a CSV file back-up of your AliasVault database (from a different AliasVault instance), you can import it here.

@code { diff --git a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceBitwarden.razor b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceBitwarden.razor index 059b7ec25..b41cd20b3 100644 --- a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceBitwarden.razor +++ b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceBitwarden.razor @@ -9,6 +9,8 @@ Description="Import passwords from your Bitwarden vault" LogoUrl="img/importers/bitwarden.svg" ProcessFileCallback="ProcessFile"> +

In order to import your Bitwarden vault, you need to export it as a CSV file. You can do this by logging into your Bitwarden account, going to the 'Tools' menu and selecting 'Export vault' (to CSV).

+

Once you have exported the file, you can upload it below.

@code { diff --git a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceCard.razor b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceCard.razor index 9baff211b..9bcbe0958 100644 --- a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceCard.razor +++ b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceCard.razor @@ -68,9 +68,10 @@ }
-
-

Upload your @ServiceName export file:

- + @ChildContent +
+

Upload your @ServiceName export file:

+
@@ -311,6 +312,9 @@ ImportSuccessMessage = null; StateHasChanged(); + // Let UI update to start showing the loading indicator as the save database call below can block the UI thread momentarily. + await Task.Delay(50); + try { // Convert imported credentials to AliasVault format and insert them to the database. diff --git a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceKeePass.razor b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceKeePass.razor index 9664672ec..38a7ed226 100644 --- a/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceKeePass.razor +++ b/src/AliasVault.Client/Main/Pages/Settings/ImportExport/Components/ImportServiceKeePass.razor @@ -9,6 +9,8 @@ Description="Import passwords from your KeePass vault" LogoUrl="img/importers/keepass.svg" ProcessFileCallback="ProcessFile"> +

In order to import your KeePass vault, you need to export it as a CSV file. You can do this by going to the 'File' menu and selecting 'Export' (to CSV).

+

Once you have exported the file, you can upload it below.

@code { diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css index 70b9e6cf9..878c1bee7 100644 --- a/src/AliasVault.Client/wwwroot/css/tailwind.css +++ b/src/AliasVault.Client/wwwroot/css/tailwind.css @@ -1436,6 +1436,11 @@ video { border-color: rgb(239 68 68 / var(--tw-border-opacity)); } +.border-amber-400 { + --tw-border-opacity: 1; + border-color: rgb(251 191 36 / var(--tw-border-opacity)); +} + .bg-amber-50 { --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity)); @@ -2148,6 +2153,11 @@ video { background-color: rgb(239 246 255 / var(--tw-bg-opacity)); } +.file\:bg-primary-50::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgb(255 224 150 / var(--tw-bg-opacity)); +} + .file\:px-4::file-selector-button { padding-left: 1rem; padding-right: 1rem; @@ -2172,6 +2182,11 @@ video { color: rgb(29 78 216 / var(--tw-text-opacity)); } +.file\:text-primary-700::file-selector-button { + --tw-text-opacity: 1; + color: rgb(184 112 47 / var(--tw-text-opacity)); +} + .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; @@ -2352,6 +2367,11 @@ video { background-color: rgb(219 234 254 / var(--tw-bg-opacity)); } +.hover\:file\:bg-primary-100::file-selector-button:hover { + --tw-bg-opacity: 1; + background-color: rgb(253 222 133 / var(--tw-bg-opacity)); +} + .focus\:border-blue-500:focus { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); @@ -2528,6 +2548,15 @@ video { border-color: rgb(234 179 8 / var(--tw-border-opacity)); } +.dark\:border-amber-600:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(217 119 6 / var(--tw-border-opacity)); +} + +.dark\:border-amber-500\/50:is(.dark *) { + border-color: rgb(245 158 11 / 0.5); +} + .dark\:bg-blue-600:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity)); @@ -2641,6 +2670,15 @@ video { background-color: rgb(113 63 18 / var(--tw-bg-opacity)); } +.dark\:bg-amber-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(120 53 15 / var(--tw-bg-opacity)); +} + +.dark\:bg-amber-800\/30:is(.dark *) { + background-color: rgb(146 64 14 / 0.3); +} + .dark\:bg-opacity-80:is(.dark *) { --tw-bg-opacity: 0.8; } @@ -2764,11 +2802,20 @@ video { background-color: rgb(55 65 81 / var(--tw-bg-opacity)); } +.dark\:file\:bg-primary-900\/40:is(.dark *)::file-selector-button { + background-color: rgb(123 74 30 / 0.4); +} + .dark\:file\:text-gray-300:is(.dark *)::file-selector-button { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); } +.dark\:file\:text-primary-300:is(.dark *)::file-selector-button { + --tw-text-opacity: 1; + color: rgb(248 185 99 / var(--tw-text-opacity)); +} + .dark\:hover\:bg-blue-500:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); @@ -2884,6 +2931,10 @@ video { background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } +.dark\:hover\:file\:bg-primary-800\/60:is(.dark *)::file-selector-button:hover { + background-color: rgb(154 93 38 / 0.6); +} + .dark\:focus\:border-blue-500:focus:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity));