From ec833cb43011355fe3a9baf764e6da7dd077b50d Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Mon, 28 Jul 2025 12:57:22 +0200
Subject: [PATCH] Tweak web app credential edit layout (#883)

---
 .../Main/Pages/Credentials/AddEdit.razor      | 16 +++++++--
 .../wwwroot/css/tailwind.css                  | 18 +++++-----
 .../wwwroot/js/modules/clickOutsideHandler.js | 33 ++++++++++++++++---
 3 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/apps/server/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor b/apps/server/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor
index 5f85ed1be..4d518a7e1 100644
--- a/apps/server/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor
+++ b/apps/server/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor
@@ -81,9 +81,6 @@ else
             <div class="col-span-1 md:col-span-1 lg:col-span-2">
                 <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">@Localizer["LoginCredentialsSectionHeader"]</h3>
-                    <div class="mb-4">
-                        <Button OnClick="GenerateRandomAlias">@Localizer["GenerateRandomAliasButton"]</Button>
-                    </div>
                     <div class="grid gap-6">
                         <div class="col-span-6 sm:col-span-3">
                             <EditEmailFormRow Id="email" Label="@Localizer["EmailLabel"]" @bind-Value="Obj.Alias.Email"></EditEmailFormRow>
@@ -100,6 +97,19 @@ else
                 <div class="col-span-1 md:col-span-1 lg:col-span-2">
                     <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">@Localizer["AliasSectionHeader"]</h3>
+                        <div class="mb-4">
+                            <Button OnClick="GenerateRandomAlias" AdditionalClasses="flex items-center justify-center gap-1">
+                                <svg class='w-5 h-5 inline-block' viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                                    <circle cx="8" cy="8" r="1"/>
+                                    <circle cx="16" cy="8" r="1"/>
+                                    <circle cx="12" cy="12" r="1"/>
+                                    <circle cx="8" cy="16" r="1"/>
+                                    <circle cx="16" cy="16" r="1"/>
+                                </svg>
+                                @Localizer["GenerateRandomAliasButton"]
+                            </Button>
+                        </div>
                         <div class="grid gap-6">
                             <div class="col-span-6 sm:col-span-3">
                                 <EditFormRow Id="first-name" Label="@Localizer["FirstNameLabel"]" @bind-Value="Obj.Alias.FirstName"></EditFormRow>
diff --git a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
index 6f3f6dac9..a64616dd8 100644
--- a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css
@@ -1247,6 +1247,10 @@ video {
   justify-content: space-between;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1263,10 +1267,6 @@ video {
   gap: 1.5rem;
 }
 
-.gap-1 {
-  gap: 0.25rem;
-}
-
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -3092,6 +3092,11 @@ video {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+.dark\:hover\:text-gray-100:hover:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .dark\:hover\:text-gray-200:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -3132,11 +3137,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark\:hover\:text-gray-100:hover:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
 .dark\:hover\:file\:bg-primary-800\/60:is(.dark *)::file-selector-button:hover {
   background-color: rgb(154 93 38 / 0.6);
 }
diff --git a/apps/server/AliasVault.Client/wwwroot/js/modules/clickOutsideHandler.js b/apps/server/AliasVault.Client/wwwroot/js/modules/clickOutsideHandler.js
index a2e988a7f..83b70eb06 100644
--- a/apps/server/AliasVault.Client/wwwroot/js/modules/clickOutsideHandler.js
+++ b/apps/server/AliasVault.Client/wwwroot/js/modules/clickOutsideHandler.js
@@ -8,19 +8,43 @@ export function registerClickOutsideHandler(dotNetHelper, contentIds, methodName
     const idArray = Array.isArray(contentIds) ? contentIds : contentIds.split(',').map(id => id.trim());
 
     const mouseHandler = (event) => {
+        // Check if dotNetHelper is still valid
+        if (!currentDotNetHelper) {
+            unregisterClickOutsideHandler();
+            return;
+        }
+
         const isOutside = idArray.every(id => {
             const content = document.getElementById(id);
             return !content?.contains(event.target);
         });
 
         if (isOutside) {
-            currentDotNetHelper.invokeMethodAsync(methodName);
+            try {
+                currentDotNetHelper.invokeMethodAsync(methodName);
+            } catch (error) {
+                console.warn('Failed to invoke click outside method:', error);
+                // Clean up if the DotNetObjectReference is disposed
+                unregisterClickOutsideHandler();
+            }
         }
     };
 
     const keyHandler = (event) => {
         if (event.key === 'Escape') {
-            currentDotNetHelper.invokeMethodAsync(methodName);
+            // Check if dotNetHelper is still valid
+            if (!currentDotNetHelper) {
+                unregisterClickOutsideHandler();
+                return;
+            }
+
+            try {
+                currentDotNetHelper.invokeMethodAsync(methodName);
+            } catch (error) {
+                console.warn('Failed to invoke escape key method:', error);
+                // Clean up if the DotNetObjectReference is disposed
+                unregisterClickOutsideHandler();
+            }
         }
     };
 
@@ -35,8 +59,9 @@ export function registerClickOutsideHandler(dotNetHelper, contentIds, methodName
 
 export function unregisterClickOutsideHandler() {
     if (currentHandler) {
-        document.removeEventListener('mousedown', currentHandler);
-        document.removeEventListener('keydown', currentHandler);
+        document.removeEventListener('mousedown', currentHandler.mouse);
+        document.removeEventListener('keydown', currentHandler.key);
         currentHandler = null;
+        currentDotNetHelper = null;
     }
 }