@fishawack/lab-velocity 2.0.0-beta.1 → 2.0.0-beta.11

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

@@ -0,0 +1,91 @@
+<template>
+    <div class="relative">
+        <section id="forgotPasswordForm">
+            <h1 class="h2 h2--small">Reset password</h1>
+            <form class="form" @submit.prevent="submit">
+                <p class="mt-2">
+                    Enter the email address associated with your account to
+                    continue.
+                </p>
+
+                <el-input
+                    v-if="!form.successful"
+                    class="mt-3 mb-3"
+                    v-model="form.email"
+                    label="Email "
+                    placeholder="Enter email address"
+                    name="email"
+                    :error="form.errors"
+                    type="email"
+                    required
+                />
+
+                <elButton
+                    native-type="submit"
+                    type="primary"
+                    :disabled="
+                        form.processing || !form.email || form.email?.length < 5
+                    "
+                    :loading="form.processing"
+                    @click="onSubmit"
+                >
+                    Continue
+                </elButton>
+
+                <p class="disclaimer mt-3">
+                    <router-link
+                        class="color-1 underline"
+                        :to="{ name: 'auth.login' }"
+                    >
+                        Back to Sign in
+                    </router-link>
+                </p>
+            </form>
+        </section>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
+    data: () => ({
+        form: new Form(
+            {
+                email: "",
+            },
+            { resetOnSuccess: false },
+        ),
+    }),
+
+    methods: {
+        async onSubmit() {
+            try {
+                await this.form.post("/forgot-password");
+
+                this.$router.push({
+                    name: "auth.success-forgot",
+                    query: { email: this.form.email },
+                });
+            } catch (e) {
+                console.log(e);
+            }
+        },
+    },
+
+    mounted() {
+        this.form.email = this.$route.query.email;
+    },
+
+    metaInfo() {
+        return {
+            title: "Forgot Password",
+        };
+    },
+};
+</script>

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

