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

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

@@ -0,0 +1,78 @@
+<template>
+    <h1 class="h2 h2--small">Sorry, your password reset has expired</h1>
+
+    <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+        <strong class="">Email: {{ form?.email }}</strong>
+    </p>
+    <p class="AM-mt-0.5">
+        For security, password reset requests are only
+        <strong>active for 1&nbsp;hour</strong>. If you still want to reset your
+        password, please request a new password reset-link.
+    </p>
+
+    <form class="form" @submit.prevent="submit">
+        <el-input
+            class="hidden"
+            v-model="form.email"
+            label="Email address"
+            name="email"
+            :error="form.errors"
+            type="email"
+            placeholder="Email "
+            required
+        />
+        <elButton
+            native-type="submit"
+            type="primary"
+            :disabled="form.processing"
+            :loading="form.processing"
+            @click="onSubmit"
+        >
+            Request new reset-link
+        </elButton>
+
+        <p class="disclaimer AM-mt-3">
+            <router-link class="color-1 underline" :to="{ name: 'auth.login' }">
+                Back to Sign in
+            </router-link>
+        </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: () => ({
+        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) {
+                this.$root.errors(e);
+            }
+        },
+    },
+
+    mounted() {
+        this.form.email = this.$route.query.email;
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/expired-verification.vue

@@ -0,0 +1,100 @@
+<template>
+    <h1 class="h2 h2--small">Verification link expired</h1>
+
+    <form class="form" @submit.prevent="submit">
+        <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+            <strong class="">Email: {{ form?.email }}</strong>
+        </p>
+        <p class="AM-mt-0.5">
+            This email verification link has expired. Not to worry, we can email
+            you a new one.
+        </p>
+
+        <el-input
+            class="AM-mt-2 AM-mb-2.5 hidden"
+            v-model="form.email"
+            label="Email address"
+            name="email"
+            :error="form.errors"
+            type="email"
+            placeholder="Email "
+            required
+        />
+
+        <elButton
+            native-type="submit"
+            type="primary"
+            :disabled="form.processing"
+            :loading="form.processing"
+            @click="onSubmit"
+        >
+            Re-send verification link
+        </elButton>
+    </form>
+
+    <p class="disclaimer AM-mt-3">
+        Having trouble singing in?
+        <a :href="$store.state.auth.contact" class="underline">Contact us</a>
+    </p>
+</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 },
+        ),
+        notification: null,
+    }),
+
+    methods: {
+        async onSubmit() {
+            try {
+                if (this.notification) {
+                    this.notification.close();
+                    this.notification = null;
+                }
+
+                await this.form.post("/email/verification-notification");
+
+                this.$notify.success({
+                    message: "Email has been re-sent",
+                    duration: 10000,
+                    class: "el-notification--success el-notification--right-override",
+                });
+            } catch (e) {
+                if (e.response && e.response.status === 429) {
+                    this.notification = this.$notify({
+                        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({
+                        type: "error",
+                        message: e.response.data.message,
+                        duration: 0,
+                        class: "el-notification--error el-notification--right-override",
+                    });
+                } else {
+                    this.$root.errors(e);
+                }
+            }
+        },
+    },
+
+    async mounted() {
+        this.form.email = this.$route.query.email;
+    },
+};
+</script>

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

@@ -0,0 +1,152 @@
+<template>
+    <div class="relative">
+        <section id="resetPasswordForm">
+            <h1
+                class="h2 h2--small"
+                v-html="!form.successful ? 'Welcome' : 'Success'"
+            />
+            <form class="form" @submit.prevent="submit">
+                <div v-if="!form.successful">
+                    <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                        <strong class=""
+                            >Email:
+                            {{ $store.state?.auth?.user?.email }}</strong
+                        >
+                    </p>
+                    <p class="AM-mt-0.5">
+                        <strong
+                            >Hello {{ $store.state?.auth?.user?.name }}</strong
+                        >, and welcome to {{ $root.appName }}. To maintain
+                        security, anyone signing in with a one-time-password
+                        must <strong>create a new password</strong> the first
+                        time they access the {{ $root.appName }} portal.
+                    </p>
+                    <el-input
+                        v-model="form.password"
+                        class="AM-mt-2"
+                        label="New Password"
+                        placeholder="Enter new password"
+                        name="password"
+                        :error="form.errors"
+                        type="password"
+                        autocomplete="new-password"
+                        required
+                    />
+
+                    <VPasswordValidation
+                        :password="form.password"
+                        @passwordValid="updatePasswordValidity"
+                    />
+
+                    <elButton
+                        native-type="submit"
+                        class="AM-mt-3"
+                        type="primary"
+                        :disabled="form.processing || !isPasswordValid"
+                        :loading="form.processing"
+                        @click="onSubmit"
+                    >
+                        <span v-text="'Update password'" />
+                    </elButton>
+                </div>
+                <div v-else>
+                    <strong class=""
+                        >Email: {{ $store.state.auth?.user?.email }}</strong
+                    >
+                    <p v-text="`Your password has been updated.`" />
+                    <elButton type="primary" @click="handleButton">
+                        Continue
+                    </elButton>
+                </div>
+            </form>
+        </section>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    data() {
+        return {
+            form: new Form(
+                {
+                    email: this.$store.state.auth.user?.email,
+                    password: "",
+                },
+                { resetOnSuccess: false },
+            ),
+            isPasswordValid: false,
+        };
+    },
+
+    mounted() {
+        this.$store.dispatch("getUser", {
+            errors: this.$root.errors,
+        });
+    },
+
+    methods: {
+        async onSubmit() {
+            this.loading = true;
+
+            try {
+                await this.form.put("/user/password");
+                await this.login();
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+        async login() {
+            this.loading = true;
+
+            try {
+                const res = await this.form.post("/login");
+
+                if (res["logged-in"]) {
+                    try {
+                        await this.$store.dispatch("logout", {
+                            errors: this.$root.errors,
+                        });
+                    } catch (e) {}
+
+                    await this.form.post("/login");
+                }
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+                await this.postLogin();
+            }
+        },
+
+        async postLogin() {
+            const { data: user } = await this.$store.dispatch("getUser", {
+                errors: this.$root.errors,
+            });
+        },
+
+        updatePasswordValidity(isValid) {
+            this.isPasswordValid = isValid;
+        },
+        handleButton() {
+            this.$emit("close");
+        },
+    },
+
+    metaInfo() {
+        return {
+            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/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="AM-mt-2">
+                    Enter the email address associated with your account to
+                    continue.
+                </p>
+
+                <el-input
+                    v-if="!form.successful"
+                    class="AM-mt-3 AM-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 AM-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) {
+                this.$root.errors(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,143 @@
+<template>
+    <h1 class="h2 h2--small">Sign in</h1>
+    <p class="AM-mb-3 AM-mt-2">Enter your password to continue.</p>
+
+    <form @submit.prevent="submit" class="form" id="memberLoginForm">
+        <el-input
+            class="AM-mb-3"
+            label="Email"
+            placeholder="Enter your email address"
+            name="email"
+            type="email"
+            required
+            v-model="form.email"
+            :error="form.errors"
+        />
+
+        <el-input
+            class="AM-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 AM-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", {
+                            errors: this.$root.errors,
+                        });
+                    } catch (e) {}
+
+                    await this.form.post("/login");
+                }
+
+                await this.postLogin();
+            } catch (e) {
+                this.$root.errors(e);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async postLogin() {
+            const { data: user } = await this.$store.dispatch("getUser", {
+                errors: this.$root.errors,
+            });
+
+            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,41 @@
+<template>
+    <!-- Set Spinner -->
+    <div class="mx-auto">
+        <VLoader class="mx-auto" />
+    </div>
+</template>
+
+<script>
+export default {
+    components: {
+        VLoader: require("../../layout/Loader.vue").default,
+    },
+    data() {
+        return {};
+    },
+
+    methods: {
+        async postLogin() {
+            const { data: user } = await this.$store.dispatch("getUser", {
+                errors: this.$root.errors,
+            });
+
+            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>