From e993ef8ddb998b3bd149c94c88e3245b982150d9 Mon Sep 17 00:00:00 2001
From: Zachary Keeping <zacharykeeping@icloud.com>
Date: Wed, 25 Oct 2023 11:04:31 +1100
Subject: [PATCH] Improve modal handling

---
 ui/src/components/misccomponents/Modal.svelte |  4 ---
 .../misccomponents/SendAlertModal.svelte      | 28 +++++++++++--------
 ui/src/global.scss                            |  5 ++++
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/misccomponents/Modal.svelte b/ui/src/components/misccomponents/Modal.svelte
index 9e65bc1b..011ec659 100644
--- a/ui/src/components/misccomponents/Modal.svelte
+++ b/ui/src/components/misccomponents/Modal.svelte
@@ -19,10 +19,6 @@
 </script>
 
 <style>
-  .modal {
-    transition: opacity 0.2s ease;
-    z-index: 3000;
-  }
   .fullheight {
     height: 90vh;
   }
diff --git a/ui/src/components/misccomponents/SendAlertModal.svelte b/ui/src/components/misccomponents/SendAlertModal.svelte
index 21ad1f09..d9ec6591 100644
--- a/ui/src/components/misccomponents/SendAlertModal.svelte
+++ b/ui/src/components/misccomponents/SendAlertModal.svelte
@@ -9,13 +9,16 @@
 
   let isLoading;
   let emailAddress = "";
-  let type = "text";
-  let showErrorPromp = false;
+  let showErrorPrompt = false;
 
   const dismiss = () => (show = false);
 
   const handleInput = (e) => {
-    emailAddress = validateEmail(e.target.value) ? e.target.value : null;
+    if (e.key === "Enter") {
+      updateEmailAddress();
+    } else {
+      showErrorPrompt = false;
+    }
   };
 
   const reloadSharedEmailList = async () => {
@@ -44,8 +47,8 @@
   };
 
   const updateEmailAddress = async () => {
-    if (emailAddress) {
-      showErrorPromp = false;
+    if (emailAddress && validateEmail(emailAddress)) {
+      showErrorPrompt = false;
       isLoading = true;
       const res = await fetch(
         `${CONSTS.API}/api/${userApiKey}/addalertemailaddresses`,
@@ -62,12 +65,13 @@
   
       if (res.ok) {
         isLoading = false;
+        emailAddress = "";
         reloadSharedEmailList();
       } else {
         throw new Error("Failed to load");
       }
     } else {
-      showErrorPromp = true;
+      showErrorPrompt = true;
     }
   };
 </script>
@@ -104,11 +108,11 @@
                 class="appearance-none block w-full text-gray-700 border border-red-700
                 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white
                 focus:border-red-800"
-                {type}
-                value={emailAddress}
+                type="text"
+                bind:value={emailAddress}
+                on:keydown={handleInput}
                 class:border-red-300={!emailAddress}
                 class:focus:border-red-500={!emailAddress}
-                on:input={handleInput}
                 placeholder="Email address"
               />
             </div>
@@ -119,9 +123,9 @@
                 on:click={updateEmailAddress}>Add</button
               >
             </div>
-            {#if showErrorPromp}
-              <div class="text-red-700 font-sans">Invalid email input</div>
-            {/if}
+          </div>
+          <div class="{showErrorPrompt ? 'visible' : 'invisible'}">
+            <span class="text-red-700 font-sans">Invalid email input</span>
           </div>
           {#if sharedEmailAddresses.length > 0}
             <div class="font-sans font-bold mt-5">
diff --git a/ui/src/global.scss b/ui/src/global.scss
index e03dfaf5..9c4f15cc 100644
--- a/ui/src/global.scss
+++ b/ui/src/global.scss
@@ -137,3 +137,8 @@ button:focus {
   width: 100%;
   height: 2px;
 }
+
+.modal {
+  transition: opacity 0.2s ease;
+  z-index: 3000;
+}