@fishawack/lab-velocity 2.0.0-beta.7 → 2.0.0-beta.9

package/README.md

@@ -10,65 +10,187 @@ Prevent code repetition.
 
 ## Getting started
 
+### Requirements
+
+```json
+"vue": "^3.3.4",
+"vue-router": "^4.2.4",
+"vuex": "^4.1.0",
+"vuex-persistedstate": "^4.1.0"
+"vue-loader": "^17.2.2"
+```
+
 ### Install
 
 ```bash
 npm install @fishawack/lab-velocity
 ```
 
-### Auth Module
+## Hydrate Views
+
+Frontend & Admin files to work with the Hydrate Module including routes, store, axios and components.
+
+### Installation
+
+### Configure axios
+
+##### script.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
+
+// Call in your boot method
+Auth.Axios.setAxiosDefaults(process.env.APP_URL, router);
+```
+
+### Configure router
+
+##### router.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
+import store from "./store.js";
+
+// ... initialize router
+
+Auth.Router.beforeEach(router, store);
+```
+
+### Configure routes
+
+There are two different set of routes for the admin and the frontend.
+
+##### routes.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
+
+[
+    // ... other routes
+
+    // End user routes for login, register, chang password etc
+    ...Auth.Router.routes(node),
+
+    // Admin routes for headless login & managing users & companies
+    ...Auth.Router.adminRoutes(node),
+
+    // ... wildcard 404 routes etc
+];
+```
+
+### Configure store
+
+##### store.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
+
+// Call in store
+{
+    plugins: [
+        VuexPersistedState({
+            // ...
+            paths: ["auth.user"],
+        }),
+    ],
+
+    modules: {
+        auth: Auth.Store,
+    },
+
+    // ...
+}
+```
+
+### Base Styles
+
+@fishawack/lab-velocity extends @fishawack/lab-ui, for this reason you should replace the two references to variables & defaults with @fishawack/lab-velocity ones.
 
-    Frontend files to to work with the Hydrate Module.
+#### \_variables.scss
 
-#### Installation
+```sass
+@import "@fishawack/lab-velocity/variables";
+
+// Set global variables here, e.g $color6: red;
+```
 
-##### Import Axios File
+#### \_defaults.scss
 
-    import axios from "axios";
-    import "@fishawack/lab-velocity/AuthModule/js/AuthAxios.js";
+```sass
+@use "variables";
+@import "@fishawack/lab-velocity/defaults";
 
-##### Import Routes File
+$colors: variables.dynamic("color", module-variables("variables"));
 
-    Inside Router.js file
-    import { authRoutes, configureRoutes } from "@fishawack/lab-velocity/AuthModule/js/AuthRoutes";
+// Override lab-ui defaults here, e.g $button: $color6;
+```
 
-    let routes = require("./routes.js")(null, store).concat(authRoutes(null,store,store.state.auth.authBase));
-    Add routes to createRouter call
+### Route Styles
 
-    add method call after createRouter
-    configureRoutes(router);
+There are two different set of sass imports for the admin and the frontend routes.
 
-##### Import Store
+#### Frontend
 
-    import AuthStore from "@fishawack/lab-velocity/AuthModule/js/AuthStore.js";
-    Inside createStore method add
-        modules: {
-            auth: AuthStore
-        },
-    Inside VuexPersistedState add
-        paths:["auth"]
+```sass
+// Vendor imports / Lab-ui imports
+@import "@fishawack/lab-ui/typography";
+@import "@fishawack/lab-ui/grid";
+@import "@fishawack/lab-ui/utilities";
+@import "@fishawack/lab-ui/icon";
 
-    At bottom of file set
-        window.store = store;
+// Lab velocity
+@import "@fishawack/lab-velocity/base";
+@import "@fishawack/lab-velocity/components/basic";
+@import "@fishawack/lab-velocity/components/button";
+@import "@fishawack/lab-velocity/components/form";
+@import "@fishawack/lab-velocity/components/auth";
+```
 
