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

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

@@ -0,0 +1,252 @@
+<template>
+    <div v-if="table_meta" class="mt-3 mb-3">
+        <div class="grid mt mb-2">
+            <slot name="table-info">
+                <div
+                    v-if="!jsonData.forceHide"
+                    class="grid__1/3 flex items-center"
+                >
+                    <p class="color-11">
+                        Showing {{ getPaginationLabel("current") }} to
+                        {{ getPaginationLabel("max") }} of
+                        {{ table_meta.total }} {{ jsonData.multiLabel }}
+                    </p>
+                </div>
+                <div class="flex justify-end items-end grid__2/3">
+                    <VelBasic
+                        v-if="jsonData.searchable"
+                        ref="search"
+                        v-model="search"
+                        name="search"
+                        :placeholder="`Search ${jsonData.multiLabel}`"
+                        :data-key="jsonData.searchable.value"
+                        class="mb-0"
+                        prepend="true"
+                        @update:model-value="handleSearch"
+                    >
+                        <template #prepend
+                            ><GIcon embed asis name="icon-search"
+                        /></template>
+                    </VelBasic>
+                    <slot v-if="displayActions" name="table-action">
+                        <VelButton
+                            v-if="displayEditAction"
+                            size="large"
+                            type="primary"
+                            tag="a"
+                            class="ml-2"
+                            @click="
+                                $router.push({
+                                    name: `${jsonData.pageLink}.create`,
+                                })
+                            "
+                        >
+                            <GIcon
+                                name="icon-plus"
+                                embed
+                                asis
+                                class="fill-0 mr-0.5"
+                            />
+                            Create new {{ jsonData.label }}
+                        </VelButton>
+                    </slot>
+                </div>
+            </slot>
+        </div>
+        <div class="bg-0 p-0.5 box-shadow-1 border-r-4">
+            <VTable
+                :data="table_data"
+                :structure="jsonData.tableStructure"
+                :label="jsonData.label"
+                :over-write-id="jsonData.overWriteId"
+                :fixed-height="fixedHeight"
+                :target-action="
+                    (item) => ({
+                        name: `${jsonData.pageLink}.show`,
+                        params: { id: item.id },
+                    })
+                "
+                :edit-action="
+                    (item) => ({
+                        name: `${jsonData.pageLink}.edit`,
+                        params: { id: item.id },
+                    })
+                "
+                :display-actions="displayActions"
+                :display-show-action="displayShowAction"
+                :display-edit-action="displayEditAction"
+                @sort="handleSort"
+            >
+                <slot name="table-content"></slot>
+            </VTable>
+
+            <div class="flex justify-center items-center py-2">
+                <el-pagination
+                    v-if="table_meta.current_page"
+                    v-model:current-page="table_meta.current_page"
+                    layout="prev, pager, next"
+                    :total="table_meta.total"
+                    :page-size="table_meta.per_page"
+                    @update:current-page="handleCurrentPageChange"
+                />
+            </div>
+        </div>
+    </div>
+    <div v-else class="absolute transform-center text-center">
+        <VelSpinner />
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import { ElPagination } from "element-plus";
+import VelButton from "../../../components/basic/Button.vue";
+import VelBasic from "../../../components/form/basic.vue";
+import VelSpinner from "../../../components/form/Spinner.vue";
+
+export default {
+    name: "VTableSorter",
+
+    components: {
+        VTable: require("./VTable.vue").default,
+        VelButton,
+        VelBasic,
+        ElPagination,
+        VelSpinner,
+    },
+
+    props: {
+        jsonData: {
+            required: true,
+            type: Object,
+        },
+        fixedHeight: {
+            default: true,
+            type: Boolean,
+        },
+        api: {
+            required: true,
+            type: String,
+        },
+        defaults: {
+            required: false,
+            type: String,
+            default: "",
+        },
+        displayActions: {
+            type: Boolean,
+            default: true,
+        },
+        displayShowAction: {
+            type: Boolean,
+            default: true,
+        },
+        displayEditAction: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    data() {
+        return {
+            search: null,
+            sort: "-id",
+            query: [],
+            table_data: [],
+            table_meta: null,
+        };
+    },
+
+    mounted() {
+        this.sort = this.jsonData.defaultSort || "-id";
+        this.fetchData({ page: 1 }).then((data) => {
+            this.table_data = data.data;
+            this.table_meta = data.meta;
+
+            this.table_curr_page = this.table_meta.current_page;
+        });
+    },
+
+    methods: {
+        handleSearch(data) {
+            if (data === null || data.length < 3) {
+                this.query = [];
+            } else {
+                this.query = [
+                    `filter[${this.$refs.search.$el.dataset.key}]=${data}`,
+                ];
+            }
+            this.fetchData({}).then((data) => {
+                this.table_data = data.data;
+                this.table_meta = data.meta;
+            });
+        },
+        handleSort(data) {
+            if (data.order === null) {
+                this.sort = this.jsonData.defaultSort || "-id";
+            } else {
+                this.sort =
+                    data.order === "ascending" ? data.prop : "-" + data.prop;
+            }
+            this.fetchData({}).then((data) => {
+                this.table_data = data.data;
+                this.table_meta = data.meta;
+            });
+        },
+
+        fetchData: function ({ page = "1" }) {
+            const mergedQuery = [
+                ...this.query,
+                this.defaults,
+                `sort=${this.sort}`,
+                `page=${page}`,
+            ];
+
+            const query = mergedQuery.join("&");
+
+            return axios
+                .get(`/api/${this.$props.api}${query ? "?" + query : ""}`)
+                .then((res) => {
+                    return res.data;
+                })
+                .catch(console.log);
+        },
+
+        getStatusLabel(status) {
+            switch (status) {
+                case 0:
+                    return "Inactive";
+                case 1:
+                    return "Active";
+                case 2:
+                    return "Draft";
+            }
+        },
+
+        handleCurrentPageChange(val) {
+            this.fetchData({ page: val }).then((data) => {
+                this.table_data = data.data;
+                this.table_meta = data.meta;
+            });
+        },
+
+        getPaginationLabel(action) {
+            switch (action) {
+                case "current":
+                    return (
+                        (this.table_meta.current_page - 1) *
+                            this.table_meta.per_page +
+                        1
+                    );
+                case "max": {
+                    const potentialMax =
+                        this.table_meta.current_page * this.table_meta.per_page;
+                    return potentialMax > this.table_meta.total
+                        ? this.table_meta.total
+                        : potentialMax;
+                }
+            }
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,78 @@
+import axios from "axios";
+
+axios.interceptors.request.use(
+    (request) => {
+        throw { isLocal: true, data: retrieveResponse(request) };
+    },
+    (error) => {
+        return Promise.resolve(error);
+    },
+);
+
+axios.interceptors.response.use(
+    (response) => {
+        return response;
+    },
+    (error) => {
+        return Promise.resolve(error);
+    },
+);
+
+function retrieveResponse(request) {
+    return fakes[request.url][request.method];
+}
+
+const fakes = {
+    "/api/users/self": {
+        get: {
+            data: {
+                id: 2,
+                company_id: 1,
+                created_at: "2025-04-14T15:11:11.000000Z",
+                updated_at: "2025-04-16T16:45:55.000000Z",
+                newsletter: null,
+                admin: 1,
+                name: "Jeremy Viner",
+                email: "jeremy.viner@avalerehealth.com",
+                email_verified_at: "2025-04-16T16:45:55.000000Z",
+                brands: [],
+                company: {
+                    id: 1,
+                    name: "Company 0",
+                    created_at: "2025-04-14T15:08:50.000000Z",
+                    updated_at: "2025-04-14T15:08:50.000000Z",
+                    domains: [
+                        "okuneva.com",
+                        "bogisich.info",
+                        "avalerehealth.com",
+                    ],
+                    brands: [1],
+                    events: [],
+                    therapy_areas: [],
+                    event_therapy_areas: [],
+                    event_therapy_area_media_types: [],
+                    users_count: null,
+                    sso_client_id: "5ea409fc-8dcf-423e-b7fa-867422859ea4",
+                    sso_client_secret:
+                        "aSS8Q~ss0r-uh.fPLHUXVXp2kIs5IfwTjzomrb_I",
+                    sso_tenant: "4a33c544-865e-44a4-836f-bc51800f6c5e",
+                    sso_type: "azure",
+                },
+            },
+        },
+    },
+    "/user/password": {
+        put: {},
+    },
+    "/logged-in": {
+        get: { "logged-in": true },
+    },
+    "/logout": {
+        post: {},
+    },
+    "/login": {
+        post: {
+            two_factor: false,
+        },
+    },
+};

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

@@ -0,0 +1,81 @@
+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;
+    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
+    window.axios = axios;
+
+    // Redirect to login page if 401
+    axios.interceptors.response.use(null, (error) => {
+        if (error.response) {
+            if (
+                error.response.status === 401 &&
+                router.currentRoute.value.name !== "auth.logout"
+            ) {
+                router.push({
+                    name: "auth.logout",
+                });
+            }
+
+            if (error.response.status === 404) {
+                router.push({ name: "index" });
+            }
+        }
+
+        displayErrorNotification(error);
+
+        return Promise.reject(error);
+    });
+
+    // Pull all paginated data
+    window.axios.getAll = (url, options = {}) => {
+        // eslint-disable-next-line no-async-promise-executor
+        return new Promise(async (resolve, reject) => {
+            try {
+                const arr = { data: { data: [] } };
+                let page = 0;
+
+                while (true) {
+                    const res = await window.axios.get(
+                        `${url}${url.includes("?") ? "&" : "?"}page=${++page}`,
+                        options,
+                    );
+                    arr.data.data = arr.data.data.concat(res.data.data);
+                    if (
+                        res.data.next_page_url === null ||
+                        (res.data.links && res.data.links.next === null)
+                    )
+                        break;
+                }
+
+                resolve(arr);
+            } catch (e) {
+                reject(e);
+            }
+        });
+    };
+}
+
+export default {
+    setAxiosDefaults,
+};

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

@@ -0,0 +1,295 @@
+"use strict";
+
+import { h } from "vue";
+import { RouterView } from "vue-router";
+
+// Admin routes export - minimal auth flow (headless login only)
+export function adminRoutes(node) {
+    return [
+        {
+            path: "/auth",
+            name: "auth",
+            component: { render: () => h(RouterView) },
+            redirect: () => ({ name: "auth.login" }),
+            props: true,
+            meta: {
+                guest: true,
+            },
+            children: [
+                {
+                    path: "login",
+                    component: node
+                        ? ""
+                        : require("../routes/loginheadless.vue").default,
+                    name: "auth.login",
+                },
+                {
+                    path: "logout",
+                    component: node
+                        ? ""
+                        : require("../routes/logoutheadless.vue").default,
+                    name: "auth.logout",
+                },
+                {
+                    path: "callback",
+                    component: node
+                        ? ""
+                        : require("../routes/logincallback.vue").default,
+                    name: "auth.callback",
+                },
+            ],
+        },
+        {
+            path: "/users",
+            component: node
+                ? ""
+                : require("../adminRoutes/PUsers/parent.vue").default,
+            children: [
+                {
+                    path: "",
+                    component: node
+                        ? ""
+                        : require("../adminRoutes/PUsers/Children/index.vue")
+                              .default,
+                    name: "users.index",
+                },
+                {
+                    path: "create",
+                    component: node
+                        ? ""
+                        : require("../adminRoutes/PUsers/Children/create.vue")
+                              .default,
+                    name: "users.create",
+                },
+                {
+                    path: ":id",
+                    component: node
+                        ? ""
+                        : require("../adminRoutes/PUsers/Children/show.vue")
+                              .default,
+                    name: "users.show",
+                },
+                {
+                    path: ":id/edit",
+                    component: node
+                        ? ""
+                        : require("../adminRoutes/PUsers/Children/edit.vue")
+                              .default,
+                    name: "users.edit",
+                },
+            ],
+        },
+        {
+            path: "/companies",
+            component: node
+                ? ""
+                : require("../adminRoutes/PCompanies/parent.vue").default,
+            children: [
+                {
+                    path: "",
+                    component: node
+                        ? ""
+                        : require("../adminRoutes/PCompanies/Children/index.vue")
+                              .default,
+                    name: "companies.index",
+                },
+                {
+                    path: "create",
+                    component: node
+                        ? ""
+                        : require("../adminRoutes/PCompanies/Children/create.vue")
+                              .default,
+                    name: "companies.create",
+                },
+                {
+                    path: ":id",
+                    component: node
+                        ? ""
+                        : require("../adminRoutes/PCompanies/Children/show.vue")
+                              .default,
+                    name: "companies.show",
+                },
+                {
+                    path: ":id/edit",
+                    component: node
+                        ? ""
+                        : require("../adminRoutes/PCompanies/Children/edit.vue")
+                              .default,
+                    name: "companies.edit",
+                },
+                {
+                    path: ":id/upload",
+                    component: node
+                        ? ""
+                        : require("../adminRoutes/PCompanies/Children/Upload/upload.vue")
+                              .default,
+                    name: "companies.upload",
+                },
+            ],
+        },
+    ];
+}
+
+// Standard routes export - full auth flow
+export function routes(node) {
+    return [
+        {
+            path: "/auth",
+            name: "auth",
+            component: require("../routes/container.vue").default,
+            redirect: () => ({ name: "auth.login" }),
+            props: true,
+            meta: {
+                guest: true,
+            },
+            children: [
+                {
+                    path: "login-creds",
+                    component: node
+                        ? ""
+                        : require("../routes/login.vue").default,
+                    name: "auth.logincreds",
+                },
+                {
+                    path: "login",
+                    component: node
+                        ? ""
+                        : require("../routes/loginsso.vue").default,
+                    name: "auth.login",
+                },
+                {
+                    path: "callback",
+                    component: node
+                        ? ""
+                        : require("../routes/logincallback.vue").default,
+                    name: "auth.callback",
+                },
+                {
+                    path: "forgot",
+                    component: require("../routes/forgot.vue").default,
+                    name: "auth.forgot",
+                },
+                {
+                    path: "reset",
+                    component: require("../routes/reset.vue").default,
+                    name: "auth.reset",
+                    props: true,
+                },
+                {
+                    path: "force-reset",
+                    component: require("../routes/force-reset.vue").default,
+                    name: "auth.force-reset",
+                    props: true,
+                },
+                {
+                    path: "register",
+                    component: require("../routes/register.vue").default,
+                    name: "auth.register",
+                },
+                {
+                    path: "verify",
+                    component: require("../routes/verify.vue").default,
+                    name: "auth.verify",
+                },
+                {
+                    path: "verified",
+                    component: require("../routes/success-verify.vue").default,
+                    name: "auth.success-verify",
+                },
+                {
+                    path: "expired-verification",
+                    component: require("../routes/expired-verification.vue")
+                        .default,
+                    name: "auth.expired-verification",
+                },
+                {
+                    path: "expired-reset",
+                    component: require("../routes/expired-reset.vue").default,
+                    name: "auth.expired-reset",
+                },
+                {
+                    path: "success-reset",
+                    component: require("../routes/success-reset.vue").default,
+                    name: "auth.success-reset",
+                },
+                {
+                    path: "success-forgot",
+                    component: require("../routes/success-forgot.vue").default,
+                    name: "auth.success-forgot",
+                },
+                {
+                    path: "account-exists",
+                    component: require("../routes/account-exists.vue").default,
+                    name: "auth.account-exists",
+                },
+                {
+                    path: "logout",
+                    component: require("../routes/logout.vue").default,
+                    name: "auth.logout",
+                },
+            ],
+        },
+        {
+            path: "/admin",
+            component: require("../routes/loginheadless.vue").default,
+            name: "admin",
+            meta: {
+                guest: true,
+            },
+        },
+    ];
+}
+
+export function beforeEach(router, store) {
+    router.beforeEach(async (to, from, next) => {
+        // If authenticated query param is present, assume authentication has happened elsewhere and attempt to fetch user data
+        if (to.query.authenticated && !store.getters.authenticated) {
+            await store.dispatch("getUser", {
+                errors: (e) => console.error(e),
+            });
+        }
+
+        const { user, redirect } = store.state.auth;
+
+        // User verification handling and redirect if user alrady verified but accessing an expired verification route
+        if (
+            to.query.verified ||
+            (to.name === "auth.expired-verification" && user?.email_verified_at)
+        ) {
+            next({ name: "auth.success-verify" });
+        } else if (store.getters.authenticated) {
+            // User is authenticated - check permissions and redirect appropriately
+            if (user.force_password_change && to.name !== "auth.force-reset") {
+                // User needs to change password - redirect to force reset
+                next({ name: "auth.force-reset" });
+            } else if (to.name === "auth.login") {
+                // Already logged in user hitting login
+                next({ name: redirect });
+            } else if (
+                !user?.email_verified_at &&
+                to.matched.some((d) => d.meta.guest) !== true
+            ) {
+                // User needs email verification and trying to access protected route
+                next({ name: "auth.verify" });
+            } else {
+                // User is authenticated and authorized - proceed
+                next();
+            }
+        } else {
+            // User is not authenticated - handle guest routes and login redirects
+            if (to.matched.some((d) => d.meta.guest) === true) {
+                // Route allows guest access - proceed
+                next();
+            } else {
+                // Protected route requires authentication - redirect to standard login
+                next({ name: "auth.login" });
+            }
+        }
+    });
+}
+
+export default {
+    routes,
+    adminRoutes,
+    beforeEach,
+};