From 70e4a42a9be73ecfa68db2ba8c9013e698ba5c0f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 13:22:54 +0200
Subject: [PATCH] feat: add error section to modals

---
 src/lib/components/modal.svelte                      | 12 ++++++++++++
 .../console/[project]/users/_createTeam.svelte       |  9 ++++-----
 .../console/[project]/users/_createUser.svelte       |  9 ++++-----
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 7843b7c91..3a1263411 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
     import { createEventDispatcher, onMount } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
+    import { Alert } from '$lib/components';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
     export let warning = false;
+    export let error: string = null;
     let browser = false;
     //TODO: explore other solutions compatible with testing library
     onMount(() => {
@@ -76,6 +78,16 @@
                 </button>
             </header>
             <div class="modal-content">
+                {#if error}
+                    <Alert
+                        dismissible
+                        type="warning"
+                        on:dismiss={() => {
+                            error = null;
+                        }}>
+                        {error}
+                    </Alert>
+                {/if}
                 <slot />
             </div>
             <div class="modal-footer">
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index 307e24d39..f53aaaef0 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -12,6 +12,7 @@
 
     let name: string, id: string;
     let showDropdown = false;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -25,10 +26,7 @@
             });
             dispatch('created', team);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -37,11 +35,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Team</svelte:fragment>
         <FormList>
             <InputText
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 086dca5f4..7f56bde87 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -19,6 +19,7 @@
 
     let showDropdown = false;
     let name: string, mail: string, pass: string, id: string;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -32,10 +33,7 @@
             });
             dispatch('created', user);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -44,11 +42,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputText