added api error callback with toast display

resources/js/components/dialogs/SMDialogChangePassword.vue

@@ -77,7 +77,13 @@ const handleSubmit = async () => {
         });
         closeDialog(false);
     } catch (error) {
-        form.apiErrors(error);
+        form.apiErrors(error, (message) => {
+            useToastStore().addToast({
+                title: "An error occurred",
+                content: message,
+                type: "danger",
+            });
+        });
     } finally {
         dialogLoading.value = false;
     }
@@ -85,7 +91,6 @@ const handleSubmit = async () => {
 
 /**
  * Handle a keyboard event in this component.
- *
  * @param {KeyboardEvent} event The keyboard event.
  * @returns {boolean} If the event was handled.
  */

resources/js/helpers/form.ts

@@ -14,7 +14,10 @@ type FormObjectMessageFunction = (
     icon?: string
 ) => void;
 type FormObjectErrorFunction = (message: string) => void;
-type FormObjectApiErrorsFunction = (apiErrors: ApiResponse) => void;
+type FormObjectApiErrorsFunction = (
+    apiErrors: ApiResponse,
+    callback?: (error: string, status: number) => void
+) => void;
 
 export interface FormObject {
     validate: FormObjectValidateFunction;
@@ -78,7 +81,10 @@ const defaultFormObject: FormObject = {
             this.message(message, "error", "alert-circle-outline");
         }
     },
-    apiErrors: function (apiResponse: ApiResponse) {
+    apiErrors: function (
+        apiResponse: ApiResponse,
+        callback?: (error: string, status: number) => void
+    ) {
         let foundKeys = false;
 
         if (
@@ -100,10 +106,15 @@ const defaultFormObject: FormObject = {
         }
 
         if (foundKeys == false) {
-            this.error(
+            const errorMessage =
-                apiResponse?.json?.message ||
+                (apiResponse?.json?.message as string) ||
-                    "An unknown server error occurred.\nPlease try again later."
+                "An unknown server error occurred.\nPlease try again later.";
-            );
+
+            if (callback) {
+                callback(errorMessage, apiResponse.status);
+            } else {
+                this.error(errorMessage);
+            }
         }
     },
     controls: {},

resources/js/views/EmailVerify.vue

@@ -61,6 +61,7 @@ import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
 import { And, Max, Min, Required } from "../helpers/validate";
+import { useToastStore } from "../store/ToastStore";
 
 // const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
 const formDone = ref(false);
@@ -87,7 +88,13 @@ const handleSubmit = async () => {
 
         formDone.value = true;
     } catch (error) {
-        form.apiErrors(error);
+        form.apiErrors(error, (message) => {
+            useToastStore().addToast({
+                title: "An error occurred",
+                content: message,
+                type: "danger",
+            });
+        });
     } finally {
         form.loading(false);
     }

resources/js/views/ForgotPassword.vue

@@ -56,6 +56,7 @@ import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
 import { And, Email, Required } from "../helpers/validate";
+import { useToastStore } from "../store/ToastStore";
 
 // const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
 const formDone = ref(false);
@@ -85,7 +86,13 @@ const handleSubmit = async () => {
         if (error.status == 422) {
             formDone.value = true;
         } else {
-            form.apiErrors(error);
+            form.apiErrors(error, (message) => {
+                useToastStore().addToast({
+                    title: "An error occurred",
+                    content: message,
+                    type: "danger",
+                });
+            });
         }
     } finally {
         form.loading(false);

resources/js/views/Login.vue

@@ -95,9 +95,15 @@ const handleSubmit = async () => {
         } else {
             router.push({ name: "dashboard" });
         }
-    } catch (err) {
+    } catch (error) {
         form.controls.password.value = "";
-        form.apiErrors(err);
+        form.apiErrors(error, (message) => {
+            useToastStore().addToast({
+                title: "An error occurred",
+                content: message,
+                type: "danger",
+            });
+        });
     } finally {
         form.loading(false);
     }

resources/js/views/Register.vue

@@ -59,6 +59,7 @@ import {
     Required,
 } from "../helpers/validate";
 import SMFormError from "../components/SMFormError.vue";
+import { useToastStore } from "../store/ToastStore";
 
 let abortController: AbortController | null = null;
 
@@ -116,8 +117,13 @@ const handleSubmit = async () => {
 
         userRegistered.value = true;
     } catch (error) {
-        console.log(error);
+        form.apiErrors(error, (message) => {
-        form.apiErrors(error);
+            useToastStore().addToast({
+                title: "An error occurred",
+                content: message,
+                type: "danger",
+            });
+        });
     } finally {
         form.loading(false);
     }

resources/js/views/ResendEmailVerify.vue

@@ -66,6 +66,7 @@ import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
 import { And, Email, Required } from "../helpers/validate";
+import { useToastStore } from "../store/ToastStore";
 
 // const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
 const formDone = ref(false);
@@ -95,7 +96,13 @@ const handleSubmit = async () => {
         if (error.status == 422) {
             formDone.value = true;
         } else {
-            form.apiErrors(error);
+            form.apiErrors(error, (message) => {
+                useToastStore().addToast({
+                    title: "An error occurred",
+                    content: message,
+                    type: "danger",
+                });
+            });
         }
     } finally {
         form.loading(false);

resources/js/views/ResetPassword.vue

@@ -53,6 +53,7 @@ import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
 import { And, Max, Min, Password, Required } from "../helpers/validate";
+import { useToastStore } from "../store/ToastStore";
 
 // const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
 const formDone = ref(false);
@@ -90,7 +91,13 @@ const handleSubmit = async () => {
 
         formDone.value = true;
     } catch (error) {
-        form.apiErrors(error);
+        form.apiErrors(error, (message) => {
+            useToastStore().addToast({
+                title: "An error occurred",
+                content: message,
+                type: "danger",
+            });
+        });
     } finally {
         form.loading(false);
     }

resources/js/views/dashboard/ArticleEdit.vue

@@ -249,7 +249,13 @@ const handleSubmit = async () => {
             router.push({ name: "dashboard-article-list" });
         }
     } catch (error) {
-        form.apiErrors(error);
+        form.apiErrors(error, (message) => {
+            useToastStore().addToast({
+                title: "An error occurred",
+                content: message,
+                type: "danger",
+            });
+        });
     }
 };
 
@@ -325,7 +331,13 @@ const loadOptionsAuthors = async () => {
             }
         })
         .catch((error) => {
-            form.apiErrors(error);
+            form.apiErrors(error, (message) => {
+                useToastStore().addToast({
+                    title: "An error occurred",
+                    content: message,
+                    type: "danger",
+                });
+            });
         });
 };
 