-##### SVGS
+#### Admin
+
+##### vendor.scss
+
+```sass
+// Vendor imports / Lab-ui imports
+@import "@fishawack/lab-ui/typography";
+@import "@fishawack/lab-ui/grid";
+@import "@fishawack/lab-ui/utilities";
+
+// Lab velocity
+@import "@fishawack/lab-velocity/base";
+@import "@fishawack/lab-velocity/components/pageTitle";
+@import "@fishawack/lab-velocity/components/breadcrumbs";
+@import "@fishawack/lab-velocity/components/table";
+@import "@fishawack/lab-velocity/components/icon";
+@import "@fishawack/lab-velocity/components/basic";
+@import "@fishawack/lab-velocity/components/button";
+@import "@fishawack/lab-velocity/components/form";
+@import "@fishawack/lab-velocity/components/checkbox";
+@import "@fishawack/lab-velocity/components/select";
+@import "@fishawack/lab-velocity/components/loader";
+@import "@fishawack/lab-velocity/components/permissionLegend";
+@import "@fishawack/lab-velocity/components/chip";
+```
 
-    Ensure Content has Velocity pulled in
-    {
-        "lftp": "ftp-fishawack.egnyte.com",
-        "location": "Shared/FW/Knutsford/Digital/Auto-Content/Lab/Velocity"
-    }
-    Copy out the svg folder contents into the svg files within vue.
+### Icons
 
-##### ENV VARS
+Ensure Content has Velocity pulled in & copy out the svg folder contents into the svg files within vue.
 
-    HYDRATE_LOGO=example-logo
+```json
+{
+    "lftp": "ftp-fishawack.egnyte.com",
+    "location": "Shared/FW/Knutsford/Digital/Auto-Content/Lab/Velocity"
+}
+```
 
-    HYDRATE_LOGO=example-logo(No Default set, name of svg logo to display on page)
-    HYDRATE_REDIRECT=(Default index if not configured)
-    HYDRATE_CONTACT=(Default mailto:EP@avalerehealth, Email for contact us button)
+### ENV VARS (frontend)
 
-##### Verify dependencies are installed
+```env
+# Required
+HYDRATE_LOGO=example-logo
 
-    Axios
-    form-backend-validation
+# Descriptions
+HYDRATE_LOGO Name of svg logo to display on page
+HYDRATE_REDIRECT Default index if not configured
+HYDRATE_CONTACT Default mailto:EP@avalerehealth, Email for contact us button
+```

package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/create.vue

@@ -54,7 +54,7 @@ export default {
                     params: { id: res.data.id },
                 });
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             }
         },
     },

package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/edit.vue

@@ -90,7 +90,7 @@ export default {
                     params: { id: res.data.id },
                 });
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             }
         },
     },

package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/show.vue

@@ -143,6 +143,7 @@
 import axios from "axios";
 import VelButton from "../../../../../components/basic/Button.vue";
 import VelSpinner from "../../../../../components/form/Spinner.vue";
