@fishawack/lab-velocity 1.1.1 → 1.2.0

package/AuthModule/components/VPasswordValidation.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="mt-2">
-        <p class="font-700 mb-0.5">Your password must contain:</p>
+    <div class="">
+        <p class="font-700 AM-mb-0.5">Your password must contain:</p>
         <p class="flex m-0">
             <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-7"
                 v-if="passwordLengthValid" />
@@ -12,7 +12,7 @@
             <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-3" v-else />
             At least one letter
         </p>
-        <p class="flex mt-0 ml-0 mr-0 mb-3">
+        <p class="flex AM-mt-0 ml-0 mr-0 AM-mb-3">
             <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-7" v-if="hasNumberOrSymbol" />
             <GSvg name="icon-list-tick" embed artboard class="mr-0.5 icon icon--0.4 fill-3" v-else />
             At least one number or symbol

package/AuthModule/js/AuthAxios.js

@@ -0,0 +1,25 @@
+import axios from "axios";
+
+export default function setAxiosDefaults() {
+    axios.defaults.baseURL = process.env.APP_URL;
+    axios.defaults.withCredentials = true;
+    axios.defaults.withXSRFToken = true;
+}
+
+// Some libraries will utilize the globally available version of axios so make sure it's our exact axios instance
+// Redirect to login page if 401
+axios.interceptors.response.use(null, (error) => {
+    if (error.response) {
+        
+        if (error.response.status === 401) {
+            store.commit("setAuth", false);
+            router.push({ name: `${store.state.auth.authBase}.login` });
+        }
+
+        if (error.response.status === 404) {
+            router.push({ name: "index" });
+        }
+    }
+
+    return Promise.reject(error);
+});

package/AuthModule/js/{routes.js → AuthRoutes.js}

@@ -1,6 +1,6 @@
 "use strict";
 export function authRoutes(node, store, nested = 'auth') {
-    return {
+    return [{
         path: '/'+nested,
         name: nested,
         component: require("../routes/container.vue").default,
@@ -100,5 +100,5 @@ export function authRoutes(node, store, nested = 'auth') {
             footer: false,
             fullpageModal: true,
         },
-    }
+    }]
 }

package/AuthModule/js/AuthStore.js

@@ -0,0 +1,64 @@
+"use strict";
+import axios from "axios";
+import { createStore } from "vuex";
+import VuexPersistedState from 'vuex-persistedstate';
+
+export function initAuthStore(store) {
+
+    store.registerModule('auth',{
+        state() {
+            return {
+                authBase : process.env.HYDRATE_ROUTE ?? 'auth',
+                authenticated : false,
+                intended: null,
+                user: null,
+                redirect: process.env.HYDRATE_REDIRECT ?? 'index'
+            }
+        },
+
+        mutations: {
+            setAuth(state, value) {
+                state.authenticated = value;
+    
+                if (!value) {
+                    this.commit("setUser", null);
+                }
+            },
+            setUser(state, value) {
+                console.log("we are setting the user");
+                console.log(value);
+                state.user = value;
+    
+                if(window.dataLayer){
+                    window.dataLayer.push({ event: "logic", user: value });
+                }
+            },
+            setIntended(state, value) {
+                state.intended = value;
+            },
+        },
+
+        actions: {
+            getUser({ commit }, { errors, query = "" }) {
+                return axios
+                    .get(`/api/user/self${query}`, {
+                        params: {
+                            include: "company"
+                        }
+                    })
+                    .then((res) => {
+                        commit("setUser", res.data.data);
+                        return res.data.data;
+                    })
+                    .catch(errors);
+            },
+    
+            logout({ commit }, { errors }) {
+                commit("setAuth", false);
+                commit("setUser", null);
+    
+                return axios.post("/logout");
+            },
+        },
+    });
+}

package/AuthModule/routes/account-exists.vue

@@ -3,19 +3,20 @@
         <section id="resetPasswordForm">
             <h1 class="h2">Account already exists</h1>
             
-            <p class="mt mb-0 color-21">
+            <p class="mt AM-mb-0 color-21">
                 <strong class="">Company: {{ $route.query.company }}</strong>
             </p>
-            <p class="mt-0.5">
+            <p class="AM-mt-0.5">
                 Your company already has an active account.
             </p>
 
-            <router-link
-                :to="{name: `${$store.state.authBase}.login`}"
-                class="button button--primary px-2"
+            <elButton
+                tag="router-link"
+                :to="{name: `${$store.state.auth.authBase}.login`}"
+                type="primary"
             >
                 <span v-text="'Sign in'" />
-            </router-link>
+            </elButton>
         </section>
     </div>
 </template>