resources/js/views/dashboard/ShortlinkEdit.vue

@@ -84,8 +84,14 @@ const loadData = async () => {
                 form.controls.url.value = data.shortlink.url;
                 used.value = data.shortlink.used;
             }
-        } catch (err) {
+        } catch (error) {
-            form.apiErrors(err);
+            form.apiErrors(error, (message) => {
+                useToastStore().addToast({
+                    title: "An error occurred",
+                    content: message,
+                    type: "danger",
+                });
+            });
         } finally {
             form.loading(false);
         }
@@ -161,8 +167,14 @@ const handleSubmit = async () => {
         } else {
             router.push({ name: "dashboard-shortlink-list" });
         }
-    } catch (err) {
+    } catch (error) {
-        form.apiErrors(err);
+        form.apiErrors(error, (message) => {
+            useToastStore().addToast({
+                title: "An error occurred",
+                content: message,
+                type: "danger",
+            });
+        });
     } finally {
         form.loading(false);
     }

resources/js/views/dashboard/UserEdit.vue

@@ -158,8 +158,14 @@ const loadData = async () => {
                 form.controls.phone.value = data.user.phone;
                 form.controls.email.value = data.user.email;
             }
-        } catch (err) {
+        } catch (error) {
-            form.apiErrors(err);
+            form.apiErrors(error, (message) => {
+                useToastStore().addToast({
+                    title: "An error occurred",
+                    content: message,
+                    type: "danger",
+                });
+            });
         } finally {
             form.loading(false);
         }
@@ -235,8 +241,14 @@ const handleSubmit = async () => {
         } else {
             router.push({ name: "dashboard-user-list" });
         }
-    } catch (err) {
+    } catch (error) {
-        form.apiErrors(err);
+        form.apiErrors(error, (message) => {
+            useToastStore().addToast({
+                title: "An error occurred",
+                content: message,
+                type: "danger",
+            });
+        });
     } finally {
         form.loading(false);
     }