@fishawack/lab-velocity 2.0.0-beta.4 → 2.0.0-beta.40

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

@@ -0,0 +1,322 @@
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import VelButton from "../../../../components/basic/Button.vue";
+import Chip from "../../../../components/layout/Chip.vue";
+import Chips from "../../../../components/layout/Chips.vue";
+import VelRoleLegend from "../../../../components/layout/RoleLegend.vue";
+import component from "./form.vue";
+import companyResource from "../PCompanies/resource.js";
+import { defaultResource, meta } from "../../../resource/index.js";
+
+import { ElMessageBox } from "element-plus";
+import { ElNotification } from "element-plus";
+import { h, resolveComponent } from "vue";
+import axios from "axios";
+
+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: ({ $route }) => ({
+                    include: "company",
+                    "filter[withTrashed]": $route.query.trashed,
+                }),
+                show: () => ({ include: "company" }),
+            },
+        },
+        searchable: {
+            value: "email",
+        },
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write users"),
+            edit: ({ $store }) => $store.getters.can("write users"),
+            delete: ({ $store }) => $store.getters.can("delete users"),
+        },
+        form: {
+            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 = props.$refs?.form?.isSSOCompany;
+
+                        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.patch(`/api/users/${model.id}`);
+
+                        // if changing ourselves, re-fetch user data
+                        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);
+                    }
+                }
+            },
+            component,
+            fields: ({ model, method }) => ({
+                ...{
+                    name: model?.name ?? null,
+                    email: model?.email ?? null,
+                    roles: model?.overrides_roles_and_permissions
+                        ? model?.roles.map((val) => ({
+                              label: val.label,
+                              value: val.id,
+                          }))
+                        : [],
+                    company_id: model?.company_id ?? null,
+                },
+                ...(method === "post"
+                    ? {
+                          notify_user: true,
+                          force_password_change: true,
+                          set_password: true,
+                          password: null,
+                          password_confirmation: null,
+                      }
+                    : {}),
+            }),
+            preparation: (props) => {
+                const data = props.form.data();
+                data.roles = data.roles.map((d) => d.value);
+                return data;
+            },
+        },
+        table: {
+            structure: () => [
+                {
+                    key: "name",
+                    sortable: true,
+                },
+                {
+                    key: "email",
+                },
+                {
+                    key: "company",
+                    sortable: true,
+                    render: ({ model }) =>
+                        model.company && 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: "role",
+                    render: ({ 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 },
+                        ),
+                },
+                {
+                    key: "verified",
+                    label: "Verified",
+                    render: ({ 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 ? "✓" : "✗",
+                        ),
+                },
+            ],
+        },
+        description: {
+            structure: () => [
+                {
+                    key: "email",
+                },
+                {
+                    key: "company",
+                    render: ({ model }) =>
+                        model.company && 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",
+                    render: ({ model }) =>
+                        h(
+                            "span",
+                            {},
+                            model.email_verified_at
+                                ? new Date(
+                                      model.email_verified_at,
+                                  ).toLocaleString()
+                                : "Not verified",
+                        ),
+                },
+            ],
+        },
+        index: {
+            layout: [
+                ...defaultResource.index.layout,
+                () =>
+                    h(VelRoleLegend, {
+                        class: "mt-5",
+                    }),
+            ],
+        },
+        show: {
+            actions: [
+                ({ 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"

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"
@@ -36,11 +36,11 @@
                         :password="true"
                     />
 
-                    <VPasswordValidation
+                    <VelPasswordValidation
                         :password="form.password"
                         @passwordValid="updatePasswordValidity"
                     />
-                    <div class="flex AM-mt-3">
+                    <div class="flex mt-3">
                         <elButton
                             native-type="submit"
                             class=""
@@ -66,7 +66,11 @@
                         >Email: {{ $store.state.auth?.user?.email }}</strong
                     >
                     <p v-text="`Your password has been updated.`" />
-                    <elButton class="" type="secondary" @click="handleButton">
+                    <elButton
+                        tag="router-link"
+                        type="primary"
+                        :to="{ name: $store.state.auth.redirect }"
+                    >
                         <span v-text="'Continue'" />
                     </elButton>
                 </div>
@@ -79,6 +83,14 @@
 import Form from "form-backend-validation";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -94,9 +106,7 @@ export default {
     },
 
     mounted() {
-        this.$store.dispatch("getUser", {
-            errors: this.$root.errors,
-        });
+        this.$store.dispatch("getUser");
     },
 
     methods: {
@@ -107,7 +117,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 +130,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 +151,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");
         },
     },
 
@@ -154,12 +160,5 @@ export default {
             title: "Reset Password",
         };
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/container.vue

@@ -5,7 +5,7 @@
                 <router-link to="/" class="logo" aria-label="Go to home page">
                     <GSvg
                         class="AuthModule__logo"
-                        :name="logoName"
+                        :name="$store.state.auth.logo"
                         embed
                         asis
                         role="presentation"
@@ -21,14 +21,5 @@
 </template>
 
 <script>
-export default {
-    mounted() {},
-    data() {
-        return {
-            logoName: process.env.HYDRATE_LOGO,
-        };
-    },
-
-    components: {},
-};
+export default {};
 </script>

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