@@ -27,5 +28,8 @@ export default {
             title: "Account Exists | Error",
         };
     },
+    components: {
+        elButton: require('../../basic/Button.vue').default,
+    }
 };
 </script>

package/AuthModule/routes/container.vue

@@ -17,8 +17,6 @@
                 <router-view />
             </div>
         </section>
-        <div class="pin right-0 bottom-0 mr-3">
-        </div>
     </div>
 </template>
 

package/AuthModule/routes/expired-reset.vue

@@ -1,17 +1,17 @@
 <template>
-    <h1 class="h2">Sorry, your password reset has expired</h1>
+    <h1 class="h2 h2--small">Sorry, your password reset has expired</h1>
 
-    <p class="mt mb-0 color-21">
+    <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
         <strong class="">Email: {{ form?.email }}</strong>
     </p>
-    <p class="mt-0.5">
+    <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="input--full mt-2 mb-2.5 hidden"
+            class="hidden"
             v-model="form.email"
             label="Email address"
             name="email"
@@ -20,17 +20,17 @@
             placeholder="Email "
             required
         />
-        <button
-            type="submit"
+        <elButton
+            type="primary"
             :disabled="form.processing"
             :loading="form.processing"
-            class="button button--primary"
+            @click="onSubmit"
         >
             Request new reset-link
-        </button>
+        </elButton>
 
-        <p class="disclaimer mt-2">
-            <router-link class="color-1 underline" :to="{ name: `${$store.state.authBase}.login` }">
+        <p class="disclaimer AM-mt-3">
+            <router-link class="color-1 underline" :to="{ name: `${$store.state.auth.authBase}.login` }">
                 Back to Sign in
             </router-link>
         </p>
@@ -39,11 +39,11 @@
 
 <script>
 import Form from "form-backend-validation";
