added toaster messages

app/pages/settings/security.vue

@@ -7,6 +7,7 @@
         middleware: ["login-required"]
     })
     const loading_btn = ref(false)
+    const toast = useToast()
     
 
     const schema = z.object({
@@ -30,11 +31,38 @@
 
     async function submitChanges(event: FormSubmitEvent<Schema>) {
         loading_btn.value = true
-        await $fetch("/settings/changepw", {
-            method: "POST",
-            body: pw_fields.value
+        try {
+            fetch("/settings/changepw", {
+                method: "POST",
+                body: JSON.stringify(pw_fields.value)
+            }).then(async (response) => {
+            const body = await response.json()
+            if (response.ok) {
+                toast.add({
+                title: "Done!",
+                description: "It's changed!",
+                color: "success"
+            })
+            }
+            else {
+                toast.add({
+                title: 'Error',
+                description : body.statusMessage || body.message || 'Something went wrong',
+                color: 'error'
+            })
+            }
         })
+        }
+        catch(err:any) {
+            toast.add({
+                title: 'Error',
+                description: err?.data?.statusMessage || err.message || 'Something went wrong',
+                color: 'error'
+            })
+        }
         loading_btn.value = false
+        
+        
     }
 
 </script>