From 7e1f33e4e1bd5e60ff437d1c21be3224b1a20b49 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Wed, 2 Apr 2025 19:19:24 +0200
Subject: [PATCH] Update form validation (#758)

---
 .../src/entrypoints/contentScript/Popup.ts    | 41 ++++++++++++++++---
 .../src/entrypoints/contentScript/style.css   | 19 +++++++--
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/browser-extension/src/entrypoints/contentScript/Popup.ts b/browser-extension/src/entrypoints/contentScript/Popup.ts
index e15f05650..8cb7cf550 100644
--- a/browser-extension/src/entrypoints/contentScript/Popup.ts
+++ b/browser-extension/src/entrypoints/contentScript/Popup.ts
@@ -880,12 +880,41 @@ export async function createEditNamePopup(defaultName: string, rootContainer: HT
       const serviceName = customInput.value.trim();
       if (serviceName) {
         if (!customEmail.value.trim() && !customUsername.value.trim()) {
-          // Show error message
-          const errorMsg = document.createElement('div');
-          errorMsg.className = 'av-create-popup-error';
-          errorMsg.textContent = 'Please fill in either email or username';
-          customMode.insertBefore(errorMsg, customMode.querySelector('.av-create-popup-actions'));
-          setTimeout(() => errorMsg.remove(), 2000);
+          // Add error styling to fields
+          customEmail.classList.add('av-create-popup-input-error');
+          customUsername.classList.add('av-create-popup-input-error');
+          
+          // Add error messages after labels
+          const emailLabel = customEmail.previousElementSibling as HTMLLabelElement;
+          const usernameLabel = customUsername.previousElementSibling as HTMLLabelElement;
+          
+          if (!emailLabel.querySelector('.av-create-popup-error-text')) {
+            const emailError = document.createElement('span');
+            emailError.className = 'av-create-popup-error-text';
+            emailError.textContent = 'Enter email and/or username';
+            emailLabel.appendChild(emailError);
+          }
+          
+          if (!usernameLabel.querySelector('.av-create-popup-error-text')) {
+            const usernameError = document.createElement('span');
+            usernameError.className = 'av-create-popup-error-text';
+            usernameError.textContent = 'Enter email and/or username';
+            usernameLabel.appendChild(usernameError);
+          }
+          
+          // Remove error styling when user starts typing
+          const removeError = () => {
+            customEmail.classList.remove('av-create-popup-input-error');
+            customUsername.classList.remove('av-create-popup-input-error');
+            const emailError = emailLabel.querySelector('.av-create-popup-error-text');
+            const usernameError = usernameLabel.querySelector('.av-create-popup-error-text');
+            if (emailError) emailError.remove();
+            if (usernameError) usernameError.remove();
+          };
+          
+          customEmail.addEventListener('input', removeError, { once: true });
+          customUsername.addEventListener('input', removeError, { once: true });
+          
           return;
         }
         closePopup({
diff --git a/browser-extension/src/entrypoints/contentScript/style.css b/browser-extension/src/entrypoints/contentScript/style.css
index 0f3633113..214c8926b 100644
--- a/browser-extension/src/entrypoints/contentScript/style.css
+++ b/browser-extension/src/entrypoints/contentScript/style.css
@@ -453,14 +453,27 @@ body {
 }
 
 .av-create-popup-field-group {
-  margin-bottom: 2px;
+  margin-bottom: 1rem;
 }
 
 .av-create-popup-field-group label {
   display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
+  margin-bottom: 0.5rem;
   color: #eee;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.av-create-popup-input-error {
+  border-color: #ef4444 !important;
+  box-shadow: 0 0 0 1px #ef4444 !important;
+}
+
+.av-create-popup-error-text {
+  color: #ef4444;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+  margin-left: 5px;
 }
 
 .av-create-popup-password-preview {