+import { ElNotification } from "element-plus";
 
 export default {
     name: "PShow",
@@ -246,7 +247,7 @@ export default {
                 const res = await axios.post(
                     `/api/companies/${this.id}/welcome`,
                 );
-                this.$notify({
+                ElNotification({
                     title: "Success",
                     message: res.data.message,
                     type: "success",
@@ -254,7 +255,7 @@ export default {
 
                 this.company.primary_contact_contacted = true;
             } catch (e) {
-                this.$notify({
+                ElNotification({
                     title: "Warning",
                     message: e.response?.data?.message || e.message,
                     type: "warning",

package/_Build/vue/modules/AuthModule/adminRoutes/PUsers/Children/create.vue

@@ -16,6 +16,7 @@
 <script>
 import { ElMessageBox } from "element-plus";
 import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
 
 export default {
     name: "PCreate",
@@ -75,7 +76,7 @@ export default {
                 if (!this.form.set_password) {
                     this.open(res.data.id);
                 } else {
-                    this.$notify({
+                    ElNotification({
                         title: "Success",
                         message: "User created a notified of their new account",
                         type: "success",
@@ -87,7 +88,7 @@ export default {
                     });
                 }
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             }
         },
         open(id) {

package/_Build/vue/modules/AuthModule/adminRoutes/PUsers/Children/edit.vue

@@ -85,9 +85,7 @@ export default {
 
                 // if changing ourselves, re-fetch user data
                 if (res.data.id === this.$store.state.auth.user.id) {
-                    await this.$store.dispatch("getUser", {
-                        errors: this.$root.errors,
-                    });
+                    await this.$store.dispatch("getUser");
                 }
 
                 this.$router.replace({
@@ -95,7 +93,7 @@ export default {
                     params: { id: res.data.id },
                 });
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             }
         },
     },

package/_Build/vue/modules/AuthModule/components/VTableSorter.vue

@@ -209,7 +209,7 @@ export default {
                 .then((res) => {
                     return res.data;
                 })
-                .catch(this.$root.errors);
+                .catch(console.log);
         },
 
         getStatusLabel(status) {

package/_Build/vue/modules/AuthModule/js/axios.js

@@ -1,4 +1,21 @@
 import axios from "axios";
+import debounce from "lodash/debounce";
+
+import { ElNotification } from "element-plus";
+
+const displayErrorNotification = debounce(async function errors(e) {
+    if (e.response && !e.response.data.errors) {
+        ElNotification.error({
+            title: "Error",
+            message:
+                e.response.data.message ||
+                `${e.response.status}: ${
+                    e.response.statusText || "Please try again later!"
+                }`,
+            duration: 10000,
+        });
+    }
+}, 250);
 
 function setAxiosDefaults(baseUrl, router) {
     axios.defaults.baseURL = baseUrl;
@@ -25,6 +42,8 @@ function setAxiosDefaults(baseUrl, router) {
             }
         }
 
+        displayErrorNotification(error);
+
         return Promise.reject(error);
     });
 

package/_Build/vue/modules/AuthModule/js/store.js

@@ -38,7 +38,7 @@ const store = {
     },
 
     actions: {
-        getUser({ commit }, { errors, query = "", params }) {
+        getUser({ commit }, { errors = console.log, query = "", params } = {}) {
             return axios
                 .get(`/api/users/self${query}`, {
                     params,
@@ -51,7 +51,7 @@ const store = {
                 .catch(errors);
         },
 
-        logout({ commit }, { errors }) {
+        logout({ commit }) {
             commit("setUser", null);
 
             return axios.post("/logout");

package/_Build/vue/modules/AuthModule/routes/account-exists.vue

@@ -3,10 +3,10 @@
         <section id="resetPasswordForm">
             <h1 class="h2">Account already exists</h1>
 
-            <p class="mt AM-mb-0 color-21">
+            <p class="mt mb-0 color-21">
                 <strong class="">Company: {{ $route.query.company }}</strong>
             </p>
-            <p class="AM-mt-0.5">Your company already has an active account.</p>
+            <p class="mt-0.5">Your company already has an active account.</p>
 
             <elButton
                 tag="router-link"

package/_Build/vue/modules/AuthModule/routes/change-password.vue

@@ -7,13 +7,13 @@
             />
             <form class="form" @submit.prevent="submit">
                 <div v-if="!form.successful">
-                    <p class="AM-mt-2 AM-mb-0">
+                    <p class="mt-2 mb-0">
                         Please complete the fields below to change your
                         password.
                     </p>
 
                     <el-input
-                        class="AM-mt-3"
+                        class="mt-3"
                         label="Current password"
                         placeholder="Enter your current password"
                         name="current_password"
@@ -25,7 +25,7 @@
                     />
                     <el-input
                         v-model="form.password"
-                        class="AM-mt-2 AM-mb-2"
+                        class="mt-2 mb-2"
                         label="New Password"
                         placeholder="Enter your new password"
                         name="password"
@@ -40,7 +40,7 @@
                         :password="form.password"
                         @passwordValid="updatePasswordValidity"
                     />
-                    <div class="flex AM-mt-3">
+                    <div class="flex mt-3">
                         <elButton
                             native-type="submit"
                             class=""
@@ -94,9 +94,7 @@ export default {
     },
 
     mounted() {
-        this.$store.dispatch("getUser", {
-            errors: this.$root.errors,
-        });
+        this.$store.dispatch("getUser");
     },
 
     methods: {
@@ -107,7 +105,7 @@ export default {
                 await this.form.put("/user/password");
                 await this.login();
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             } finally {
                 this.loading = false;
             }
@@ -120,15 +118,13 @@ export default {
 
                 if (res["logged-in"]) {
                     try {
-                        await this.$store.dispatch("logout", {
-                            // errors: this.$root.errors,
-                        });
+                        await this.$store.dispatch("logout");
                     } catch (e) {}
 
                     await this.form.post("/login");
                 }
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             } finally {
                 this.loading = false;
                 this.postLogin();
@@ -143,9 +139,7 @@ export default {
         },
 
         async postLogin() {
-            const { data: user } = await this.$store.dispatch("getUser", {
-                errors: this.$root.errors,
-            });
+            const { data: user } = await this.$store.dispatch("getUser");
         },
     },
 

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

@@ -1,10 +1,10 @@
 <template>
     <h1 class="h2 h2--small">Sorry, your password reset has expired</h1>
 
-    <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">
         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.
@@ -31,7 +31,7 @@
             Request new reset-link
         </elButton>
 
-        <p class="disclaimer AM-mt-3">
+        <p class="disclaimer mt-3">
             <router-link class="color-1 underline" :to="{ name: 'auth.login' }">
                 Back to Sign in
             </router-link>
@@ -66,7 +66,7 @@ export default {
                     query: { email: this.form.email },
                 });
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             }
         },
     },

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

@@ -2,16 +2,16 @@
     <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">
+        <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">
             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"
+            class="mt-2 mb-2.5 hidden"
             v-model="form.email"
             label="Email address"
             name="email"
@@ -32,7 +32,7 @@
         </elButton>
     </form>
 
-    <p class="disclaimer AM-mt-3">
+    <p class="disclaimer mt-3">
         Having trouble singing in?
         <a :href="$store.state.auth.contact" class="underline">Contact us</a>
     </p>
@@ -40,6 +40,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
 
 export default {
     components: {
@@ -66,28 +67,28 @@ export default {
 
                 await this.form.post("/email/verification-notification");
 
-                this.$notify.success({
+                ElNotification.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({
+                    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);
                 }
             }
         },

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

@@ -7,13 +7,13 @@
             />
             <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:
                             {{ $store.state?.auth?.user?.email }}</strong
                         >
                     </p>
-                    <p class="AM-mt-0.5">
+                    <p class="mt-0.5">
                         <strong
                             >Hello {{ $store.state?.auth?.user?.name }}</strong
                         >, and welcome to {{ $root.appName }}. To maintain
@@ -23,7 +23,7 @@
                     </p>
                     <el-input
                         v-model="form.password"
-                        class="AM-mt-2"
+                        class="mt-2"
                         label="New Password"
                         placeholder="Enter new password"
                         name="password"
@@ -40,7 +40,7 @@
 
                     <elButton
                         native-type="submit"
-                        class="AM-mt-3"
+                        class="mt-3"
                         type="primary"
                         :disabled="form.processing || !isPasswordValid"
                         :loading="form.processing"
@@ -81,9 +81,7 @@ export default {
     },
 
     mounted() {
-        this.$store.dispatch("getUser", {
-            errors: this.$root.errors,
-        });
+        this.$store.dispatch("getUser");
     },
 
     methods: {
@@ -94,7 +92,7 @@ export default {
                 await this.form.put("/user/password");
                 await this.login();
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             } finally {
                 this.loading = false;
             }
@@ -107,15 +105,13 @@ export default {
 
                 if (res["logged-in"]) {
                     try {
-                        await this.$store.dispatch("logout", {
-                            errors: this.$root.errors,
-                        });
+                        await this.$store.dispatch("logout");
                     } catch (e) {}
 
                     await this.form.post("/login");
                 }
             } catch (e) {
-                this.$root.errors(e);
+                console.log(e);
             } finally {
                 this.loading = false;
                 await this.postLogin();
@@ -123,9 +119,7 @@ export default {
         },
 
         async postLogin() {
-            const { data: user } = await this.$store.dispatch("getUser", {
-                errors: this.$root.errors,
-            });
+            const { data: user } = await this.$store.dispatch("getUser");
         },
 
         updatePasswordValidity(isValid) {