From 1ee2a1189d364edad158730f36b604debf9dfa40 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 27 Feb 2023 16:08:41 +1000
Subject: [PATCH] cleanup

---
 resources/js/components/SMMessage.vue |  3 +-
 resources/js/components/SMNavbar.vue  |  2 +-
 resources/js/helpers/api.ts           |  2 +-
 resources/js/helpers/api.types.ts     |  5 +++
 resources/js/helpers/form.ts          | 24 ++++++------
 resources/js/router/index.js          |  2 +-
 resources/js/store/UserStore.d.ts     | 17 --------
 resources/js/store/UserStore.ts       |  6 +--
 resources/js/views/About.vue          |  5 ---
 resources/js/views/Contact.vue        | 25 ++++++------
 resources/js/views/Dialog.vue         | 50 ------------------------
 resources/js/views/DialogDelete.vue   | 19 ---------
 resources/js/views/EmailVerify.vue    | 22 +++++++----
 resources/js/views/EventView.vue      | 56 ---------------------------
 resources/js/views/ForgotPassword.vue | 13 +++----
 resources/js/views/ForgotUsername.vue | 12 +++---
 resources/js/views/Legal.vue          |  7 ----
 resources/js/views/Login.vue          | 34 ++++++++--------
 18 files changed, 78 insertions(+), 226 deletions(-)
 delete mode 100644 resources/js/store/UserStore.d.ts
 delete mode 100644 resources/js/views/About.vue
 delete mode 100644 resources/js/views/Dialog.vue
 delete mode 100644 resources/js/views/DialogDelete.vue
 delete mode 100644 resources/js/views/EventView.vue
 delete mode 100644 resources/js/views/Legal.vue