-import { default as elInput} from "../../form/basic.vue";
 
 export default {
     components: {
-        elInput: elInput,
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
     data: () => ({
         form: new Form(
@@ -55,12 +55,12 @@ export default {
     }),
 
     methods: {
-        async submit() {
+        async onSubmit() {
             try {
                 await this.form.post("/forgot-password");
 
                 this.$router.push({
-                    name: `${this.$store.state.authBase}.success-forgot`,
+                    name: `${this.$store.state.auth.authBase}.success-forgot`,
                     query: { email: this.form.email },
                 });
             } catch (e) {

package/AuthModule/routes/expired-verification.vue

@@ -1,16 +1,16 @@
 <template>
-    <h1 class="h2">Verification link expired</h1>
+    <h1 class="h2 h2--small">Verification link expired</h1>
 
     <form class="form" @submit.prevent="submit">
-        <p class="mt mb-0 color-21">
+        <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
             <strong class="">Email: {{ form?.email }}</strong>
         </p>
-        <p class="mt-0.5">
+        <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="mt-2 mb-2.5 hidden"
+            class="AM-mt-2 AM-mb-2.5 hidden"
             v-model="form.email"
             label="Email address"
             name="email"
@@ -20,17 +20,17 @@
             required
         />
 
-        <button
-            type="submit"
+        <elButton
+            type="primary"
             :disabled="form.processing"
             :loading="form.processing"
-            class="button button--primary"
+            @click="onSubmit"
         >
             Re-send verification link
-        </button>
+        </elButton>
     </form>
 
-    <p class="disclaimer mt-2">
+    <p class="disclaimer AM-mt-3">
         Having trouble singing in?
         <a :href="contact" class="underline">Contact us</a>
     </p>
@@ -38,11 +38,11 @@
 
 <script>
 import Form from "form-backend-validation";
-import { default as elInput} from "../../form/basic.vue";
 
 export default {
     components: {
-        elInput: elInput,
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
     data: () => ({
         form: new Form(
@@ -56,7 +56,7 @@ export default {
     }),
 
     methods: {
-        async submit() {
+        async onSubmit() {
             try {
                 if (this.notification) {
                     this.notification.close();

package/AuthModule/routes/force-reset.vue

@@ -4,15 +4,15 @@
             <h1 class="h2">Welcome</h1>
             <form class="form" @submit.prevent="submit">
                 <div v-if="!form.successful">
-                    <p class="mt mb-0 color-21">
-                        <strong class="">Email: {{ $store.state.user?.email }}</strong>
+                    <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                        <strong class="">Email: {{ $store.state?.auth?.user?.email }}</strong>
                     </p>
-                    <p class="mt-0.5">
-                        <strong>Hello {{ $store.state.user?.name }}</strong>, and welcome to Policy 360. To maintain security, anyone signing in with a one-time-password must <strong>create a new password</strong> the first time they access the Policy 360 portal.
+                    <p class="AM-mt-0.5">
+                        <strong>Hello {{ $store.state?.auth?.user?.name }}</strong>, and welcome to Policy 360. To maintain security, anyone signing in with a one-time-password must <strong>create a new password</strong> the first time they access the Policy 360 portal.
                     </p>
                     <el-input
                         v-model="form.password"
-                        class="mt-2"
+                        class="AM-mt-2"
                         label="New Password"
                         placeholder="Enter new password"
                         name="password"
@@ -24,23 +24,24 @@
 
                     <VPasswordValidation :password="form.password" @passwordValid="updatePasswordValidity" />
 
-                    <button
-                        type="submit"
+                    <elButton
+                        class="AM-mt-3"
+                        type="primary"
                         :disabled="form.processing || !isPasswordValid"
                         :loading="form.processing"
-                        class="button button--primary mt-1.5"
+                        @click="onSubmit"
                     >
                         <span v-text="'Update password'" />
-                    </button>
+                    </elButton>
                 </div>
                 <div v-else>
                     <h4 class="mt" v-text="`Success!`" />
                     <strong class="">Email: {{ user?.email }}</strong>
                     <p v-text="`Your password has been updated.`" />
-                    <p class="disclaimer mb-2.5">
+                    <p class="disclaimer AM-mb-2.5">
                         <router-link
                             class="color-1 underline"
-                            :to="{ name: `${$store.state.authBase}.login` }"
+                            :to="{ name: `${$store.state.auth.authBase}.login` }"
                         >
                             Continue
                         </router-link>
@@ -53,7 +54,7 @@
 
 <script>
 import Form from "form-backend-validation";
-import { default as elInput} from "../../form/basic.vue";
+import store from "../js/AuthStore";
 
 export default {
     data() {
@@ -77,7 +78,7 @@ export default {
     },
 
     methods: {
-        async submit() {
+        async onSubmit() {
             this.loading = true;
 
             try {
@@ -104,7 +105,7 @@ export default {
 
                     await this.form.post("/login");
                 }
-                this.$router.push({name: `${this.$store.state.authBase}.callback`,query: {authenticated: true}});
+                this.$router.push({name: `${this.$store.state.auth.authBase}.callback`,query: {authenticated: true}});
 
             } catch (e) {
                 this.$root.errors(e);
@@ -126,7 +127,8 @@ export default {
 
     components: {
         VPasswordValidation: require("./../components/VPasswordValidation.vue").default,
-        elInput: elInput,
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
 };
 </script>

package/AuthModule/routes/forgot.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="relative">
         <section id="forgotPasswordForm">
-            <h1 class="h2">Reset password</h1>
+            <h1 class="h2 h2--small">Reset password</h1>
             <form class="form" @submit.prevent="submit">
-                <p class="mt-0.5">
+                <p class="AM-mt-2">
                     Enter the email address associated with your account to continue.
                 </p>
 
                 <el-input
                     v-if="!form.successful"
-                    class="mt-2 mb-2.5"
+                    class="AM-mt-3 AM-mb-3"
                     v-model="form.email"
                     label="Email "
                     placeholder="Enter email address"
@@ -19,19 +19,19 @@
                     required
                 />
 
-                <button
-                    type="submit"
+                <elButton
+                    type="primary"
                     :disabled="form.processing || !form.email || form.email?.length < 5"
                     :loading="form.processing"
-                    class="button button--primary"
+                    @click="onSubmit"
                 >
                     Continue
-                </button>
+                </elButton>
 
-                <p class="disclaimer mt-2">
+                <p class="disclaimer AM-mt-3">
                     <router-link
                         class="color-1 underline"
-                        :to="{ name: `${$store.state.authBase}.login` }"
+                        :to="{ name: `${$store.state.auth.authBase}.login` }"
                     >
                         Back to Sign in
                     </router-link>
@@ -43,11 +43,11 @@
 
 <script>
 import Form from "form-backend-validation";
-import { default as elInput} from "../../form/basic.vue";
 
 export default {
     components: {
-        elInput:elInput,
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
 
     data: () => ({
@@ -60,12 +60,12 @@ export default {
     }),
 
     methods: {
-        async submit() {
+        async onSubmit() {
             try {
                 await this.form.post("/forgot-password");
 
                 this.$router.push({
-                    name: `${this.$store.state.authBase}.success-forgot`,
+                    name: `${this.$store.state.auth.authBase}.success-forgot`,
                     query: { email: this.form.email },
                 });
             } catch (e) {

package/AuthModule/routes/login.vue

@@ -1,10 +1,10 @@
 <template>
-    <h1 class="h2">Sign in</h1>
-    <p class="mb-2">Enter your password to continue.</p>
+    <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="mb-2.5"
+            class="AM-mb-3"
             label="Email"
             placeholder="Enter your email address"
             name="email"
@@ -15,7 +15,7 @@
         />
 
         <el-input
-            class="mb-2.5"
+            class="AM-mb-3"
             label="Password"
             placeholder="Enter your password"
             name="password"
@@ -36,17 +36,17 @@
             />
         </div>
 
-        <button
-            type="submit"
+        <el-button
+            type="primary"
             :disabled="loading || (form.email?.length < 5 || form.password?.length < 8 )"
-            class="button button--primary"
+            @click="onSubmit"
         >
             Continue
-        </button>
+        </el-button>
 
-        <p class="disclaimer mt-2">
+        <p class="disclaimer AM-mt-3">
             Having trouble signing in?
-            <router-link class="color-1 underline" :to="{ name: `${$store.state.authBase}.forgot` }">
+            <router-link class="color-1 underline" :to="{ name: `${$store.state.auth.authBase}.forgot` }">
                 Reset password
             </router-link>
             or
@@ -57,11 +57,11 @@
 
 <script>
 import Form from "form-backend-validation";
-import { default as elInput} from "../../form/basic.vue";
 
 export default {
     components: {
-        elInput: elInput
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
     data() {
         return {
@@ -80,7 +80,7 @@ export default {
     },
     
     methods: {
-        async submit() {
+        async onSubmit() {
             if (this.loading) return;
 
             this.loading = true;

package/AuthModule/routes/logincallback.vue

@@ -1,10 +1,16 @@
 <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 {
 

package/AuthModule/routes/loginsso.vue

@@ -1,11 +1,11 @@
 <template>
     <template v-if="stage === 1">
-        <h1 class="h2">Sign in</h1>
-        <p class="mb-2">Enter your email address to continue. </p>
+        <h1 class="h2 h2--small">Sign in</h1>
+        <p class="AM-mb-3 AM-mt-2">Enter your email address to continue. </p>
 
         <form @submit.prevent="submit" class="form" id="memberLoginForm">
             <el-input
-                class="mb-2.5"
+                class="AM-mb-3"
                 label="Email"
                 placeholder="Enter your email address"
                 name="email"
@@ -26,35 +26,36 @@
                 />
             </div>
 
-            <button
-                type="submit"
+            <el-button
+                type="primary"
                 :disabled="loading || (form.email?.length < 5 || form.password?.length < 8 )"
-                class="button button--primary"
+                @click="onSubmit"
             >
                 Continue
-            </button>
+            </el-button>
 
-            <p class="disclaimer mt-2">
+            <p class="disclaimer AM-mt-3">
                 Having trouble signing in?
                 <a :href="contact" class="underline">Contact us</a>
             </p>
         </form>
     </template>
     <template v-else>
-        <h1 class="h2">Sign in with SSO</h1>
-        <p>Redirecting you to your organisation’s Single Sign-On (SSO) gateway. Please wait a moment.</p>
-        <p>Redirecting <span class="color-11">in {{ countdown }} seconds...</span></p>
+        <h1 class="h2 h2--small">Sign in with SSO</h1>
+        <p class="AM-mt-2">Redirecting you to your organisation’s Single Sign-On (SSO) gateway <span class="AM-color-highlight">in {{ countdown }} seconds...</span></p>
+        <p class="disclaimer AM-mt-3">
+            <a :href="redirect_url" class="underline">Go to SSO gateway</a>
+        </p>
     </template>
 </template>
 
 <script>
 import Form from "form-backend-validation";
 
-import { default as elInput} from "../../form/basic.vue";
-
 export default {
     components: {
-        elInput: elInput,
+        elInput: require('../../form/basic.vue').default,
+        elButton: require('../../basic/Button.vue').default,
     },
     data() {
         return {
@@ -75,7 +76,7 @@ export default {
     },
     
     methods: {
-        async submit() {
+        async onSubmit() {
             if (this.loading) return;
 
             this.loading = true;
@@ -86,7 +87,7 @@ export default {
                     this.redirect_url = res['redirect_url'];
                     this.setRedirect();
                 } else {
-                    this.$router.push({name: `${this.$store.state.authBase}.logincreds`,query: {email: this.form.email}});
+                    this.$router.push({name: `${this.$store.state.auth.authBase}.logincreds`,query: {email: this.form.email}});
                 }
             } catch (e) {
                 this.$root.errors(e);