@@ -0,0 +1,139 @@
+<template>
+    <h1 class="h2 h2--small">Sign in</h1>
+    <p class="mb-3 mt-2">Enter your password to continue.</p>
+
+    <form @submit.prevent="submit" class="form" id="memberLoginForm">
+        <el-input
+            class="mb-3"
+            label="Email"
+            placeholder="Enter your email address"
+            name="email"
+            type="email"
+            required
+            v-model="form.email"
+            :error="form.errors"
+        />
+
+        <el-input
+            class="mb-3"
+            label="Password"
+            placeholder="Enter your password"
+            name="password"
+            type="password"
+            required
+            v-model="form.password"
+            :error="form.errors"
+        />
+
+        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+        <div style="position: absolute; left: -5000px" aria-hidden="true">
+            <input
+                ref="honeypot"
+                type="text"
+                name="b_0e1715593ad9366bc5d3ad8be_7aca058f12"
+                tabindex="-1"
+                value=""
+            />
+        </div>
+
+        <el-button
+            native-type="submit"
+            type="primary"
+            :disabled="
+                loading || form.email?.length < 5 || form.password?.length < 8
+            "
+            @click="onSubmit"
+        >
+            Continue
+        </el-button>
+
+        <p class="disclaimer mt-3">
+            Having trouble signing in?
+            <router-link
+                class="color-1 underline"
+                :to="{ name: 'auth.forgot' }"
+            >
+                Reset password
+            </router-link>
+            or
+            <a :href="$store.state.auth.contact" class="underline"
+                >Contact us</a
+            >
+        </p>
+    </form>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: this.$route.query.email ?? "",
+                    password: "",
+                    device_name: "Mobile device",
+                    remember: true,
+                },
+                { resetOnSuccess: false },
+            ),
+            loading: false,
+        };
+    },
+
+    methods: {
+        async onSubmit() {
+            if (this.loading) return;
+
+            this.loading = true;
+
+            try {
+                const res = await this.form.post("/login");
+
+                if (res["logged-in"]) {
+                    try {
+                        await this.$store.dispatch("logout");
+                    } catch (e) {}
+
+                    await this.form.post("/login");
+                }
+
+                await this.postLogin();
+            } catch (e) {
+                console.log(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async postLogin() {
+            const { data: user } = await this.$store.dispatch("getUser");
+
+            if (window.dataLayer) {
+                window.dataLayer.push({ event: "login", user });
+            }
+
+            if (this.$store.state.auth.intended) {
+                this.$router.push(this.$store.state.auth.intended);
+            } else {
+                this.$router.push({
+                    name: this.$store.state.auth.redirect,
+                });
+            }
+
+            this.$store.commit("setIntended", null);
+        },
+    },
+
+    mounted() {
+        if (this.$route.query.authenticated) {
+            this.postLogin();
+        }
+    },
+};
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+    <!-- Set Spinner -->
+    <div class="mx-auto">
+        <VLoader class="mx-auto" />
+    </div>
+</template>
+
+<script>
+export default {
+    components: {
+        VLoader: require("../../../components/layout/Loader.vue").default,
+    },
+    data() {
+        return {};
+    },
+
+    methods: {
+        async postLogin() {
+            const { data: user } = await this.$store.dispatch("getUser");
+
+            if (window.dataLayer) {
+                window.dataLayer.push({ event: "login", user });
+            }
+
+            if (this.$store.state.auth.intended) {
+                this.$router.push(this.$store.state.auth.intended);
+            } else {
+                this.$router.push({ name: this.$store.state.auth.redirect });
+            }
+
+            this.$store.commit("setIntended", null);
+        },
+    },
+
+    mounted() {
+        this.postLogin();
+    },
+};
+</script>

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

@@ -0,0 +1,21 @@
+<template>
+    <!-- Set Spinner -->
+    <div class="mx-auto">
+        <VLoader class="mx-auto" />
+        <p v-text="`Logging in...`" />
+    </div>
+</template>
+
+<script>
+export default {
+    mounted() {
+        const { authenticated } = this.$store.getters;
+
+        if (!authenticated) {
+            window.location = `${process.env.APP_URL}/hydrate/sso/redirect`;
+        } else {
+            window.location = `${process.env.APP_URL}/`;
+        }
+    },
+};
+</script>

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

@@ -0,0 +1,132 @@
+<template>
+    <template v-if="stage === 1">
+        <h1 class="h2 h2--small">Sign in</h1>
+        <p class="mb-3 mt-2">Enter your email address to continue.</p>
+
+        <form @submit.prevent="submit" class="form" id="memberLoginForm">
+            <el-input
+                class="mb-3"
+                label="Email"
+                placeholder="Enter your email address"
+                name="email"
+                type="email"
+                required
+                v-model="form.email"
+                :error="form.errors"
+            />
+
+            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+            <div style="position: absolute; left: -5000px" aria-hidden="true">
+                <input
+                    ref="honeypot"
+                    type="text"
+                    name="b_0e1715593ad9366bc5d3ad8be_7aca058f12"
+                    tabindex="-1"
+                    value=""
+                />
+            </div>
+
+            <el-button
+                native-type="submit"
+                type="primary"
+                :disabled="loading || !isValidEmail(form.email)"
+                @click="onSubmit"
+            >
+                Continue
+            </el-button>
+
+            <p class="disclaimer mt-3">
+                Having trouble signing in?
+                <a :href="$store.state.auth.contact" class="underline"
+                    >Contact us</a
+                >
+            </p>
+        </form>
+    </template>
+    <template v-else>
+        <h1 class="h2 h2--small">Sign in with SSO</h1>
+        <p class="mt-2">
+            Redirecting you to your organisation’s Single Sign-On (SSO) gateway
+            <span class="color-highlight">in {{ countdown }} seconds...</span>
+        </p>
+        <p class="disclaimer mt-3">
+            <a :href="redirect_url" class="underline">Go to SSO gateway</a>
+        </p>
+    </template>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: "",
+                    device_name: "Mobile device",
+                    remember: true,
+                },
+                { resetOnSuccess: false },
+            ),
+            countdown: 3,
+            loading: false,
+            redirect_url: null,
+            stage: 1,
+        };
+    },
+
+    methods: {
+        async onSubmit() {
+            if (this.loading) return;
+
+            this.loading = true;
+
+            try {
+                const res = await this.form.post(`/hydrate/sso/check`);
+                if (res["redirect_url"]) {
+                    this.redirect_url = res["redirect_url"];
+                    this.setRedirect();
+                } else {
+                    this.$router.push({
+                        name: "auth.logincreds",
+                        query: { email: this.form.email },
+                    });
+                }
+            } catch (e) {
+                console.log(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+        setRedirect() {
+            this.stage = 2;
+            let vue = this;
+            setTimeout(function () {
+                vue.setCountdown();
+            }, 1000);
+        },
+        setCountdown() {
+            this.countdown--;
+            if (this.countdown === 0) {
+                window.location = this.redirect_url;
+            } else {
+                let vue = this;
+                setTimeout(function () {
+                    vue.setCountdown();
+                }, 1000);
+            }
+        },
+        isValidEmail(email) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return emailRegex.test(email);
+        },
+    },
+
+    mounted() {},
+};
+</script>

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

@@ -0,0 +1,19 @@
+<script>
+export default {
+    metaInfo() {
+        return {
+            title: "Logout",
+        };
+    },
+
+    async mounted() {
+        try {
+            await this.$store.dispatch("logout");
+        } catch {
+            /* empty */
+        } finally {
+            this.$router.push({ name: "auth.login" });
+        }
+    },
+};
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+    <p v-text="done ? 'Logged out' : 'Logging out...'" />
+</template>
+
+<script>
+export default {
+    metaInfo() {
+        return {
+            title: "Logout",
+        };
+    },
+
+    data: () => ({
+        done: false,
+    }),
+
+    async mounted() {
+        try {
+            await this.$store.dispatch("logout");
+        } finally {
+            this.done = true;
+        }
+    },
+};
+</script>

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

@@ -0,0 +1,171 @@
+<template>
+    <h1 class="h2 h2--small">Register</h1>
+    <p class="mb-3 mt-2">
+        Please enter your personal details to complete your registration.
+    </p>
+
+    <form
+        @submit.prevent="submit"
+        :class="form.errors && form.errors.any() ? 'form error' : 'form'"
+        id="memberLoginForm"
+    >
+        <el-input
+            class="mb-2"
+            label="Full name"
+            placeholder="Enter your full name"
+            name="name"
+            required
+            v-model="form.name"
+            :error="form.errors"
+        />
+
+        <el-input
+            class="mb-2"
+            label="Email"
+            placeholder="Enter your email address"
+            name="email"
+            type="email"
+            required
+            v-model="form.email"
+            :error="form.errors"
+        />
+
+        <el-input
+            class="mb-2"
+            label="Password"
+            name="password"
+            placeholder="Create a unique password"
+            autocomplete="new-password"
+            type="password"
+            required
+            v-model="form.password"
+            :error="form.errors"
+        />
+
+        <VPasswordValidation
+            :password="form.password"
+            @passwordValid="updatePasswordValidity"
+        />
+
+        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+        <div style="position: absolute; left: -5000px" aria-hidden="true">
+            <input
+                ref="honeypot"
+                type="text"
+                name="b_0e1715593ad9366bc5d3ad8be_7aca058f12"
+                tabindex="-1"
+                value=""
+            />
+        </div>
+
+        <elButton
+            native-type="submit"
+            type="primary"
+            :disabled="
+                loading ||
+                form.name?.length < 1 ||
+                form.email?.length < 5 ||
+                !isPasswordValid
+            "
+            @click="onSubmit"
+        >
+            Register
+        </elButton>
+
+        <p class="disclaimer mt-3">
+            Having trouble registering?
+            <a :href="$store.state.auth.contact" class="underline"
+                >Contact us</a
+            >
+        </p>
+    </form>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
+
+export default {
+    data() {
+        return {
+            form: new Form(
+                {
+                    name: "",
+                    email: "",
+                    password: "",
+                },
+                { resetOnSuccess: false },
+            ),
+            loading: false,
+            isPasswordValid: false,
+        };
+    },
+
+    methods: {
+        async onSubmit() {
+            if (this.loading) return;
+
+            this.loading = true;
+
+            try {
+                const res = await this.form.post("/register");
+
+                if (res["logged-in"]) {
+                    try {
+                        await this.$store.dispatch("logout");
+                    } catch (e) {}
+
+                    await this.form.post("/register");
+                }
+                if (res["redirect"]) {
+                    // Redirect here
+                    this.$router.push({
+                        name: `auth.login`,
+                        query: { company: res["company"] },
+                    });
+                    ElNotification.error({
+                        title: "Domain is SSO enabled",
+                        message: "Sign in with your company email address",
+                        duration: 10000,
+                    });
+                } else {
+                    await this.postLogin();
+                }
+            } catch (e) {
+                console.log(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async postLogin() {
+            const { data: user } = await this.$store.dispatch("getUser");
+
+            if (window.dataLayer) {
+                window.dataLayer.push({ event: "login", user });
+            }
+
+            if (this.$store.state.auth.intended) {
+                this.$router.push(this.$store.state.auth.intended);
+            } else {
+                this.$router.push({
+                    name: `auth.verify`,
+                });
+                // Problem Here
+            }
+
+            this.$store.commit("setIntended", null);
+        },
+        updatePasswordValidity(isValid) {
+            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>