diff --git a/resources/js/components/SMMessage.vue b/resources/js/components/SMMessage.vue
index 9e5493c..7978d3a 100644
--- a/resources/js/components/SMMessage.vue
+++ b/resources/js/components/SMMessage.vue
@@ -30,7 +30,7 @@ defineProps({
     align-self: center;
 
     .sm-message {
-        display: inline-flex;
+        display: flex;
         padding: map-get($spacer, 2) map-get($spacer, 3);
         margin-bottom: map-get($spacer, 4);
         text-align: center;
@@ -69,6 +69,7 @@ defineProps({
             justify-content: center;
             align-self: center;
             white-space: pre-wrap;
+            flex: 1;
         }
     }
 }
diff --git a/resources/js/components/SMNavbar.vue b/resources/js/components/SMNavbar.vue
index 0bf09ad..ef3cd26 100644
--- a/resources/js/components/SMNavbar.vue
+++ b/resources/js/components/SMNavbar.vue
@@ -87,7 +87,7 @@ const menuItems = [
     },
     {
         name: "contact",
-        label: "Contact us",
+        label: "Contact",
         to: { name: "contact" },
         icon: "mail-outline",
     },
diff --git a/resources/js/helpers/api.ts b/resources/js/helpers/api.ts
index b0a01dc..3ac6223 100644
--- a/resources/js/helpers/api.ts
+++ b/resources/js/helpers/api.ts
@@ -20,7 +20,7 @@ interface ApiOptions {
 export interface ApiResponse {
     status: number;
     message: string;
-    data: unknown;
+    data: Record<string, unknown>;
     json?: Record<string, unknown>;
 }
 
diff --git a/resources/js/helpers/api.types.ts b/resources/js/helpers/api.types.ts
index 12c74c4..143d7af 100644
--- a/resources/js/helpers/api.types.ts
+++ b/resources/js/helpers/api.types.ts
@@ -64,3 +64,8 @@ export interface UserResponse {
 export interface UserCollection {
     users: Array<User>;
 }
+
+export interface LoginResponse {
+    user: User;
+    token: string;
+}
diff --git a/resources/js/helpers/form.ts b/resources/js/helpers/form.ts
index 57f5be5..75e5119 100644
--- a/resources/js/helpers/form.ts
+++ b/resources/js/helpers/form.ts
@@ -9,9 +9,9 @@ import {
 type FormObjectValidateFunction = (item: string | null) => boolean;
 type FormObjectLoadingFunction = (state: boolean) => void;
 type FormObjectMessageFunction = (
-    message: string,
-    type: string,
-    icon: string
+    message?: string,
+    type?: string,
+    icon?: string
 ) => void;
 type FormObjectErrorFunction = (message: string) => void;
 type FormObjectApiErrorsFunction = (apiErrors: ApiResponse) => void;
@@ -77,21 +77,19 @@ const defaultFormObject: FormObject = {
         let foundKeys = false;
 
         if (
-            apiResponse.json &&
-            typeof apiResponse.json === "object" &&
-            apiResponse.json.errors
+            apiResponse.data &&
+            typeof apiResponse.data === "object" &&
+            apiResponse.data.errors
         ) {
-            const errors = apiResponse.json.errors as Record<string, string>;
+            const errors = apiResponse.data.errors as Record<string, string>;
             Object.keys(errors).forEach((key) => {
                 if (
-                    typeof this[key] === "object" &&
-                    Object.keys(this[key]).includes("validation")
+                    typeof this.controls[key] === "object" &&
+                    Object.keys(this.controls[key]).includes("validation")
                 ) {
                     foundKeys = true;
-                    this[key].validation.result = createValidationResult(
-                        false,
-                        errors[key]
-                    );
+                    this.controls[key].validation.result =
+                        createValidationResult(false, errors[key]);
                 }
             });
         }
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index 99bcfa2..5aa868e 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -124,7 +124,7 @@ export const routes = [
         path: "/contact",
         name: "contact",
         meta: {
-            title: "Contact Us",
+            title: "Contact",
         },
         component: () => import("@/views/Contact.vue"),
     },
diff --git a/resources/js/store/UserStore.d.ts b/resources/js/store/UserStore.d.ts
deleted file mode 100644
index 2187cfe..0000000
--- a/resources/js/store/UserStore.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import "pinia";
-import { UserDetails } from "./UserStore";
-
-declare module "pinia" {
-    export interface PiniaCustomProperties {
-        setUserDetails(user: UserDetails): void;
-
-        id: string;
-        token: string;
-        username: string;
-        firstName: string;
-        lastName: string;
-        email: string;
-        phone: string;
-        permissions: string[];
-    }
-}
diff --git a/resources/js/store/UserStore.ts b/resources/js/store/UserStore.ts
index cd917e5..fac0d00 100644
--- a/resources/js/store/UserStore.ts
+++ b/resources/js/store/UserStore.ts
@@ -1,4 +1,4 @@
-import { defineStore } from "pinia";
+import { defineStore, DefineStoreOptions } from "pinia";
 
 export interface UserDetails {
     id: string;
@@ -21,7 +21,7 @@ export interface UserState {
     permissions: string[];
 }
 
-export const useUserStore = defineStore<string, UserState>({
+export const useUserStore = defineStore({
     id: "user",
     state: (): UserState => ({
         id: "",
@@ -62,4 +62,4 @@ export const useUserStore = defineStore<string, UserState>({
     },
 
     persist: true,
-});
+} as DefineStoreOptions<string, unknown, unknown, unknown> & { persist?: boolean });
diff --git a/resources/js/views/About.vue b/resources/js/views/About.vue
deleted file mode 100644
index e705c7e..0000000
--- a/resources/js/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <div>
-        <div>About</div>
-    </div>
-</template>
diff --git a/resources/js/views/Contact.vue b/resources/js/views/Contact.vue
index 5dc5e36..132faaf 100644
--- a/resources/js/views/Contact.vue
+++ b/resources/js/views/Contact.vue
@@ -60,7 +60,7 @@
                         <template v-else>
                             <h1>Message Sent!</h1>
                             <p class="text-center">
-                                Your message as been sent to us. We will respond
+                                Your message as been sent.<br />We will respond
                                 as soon as we can.
                             </p>
                             <SMButton
@@ -76,22 +76,20 @@
 </template>
 
 <script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
 import SMDialog from "../components/SMDialog.vue";
 import SMForm from "../components/SMForm.vue";
 import SMInput from "../components/SMInput.vue";
-
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
 import { And, Email, Min, Required } from "../helpers/validate";
 
-import { reactive, ref } from "vue";
-import { useReCaptcha } from "vue-recaptcha-v3";
-
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
 const form = reactive(
     Form({
-        name: FormControl("", And([Required(), Min(4)])),
+        name: FormControl("", And([Required()])),
         email: FormControl("", And([Required(), Email()])),
         content: FormControl("", And([Required(), Min(8)])),
     })
@@ -108,20 +106,19 @@ const handleSubmit = async () => {
         await api.post({
             url: "/contact",
             body: {
-                name: form.name.value,
-                email: form.email.value,
+                name: form.controls.name.value,
+                email: form.controls.email.value,
                 captcha_token: captcha,
-                content: form.content.value,
+                content: form.controls.content.value,
             },
         });
 
         formSubmitted.value = true;
-    } catch (err) {
-        console.log(err);
-        form.apiErrors(err);
+    } catch (error) {
+        form.error("A captcha error occurred. Try reloading the page.");
+    } finally {
+        form.loading(false);
     }
-
-    form.loading(false);
 };
 </script>
 
diff --git a/resources/js/views/Dialog.vue b/resources/js/views/Dialog.vue
deleted file mode 100644
index 4ca908b..0000000
--- a/resources/js/views/Dialog.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <div ref="root" :class="classes">
-        <div class="mdialog">
-            <button @click="confimer">Close</button>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { transitionEnter, transitionLeave } from "../helpers/transition";
-
-const root = ref(null);
-const classes = ref(["mdialog-mask", "fade-enter-from"]);
-
-const props = defineProps({ title: "" });
-let data = {
-    title: props.title,
-};
-
-const emit = defineEmits(["confirm", "cancel"]);
-
-const confimer = () => {
-    transitionLeave(root, "fade", () => {
-        emit("confirm", {});
-    });
-};
-
-transitionEnter(root, "fade");
-</script>
-
-<style lang="scss">
-.mdialog-mask {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 2000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.mdialog {
-    padding: 1rem 2rem;
-    background-color: white;
-}
-</style>
diff --git a/resources/js/views/DialogDelete.vue b/resources/js/views/DialogDelete.vue
deleted file mode 100644
index 9d4c228..0000000
--- a/resources/js/views/DialogDelete.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <SMDialog>
-        <SMButton type="primary" label="Confirm" @click="onClick" />
-    </SMDialog>
-</template>
-
-<script setup lang="ts">
-import SMDialog from "./Dialog.vue";
-import SMButton from "../components/SMButton.vue";
-
-const emit = defineEmits(["confirm", "cancel"]);
-
-const onClick = () => {
-    console.log("click");
-    emit("confirm");
-};
-</script>
-
-<style lang="scss"></style>
diff --git a/resources/js/views/EmailVerify.vue b/resources/js/views/EmailVerify.vue
index 92aefcb..66edda9 100644
--- a/resources/js/views/EmailVerify.vue
+++ b/resources/js/views/EmailVerify.vue
@@ -48,7 +48,6 @@ import SMDialog from "../components/SMDialog.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 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";
@@ -71,21 +70,30 @@ const handleSubmit = async () => {
         await api.post({
             url: "/users/verifyEmail",
             body: {
-                code: form.code.value,
+                code: form.controls.code.value,
                 captcha_token: captcha,
             },
         });
 
         formDone.value = true;
-    } catch (err) {
-        form.apiErrors(err);
+    } catch (error) {
+        form.apiErrors(error);
+    } finally {
+        form.loading(false);
     }
-
-    form.loading(false);
 };
 
 if (useRoute().query.code !== undefined) {
-    form.code.value = useRoute().query.code;
+    const code = useRoute().query.code;
+
+    if (Array.isArray(code)) {
+        if (code.length > 0) {
+            form.controls.code.value = code[0];
+        }
+    } else {
+        form.controls.code.value = code;
+    }
+
     handleSubmit();
 }
 </script>
diff --git a/resources/js/views/EventView.vue b/resources/js/views/EventView.vue
deleted file mode 100644
index 191db54..0000000
--- a/resources/js/views/EventView.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-    <SMContainer class="dashboard mx-auto workshops">
-        <h1>Workshops</h1>
-        <SMMessage
-            v-if="formMessage.message"
-            :icon="formMessage.icon"
-            :type="formMessage.type"
-            :message="formMessage.message"
-            class="mt-5" />
-        <SMPanelList>
-            <SMPanel
-                v-for="event in events.value"
-                :key="event.id"
-                :to="{ name: 'event', params: { slug: event.id } }"
-                :title="event.title"
-                :date="event.start_at"></SMPanel>
-        </SMPanelList>
-    </SMContainer>
-</template>
-
-<script setup lang="ts">
-import SMMessage from "../components/SMMessage.vue";
-import SMPanelList from "../components/SMPanelList.vue";
-import SMPanel from "../components/SMPanel.vue";
-import { reactive } from "vue";
-import { api } from "../helpers/api";
-
-const events = reactive([]);
-
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-
-const handleLoad = async () => {
-    formMessage.type = "error";
-    formMessage.icon = "alert-circle-outline";
-    formMessage.message = "";
-
-    try {
-        let result = await api.get({
-            url: "/events",
-            params: {
-                limit: 10,
-            },
-        });
-        events.value = result.json.events;
-    } catch (error) {
-        formMessage.message =
-            error.json?.message || "Could not load any events from the server.";
-    }
-};
-
-handleLoad();
-</script>
diff --git a/resources/js/views/ForgotPassword.vue b/resources/js/views/ForgotPassword.vue
index e1d4641..fd121f8 100644
--- a/resources/js/views/ForgotPassword.vue
+++ b/resources/js/views/ForgotPassword.vue
@@ -45,14 +45,13 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
-import { api } from "../helpers/api";
-import { Form, FormControl } from "../helpers/form";
-import { And, Min, Required } from "../helpers/validate";
-
 import SMButton from "../components/SMButton.vue";
 import SMDialog from "../components/SMDialog.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import { And, Min, Required } from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
 const formDone = ref(false);
@@ -72,7 +71,7 @@ const handleSubmit = async () => {
         await api.post({
             url: "/users/forgotPassword",
             body: {
-                username: form.username.value,
+                username: form.controls.username.value,
                 captcha_token: captcha,
             },
         });
@@ -84,8 +83,8 @@ const handleSubmit = async () => {
         } else {
             form.apiErrors(error);
         }
+    } finally {
+        form.loading(false);
     }
-
-    form.loading(false);
 };
 </script>
diff --git a/resources/js/views/ForgotUsername.vue b/resources/js/views/ForgotUsername.vue
index 1f05c00..97f691b 100644
--- a/resources/js/views/ForgotUsername.vue
+++ b/resources/js/views/ForgotUsername.vue
@@ -43,17 +43,15 @@
 
 <script setup lang="ts">
 import { reactive, ref } from "vue";
-import { api } from "../helpers/api";
-import { Form, FormControl } from "../helpers/form";
-import { And, Email, Required } from "../helpers/validate";
-
+import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
 import SMDialog from "../components/SMDialog.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
-
-import { useReCaptcha } from "vue-recaptcha-v3";
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import { And, Email, Required } from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
 const formDone = ref(false);
@@ -73,7 +71,7 @@ const handleSubmit = async () => {
         await api.post({
             url: "/users/forgotUsername",
             body: {
-                email: form.email.value,
+                email: form.controls.email.value,
                 captcha_token: captcha,
             },
         });
diff --git a/resources/js/views/Legal.vue b/resources/js/views/Legal.vue
deleted file mode 100644
index 4732c4e..0000000
--- a/resources/js/views/Legal.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-    <div>
-        <div>Home</div>
-    </div>
-</template>
-
-<script setup lang="ts"></script>
diff --git a/resources/js/views/Login.vue b/resources/js/views/Login.vue
index 1c381de..b342b39 100644
--- a/resources/js/views/Login.vue
+++ b/resources/js/views/Login.vue
@@ -40,8 +40,8 @@ import SMDialog from "../components/SMDialog.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
-
 import { api } from "../helpers/api";
+import { LoginResponse } from "../helpers/api.types";
 import { Form, FormControl } from "../helpers/form";
 import { And, Min, Required } from "../helpers/validate";
 import { useUserStore } from "../store/UserStore";
@@ -55,39 +55,39 @@ const form = reactive(
     })
 );
 
-const redirect = useRoute().query.redirect;
+const redirectQuery = useRoute().query.redirect;
 
 const handleSubmit = async () => {
     form.message();
     form.loading(true);
 
     try {
-        let res = await api.post({
+        let result = await api.post({
             url: "/login",
             body: {
-                username: form.username.value,
-                password: form.password.value,
+                username: form.controls.username.value,
+                password: form.controls.password.value,
             },
         });
 
-        userStore.setUserDetails(res.data.user);
-        userStore.setUserToken(res.data.token);
-        if (redirect !== undefined) {
-            if (redirect.startsWith("api/")) {
-                window.location.href =
-                    redirect + "?token=" + encodeURIComponent(res.data.token);
-            } else {
-                router.push({ path: redirect });
-            }
+        const login = result.data as unknown as LoginResponse;
+
+        userStore.setUserDetails(login.user);
+        userStore.setUserToken(login.token);
+        if (redirectQuery !== undefined) {
+            const redirect = Array.isArray(redirectQuery)
+                ? redirectQuery[0]
+                : redirectQuery;
+
+            router.push({ path: redirect });
         } else {
             router.push({ name: "dashboard" });
         }
     } catch (err) {
-        console.log(err);
         form.apiErrors(err);
+    } finally {
+        form.loading(false);
     }
-
-    form.loading(false);
 };
 
 if (userStore.token) {