From f0fca573fd295504baa2016fb07ce70110135552 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Tue, 2 Jul 2024 21:22:39 +0200
Subject: [PATCH] Updated vault settings page layout, refactor tests (#84)

---
 src/AliasVault.WebApp/Layout/TopMenu.razor    |  3 -
 .../Pages/Settings/Vault.razor                | 44 +++++++----
 .../wwwroot/css/tailwind.css                  | 73 ++++++++++---------
 .../Utilities/CsvImportExportTests.cs         | 73 ++++++++++---------
 .../Utilities/EncryptionTests.cs              |  2 +-
 5 files changed, 110 insertions(+), 85 deletions(-)

diff --git a/src/AliasVault.WebApp/Layout/TopMenu.razor b/src/AliasVault.WebApp/Layout/TopMenu.razor
index 97dd53f45..24ec03997 100644
--- 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>
diff --git a/src/AliasVault.WebApp/Pages/Settings/Vault.razor b/src/AliasVault.WebApp/Pages/Settings/Vault.razor
index 232c4ad5f..7255a20fb 100644
--- 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
diff --git a/src/AliasVault.WebApp/wwwroot/css/tailwind.css b/src/AliasVault.WebApp/wwwroot/css/tailwind.css
index a1502818c..1e75a8b54 100644
--- 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));
diff --git a/src/Tests/AliasVault.UnitTests/Utilities/CsvImportExportTests.cs b/src/Tests/AliasVault.UnitTests/Utilities/CsvImportExportTests.cs
index 1c08d1f2d..507139e8f 100644
--- 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")));
+        });
     }
 }
diff --git a/src/Tests/AliasVault.UnitTests/Utilities/EncryptionTests.cs b/src/Tests/AliasVault.UnitTests/Utilities/EncryptionTests.cs
index e559d218d..b30db3c80 100644
--- 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;