@fishawack/lab-velocity 2.0.0-beta.5 → 2.0.0-beta.50

package/_Build/vue/modules/AuthModule/routes/PUsers/SetPasswordAction.vue

@@ -0,0 +1,51 @@
+<template>
+    <vel-button @click="visible = true">Set Password</vel-button>
+
+    <SetPasswordDialog
+        v-if="visible"
+        :user-id="userId"
+        @close="visible = false"
+        @success="onSuccess"
+    />
+</template>
+
+<script>
+import VelButton from "../../../../components/basic/Button.vue";
+import SetPasswordDialog from "./SetPasswordDialog.vue";
+import { ElNotification } from "element-plus";
+
+export default {
+    components: {
+        VelButton,
+        SetPasswordDialog,
+    },
+    props: {
+        userId: {
+            type: [Number, String],
+            required: true,
+        },
+        model: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            visible: false,
+        };
+    },
+    methods: {
+        onSuccess(data) {
+            this.visible = false;
+
+            Object.assign(this.model, data);
+
+            ElNotification({
+                title: "Success",
+                message: "Password updated",
+                type: "success",
+            });
+        },
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/PUsers/SetPasswordDialog.vue

@@ -0,0 +1,138 @@
+<template>
+    <el-dialog
+        :model-value="true"
+        title="Set Password"
+        width="500px"
+        @close="$emit('close')"
+    >
+        <vel-basic
+            v-model="password"
+            name="password"
+            type="password"
+            label="Password"
+            placeholder="Enter new password"
+            class="AM-mb-2"
+        />
+
+        <vel-basic
+            v-model="passwordConfirmation"
+            name="password_confirmation"
+            type="password"
+            label="Confirm Password"
+            placeholder="Confirm new password"
+            class="AM-mb-2"
+        />
+
+        <div class="AM-mb-2">
+            <p class="font-700 AM-mb-0.5">Password must contain:</p>
+            <p class="m-0">
+                {{ passwordLengthValid ? "✓" : "✗" }} At least 8 characters
+            </p>
+            <p class="m-0">{{ hasLetter ? "✓" : "✗" }} At least one letter</p>
+            <p class="m-0">
+                {{ hasNumberOrSymbol ? "✓" : "✗" }} At least one number or
+                symbol
+            </p>
+        </div>
+
+        <template #footer>
+            <el-button @click="$emit('close')">Cancel</el-button>
+            <el-button
+                type="primary"
+                :disabled="!canSubmit"
+                :loading="loading"
+                @click="submit"
+            >
+                Set Password
+            </el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import { ElDialog, ElButton, ElNotification } from "element-plus";
+import VelBasic from "../../../../components/form/basic.vue";
+import axios from "axios";
+
+export default {
+    components: {
+        ElDialog,
+        ElButton,
+        VelBasic,
+    },
+    props: {
+        userId: {
+            type: [Number, String],
+            required: true,
+        },
+    },
+    emits: ["close", "success"],
+    data() {
+        return {
+            password: "",
+            passwordConfirmation: "",
+            loading: false,
+        };
+    },
+    computed: {
+        passwordLengthValid() {
+            return this.password.length >= 8;
+        },
+        hasLetter() {
+            return /[a-zA-Z]/.test(this.password);
+        },
+        hasNumberOrSymbol() {
+            return (
+                /[0-9]/.test(this.password) ||
+                /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(this.password)
+            );
+        },
+        passwordValid() {
+            return (
+                this.passwordLengthValid &&
+                this.hasLetter &&
+                this.hasNumberOrSymbol
+            );
+        },
+        canSubmit() {
+            return (
+                this.passwordValid &&
+                this.password === this.passwordConfirmation &&
+                this.password.length > 0
+            );
+        },
+    },
+    methods: {
+        async submit() {
+            this.loading = true;
+
+            try {
+                const res = await axios.post(
+                    `/api/users/${this.userId}/set-password`,
+                    {
+                        password: this.password,
+                        password_confirmation: this.passwordConfirmation,
+                    },
+                );
+
+                this.$emit("success", res.data.data);
+            } catch (e) {
+                if (e.response?.status === 422) {
+                    const errors = e.response.data.errors || {};
+                    const message =
+                        Object.values(errors).flat().join("\n") ||
+                        e.response.data.message;
+
+                    ElNotification({
+                        title: "Validation Error",
+                        message,
+                        type: "error",
+                    });
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+    },
+};
+</script>

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 }),
+        },
+    },
+];