@fishawack/lab-velocity 2.0.0-beta.6 → 2.0.0-beta.61

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

@@ -0,0 +1,349 @@
+import { h, resolveComponent, ref } from "vue";
+import { debounce } from "lodash";
+import axios from "axios";
+
+import VelBasic from "../../../../components/form/basic.vue";
+import VelButton from "../../../../components/basic/Button.vue";
+import VelCheckbox from "../../../../components/form/Checkbox.vue";
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import Chip from "../../../../components/layout/Chip.vue";
+import Chips from "../../../../components/layout/Chips.vue";
+
+import companyResource from "../PCompanies/resource.js";
+import { meta } from "../../../resource/index.js";
+
+/**
+ * Shared reactive state for SSO company detection.
+ * Used by the email column's render.write and by form.submit in resource.js.
+ */
+export const detectedCompany = ref(null);
+
+const debouncedFetchCompany = debounce((domain) => {
+    if (domain) {
+        axios
+            .get("/api/companies", {
+                params: {
+                    "filter[domains.domain]": domain,
+                },
+            })
+            .then((res) => {
+                detectedCompany.value = res.data.data[0] || null;
+            })
+            .catch(() => {
+                detectedCompany.value = null;
+            });
+    } else {
+        detectedCompany.value = null;
+    }
+}, 500);
+
+/**
+ * Hoisted inline component for the email column's render.write.
+ * Must be a stable reference so Vue doesn't remount on every render.
+ */
+const EmailField = {
+    props: ["form"],
+    data() {
+        return {
+            company: detectedCompany.value,
+        };
+    },
+    watch: {
+        "form.email": {
+            handler(val) {
+                const domain = val?.split("@")[1];
+                debouncedFetchCompany(domain);
+            },
+        },
+    },
+    created() {
+        this.$watch(
+            () => detectedCompany.value,
+            (val) => {
+                this.company = val;
+            },
+        );
+    },
+    render() {
+        const form = this.form;
+        const company = this.company;
+        const isSSOCompany = !!company?.sso_enabled;
+
+        return h("div", [
+            h(VelBasic, {
+                modelValue: form.email,
+                "onUpdate:modelValue": (val) => {
+                    form.email = val;
+                },
+                placeholder: "Email",
+                label: "Email",
+                type: "text",
+                name: "email",
+                error: form.errors,
+            }),
+            h("p", { class: "mb-1" }, ["Company: ", h("span", company?.name)]),
+            h("hr", { class: "my-3 hr-muted" }),
+            isSSOCompany
+                ? h("p", { class: "mb-3" }, [
+                      "This user belongs to an SSO-enabled company. They will authenticate via SSO on first login. No password is required.",
+                  ])
+                : h("div", [
+                      h(VelCheckbox, {
+                          modelValue: form.notify_user,
+                          "onUpdate:modelValue": (val) => {
+                              form.notify_user = val;
+                          },
+                          name: "notify_user",
+                          error: form.errors,
+                          label: "Send email to notify user of account and password",
+                      }),
+                      h(VelCheckbox, {
+                          modelValue: form.force_password_change,
+                          "onUpdate:modelValue": (val) => {
+                              form.force_password_change = val;
+                          },
+                          name: "force_password_change",
+                          error: form.errors,
+                          label: "Force password change on first login",
+                      }),
+                      h(VelCheckbox, {
+                          modelValue: form.set_password,
+                          "onUpdate:modelValue": (val) => {
+                              form.set_password = val;
+                          },
+                          name: "set_password",
+                          error: form.errors,
+                          label: "Auto generate password",
+                      }),
+                      !form.set_password &&
+                          h("div", [
+                              h(VelBasic, {
+                                  modelValue: form.password,
+                                  "onUpdate:modelValue": (val) => {
+                                      form.password = val;
+                                  },
+                                  name: "password",
+                                  error: form.errors,
+                                  type: "password",
+                                  placeholder: "Password",
+                                  label: "Password",
+                              }),
+                              h(VelBasic, {
+                                  modelValue: form.password_confirmation,
+                                  "onUpdate:modelValue": (val) => {
+                                      form.password_confirmation = val;
+                                  },
+                                  name: "password_confirmation",
+                                  error: form.errors,
+                                  type: "password",
+                                  placeholder: "Password Confirmation",
+                                  label: "Password Confirmation",
+                              }),
+                          ]),
+                  ]),
+            h("hr", { class: "my-5 hr-muted" }),
+        ]);
+    },
+};
+
+/**
+ * Hoisted inline component for the roles column's render.write.
+ * Must be a stable reference so Vue doesn't remount on every render.
+ */
+const RolesField = {
+    props: ["form"],
+    data() {
+        return {
+            enableRoles: null,
+        };
+    },
+    watch: {
+        "form.roles": {
+            immediate: true,
+            handler(newVal) {
+                if (this.enableRoles === null) {
+                    this.enableRoles = newVal && newVal.length > 0;
+                }
+            },
+        },
+    },
+    render() {
+        const form = this.form;
+
+        if (this.enableRoles) {
+            return h("div", [
+                h(
+                    VelButton,
+                    {
+                        onClick: () => {
+                            form.roles = [];
+                            this.enableRoles = false;
+                        },
+                    },
+                    "Reset roles",
+                ),
+                h(VelFormRole, { form }),
+                h("hr", { class: "my-5 hr-muted" }),
+            ]);
+        }
+
+        return h("div", [
+            h(
+                VelButton,
+                {
+                    onClick: () => {
+                        this.enableRoles = true;
+                    },
+                },
+                () => [
+                    h(resolveComponent("GIcon"), {
+                        name: "icon-plus",
+                        embed: true,
+                        asis: true,
+                        class: "fill-0 icon--0.5 mr",
+                    }),
+                    "Override roles",
+                ],
+            ),
+            h("p", { class: "mt-2" }, [
+                "Roles will be inherited from the company level.",
+            ]),
+            h("hr", { class: "my-5 hr-muted" }),
+        ]);
+    },
+};
+
+export default [
+    {
+        key: "name",
+        sortable: true,
+        condition: {
+            form: {
+                write: ({ method }) => method === "post",
+            },
+        },
+    },
+    {
+        key: "email",
+        condition: {
+            form: {
+                write: ({ method }) => method === "post",
+            },
+        },
+        render: {
+            write: ({ form }) => h(EmailField, { form }),
+        },
+        initial: ({ model }) => model?.email ?? null,
+    },
+    {
+        key: "company",
+        sortable: true,
+        condition: {
+            form: false,
+        },
+        render: {
+            read: ({ model }) =>
+                !model.company
+                    ? h("span", "")
+                    : model.company.deleted_at
+                      ? h(
+                            "span",
+                            { class: "vel-basic__error" },
+                            model.company.name,
+                        )
+                      : h(resolveComponent("router-link"), {
+                            class: "underline",
+                            to: {
+                                name: "companies.show",
+                                params: {
+                                    [meta(...companyResource).id]:
+                                        model.company_id,
+                                },
+                            },
+                            text: model.company.name,
+                        }),
+        },
+    },
+    {
+        key: "email_verified_at",
+        label: "Email Verified",
+        condition: {
+            table: false,
+            form: false,
+        },
+        render: {
+            read: ({ model }) =>
+                h(
+                    "span",
+                    {},
+                    model.email_verified_at
+                        ? new Date(model.email_verified_at).toLocaleString()
+                        : "Not verified",
+                ),
+        },
+    },
+    {
+        key: "verified",
+        label: "Verified",
+        condition: {
+            description: false,
+            form: false,
+        },
+        render: {
+            read: ({ model }) =>
+                h(
+                    "span",
+                    {
+                        title: model.email_verified_at
+                            ? `Verified: ${new Date(model.email_verified_at).toLocaleString()}`
+                            : "Not verified",
+                        style: {
+                            color: model.email_verified_at ? "green" : "red",
+                            fontSize: "18px",
+                        },
+                    },
+                    model.email_verified_at ? "✓" : "✗",
+                ),
+        },
+    },
+    {
+        key: "roles",
+        label: "Role",
+        condition: {
+            description: false,
+            form: {
+                write: ({ $store }) => $store.getters.can("edit roles"),
+            },
+        },
+        initial: ({ model }) =>
+            model?.overrides_roles_and_permissions
+                ? model?.roles.map((val) => ({
+                      label: val.label,
+                      value: val.id,
+                  }))
+                : [],
+        preparation: ({ form }) =>
+            form.roles.map((d) => (typeof d === "object" ? d.value : d)),
+        render: {
+            read: ({ model }) =>
+                h(
+                    !model.overrides_roles_and_permissions ||
+                        model.roles.length === 1
+                        ? Chip
+                        : Chips,
+                    !model.overrides_roles_and_permissions
+                        ? {
+                              name: "inherited",
+                              label: "Inherited",
+                          }
+                        : model.roles.length === 1
+                          ? {
+                                name: model.roles[0].name,
+                                label: model.roles[0].label,
+                            }
+                          : { array: model.roles },
+                ),
+            write: ({ model, form }) => h(RolesField, { form }),
+        },
+    },
+];

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

