@fishawack/lab-velocity 2.0.0-beta.6 → 2.0.0-beta.60

package/_Build/vue/modules/AuthModule/routes/logout.vue

@@ -1,4 +1,7 @@
 <script>
+import axios from "axios";
+import clearCookies from "../js/clear-cookies";
+
 export default {
     metaInfo() {
         return {
@@ -8,14 +11,20 @@ export default {
 
     async mounted() {
         try {
-            await this.$store.dispatch("logout", {
-                errors: this.$root.errors,
-            });
+            await this.$store.dispatch("logout");
+        } catch {
+            /* empty */
+        }
+
+        await clearCookies();
+
+        try {
+            await axios.get("/sanctum/csrf-cookie");
         } catch {
             /* empty */
-        } finally {
-            this.$router.push({ name: "auth.login" });
         }
+
+        this.$router.push({ name: "auth.login" });
     },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/logoutheadless.vue

@@ -3,6 +3,9 @@
 </template>
 
 <script>
+import axios from "axios";
+import clearCookies from "../js/clear-cookies";
+
 export default {
     metaInfo() {
         return {
@@ -16,12 +19,20 @@ export default {
 
     async mounted() {
         try {
-            await this.$store.dispatch("logout", {
-                errors: this.$root.errors,
-            });
-        } finally {
-            this.done = true;
+            await this.$store.dispatch("logout");
+        } catch {
+            /* empty */
+        }
+
+        await clearCookies();
+
+        try {
+            await axios.get("/sanctum/csrf-cookie");
+        } catch {
+            /* empty */
         }
+
+        this.done = true;
     },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/register.vue

@@ -1,6 +1,6 @@
 <template>
     <h1 class="h2 h2--small">Register</h1>
-    <p class="AM-mb-3 AM-mt-2">
+    <p class="mb-3 mt-2">
         Please enter your personal details to complete your registration.
     </p>
 
@@ -10,7 +10,7 @@
         id="memberLoginForm"
     >
         <el-input
-            class="AM-mb-2"
+            class="mb-2"
             label="Full name"
             placeholder="Enter your full name"
             name="name"
@@ -20,7 +20,7 @@
         />
 
         <el-input
-            class="AM-mb-2"
+            class="mb-2"
             label="Email"
             placeholder="Enter your email address"
             name="email"
@@ -31,7 +31,7 @@
         />
 
         <el-input
-            class="AM-mb-2"
+            class="mb-2"
             label="Password"
             name="password"
             placeholder="Create a unique password"
@@ -42,7 +42,7 @@
             :error="form.errors"
         />
 
-        <VPasswordValidation
+        <VelPasswordValidation
             :password="form.password"
             @passwordValid="updatePasswordValidity"
         />
@@ -72,7 +72,7 @@
             Register
         </elButton>
 
-        <p class="disclaimer AM-mt-3">
+        <p class="disclaimer mt-3">
             Having trouble registering?
             <a :href="$store.state.auth.contact" class="underline"
                 >Contact us</a
@@ -83,8 +83,18 @@
 
 <script>
 import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
+import { guestRequest } from "../js/guest-request";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -107,24 +117,19 @@ export default {
             this.loading = true;
 
             try {
-                const res = await this.form.post("/register");
-
-                if (res["logged-in"]) {
-                    try {
-                        await this.$store.dispatch("logout", {
-                            errors: this.$root.errors,
-                        });
-                    } catch (e) {}
+                const res = await guestRequest({
+                    form: this.form,
+                    url: "/register",
+                    store: this.$store,
+                });
 
-                    await this.form.post("/register");
-                }
                 if (res["redirect"]) {
                     // Redirect here
                     this.$router.push({
                         name: `auth.login`,
                         query: { company: res["company"] },
                     });
-                    this.$notify.error({
+                    ElNotification.error({
                         title: "Domain is SSO enabled",
                         message: "Sign in with your company email address",
                         duration: 10000,
@@ -133,16 +138,14 @@ export default {
                     await this.postLogin();
                 }
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             } finally {
                 this.loading = false;
             }
         },
 
         async postLogin() {
-            const { data: user } = await this.$store.dispatch("getUser", {
-                errors: this.$root.errors,
-            });
+            const { data: user } = await this.$store.dispatch("getUser");
 
             if (window.dataLayer) {
                 window.dataLayer.push({ event: "login", user });
@@ -163,12 +166,5 @@ export default {
             this.isPasswordValid = isValid;
         },
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/reset.vue

@@ -4,16 +4,16 @@
             <h1 class="h2 h2--small">Reset password</h1>
             <form class="form" @submit.prevent="submit">
                 <div v-if="!form.successful">
-                    <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                    <p class="mt-2 mb-0 color-highlight">
                         <strong class="">Email: {{ form?.email }}</strong>
                     </p>
-                    <p class="AM-mt-0.5">
+                    <p class="mt-0.5">
                         Please create a new password. Passwords you have used
                         previously aren’t permitted.
                     </p>
                     <el-input
                         v-model="form.password"
-                        class="AM-mt-3"
+                        class="mt-3"
                         label="New Password"
                         placeholder="Enter new password"
                         name="password"
@@ -23,7 +23,7 @@
                         required
                     />
 
-                    <VPasswordValidation
+                    <VelPasswordValidation
                         :password="form.password"
                         @passwordValid="updatePasswordValidity"
                     />
@@ -51,7 +51,7 @@
                     <h4 class="mt" v-text="`Success!`" />
                     <p v-text="`Your password has been reset.`" />
                 </div>
-                <p class="disclaimer AM-mt-3">
+                <p class="disclaimer mt-3">
                     <router-link
                         class="color-1 underline"
                         :to="{ name: 'auth.login' }"
@@ -66,8 +66,17 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -90,7 +99,11 @@ export default {
     methods: {
         async onSubmit() {
             try {
-                const res = await this.form.post("/reset-password");
+                await guestRequest({
+                    form: this.form,
+                    url: "/reset-password",
+                    store: this.$store,
+                });
 
                 this.$router.push({
                     name: "auth.success-reset",
@@ -108,7 +121,7 @@ export default {
                         query: { email: this.form.email },
                     });
                 }
-                this.$root.errors(e);
+                console.log(e);
             }
         },
 
@@ -122,12 +135,5 @@ export default {
             title: "Reset Password",
         };
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/success-forgot.vue

@@ -4,15 +4,15 @@
             <h1 class="h2 h2--small">Reset password</h1>
 
             <form class="form" @submit.prevent="submit">
-                <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                <p class="mt-2 mb-0 color-highlight">
                     <strong class="">Email: {{ form?.email }}</strong>
                 </p>
-                <p class="AM-mt">
+                <p class="mt">
                     If this account exists we have sent an email containing
                     instructions for resetting the password.
                     <strong>Please check your inbox.</strong>
                 </p>
-                <p class="AM-mt-3 AM-mb">
+                <p class="mt-3 mb">
                     Haven’t received the email after 10 minutes?
                 </p>
 
@@ -37,7 +37,7 @@
                     Re-send instructions
                 </elButton>
 
-                <p class="disclaimer AM-mt-3">
+                <p class="disclaimer mt-3">
                     <router-link
                         class="color-1 underline"
                         :to="{ name: `auth.login` }"
@@ -52,6 +52,8 @@
 
 <script>
 import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -76,9 +78,13 @@ export default {
                     this.notification = null;
                 }
 
-                await this.form.post("/forgot-password");
+                await guestRequest({
+                    form: this.form,
+                    url: "/forgot-password",
+                    store: this.$store,
+                });
 
-                this.$notify({
+                ElNotification({
                     type: "success",
                     message: "Email has been re-sent",
                     duration: 10000,
@@ -86,14 +92,14 @@ export default {
                 });
             } catch (e) {
                 if (e.response && e.response.status === 422) {
-                    this.notification = this.$notify({
+                    this.notification = ElNotification({
                         type: "warning",
                         message: "Please allow 10 minutes before re-requesting",
                         duration: 0,
                         class: "el-notification--warning el-notification--right-override",
                     });
                 } else {
-                    this.$root.errors(e);
+                    console.log(e);
                 }
             }
         },

package/_Build/vue/modules/AuthModule/routes/success-reset.vue

@@ -3,10 +3,10 @@
         <section id="resetPasswordForm">
             <h1 class="h2 h2--small">Success</h1>
 
-            <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+            <p class="mt-2 mb-0 color-highlight">
                 <strong class="">Email: {{ $route.query.email }}</strong>
             </p>
-            <p class="AM-mt">
+            <p class="mt">
                 Your password has been reset. Please sign in to continue.
             </p>
 

package/_Build/vue/modules/AuthModule/routes/success-verify.vue

@@ -20,9 +20,7 @@
 <script>
 export default {
     mounted() {
-        this.$store.dispatch("getUser", {
-            errors: this.$root.errors,
-        });
+        this.$store.dispatch("getUser");
     },
     components: {
         elButton: require("../../../components/basic/Button.vue").default,

package/_Build/vue/modules/AuthModule/routes/verify.vue

@@ -2,17 +2,15 @@
     <h1 class="h2 h2--small">Verify your email address</h1>
 
     <form class="form" @submit.prevent="submit">
-        <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+        <p class="mt-2 mb-0 color-highlight">
             <strong class="">Email: {{ user?.email }}</strong>
         </p>
-        <p class="AM-mt-0.5">
+        <p class="mt-0.5">
             <strong>Please check your inbox</strong> for a Verification email
             from {{ $root.appName }}. Click the link in that email to verify
             your email address and complete your registration.
         </p>
-        <p class="AM-mt-0.5 AM-mb-0">
-            Haven’t received the email after 10 minutes?
-        </p>
+        <p class="mt-0.5 mb-0">Haven’t received the email after 10 minutes?</p>
 
         <el-input
             class="hidden"
@@ -26,7 +24,7 @@
         />
 
         <elButton
-            class="AM-mt AM-mb-3"
+            class="mt mb-3"
             native-type="submit"
             type="primary"
             :disabled="form.processing"
@@ -36,7 +34,7 @@
             Re-send verification link
         </elButton>
 
-        <p class="disclaimer AM-mt-1.5">
+        <p class="disclaimer mt-1.5">
             Having trouble singing in?
             <a :href="$store.state.auth.contact" class="underline"
                 >Contact us</a
@@ -47,6 +45,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
 
 export default {
     components: {
@@ -74,7 +73,7 @@ export default {
 
                 await this.form.post("/email/verification-notification");
 
-                this.$notify({
+                ElNotification({
                     type: "success",
                     message: "Email has been re-sent",
                     duration: 10000,
@@ -82,30 +81,28 @@ export default {
                 });
             } catch (e) {
                 if (e.response && e.response.status === 429) {
-                    this.notification = this.$notify({
+                    this.notification = ElNotification({
                         type: "warning",
                         message: "Please allow 10 minutes before re-requesting",
                         duration: 0,
                         class: "el-notification--warning el-notification--right-override",
                     });
                 } else if (e.response && e.response.status === 422) {
-                    this.notification = this.$notify({
+                    this.notification = ElNotification({
                         type: "error",
                         message: e.response.data.message,
                         duration: 0,
                         class: "el-notification--error el-notification--right-override",
                     });
                 } else {
-                    this.$root.errors(e);
+                    console.log(e);
                 }
             }
         },
     },
 
     async mounted() {
-        this.user = await this.$store.dispatch("getUser", {
-            errors: this.$root.errors,
-        });
+        this.user = await this.$store.dispatch("getUser");
 
         this.form.email = this.user.email;
     },

package/_Build/vue/modules/resource/Children/create.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
+        <div class="grid__1/1">
+            <div class="grid__1/1 mb-4">
+                <h2 class="h1">Create {{ resource.singular }}</h2>
+            </div>
+            <div :class="['mt', resource.form.class]">
+                <component
+                    :is="resource.form.component ?? 'XForm'"
+                    ref="form"
+                    :form="form"
+                    :submit="submit"
+                    :method="method"
+                    :resource="resource"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        XForm: require("./partials/form.vue").default,
+    },
+
+    props: {
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            form: null,
+            method: "post",
+        };
+    },
+
+    beforeMount() {
+        this.form = new Form(this.resource.form.fields(this), {
+            resetOnSuccess: false,
+        });
+    },
+
+    methods: {
+        async submit() {
+            if (this.resource.form.submit) {
+                await this.resource.form.submit(this);
+            } else {
+                const hold = { ...this.form.data() };
+
+                try {
+                    this.form.populate(this.resource.form.preparation(this));
+
+                    let res = await this.form.post(
+                        `${this.resource.api.endpoint(this)}`,
+                    );
+
+                    this.emitter?.emit("resource:saved", {
+                        resource: this.resource,
+                        model: res.data,
+                    });
+
+                    const redirect = this.resource.form.redirect
+                        ? this.resource.form.redirect({
+                              resource: this.resource,
+                              model: res.data,
+                              form: this.form,
+                              $store: this.$store,
+                              $router: this.$router,
+                              method: this.method,
+                          })
+                        : {
+                              name: `${this.resource.routeName}.show`,
+                              params: {
+                                  [this.resource.id]: res.data.id,
+                              },
+                          };
+
+                    this.$router.replace(redirect);
+                } catch (e) {
+                    console.log(e);
+                } finally {
+                    if (
+                        !this.form.successful ||
+                        !this.form.__options.resetOnSuccess
+                    ) {
+                        this.form.populate(hold);
+                    }
+                }
+            }
+        },
+    },
+};
+</script>