common notification added

src/App.vue

@@ -1,3 +1,8 @@
+<script setup>
+import { NotificationCustom } from "@/global-components/notification-custom";
+</script>
+
 <template>
+  <NotificationCustom ref="notification" />
   <router-view />
 </template>

src/api/fetch-wrapper.js

@@ -42,6 +42,8 @@ async function handleResponse(response) {
     ?.includes("application/json");
   const data = isJson ? await response.json() : null;
 
+  const alertStore = useAlertStore();
+
   // check for error response
   if (!response.ok) {
     const { user, logout } = useAuthStore();
@@ -51,16 +53,16 @@ async function handleResponse(response) {
     }
 
     // get error message from body or default to response status
-    // const error = (data && data.message) || response.status;
-    const error = data["error"];
-    //TODO: need standard messages
-    console.log("error: ", error);
+    const error = (data && data.message) || response.status;
 
-    const alertStore = useAlertStore();
+    // trigger alert
     alertStore.error(error);
 
     return Promise.reject(error);
   }
 
+  // TODO: can add success messages
+  // alertStore.success("success");
+
   return data;
 }

src/global-components/index.js

@@ -16,6 +16,7 @@ import Dropzone from "./dropzone/Main.vue";
 import FullCalendar from "./calendar/Main.vue";
 import FullCalendarDraggable from "./calendar/Draggable.vue";
 import Notification from "./notification/Main.vue";
+// import NotificationCustom from "./notification-custom/Main.vue";
 import { Modal, ModalHeader, ModalBody, ModalFooter } from "./modal";
 import {
   Dropdown,
@@ -61,6 +62,7 @@ export default (app) => {
   app.component("FullCalendar", FullCalendar);
   app.component("FullCalendarDraggable", FullCalendarDraggable);
   app.component("Notification", Notification);
+  // app.component("NotificationCustom", NotificationCustom);
   app.component("Modal", Modal);
   app.component("ModalHeader", ModalHeader);
   app.component("ModalBody", ModalBody);

src/global-components/notification-custom/Main.vue

@@ -0,0 +1,46 @@
+<template>
+  <!-- BEGIN: Notification Content -->
+  <Notification refKey="customNotification" class="flex">
+    <CheckCircleIcon class="text-success" v-if="alertType === 'success'" />
+    <XCircleIcon class="text-danger" v-else />
+    <div class="ml-4 mr-4">
+      <div v-if="alertType === 'success'" class="font-medium">
+        {{ $t("SUCCESS") }} !
+      </div>
+      <div v-else class="font-medium">{{ $t("ERROR") }} !</div>
+      <div class="text-slate-500 mt-1">
+        {{ message }}
+      </div>
+    </div>
+  </Notification>
+  <!-- END: Notification Content -->
+</template>
+
+<script setup>
+import { ref, provide, watch } from "vue";
+
+import { storeToRefs } from "pinia";
+import { useAlertStore } from "@/stores";
+import { delay } from "@/helpers";
+
+const alertStore = useAlertStore();
+const { alert } = storeToRefs(alertStore);
+
+const successNotification = ref();
+let message = ref();
+let alertType = ref();
+
+provide("bind[customNotification]", (el) => {
+  // Binding
+  successNotification.value = el;
+});
+
+watch(alert, async () => {
+  alertType.value = alert.value.type;
+  message.value = alert.value.message;
+
+  successNotification.value.showToast();
+  await delay(5000);
+  successNotification.value.hideToast();
+});
+</script>

src/global-components/notification-custom/index.js

@@ -0,0 +1 @@
+export { default as NotificationCustom } from "./Main.vue";

src/helpers/delay.js

@@ -0,0 +1 @@
+export const delay = (ms) => new Promise((res) => setTimeout(res, ms));

src/helpers/index.js

@@ -1 +1,2 @@
 export * from "./constants";
+export * from "./delay.js";

src/i18n/en.js

@@ -1,3 +1,5 @@
 export const locale = {
   GENERAL_REPORT: "General Report",
+  ERROR: "Error",
+  SUCCESS: "Success",
 };

src/i18n/ru.js

@@ -1,3 +1,5 @@
 export const locale = {
   GENERAL_REPORT: "Общий отчет",
+  ERROR: "Ошибка",
+  SUCCESS: "Успех",
 };

src/i18n/tm.js

@@ -1,3 +1,5 @@
 export const locale = {
   GENERAL_REPORT: "Umumy hasabat",
+  ERROR: "Ýalňyşlyk",
+  SUCCESS: "Üstünlik",
 };

src/stores/alert.js

@@ -7,10 +7,10 @@ export const useAlertStore = defineStore({
   }),
   actions: {
     success(message) {
-      this.alert = { message, type: "alert-success" };
+      this.alert = { message, type: "success" };
     },
     error(message) {
-      this.alert = { message, type: "alert-danger" };
+      this.alert = { message, type: "error" };
     },
     clear() {
       this.alert = null;

src/stores/auth.js

@@ -14,25 +14,26 @@ export const useAuthStore = defineStore({
   }),
   actions: {
     async login(email, password) {
-      return fetchWrapper
-        .post(`${baseUrl}/login`, { email, password })
-        .then((response) => {
-          // get user
-          let client = response["success"]["client"];
-
-          // add user token
-          client["token"] = response["success"]["token"]["plainTextToken"];
-
-          // update pinia state
-          this.user = client;
-
-          // store user details and jwt in local storage to keep user logged in between page refreshes
-          localStorage.setItem(USER, JSON.stringify(this.user));
-
-          // redirect to home page
-          router.push({ path: "/" });
+      try {
+        const response = await fetchWrapper.post(`${baseUrl}/login`, {
+          email,
+          password,
         });
+
+        // update pinia state
+        this.user = response["data"];
+
+        // store user details and jwt in local storage to keep user logged in between page refreshes
+        localStorage.setItem(USER, JSON.stringify(this.user));
+
+        // redirect to home page
+        router.push({ path: "/" });
+      } catch (error) {
+        // const alertStore = useAlertStore();
+        // alertStore.error(error);
+      }
     },
+
     async register(newUser) {
       return fetchWrapper
         .post(`${baseUrl}/register`, newUser)

src/stores/index.js

@@ -1,2 +1,2 @@
-export * from "./alert.store";
+export * from "./alert";
 export * from "./auth";

src/views/login/Main.vue

@@ -141,7 +141,7 @@ import DarkModeSwitcher from "@/components/dark-mode-switcher/Main.vue";
 import dom from "@left4code/tw-starter/dist/js/dom";
 import { useVuelidate } from "@vuelidate/core";
 import { required, minLength, email } from "@vuelidate/validators";
-import { useAuthStore } from "@/stores";
+import { useAuthStore, useAlertStore } from "@/stores";
 
 const formData = reactive({
   email: "",
@@ -165,15 +165,14 @@ const rules = {
 const validate = useVuelidate(rules, toRefs(formData));
 
 const onSubmit = async () => {
-  console.log("onSubmit", formData.email, " ", formData.password);
   const authStore = useAuthStore();
 
-  try {
+  validate.value.$touch();
+
+  // if form is valid
+  if (!validate.value.$invalid) {
     isLoading.value = true;
     await authStore.login(formData.email, formData.password);
-  } catch (error) {
-    console.log("error: ", error);
-  } finally {
     isLoading.value = false;
   }
 };