From 722a26d5d749d80a4794d1d6b1ccd2ef2a98c335 Mon Sep 17 00:00:00 2001
From: Nicole Zonnenberg <nzonnenberg@fearless.tech>
Date: Wed, 14 Jun 2023 13:32:57 -0400
Subject: [PATCH] update closing alerts

---
 frontend/src/components/auth/LoginForm.vue   |  4 ----
 frontend/src/components/auth/UserForm.vue    |  4 ----
 frontend/src/components/shared/AlertItem.vue | 16 +++++++++++++--
 frontend/src/layouts/Event.vue               | 21 ++++++++++++--------
 frontend/src/layouts/View.vue                |  5 ++++-
 frontend/src/store/users.store.ts            |  8 ++++++--
 6 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/auth/LoginForm.vue b/frontend/src/components/auth/LoginForm.vue
index 28172610..f94cd21b 100644
--- a/frontend/src/components/auth/LoginForm.vue
+++ b/frontend/src/components/auth/LoginForm.vue
@@ -1,8 +1,5 @@
 <template>
   <v-container>
-    <v-container>
-      <Alert />
-    </v-container>
     <v-card
       class="form-container"
       title="Login"
@@ -40,7 +37,6 @@
 import { Form, Field } from 'vee-validate';
 import * as Yup from 'yup';
 
-import { Alert } from '@/components';
 import { useAuthStore } from '@/store';
 import { getSubmitFn } from '@/helpers';
 import { Login } from "@/models/user.model";
diff --git a/frontend/src/components/auth/UserForm.vue b/frontend/src/components/auth/UserForm.vue
index 3503cc3c..d30e29e9 100644
--- a/frontend/src/components/auth/UserForm.vue
+++ b/frontend/src/components/auth/UserForm.vue
@@ -1,8 +1,5 @@
 <template>
   <v-container>
-    <v-container>
-      <Alert />
-    </v-container>
     <v-card
       class="form-container"
       :title="formTitle"
@@ -94,7 +91,6 @@ import { PropType, toRefs } from 'vue';
 import { Form, Field } from 'vee-validate';
 import * as Yup from 'yup';
 
-import { Alert } from '@/components';
 import { getSubmitFn } from '@/helpers';
 import { User } from "@/models/user.model";
 import { useAuthStore, useUsersStore } from "@/store"
diff --git a/frontend/src/components/shared/AlertItem.vue b/frontend/src/components/shared/AlertItem.vue
index 3b930286..add4515c 100644
--- a/frontend/src/components/shared/AlertItem.vue
+++ b/frontend/src/components/shared/AlertItem.vue
@@ -1,4 +1,4 @@
-<template>
+<template v-slot:close="{toggle}">
   <v-alert
     v-if="alert"
     border="start"
@@ -9,7 +9,15 @@
     :text="alert?.message"
     :type="alert?.type"
     :icon="alert?.icon"
-  />
+  >
+    <!--  Close slot for custom close behavior -->
+    <template v-slot:close="{toggle}">
+      <v-btn @click="closeAlert(toggle)">
+        <v-icon size="22px" icon="mdi:mdiClose" />
+      </v-btn>
+    </template>
+    <!--    -->
+  </v-alert>
 </template>
 
 <script lang="ts" setup>
@@ -18,4 +26,8 @@ import { useAlertStore } from "@/store";
 
 const alertStore = useAlertStore();
 const { alert } = storeToRefs(alertStore);
+
+const closeAlert = (toggle) => {
+  alertStore.clear();
+}
 </script>
\ No newline at end of file
diff --git a/frontend/src/layouts/Event.vue b/frontend/src/layouts/Event.vue
index c27e9350..51889c11 100644
--- a/frontend/src/layouts/Event.vue
+++ b/frontend/src/layouts/Event.vue
@@ -1,15 +1,20 @@
 <template>
-  <v-container class="layout-with-subnav main-content-container">
-    <EventSubNav />
-    <div class="sub-content-container">
-      <EventHeader />
-      <v-container>
-        <router-view />
-      </v-container>
+  <v-container>
+    <v-container>
+      <Alert />
+    </v-container>
+    <div class="layout-with-subnav main-content-container">
+      <EventSubNav />
+      <div class="sub-content-container">
+        <EventHeader />
+        <v-container>
+          <router-view />
+        </v-container>
+      </div>
     </div>
   </v-container>
 </template>
 
 <script lang="ts" setup>
-import { EventHeader, EventSubNav } from '@/components';
+import { Alert, EventHeader, EventSubNav } from '@/components';
 </script>
\ No newline at end of file
diff --git a/frontend/src/layouts/View.vue b/frontend/src/layouts/View.vue
index 9e5778ed..f4c31f8e 100644
--- a/frontend/src/layouts/View.vue
+++ b/frontend/src/layouts/View.vue
@@ -1,9 +1,12 @@
 <template>
   <v-container>
+    <v-container>
+      <Alert />
+    </v-container>
     <router-view />
   </v-container>
 </template>
 
 <script lang="ts" setup>
-  //
+import { Alert } from '@/components';
 </script>
diff --git a/frontend/src/store/users.store.ts b/frontend/src/store/users.store.ts
index 7ddb4c5f..679fb0b4 100644
--- a/frontend/src/store/users.store.ts
+++ b/frontend/src/store/users.store.ts
@@ -27,6 +27,7 @@ export const useUsersStore = defineStore({
       }
     },
     async updateAccount(user: User, userId: number) {
+      const alertStore = useAlertStore();
       const authStore = useAuthStore();
       const updates = { user };
       const currentUser = authStore.currentUser;
@@ -35,13 +36,15 @@ export const useUsersStore = defineStore({
         if (currentUser.id === userId) {
           const response = await fetchWrapper.put(`${BASE_URL}signup`, updates);
           authStore.updateCurrentUser(response.data);
+          alertStore.success("Your account was successfully updated.")
           router.push("/account");
         }
       } catch (err) {
-        console.log(err);
+        alertStore.error(err);
       }
     },
     async deleteAccount(value: string) {
+      const alertStore = useAlertStore();
       const authStore = useAuthStore();
       const currentUser = authStore.currentUser;
 
@@ -53,8 +56,9 @@ export const useUsersStore = defineStore({
         });
         authStore.logout();
         router.push("/login")
+        alertStore.success("Your account was successfully deleted.")
       } catch (err) {
-        console.log(err);
+        alertStore.error(err);
       }
     }
   }