@@ -0,0 +1,239 @@
+import { merge } from "lodash";
+import { h } from "vue";
+import axios from "axios";
+import { ElMessageBox, ElNotification } from "element-plus";
+
+import { columns, defaultResource } from "../../../resource/index.js";
+import usersColumns, { detectedCompany } from "./columns.js";
+
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import VelButton from "../../../../components/basic/Button.vue";
+import VelRoleLegend from "../../../../components/layout/RoleLegend.vue";
+import SetPasswordAction from "./SetPasswordAction.vue";
+
+function generatePassword(
+    length = 20,
+    characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$",
+) {
+    return (
+        Array.from(crypto.getRandomValues(new Uint32Array(length)))
+            .map((x) => characters[x % characters.length])
+            .join("") + Math.floor(Math.random() * 10)
+    );
+}
+
+export default [
+    "users",
+    {
+        api: {
+            params: {
+                index: () => ({
+                    include: "company",
+                }),
+                show: () => ({ include: "company" }),
+            },
+        },
+        searchable: {
+            value: "email",
+        },
+        auditable: true,
+        trashable: true,
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write users"),
+            edit: ({ $store }) => $store.getters.can("write users"),
+            delete: ({ $store }) => $store.getters.can("delete users"),
+        },
+        ...merge(columns(usersColumns), {
+            form: {
+                fields: ({ model, method }) => ({
+                    ...columns(usersColumns).form.fields({ model }),
+                    ...(method === "post"
+                        ? {
+                              notify_user: true,
+                              force_password_change: true,
+                              set_password: true,
+                              password: null,
+                              password_confirmation: null,
+                          }
+                        : {}),
+                }),
+                async submit(props) {
+                    const { model, form, $router, $store, method, resource } =
+                        props;
+
+                    const hold = form.data();
+
+                    try {
+                        form.populate(resource.form.preparation(props));
+
+                        if (method === "post") {
+                            const isSSOCompany =
+                                !!detectedCompany.value?.sso_enabled;
+
+                            if (!isSSOCompany && form.set_password) {
+                                const password = generatePassword();
+                                form.password = password;
+                                form.password_confirmation = password;
+                            }
+
+                            let res = await form.post(`/api/users`);
+
+                            if (
+                                !isSSOCompany &&
+                                form.set_password &&
+                                !form.notify_user
+                            ) {
+                                ElMessageBox.alert(
+                                    `<p>The password below will not be shown again. Ensure you've taken a copy if you plan to send manually. <br><br><strong>Email</strong>: ${form.email}<br> <strong>Password</strong>: ${form.password}</p>`,
+                                    "User Created",
+                                    {
+                                        confirmButtonText: "Ok",
+                                        dangerouslyUseHTMLString: true,
+                                    },
+                                )
+                                    .then(() => {
+                                        $router.replace({
+                                            name: "users.show",
+                                            params: {
+                                                [resource.id]: res.data.id,
+                                            },
+                                        });
+                                    })
+                                    .catch(() => {});
+                            } else {
+                                ElNotification({
+                                    title: "Success",
+                                    message: isSSOCompany
+                                        ? "SSO user pre-provisioned successfully"
+                                        : "User created a notified of their new account",
+                                    type: "success",
+                                });
+
+                                $router.replace({
+                                    name: "users.show",
+                                    params: {
+                                        [resource.id]: res.data.id,
+                                    },
+                                });
+                            }
+                        } else {
+                            let res = await form.post(`/api/users/${model.id}`);
+
+                            if (res.data.id === $store.state.auth.user.id) {
+                                await $store.dispatch("getUser");
+                            }
+
+                            $router.replace({
+                                name: "users.show",
+                                params: {
+                                    [resource.id]: res.data.id,
+                                },
+                            });
+                        }
+                    } catch (e) {
+                        console.log(e);
+                    } finally {
+                        if (
+                            !form.successful ||
+                            !form.__options.resetOnSuccess
+                        ) {
+                            form.populate(hold);
+                        }
+                    }
+                },
+            },
+            index: {
+                layout: [
+                    ...defaultResource.index.layout,
+                    () =>
+                        h(VelRoleLegend, {
+                            class: "mt-5",
+                        }),
+                ],
+            },
+            show: {
+                actions: [
+                    ({ model, $store }) =>
+                        $store.getters.can("write users") &&
+                        !model.email_verified_at &&
+                        h(
+                            VelButton,
+                            {
+                                async onClick() {
+                                    try {
+                                        const res = await axios.post(
+                                            `/api/users/${model.id}/verify`,
+                                        );
+
+                                        Object.assign(model, res.data.data);
+
+                                        ElNotification({
+                                            title: "Success",
+                                            message: "User marked as verified",
+                                            type: "success",
+                                        });
+                                    } catch (e) {
+                                        console.log(e);
+                                    }
+                                },
+                            },
+                            "Mark as Verified",
+                        ),
+                    ({ model, $store }) => {
+                        if (!$store.getters.can("write users")) {
+                            return;
+                        }
+
+                        return h(SetPasswordAction, {
+                            userId: model.id,
+                            model,
+                        });
+                    },
+                    ({ model, $store, $root }) =>
+                        $store.getters.can("impersonate users") &&
+                        h(
+                            VelButton,
+                            {
+                                type: "danger",
+                                async onClick() {
+                                    try {
+                                        const user = (
+                                            await axios.post(
+                                                `/api/users/impersonate`,
+                                                {
+                                                    user_id: model.id,
+                                                },
+                                            )
+                                        ).data.data;
+
+                                        $store.commit("setUser", user);
+
+                                        if (!$store.getters.can("view admin")) {
+                                            window.location = `${$root.spaUrl}?authenticated=1`;
+                                        }
+                                    } catch (e) {
+                                        console.log(e);
+                                    }
+                                },
+                            },
+                            "Impersonate",
+                        ),
+                    ...defaultResource.show.actions,
+                ],
+                tabs: [
+                    ...defaultResource.show.tabs,
+                    ({ model }) => ({
+                        label: "Access control",
+                        component: h(VelFormRole, {
+                            overrides: model.overrides_roles_and_permissions,
+                            form: {
+                                roles: model.roles.map((d) => d.id),
+                            },
+                            readonly: true,
+                        }),
+                    }),
+                ],
+            },
+        }),
+    },
+];

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"