@fishawack/lab-velocity 2.0.0-beta.43 → 2.0.0-beta.45

package/README.md

@@ -103,6 +103,7 @@ import { Auth } from "@fishawack/lab-velocity";
             // ...
             paths: ["auth.user"],
         }),
+        Auth.ImpersonationPlugin,
     ],
 
     modules: {
@@ -113,6 +114,8 @@ import { Auth } from "@fishawack/lab-velocity";
 }
 ```
 
+`Auth.ImpersonationPlugin` displays a persistent banner when an admin is impersonating another user, persisted across page reloads.
+
 ### 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.
@@ -188,6 +191,7 @@ There are two different set of sass imports for the admin and the frontend route
 @import "@fishawack/lab-velocity/components/menu";
 @import "@fishawack/lab-velocity/components/layout";
 @import "@fishawack/lab-velocity/components/descriptions";
+@import "@fishawack/lab-velocity/components/token-display";
 @import "element-plus/theme-chalk/el-tabs";
 @import "element-plus/theme-chalk/el-tab-pane";
 ```
@@ -478,3 +482,24 @@ import { Checkbox as VelCheckbox } from "@fishawack/lab-velocity";
         ),
     },
 ```
+
+## Local dev
+
+To work locally mount a local clone of the project into the packages directory via an overridden docker compose file.
+
+### Docker setup
+
+Create a docker compose file at `_Docker/docker-compose.yml`
+
+```yml
+services:
+    core:
+        volumes:
+            - $PWD/../lab-velocity:/app/packages/lab-velocity
+```
+
+### Npm install
+
+```bash
+npm install ./packages/lab-velocity
+```

package/_Build/vue/components/layout/PageHeader.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="grid justify-between">
-        <div class="grid__4/6 flex justify-start">
+    <div class="flex flex-wrap items-start gap" style="row-gap: 16px">
+        <div class="flex justify-start items-center">
             <span v-if="icon">
                 <div
                     class="p-1.5 mr-2 border-radius border border-solid border-muted flex items-center justify-center"
@@ -17,10 +17,11 @@
             <h2 class="m-0 font-500 text-secondary">{{ title }}</h2>
         </div>
 
-        <div class="grid__2/6 flex gap justify-end items-start">
-            <div class="flex gap items-center">
-                <slot />
-            </div>
+        <div
+            class="flex flex-wrap gap items-center justify-end"
+            style="margin-left: auto"
+        >
+            <slot />
         </div>
     </div>
 </template>

package/_Build/vue/components/layout/Table.vue

@@ -2,6 +2,7 @@
     <el-table
         :data="$props.data"
         :height="fixedHeight ? 762 : undefined"
+        :row-class-name="rowClassName"
         style="width: 100%"
         @sort-change="handleSort"
     >
@@ -131,6 +132,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        rowClassName: {
+            type: [Function, String],
+            default: undefined,
+        },
     },
     emits: ["sort", "reload"],
 

package/_Build/vue/components/layout/TableSorter.vue

@@ -64,6 +64,7 @@
                 :label="jsonData.label"
                 :over-write-id="jsonData.overWriteId"
                 :fixed-height="fixedHeight"
+                :row-class-name="jsonData.rowClassName"
                 :target-action="
                     (item) => ({
                         name: `${jsonData.slug}.show`,

package/_Build/vue/components/layout/TokenDisplay.vue

@@ -0,0 +1,52 @@
+<template>
+    <el-dialog
+        :model-value="true"
+        title="Token Created"
+        width="560px"
+        class="token-display"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="false"
+    >
+        <p class="token-display__warning">
+            <strong>The token below will not be shown again.</strong> Ensure
+            you've taken a copy before closing this window.
+        </p>
+
+        <div class="token-display__block">
+            <div class="token-display__header">
+                <span class="token-display__label">Bearer Token</span>
+                <el-button size="small" plain @click="copy">
+                    {{ copied ? "Copied ✓" : "Copy" }}
+                </el-button>
+            </div>
+            <pre class="token-display__value">{{ token }}</pre>
+        </div>
+
+        <template #footer>
+            <el-button type="primary" @click="$emit('close')">Done</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElDialog, ElButton } from "element-plus";
+
+const props = defineProps({
+    token: {
+        type: String,
+        required: true,
+    },
+});
+
+defineEmits(["close"]);
+
+const copied = ref(false);
+
+async function copy() {
+    await navigator.clipboard.writeText(props.token);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 2000);
+}
+</script>

package/_Build/vue/modules/AuthModule/js/guest-request.js

@@ -0,0 +1,32 @@
+"use strict";
+import axios from "axios";
+
+/**
+ * Wraps a form POST to a guest-only route with automatic logged-in detection.
+ *
+ * If the server redirects to /hydrate/logged-in (because a stale session
+ * exists), the helper dispatches a logout, fetches a fresh CSRF cookie,
+ * and retries the original request once.
+ *
+ * @param {object}   options
+ * @param {object}   options.form   - form-backend-validation Form instance
+ * @param {string}   options.url    - endpoint to POST to
+ * @param {string}   [options.method] - HTTP method (default: "post")
+ * @param {import('vuex').Store} options.store - Vuex store (for dispatch("logout"))
+ * @returns {Promise<object>} resolved response data
+ */
+export async function guestRequest({ form, url, method = "post", store }) {
+    const res = await form[method](url);
+
+    if (res && res["logged-in"]) {
+        try {
+            await store.dispatch("logout");
+        } catch (_) {}
+
+        await axios.get("/sanctum/csrf-cookie");
+
+        return await form[method](url);
+    }
+
+    return res;
+}

package/_Build/vue/modules/AuthModule/js/impersonation-banner.js

@@ -0,0 +1,102 @@
+"use strict";
+
+import { createApp, h, ref } from "vue";
+
+let bannerApp = null;
+let bannerContainer = null;
+let storeRef = null;
+const currentUser = ref(null);
+
+function mountBanner() {
+    if (bannerApp) return;
+
+    bannerContainer = document.createElement("div");
+    document.body.insertBefore(bannerContainer, document.body.firstChild);
+
+    bannerApp = createApp({
+        setup() {
+            function stop() {
+                storeRef.dispatch("stopImpersonating");
+            }
+
+            return () =>
+                h(
+                    "div",
+                    {
+                        style: {
+                            background: "#c0392b",
+                            color: "#fff",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "16px",
+                            padding: "12px 16px",
+                            fontSize: "14px",
+                            fontFamily: "sans-serif",
+                        },
+                    },
+                    [
+                        h(
+                            "span",
+                            `Impersonating: ${currentUser.value?.name} (${currentUser.value?.email})`,
+                        ),
+                        h(
+                            "button",
+                            {
+                                onClick: stop,
+                                style: {
+                                    background: "#fff",
+                                    color: "#c0392b",
+                                    border: "none",
+                                    padding: "4px 12px",
+                                    borderRadius: "4px",
+                                    cursor: "pointer",
+                                    fontWeight: "bold",
+                                },
+                            },
+                            "Stop impersonating",
+                        ),
+                    ],
+                );
+        },
+    });
+
+    bannerApp.mount(bannerContainer);
+}
+
+function unmountBanner() {
+    if (!bannerApp) return;
+
+    bannerApp.unmount();
+    bannerContainer?.remove();
+    bannerApp = null;
+    bannerContainer = null;
+}
+
+export function syncImpersonationBanner(user) {
+    currentUser.value = user;
+
+    if (user?.impersonating_as) {
+        mountBanner();
+    } else {
+        unmountBanner();
+    }
+}
+
+export function setImpersonationStore(store) {
+    storeRef = store;
+}
+
+export function ImpersonationPlugin(store) {
+    setImpersonationStore(store);
+
+    // Handle persisted state on load (vuex-persistedstate bypasses mutations)
+    syncImpersonationBanner(store.state.auth?.user ?? store.state.user);
+
+    // Handle all future setUser mutations
+    store.subscribe((mutation) => {
+        if (mutation.type === "auth/setUser" || mutation.type === "setUser") {
+            syncImpersonationBanner(mutation.payload);
+        }
+    });
+}

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

@@ -179,50 +179,84 @@ export function routes(node) {
 }
 
 export function beforeEach(router, store) {
+    let initialLoad = true;
+
+    // These routes must always be reachable regardless of auth/verification state.
+    // Without this, force_password_change or unverified state can trap the user with
+    // no way to log out or complete an SSO callback.
+    const ALWAYS_ALLOW = new Set(["auth.logout", "auth.callback"]);
+
     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) {
+        // Refresh user state on initial page load (handles cross-app state sync)
+        // or when authenticated query param is present (bypass/redirect flow)
+        if (
+            (store.getters.authenticated && initialLoad) ||
+            to.query.authenticated
+        ) {
             await store.dispatch("getUser", {
                 errors: (e) => console.error(e),
             });
         }
 
+        initialLoad = false;
+
         const { user, redirect } = store.state.auth;
+        const isGuestRoute = to.matched.some((d) => d.meta.guest) === true;
 
-        // User verification handling and redirect if user alrady verified but accessing an expired verification route
+        // Logout and SSO callback must always be reachable — prevents every
+        // possible "stuck" scenario caused by state-based redirects below.
+        if (ALWAYS_ALLOW.has(to.name)) {
+            return next();
+        }
+
+        // Redirect already-verified users away from verification routes
         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 (
+            return next({ name: "auth.success-verify" });
+        }
+
+        if (store.getters.authenticated) {
+            // 1. Email verification is the highest priority redirect.
+            //    Must come before force_password_change — there is no point forcing
+            //    a password change on an account that hasn't been verified yet.
+            //    Guest routes, auth.verify and auth.expired-verification are exempt
+            //    so the user can always complete or re-request verification.
+            if (
                 !user?.email_verified_at &&
-                to.matched.some((d) => d.meta.guest) !== true
+                !isGuestRoute &&
+                to.name !== "auth.verify" &&
+                to.name !== "auth.expired-verification"
             ) {
-                // User needs email verification and trying to access protected route
-                next({ name: "auth.verify" });
-            } else {
-                // User is authenticated and authorized - proceed
-                next();
+                return next({ name: "auth.verify" });
             }
-        } 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" });
+
+            // 2. Force password change applies only after verification is satisfied.
+            //    Guest routes are exempt so the user can still navigate within /auth
+            //    (e.g. auth.verify, auth.expired-verification) without looping.
+            if (
+                user?.force_password_change &&
+                !isGuestRoute &&
+                to.name !== "auth.force-reset"
+            ) {
+                return next({ name: "auth.force-reset" });
+            }
+
+            // 3. Redirect an already-authenticated user away from the login page
+            if (to.name === "auth.login") {
+                return next({ name: redirect });
             }
+
+            return next();
+        }
+
+        // Unauthenticated: allow guest routes, otherwise redirect to login
+        if (isGuestRoute) {
+            return next();
         }
+
+        return next({ name: "auth.login" });
     });
 }
 

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

@@ -65,6 +65,14 @@ const store = {
 
             return axios.post("/logout");
         },
+
+        stopImpersonating({ commit }) {
+            return axios.post("/api/users/impersonate/stop").then((res) => {
+                commit("setUser", res.data.data);
+
+                return res.data.data;
+            });
+        },
     },
 };
 

package/_Build/vue/modules/AuthModule/routes/PCompanies/resource.js

@@ -19,9 +19,7 @@ export default [
     {
         api: {
             params: {
-                index: ({ $route }) => ({
-                    "filter[withTrashed]": $route.query.trashed,
-                }),
+                index: () => ({}),
                 show: () => ({
                     include: "primary_contact",
                 }),
@@ -35,6 +33,7 @@ export default [
         singular: "company",
         icon: "icon-cases",
         auditable: true,
+        trashable: true,
         ...merge(columns(companiesColumns), {
             index: {
                 layout: [

package/_Build/vue/modules/AuthModule/routes/PIntegrations/columns.js

@@ -0,0 +1,58 @@
+import { h } from "vue";
+
+import VelSelect from "../../../../components/form/Select.vue";
+
+export default [
+    {
+        key: "name",
+        sortable: true,
+    },
+    {
+        key: "scopes",
+        endpoint: "api/scopes",
+        labelKey: "description",
+        filterable: true,
+        clearable: true,
+        multiple: true,
+        initial: (props) =>
+            props.model?.client?.scopes?.map((id) => ({
+                id,
+                description: id,
+            })) ?? [],
+        preparation: ({ form }) => form.scopes.map((d) => d.id),
+        render: {
+            read: ({ model }) => h("span", model.client?.scopes.join(", ")),
+            write: () => h(VelSelect),
+        },
+        condition: {
+            table: false,
+        },
+    },
+    {
+        key: "client_id",
+        label: "Client ID",
+        condition: {
+            form: false,
+        },
+    },
+    {
+        key: "user_id",
+        label: "Created by",
+        render: {
+            read: ({ model }) => h("span", model?.user?.name ?? "System"),
+        },
+        condition: {
+            form: false,
+        },
+    },
+    {
+        key: "access_logs_count",
+        label: "API Calls",
+        render: {
+            read: ({ model }) => h("span", model?.access_logs_count ?? 0),
+        },
+        condition: {
+            form: false,
+        },
+    },
+];

package/_Build/vue/modules/AuthModule/routes/PIntegrations/resource.js

@@ -1,9 +1,11 @@
 import { merge } from "lodash";
-import { ElMessageBox } from "element-plus";
-import { h } from "vue";
+import { h, ref } from "vue";
 
-import { columns } from "../../../resource/index.js";
-import VelSelect from "../../../../components/form/Select.vue";
+import { columns, defaultResource } from "../../../resource/index.js";
+import integrationsColumns from "./columns.js";
+import TokenDisplay from "../../../../components/layout/TokenDisplay.vue";
+
+const newToken = ref(null);
 
 export default [
     "integrations",
@@ -23,100 +25,55 @@ export default [
             edit: ({ $store }) => $store.getters.can("write integrations"),
             delete: ({ $store }) => $store.getters.can("delete integrations"),
         },
-        ...merge(
-            columns([
-                {
-                    key: "name",
-                    sortable: true,
-                },
-                {
-                    key: "scopes",
-                    endpoint: "api/scopes",
-                    labelKey: "description",
-                    filterable: true,
-                    clearable: true,
-                    multiple: true,
-                    initial: () => [],
-                    preparation: ({ form }) => form.scopes.map((d) => d.id),
-                    render: {
-                        read: ({ model }) =>
-                            h("span", model.client?.scopes.join(", ")),
-                        write: () => h(VelSelect),
-                    },
-                    condition: {
-                        table: false,
-                    },
-                },
-                {
-                    key: "client_id",
-                    label: "Client ID",
-                    condition: {
-                        form: false,
-                    },
-                },
-                {
-                    key: "user_id",
-                    label: "Created by",
-                    render: {
-                        read: ({ model }) =>
-                            h("span", model?.user?.name ?? "System"),
-                    },
-                    condition: {
-                        form: false,
-                    },
-                },
-                {
-                    key: "access_logs_count",
-                    label: "API Calls",
-                    render: {
-                        read: ({ model }) =>
-                            h("span", model?.access_logs_count ?? 0),
-                    },
-                    condition: {
-                        form: false,
-                    },
-                },
-            ]),
-            {
-                form: {
-                    submit: async (props) => {
-                        const { form, resource, $router } = props;
-                        const hold = JSON.parse(JSON.stringify(form.data()));
-                        try {
-                            form.populate(resource.form.preparation(props));
-                            let res = await form.post(
-                                `${resource.api.endpoint(props)}`,
-                            );
-                            ElMessageBox.alert(
-                                `<p>The token below will not be shown again. Ensure you've taken a copy before closing this window.<br><br><strong>Token</strong>:</p><p><em>${res.data.token}</em></p>`,
-                                "Token minted",
-                                {
-                                    confirmButtonText: "Ok",
-                                    dangerouslyUseHTMLString: true,
-                                },
-                            )
-                                .then(() => {
-                                    $router.replace({
-                                        name: `${resource.name}.show`,
-                                        params: {
-                                            integrationsId: res.data.id,
-                                        },
-                                    });
-                                })
-                                .catch(() => {});
-                        } catch (e) {
-                            console.log(e);
-                        } finally {
-                            if (
-                                !form.successful ||
-                                !form.__options.resetOnSuccess
-                            ) {
-                                form.populate(hold);
-                            }
+        ...merge(columns(integrationsColumns), {
+            form: {
+                submit: async (props) => {
+                    const { form, resource, $router, model } = props;
+                    const hold = JSON.parse(JSON.stringify(form.data()));
+                    const isEdit = !!model;
+                    const endpoint = isEdit
+                        ? `${resource.api.endpoint(props)}/${model.id}`
+                        : `${resource.api.endpoint(props)}`;
+                    try {
+                        form.populate(resource.form.preparation(props));
+                        let res = await form.post(endpoint);
+                        newToken.value = res.data.token;
+                        await $router.replace({
+                            name: `${resource.name}.show`,
+                            params: {
+                                integrationsId: res.data.id,
+                            },
+                        });
+                    } catch (e) {
+                        console.log(e);
+                    } finally {
+                        if (
+                            !form.successful ||
+                            !form.__options.resetOnSuccess
+                        ) {
+                            form.populate(hold);
                         }
-                    },
+                    }
                 },
             },
-        ),
+            show: {
+                ...defaultResource.show,
+                layout: [
+                    ...defaultResource.show.layout,
+                    () =>
+                        h({
+                            setup: () => () => {
+                                if (!newToken.value) return null;
+                                return h(TokenDisplay, {
+                                    token: newToken.value,
+                                    onClose: () => {
+                                        newToken.value = null;
+                                    },
+                                });
+                            },
+                        }),
+                ],
+            },
+        }),
     },
 ];