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

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/resource.js

@@ -9,6 +9,7 @@ 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,
@@ -26,9 +27,8 @@ export default [
     {
         api: {
             params: {
-                index: ({ $route }) => ({
+                index: () => ({
                     include: "company",
-                    "filter[withTrashed]": $route.query.trashed,
                 }),
                 show: () => ({ include: "company" }),
             },
@@ -37,6 +37,7 @@ export default [
             value: "email",
         },
         auditable: true,
+        trashable: true,
         permissions: {
             create: ({ $store }) => $store.getters.can("write users"),
             edit: ({ $store }) => $store.getters.can("write users"),
@@ -152,6 +153,42 @@ export default [
             },
             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(

package/_Build/vue/modules/AuthModule/routes/change-password.vue

@@ -81,6 +81,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -126,15 +127,11 @@ export default {
             this.loading = true;
 
             try {
-                const res = await this.form.post("/login");
-
-                if (res["logged-in"]) {
-                    try {
-                        await this.$store.dispatch("logout");
-                    } catch (e) {}
-
-                    await this.form.post("/login");
-                }
+                await guestRequest({
+                    form: this.form,
+                    url: "/login",
+                    store: this.$store,
+                });
             } catch (e) {
                 console.log(e);
             } finally {

package/_Build/vue/modules/AuthModule/routes/force-reset.vue

@@ -50,6 +50,7 @@
 <script>
 import Form from "form-backend-validation";
 import { ElNotification } from "element-plus";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -98,15 +99,11 @@ export default {
         },
         async login() {
             try {
-                const res = await this.form.post("/login");
-
-                if (res["logged-in"]) {
-                    try {
-                        await this.$store.dispatch("logout");
-                    } catch (e) {}
-
-                    await this.form.post("/login");
-                }
+                await guestRequest({
+                    form: this.form,
+                    url: "/login",
+                    store: this.$store,
+                });
             } catch (e) {
                 console.log(e);
             } finally {

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

@@ -47,6 +47,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -66,7 +67,11 @@ export default {
     methods: {
         async onSubmit() {
             try {
-                await this.form.post("/forgot-password");
+                await guestRequest({
+                    form: this.form,
+                    url: "/forgot-password",
+                    store: this.$store,
+                });
 
                 this.$router.push({
                     name: "auth.success-forgot",

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

@@ -65,6 +65,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -93,15 +94,11 @@ export default {
             this.loading = true;
 
             try {
-                const res = await this.form.post("/login");
-
-                if (res["logged-in"]) {
-                    try {
-                        await this.$store.dispatch("logout");
-                    } catch (e) {}
-
-                    await this.form.post("/login");
-                }
+                const res = await guestRequest({
+                    form: this.form,
+                    url: "/login",
+                    store: this.$store,
+                });
 
                 await this.postLogin();
             } catch (e) {

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

@@ -57,6 +57,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -87,7 +88,12 @@ export default {
             this.loading = true;
 
             try {
-                const res = await this.form.post(`/hydrate/sso/check`);
+                const res = await guestRequest({
+                    form: this.form,
+                    url: "/hydrate/sso/check",
+                    store: this.$store,
+                });
+
                 if (res["redirect_url"]) {
                     this.redirect_url = res["redirect_url"];
                     this.setRedirect();

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

@@ -1,4 +1,6 @@
 <script>
+import axios from "axios";
+
 export default {
     metaInfo() {
         return {
@@ -11,9 +13,15 @@ export default {
             await this.$store.dispatch("logout");
         } catch {
             /* empty */
-        } finally {
-            this.$router.push({ name: "auth.login" });
         }
+
+        try {
+            await axios.get("/sanctum/csrf-cookie");
+        } catch {
+            /* empty */
+        }
+
+        this.$router.push({ name: "auth.login" });
     },
 };
 </script>

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

@@ -84,6 +84,7 @@
 <script>
 import Form from "form-backend-validation";
 import { ElNotification } from "element-plus";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -116,15 +117,12 @@ export default {
             this.loading = true;
 
             try {
-                const res = await this.form.post("/register");
-
-                if (res["logged-in"]) {
-                    try {
-                        await this.$store.dispatch("logout");
-                    } catch (e) {}
+                const res = await guestRequest({
+                    form: this.form,
+                    url: "/register",
+                    store: this.$store,
+                });
 
-                    await this.form.post("/register");
-                }
                 if (res["redirect"]) {
                     // Redirect here
                     this.$router.push({

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

@@ -66,6 +66,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -98,7 +99,11 @@ export default {
     methods: {
         async onSubmit() {
             try {
-                const res = await this.form.post("/reset-password");
+                await guestRequest({
+                    form: this.form,
+                    url: "/reset-password",
+                    store: this.$store,
+                });
 
                 this.$router.push({
                     name: "auth.success-reset",

package/_Build/vue/modules/AuthModule/routes/success-forgot.vue

@@ -53,6 +53,7 @@
 <script>
 import Form from "form-backend-validation";
 import { ElNotification } from "element-plus";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -77,7 +78,11 @@ export default {
                     this.notification = null;
                 }
 
-                await this.form.post("/forgot-password");
+                await guestRequest({
+                    form: this.form,
+                    url: "/forgot-password",
+                    store: this.$store,
+                });
 
                 ElNotification({
                     type: "success",

package/_Build/vue/modules/resource/index.js

@@ -13,6 +13,7 @@ import {
 } from "element-plus";
 import VelButton from "../../components/basic/Button.vue";
 import VelAudit from "../../components/layout/Audit.vue";
+import { applyTrashable } from "./trashable.js";
 
 export const defaultResource = meta();
 
@@ -20,7 +21,7 @@ export function meta(name = "default", properties = {}) {
     const singular = properties.singular || name.slice(0, -1);
     const slug = properties.slug || kebabCase(name);
 
-    return merge(
+    const result = merge(
         {
             name,
             title: properties.title || name[0].toUpperCase() + name.slice(1),
@@ -52,6 +53,7 @@ export function meta(name = "default", properties = {}) {
                 label: `Search ${name}`,
             },
             auditable: false,
+            trashable: false,
             form: {
                 component: null,
                 submit: null,
@@ -393,6 +395,12 @@ export function meta(name = "default", properties = {}) {
         },
         properties,
     );
+
+    if (result.trashable) {
+        applyTrashable(result);
+    }
+
+    return result;
 }
 
 export function columns(columns = []) {

package/_Build/vue/modules/resource/trashable.js

@@ -0,0 +1,104 @@
+import axios from "axios";
+import { h } from "vue";
+
+import VelTableSorter from "../../components/layout/TableSorter.vue";
+import { ElNotification } from "element-plus";
+import VelButton from "../../components/basic/Button.vue";
+import VelCheckbox from "../../components/form/Checkbox.vue";
+
+export function applyTrashable(result) {
+    const originalStructure = result.index.structure;
+    result.index.structure = (props) => {
+        const structure = originalStructure(props);
+        structure["json-data"].rowClassName = ({ row }) =>
+            row.deleted_at ? "el-table__row--trashed" : "";
+        return structure;
+    };
+
+    result.table.actions.push(({ model, resource }, props) => {
+        const { $emit } = props;
+
+        if (resource.permissions.delete(props, { model }) && model.deleted_at) {
+            return h({
+                data: () => ({
+                    loading: false,
+                }),
+                render() {
+                    return h(
+                        VelButton,
+                        {
+                            tag: "a",
+                            type: "success",
+                            size: "small",
+                            loading: this.loading,
+                            onClick: async () => {
+                                this.loading = true;
+
+                                await axios.post(
+                                    `${resource.api.endpoint(props)}/${model.id}/restore`,
+                                );
+
+                                $emit("reload");
+
+                                ElNotification({
+                                    title: "Success",
+                                    message: `${resource.singularTitle} restored.`,
+                                    type: "success",
+                                });
+
+                                this.loading = false;
+                            },
+                        },
+                        () => "Restore",
+                    );
+                },
+            });
+        }
+    });
+
+    const originalLayout = [...result.index.layout];
+    result.index.layout = [
+        (props) => {
+            const { resource } = props;
+
+            return h({
+                data: () => ({
+                    showTrashed: false,
+                }),
+                methods: {
+                    reload() {
+                        this.$refs.table?.reload();
+                    },
+                },
+                render() {
+                    const structureProps = resource.index.structure(props);
+
+                    if (this.showTrashed) {
+                        structureProps.apiParams = {
+                            ...structureProps.apiParams,
+                            "filter[withTrashed]": 1,
+                        };
+                    }
+
+                    return h("div", [
+                        resource.permissions.delete(props) &&
+                            h(VelCheckbox, {
+                                label: `Show trashed ${resource.name}`,
+                                modelValue: this.showTrashed,
+                                class: "mt-3",
+                                "onUpdate:modelValue": (val) => {
+                                    this.showTrashed = val;
+                                    this.$nextTick(() => this.reload());
+                                },
+                            }),
+                        h(VelTableSorter, {
+                            ...structureProps,
+                            ref: "table",
+                        }),
+                    ]);
+                },
+            });
+        },
+        ...originalLayout.slice(1),
+    ];
+}

package/components/_table.scss

@@ -10,6 +10,9 @@
     .el-table__cell {
         padding: get-ratio(8px) get-ratio(12px);
     }
+    .el-table__row--trashed {
+        color: var(--el-color-danger);
+    }
 }
 
 .table-wrapper {

package/components/_token-display.scss

@@ -0,0 +1,41 @@
+.token-display {
+    &__warning {
+        font-size: 14px;
+        color: #606266;
+        margin: 0 0 16px;
+        line-height: 1.6;
+    }
+
+    &__block {
+        margin-top: 16px;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+    }
+
+    &__label {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #909399;
+    }
+
+    &__value {
+        background: #1a1a2e;
+        color: #a8ff78;
+        border-radius: 6px;
+        padding: 16px 20px;
+        font-size: 13px;
+        line-height: 1.7;
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-break: break-all;
+        font-family: monospace;
+        margin: 0;
+    }
+}