From 92e43959e6eafb6becbda7de239ca97214c3777d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Sat, 27 May 2023 12:30:07 +0200
Subject: [PATCH] Remove title field and rename color to message

---
 src/App.vue                    | 3 +--
 src/components/ui/Snackbar.vue | 6 ++++--
 src/composables/useSnackbar.ts | 6 ++----
 src/views/LogIn.vue            | 3 +--
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1db0c01..a67480e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,8 +18,7 @@ onMounted(async () => {
   if (router.currentRoute.value.hash === '#login-success') {
     localStorage.removeItem('redirectPath');
     showSnackbar({
-      color: 'success',
-      title: 'Success',
+      status: 'success',
       message: "You're logged in!"
     });
   }
diff --git a/src/components/ui/Snackbar.vue b/src/components/ui/Snackbar.vue
index 9eb3fad..b72e961 100644
--- a/src/components/ui/Snackbar.vue
+++ b/src/components/ui/Snackbar.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { useSnackbar } from '@/composables/useSnackbar';
+import { computed } from 'vue';
 
-const { visible, color, title, message } = useSnackbar();
+const { visible, status, message } = useSnackbar();
+const title = computed(() => (status.value === 'error' ? 'Error' : 'Success'));
 </script>
 
 <template>
-  <v-snackbar v-model="visible" :color="color" vertical>
+  <v-snackbar v-model="visible" :color="status" vertical>
     <h6 class="text-h6 mb-1">{{ title }}</h6>
     <p class="text-body-1">{{ message }}</p>
   </v-snackbar>
diff --git a/src/composables/useSnackbar.ts b/src/composables/useSnackbar.ts
index 3019189..992bd84 100644
--- a/src/composables/useSnackbar.ts
+++ b/src/composables/useSnackbar.ts
@@ -2,14 +2,12 @@ import { reactive, toRefs } from 'vue';
 
 interface Snackbar {
   visible: boolean;
-  color: '' | 'error' | 'success';
-  title: string;
+  status: '' | 'error' | 'success';
   message: string;
 }
 
 const snackbar = reactive<Snackbar>({
-  color: '',
-  title: '',
+  status: '',
   message: '',
   visible: false
 });
diff --git a/src/views/LogIn.vue b/src/views/LogIn.vue
index 440dbc9..3960838 100644
--- a/src/views/LogIn.vue
+++ b/src/views/LogIn.vue
@@ -12,8 +12,7 @@ const { showSnackbar } = useSnackbar();
 onMounted(() => {
   if (route.hash === '#login-error') {
     showSnackbar({
-      color: 'error',
-      title: 'Error',
+      status: 'error',
       message: 'Failed to log you in.'
     });
   }