Setup global toaster and finalize login/registration page

composables/useToast.ts

@@ -1,4 +1,40 @@
-export default function useToast()
+export interface ToastConfig 
 {
-    
+    closeable?: boolean
+    duration: number
+    title?: string
+    content?: string
+    timer?: boolean
+    type?: ToastType
+}
+export type ToastType = 'info' | 'success' | 'error';
+export type ExtraToastConfig = ToastConfig & { id: string, state: boolean };
+
+let id = 0;
+
+const [provideToaster, useToast] = createInjectionState(() => {
+    const list = ref<ExtraToastConfig[]>([]);
+
+    function add(config: ToastConfig)
+    {
+        list.value.push({ ...config, id: (++id).toString(), state: true, });
+    }
+    function clear(type?: ToastType)
+    {
+        list.value.forEach(e => { if(e.type !== type) { e.state = false; } });
+    }
+
+    return { list, add, clear }
+}, { injectionKey: Symbol('toaster') });
+
+export { provideToaster, useToastWithDefault as useToast };
+
+function useToastWithDefault()
+{
+    const toasts = useToast();
+    if(!toasts)
+    {
+        return { list: ref<ExtraToastConfig[]>([]), add: () => {}, clear: () => {} };
+    }
+    return toasts;
 }