Updated vault settings page layout, refactor tests (#84)

2026-03-03 14:28:14 -05:00 · 2024-07-02 21:22:39 +02:00
parent 4abc674970
commit f0fca573fd
5 changed files with 110 additions and 85 deletions
--- a/src/AliasVault.WebApp/Layout/TopMenu.razor
+++ b/src/AliasVault.WebApp/Layout/TopMenu.razor
@@ -45,9 +45,6 @@
                            <span class="block text-sm font-semibold text-gray-900 dark:text-white">@_username</span>
                        </div>
                        <ul class="py-1 font-light text-gray-500 dark:text-gray-400" aria-labelledby="userMenuDropdownButton">
-                            <li>
-                                <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Account settings</a>
-                            </li>
                            <li>
                                <a href="settings/vault" class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Vault settings</a>
                            </li>
--- a/src/AliasVault.WebApp/Pages/Settings/Vault.razor
+++ b/src/AliasVault.WebApp/Pages/Settings/Vault.razor
@@ -15,22 +15,34 @@
    </div>
 </div>

-<div>
-    <button @onclick="ExportVaultSqlite" type="button" class="px-4 py-2 text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-800">
-        Export vault to unencrypted SQLite file
-    </button>
-</div>
-<div class="mt-2">
-    <button @onclick="ExportVaultCsv" type="button" class="px-4 py-2 text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-800">
-        Export vault to unencrypted CSV file
-    </button>
+<div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
+    <h3 class="mb-4 text-xl font-semibold dark:text-white">Export vault</h3>
+    <div class="mb-4">
+        <div>
+            <button @onclick="ExportVaultSqlite" type="button" class="px-4 py-2 text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-800">
+                Export vault to unencrypted SQLite file
+            </button>
+        </div>
+        <div class="mt-6">
+            <button @onclick="ExportVaultCsv" type="button" class="px-4 py-2 text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-800">
+                Export vault to unencrypted CSV file
+            </button>
+        </div>
+    </div>
 </div>

-<div class="mt-2">
-    Import unencrypted CSV file:
-    <InputFile OnChange="@LoadFiles" />
+<div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
+    <h3 class="mb-4 text-xl font-semibold dark:text-white">Import vault</h3>
+    <div class="mb-4">
+        <div>
+            Import unencrypted CSV file:
+            <InputFile OnChange="@LoadFiles" />
+        </div>
+    </div>
 </div>

+
+
@if (IsImporting)
 {
    <p>Loading...</p>
@@ -45,11 +57,17 @@ else if (!string.IsNullOrEmpty(ImportSuccessMessage))
 }

@code {
-    private bool IsLoading { get; set; } = true;
    private bool IsImporting = false;
    private string ImportErrorMessage = string.Empty;
    private string ImportSuccessMessage = string.Empty;

+    /// <inheritdoc />
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        BreadcrumbItems.Add(new BreadcrumbItem { DisplayName = "Vault settings" });
+    }
+
    private async Task ExportVaultSqlite()
    {
        try
--- a/src/AliasVault.WebApp/wwwroot/css/tailwind.css
+++ b/src/AliasVault.WebApp/wwwroot/css/tailwind.css
@@ -710,10 +710,6 @@ video {
  margin-top: 0px;
 }

-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-4 {
  margin-top: 1rem;
 }
@@ -726,6 +722,18 @@ video {
  margin-top: 2rem;
 }

+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .block {
  display: block;
 }
@@ -762,8 +770,8 @@ video {
  height: 2.5rem;
 }

-.h-12 {
-  height: 3rem;
+.h-28 {
+  height: 7rem;
 }

 .h-4 {
@@ -794,6 +802,10 @@ video {
  height: 100%;
 }

+.h-12 {
+  height: 3rem;
+}
+
 .w-1\/2 {
  width: 50%;
 }
@@ -802,10 +814,6 @@ video {
  width: 2.5rem;
 }

-.w-12 {
-  width: 3rem;
-}
-
 .w-28 {
  width: 7rem;
 }
@@ -842,12 +850,12 @@ video {
  width: 100%;
 }

-.min-w-full {
-  min-width: 100%;
+.w-12 {
+  width: 3rem;
 }

-.max-w-md {
-  max-width: 28rem;
+.min-w-full {
+  min-width: 100%;
 }

 .max-w-screen-2xl {
@@ -858,6 +866,10 @@ video {
  max-width: 36rem;
 }

+.max-w-md {
+  max-width: 28rem;
+}
+
 .flex-shrink-0 {
  flex-shrink: 0;
 }
@@ -892,10 +904,6 @@ video {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -908,6 +916,10 @@ video {
  grid-template-columns: repeat(7, minmax(0, 1fr));
 }

+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .flex-col {
  flex-direction: column;
 }
@@ -1089,11 +1101,6 @@ video {
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }

-.bg-gray-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
 .bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -1315,11 +1322,6 @@ video {
  letter-spacing: 0.05em;
 }

-.text-blue-500 {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
 .text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -1375,6 +1377,11 @@ video {
  color: rgb(255 255 255 / var(--tw-text-opacity));
 }

+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .text-primary-500 {
  --tw-text-opacity: 1;
  color: rgb(244 149 65 / var(--tw-text-opacity));
@@ -1634,11 +1641,6 @@ video {
  --tw-bg-opacity: 0.8;
 }

-.dark\:text-blue-400:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
 .dark\:text-blue-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -1684,6 +1686,11 @@ video {
  color: rgb(255 255 255 / var(--tw-text-opacity));
 }

+.dark\:text-blue-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
 .dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
--- a/src/Tests/AliasVault.UnitTests/Utilities/CsvImportExportTests.cs
+++ b/src/Tests/AliasVault.UnitTests/Utilities/CsvImportExportTests.cs
@@ -5,7 +5,7 @@
 // </copyright>
 //-----------------------------------------------------------------------

-namespace AliasVault.Tests;
+namespace AliasVault.Tests.Utilities;

 using AliasClientDb;
 using CsvImportExport;
@@ -75,44 +75,47 @@ public class CsvImportExportTests
        var importedCredentials = CredentialCsvService.ImportCredentialsFromCsv(csvString);

        // Assert
-        Assert.That(importedCredentials.Count, Is.EqualTo(1));
+        Assert.That(importedCredentials, Has.Count.EqualTo(1));

        var importedCredential = importedCredentials[0];

-        Assert.That(importedCredential.Id, Is.EqualTo(credential.Id));
-        Assert.That(importedCredential.Username, Is.EqualTo(credential.Username));
-        Assert.That(importedCredential.Notes, Is.EqualTo(credential.Notes));
-        Assert.That(importedCredential.CreatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(credential.CreatedAt.ToString("yyyy-MM-dd")));
-        Assert.That(importedCredential.UpdatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(credential.UpdatedAt.ToString("yyyy-MM-dd")));
-        Assert.That(importedCredential.AliasId, Is.EqualTo(credential.AliasId));
-        Assert.That(importedCredential.Alias.Id, Is.EqualTo(credential.Alias.Id));
-        Assert.That(importedCredential.Alias.Gender, Is.EqualTo(credential.Alias.Gender));
-        Assert.That(importedCredential.Alias.FirstName, Is.EqualTo(credential.Alias.FirstName));
-        Assert.That(importedCredential.Alias.LastName, Is.EqualTo(credential.Alias.LastName));
-        Assert.That(importedCredential.Alias.NickName, Is.EqualTo(credential.Alias.NickName));
-        Assert.That(importedCredential.Alias.BirthDate, Is.EqualTo(credential.Alias.BirthDate));
-        Assert.That(importedCredential.Alias.AddressStreet, Is.EqualTo(credential.Alias.AddressStreet));
-        Assert.That(importedCredential.Alias.AddressCity, Is.EqualTo(credential.Alias.AddressCity));
-        Assert.That(importedCredential.Alias.AddressState, Is.EqualTo(credential.Alias.AddressState));
-        Assert.That(importedCredential.Alias.AddressZipCode, Is.EqualTo(credential.Alias.AddressZipCode));
-        Assert.That(importedCredential.Alias.AddressCountry, Is.EqualTo(credential.Alias.AddressCountry));
-        Assert.That(importedCredential.Alias.Hobbies, Is.EqualTo(credential.Alias.Hobbies));
-        Assert.That(importedCredential.Alias.EmailPrefix, Is.EqualTo(credential.Alias.EmailPrefix));
-        Assert.That(importedCredential.Alias.PhoneMobile, Is.EqualTo(credential.Alias.PhoneMobile));
-        Assert.That(importedCredential.Alias.BankAccountIBAN, Is.EqualTo(credential.Alias.BankAccountIBAN));
-        Assert.That(importedCredential.Alias.CreatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(credential.Alias.CreatedAt.ToString("yyyy-MM-dd")));
-        Assert.That(importedCredential.Alias.UpdatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(credential.Alias.UpdatedAt.ToString("yyyy-MM-dd")));
-        Assert.That(importedCredential.ServiceId, Is.EqualTo(credential.ServiceId));
-        Assert.That(importedCredential.Service.Id, Is.EqualTo(credential.Service.Id));
-        Assert.That(importedCredential.Service.Name, Is.EqualTo(credential.Service.Name));
-        Assert.That(importedCredential.Service.Url, Is.EqualTo(credential.Service.Url));
-        Assert.That(importedCredential.Passwords.Count, Is.EqualTo(credential.Passwords.Count));
+        Assert.Multiple(() =>
+        {
+            Assert.That(importedCredential.Id, Is.EqualTo(credential.Id));
+            Assert.That(importedCredential.Username, Is.EqualTo(credential.Username));
+            Assert.That(importedCredential.Notes, Is.EqualTo(credential.Notes));
+            Assert.That(importedCredential.CreatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(credential.CreatedAt.ToString("yyyy-MM-dd")));
+            Assert.That(importedCredential.UpdatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(credential.UpdatedAt.ToString("yyyy-MM-dd")));
+            Assert.That(importedCredential.AliasId, Is.EqualTo(credential.AliasId));
+            Assert.That(importedCredential.Alias.Id, Is.EqualTo(credential.Alias.Id));
+            Assert.That(importedCredential.Alias.Gender, Is.EqualTo(credential.Alias.Gender));
+            Assert.That(importedCredential.Alias.FirstName, Is.EqualTo(credential.Alias.FirstName));
+            Assert.That(importedCredential.Alias.LastName, Is.EqualTo(credential.Alias.LastName));
+            Assert.That(importedCredential.Alias.NickName, Is.EqualTo(credential.Alias.NickName));
+            Assert.That(importedCredential.Alias.BirthDate, Is.EqualTo(credential.Alias.BirthDate));
+            Assert.That(importedCredential.Alias.AddressStreet, Is.EqualTo(credential.Alias.AddressStreet));
+            Assert.That(importedCredential.Alias.AddressCity, Is.EqualTo(credential.Alias.AddressCity));
+            Assert.That(importedCredential.Alias.AddressState, Is.EqualTo(credential.Alias.AddressState));
+            Assert.That(importedCredential.Alias.AddressZipCode, Is.EqualTo(credential.Alias.AddressZipCode));
+            Assert.That(importedCredential.Alias.AddressCountry, Is.EqualTo(credential.Alias.AddressCountry));
+            Assert.That(importedCredential.Alias.Hobbies, Is.EqualTo(credential.Alias.Hobbies));
+            Assert.That(importedCredential.Alias.EmailPrefix, Is.EqualTo(credential.Alias.EmailPrefix));
+            Assert.That(importedCredential.Alias.PhoneMobile, Is.EqualTo(credential.Alias.PhoneMobile));
+            Assert.That(importedCredential.Alias.BankAccountIBAN, Is.EqualTo(credential.Alias.BankAccountIBAN));
+            Assert.That(importedCredential.Alias.CreatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(credential.Alias.CreatedAt.ToString("yyyy-MM-dd")));
+            Assert.That(importedCredential.Alias.UpdatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(credential.Alias.UpdatedAt.ToString("yyyy-MM-dd")));
+            Assert.That(importedCredential.ServiceId, Is.EqualTo(credential.ServiceId));
+            Assert.That(importedCredential.Service.Id, Is.EqualTo(credential.Service.Id));
+            Assert.That(importedCredential.Service.Name, Is.EqualTo(credential.Service.Name));
+            Assert.That(importedCredential.Service.Url, Is.EqualTo(credential.Service.Url));
+            Assert.That(importedCredential.Passwords.Count, Is.EqualTo(credential.Passwords.Count));

-        var importedPassword = importedCredential.Passwords.First();
-        var originalPassword = credential.Passwords.First();
+            var importedPassword = importedCredential.Passwords.First();
+            var originalPassword = credential.Passwords.First();

-        Assert.That(importedPassword.Value, Is.EqualTo(originalPassword.Value));
-        Assert.That(importedPassword.CreatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(originalPassword.CreatedAt.ToString("yyyy-MM-dd")));
-        Assert.That(importedPassword.UpdatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(originalPassword.UpdatedAt.ToString("yyyy-MM-dd")));
+            Assert.That(importedPassword.Value, Is.EqualTo(originalPassword.Value));
+            Assert.That(importedPassword.CreatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(originalPassword.CreatedAt.ToString("yyyy-MM-dd")));
+            Assert.That(importedPassword.UpdatedAt.ToString("yyyy-MM-dd"), Is.EqualTo(originalPassword.UpdatedAt.ToString("yyyy-MM-dd")));
+        });
    }
 }
--- a/src/Tests/AliasVault.UnitTests/Utilities/EncryptionTests.cs
+++ b/src/Tests/AliasVault.UnitTests/Utilities/EncryptionTests.cs
@@ -5,7 +5,7 @@
 // </copyright>
 //-----------------------------------------------------------------------

-namespace AliasVault.Tests;
+namespace AliasVault.Tests.Utilities;

 using Cryptography;
 using Org.BouncyCastle.Crypto;