@hostlink/nuxt-light 0.0.3

package/dist/runtime/pages/System/mailtest.vue

@@ -0,0 +1,22 @@
+<script setup>
+const obj = reactive({})
+
+const onSave = async () => {
+    if (await m("mailTest", obj)) {
+        que.notify({
+            message: "Mail sent",
+            color: "positive",
+            icon: "email"
+        });
+    }
+}
+</script>
+<template>
+    <l-page>
+        <l-form @save="onSave">
+            <l-input label="Email" v-model="obj.email" required></l-input>
+            <l-input label="Subject" v-model="obj.subject" required></l-input>
+            <l-input type="textarea" label="Content" v-model="obj.content" required></l-input>
+        </l-form>
+    </l-page>
+</template>

package/dist/runtime/pages/System/package.vue

@@ -0,0 +1,8 @@
+<script setup>
+const system = await q("system", ["package"])
+</script>
+<template>
+    <l-page>
+        <q-table :rows="system.package" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
+    </l-page>
+</template>

package/dist/runtime/pages/System/phpinfo.vue

@@ -0,0 +1,8 @@
+<script setup>
+const app = await q("system", ["phpInfo"])
+</script>
+<template>
+    <l-page>
+        <iframe :srcdoc="app.phpInfo" style="height: 700px;" class="full-width no-border"></iframe>
+    </l-page>
+</template>

package/dist/runtime/pages/System/setting.vue

@@ -0,0 +1,68 @@
+<script setup>
+const router = useRouter()
+const que = useQuasar()
+
+const app = await q("app", [f("config", ["name", "value"])])
+
+//const system = await q("system", ["passwordPolicy"])
+
+const obj = reactive(app.config.reduce((acc, cur) => {
+    acc[cur.name] = cur.value
+    return acc
+}, {}));
+
+const fields = ["company", "company_logo", "password_upper_case", "password_lower_case", "password_number", "password_special_character",
+    "file_manager_show"];
+
+//filter out fields that are not in the app.config table
+Object.keys(obj).forEach((key) => {
+    if (!fields.includes(key)) {
+        delete obj[key]
+    }
+})
+
+const onSave = async () => {
+    const data = Object.keys(obj).map((key) => {
+        return {
+            name: key,
+            value: obj[key]
+        }
+    });
+
+    for (let i = 0; i < data.length; i++) {
+        await m("updateAppConfig", data[i])
+    }
+
+
+    //show success
+    que.notify({
+        message: "Saved",
+        type: "positive",
+        position: "top",
+    });
+
+
+}
+
+
+</script>
+<template>
+    <l-page>
+
+        <l-form @save="onSave">
+            <l-input label="Company" v-model="obj.company"></l-input>
+            <l-input label="Company logo" v-model="obj.company_logo"></l-input>
+
+            <q-field label="Password policy" stack-label>
+                <q-checkbox label="Upper case" v-model="obj.password_upper_case" true-value="1"
+                    false-value="0"></q-checkbox>
+                <q-checkbox label="Lower case" v-model="obj.password_lower_case" true-value="1"
+                    false-value="0"></q-checkbox>
+                <q-checkbox label="Number" v-model="obj.password_number" true-value="1" false-value="0"></q-checkbox>
+                <q-checkbox label="Special character" v-model="obj.password_special_character" true-value="1"
+                    false-value="0"></q-checkbox>
+            </q-field>
+
+                 </l-form>
+    </l-page>
+</template>

package/dist/runtime/pages/System/view_as.vue

@@ -0,0 +1,56 @@
+<script setup>
+let users = await list("User", {
+    fields: [
+        "user_id", "username", "name", "roles"
+    ]
+});
+
+let columns = [
+    {
+        label: "Username",
+        name: "username",
+        field: "username",
+        align: "left",
+
+    },
+    {
+        name: "name",
+        label: "姓名",
+        field: "name",
+        align: "left",
+    }, {
+        name: "roles",
+        label: "Roles",
+        align: "left",
+        field: r => r.roles.join(",")
+    }, {
+        name: "view",
+        label: "View",
+        align: "left"
+    }
+]
+
+const router = useRouter();
+const onCickView = async (id) => {
+
+    if (await viewAs(id)) {
+        router.back();
+    }
+
+}
+</script>
+<template>
+    <l-page>
+        <q-table flat :columns="columns" :rows="users">
+            <template #body-cell-view="props">
+                <q-td :props="props">
+                    <q-btn rounded outline color="primary" @click="onCickView(props.row.user_id)">view</q-btn>
+                </q-td>
+
+            </template>
+
+        </q-table>
+
+
+    </l-page>
+</template>

package/dist/runtime/pages/User/_user_id/change-password.vue

@@ -0,0 +1,49 @@
+<script setup>
+const system = await q("system", ["passwordPolicy"]);
+const rules = system.passwordPolicy.map((rule) => {
+    let s = rule.split(":");
+
+    switch (s[0]) {
+        case "required":
+            return (v) => !!v || "Required";
+            break;
+        case "containUpper":
+            return (v) => /[A-Z]/.test(v) || "Must contain at least one uppercase letter";
+            break;
+        case "containLower":
+            return (v) => /[a-z]/.test(v) || "Must contain at least one lowercase letter";
+            break;
+        case "containNumber":
+            return (v) => /[0-9]/.test(v) || "Must contain at least one number";
+            break;
+        case "containSpecial":
+            return (v) => /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(v) || "Must contain at least one special character";
+            break;
+        case "minLength":
+            return (v) => v.length >= parseInt(s[1]) || `Must be at least ${s[1]} characters`;
+            break;
+    }
+})
+const router = useRouter();
+const route = useRoute();
+const obj = reactive({
+    id: parseInt(route.params.user_id)
+})
+
+
+const onUpdatePassword = async () => {
+    if (await m("changeUserPassword", obj)) {
+        router.push("/User");
+    }
+}
+
+</script>
+<template>
+    <l-page>
+        <l-form @save="onUpdatePassword">
+            <l-input type="password" label="New password" :rules="rules" v-model="obj.password">
+            </l-input>
+        </l-form>
+
+    </l-page>
+</template>

package/dist/runtime/pages/User/_user_id/edit.vue

@@ -0,0 +1,49 @@
+<script setup>
+const obj = reactive(await getObject(["first_name", "last_name", "email", "phone",
+    "addr1", "addr2", "addr3", "join_date", "expiry_date", "status", "language", "default_page"
+]))
+</script>
+
+<template>
+    <l-page>
+        <l-form v-model="obj">
+            <l-row>
+                <l-col md="6">
+                    <l-input label="First name" v-model="obj.first_name" required />
+                    <l-input label="Last name" v-model="obj.last_name" />
+                    <l-input label="Email" v-model="obj.email" required />
+                </l-col>
+                <l-col md="6">
+                    <l-input label="Phone" v-model="obj.phone" />
+                    <l-input label="Address1" v-model="obj.addr1" />
+                    <l-input label="Address2" v-model="obj.addr2" />
+                    <l-input label="Address3" v-model="obj.addr3" />
+                </l-col>
+                <l-col>
+                    <l-date-picker label="Join date" v-model="obj.join_date" required />
+                    <l-date-picker label="Expiry date" v-model="obj.expiry_date" />
+
+                    <l-select label="Status" :options="[{ value: 0, label: 'Active' }, { value: 1, label: 'Inactive' }]"
+                        v-model="obj.status" required></l-select>
+
+                    <l-select label="Language" :options="[{
+                        label: 'English',
+                        value: 'en'
+                    }, {
+                        label: '中文',
+                        value: 'zh-hk'
+                    }]" v-model="obj.language" emit-value map-options required></l-select>
+
+                    <l-input label="Default page" v-model="obj.default_page"></l-input>
+
+
+                </l-col>
+
+
+            </l-row>
+
+
+
+        </l-form>
+    </l-page>
+</template>

package/dist/runtime/pages/User/_user_id/view.vue

@@ -0,0 +1,21 @@
+<script setup>
+const obj = await getObject(["username", "first_name", "last_name", "email", "phone"]);
+
+</script>
+
+<template>
+    <l-page>
+        <template #header>
+            <l-btn to="change-password" icon="sym_o_key" permission="user.changePassword">Change password</l-btn>
+        </template>
+        <l-card>
+            <l-list>
+                <l-item label="Username">{{ obj.username }}</l-item>
+                <l-item label="First name">{{ obj.first_name }}</l-item>
+                <l-item label="Last name">{{ obj.last_name }}</l-item>
+                <l-item label="Email">{{ obj.email }}</l-item>
+                <l-item label="Phone">{{ obj.phone }}</l-item>
+            </l-list>
+        </l-card>
+    </l-page>
+</template>

package/dist/runtime/pages/User/add.vue

@@ -0,0 +1,64 @@
+<script setup>
+const obj = reactive({
+    roles: ['Users'],
+    status: 'Active',
+    language: "en"
+})
+
+let roles = await q("listRole", ["name"]);
+roles = roles.map((role) => {
+    return {
+        label: role.name,
+        value: role.name,
+    };
+});
+
+</script>
+<template>
+    <l-page>
+        <l-form v-model="obj">
+            <l-row>
+                <l-col md="6">
+                    <l-input label="Username" v-model="obj.username" required />
+                    <l-input label="Password" v-model="obj.password" required type="password" />
+                    <l-input label="First name" v-model="obj.first_name" required />
+                    <l-input label="Last name" v-model="obj.last_name" />
+                    <l-input label="Email" v-model="obj.email" required />
+
+                </l-col>
+                <l-col md="6">
+                    <l-input label="Phone" v-model="obj.phone" />
+                    <l-input label="Address1" v-model="obj.addr1" />
+                    <l-input label="Address2" v-model="obj.addr2" />
+                    <l-input label="Address3" v-model="obj.addr3" />
+                </l-col>
+                <l-col>
+                    <l-date-picker label="Join date" v-model="obj.join_date" required />
+                    <l-date-picker label="Expiry date" v-model="obj.expiry_date" />
+
+                    <l-select label="Status" :options="['Active', 'Inactve']" v-model="obj.status"></l-select>
+                    <l-select label="Language" :options="[{
+                        label: 'English',
+                        value: 'en'
+                    }, {
+                        label: '中文',
+                        value: 'zh-hk'
+                    }]" v-model="obj.language" emit-value map-options></l-select>
+
+                    <l-input label="Default page" v-model="obj.default_page"></l-input>
+
+                    <q-field label="Roles" stack-label>
+                        <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
+                        </q-option-group>
+                    </q-field>
+
+                </l-col>
+
+
+            </l-row>
+
+
+
+        </l-form>
+    </l-page>
+</template>

package/dist/runtime/pages/User/index.vue

@@ -0,0 +1,47 @@
+<script setup>
+
+
+const onRequest = async (params) => {
+    listData("User", params, ["canDelete", "canUpdate", "canRead", "user_id"]);
+};
+
+const columns = [
+    {
+        label: "Username",
+        name: "username",
+        sortable: true,
+        searchable: true,
+    },
+    {
+        label: "First name",
+        name: "first_name",
+        sortable: true,
+        searchable: true,
+    }, {
+
+        label: "Last name",
+        name: "last_name",
+        sortable: true,
+        searchable: true,
+    }, {
+        label: "Email",
+        name: "email",
+        sortable: true,
+        searchable: true,
+    }, {
+        label: "Phone",
+        name: "phone",
+        sortable: true,
+        searchable: true,
+    }
+]
+
+</script>
+
+<template>
+    <l-page>
+        <l-table @request="onRequest" :columns="columns" :show-actions="['view', 'edit', 'delete']">
+        </l-table>
+
+    </l-page>
+</template>

package/dist/runtime/pages/User/profile.vue

@@ -0,0 +1,25 @@
+<script setup>
+const my = await q("my", ["username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date"])
+
+</script>
+<template>
+    <l-page title="User profile">
+        <template #header>
+            <q-btn rounded icon="sym_o_key" to="update-password" outline color="primary">Update password</q-btn>
+        </template>
+        <l-card>
+            <l-list>
+                <l-item label="Username">{{ my.username }}</l-item>
+                <l-item label="First name">{{ my.first_name }}</l-item>
+                <l-item label="Last name">{{ my.last_name }}</l-item>
+                <l-item label="Email">{{ my.email }}</l-item>
+                <l-item label="Phone">{{ my.phone }}</l-item>
+                <l-item label="Address">{{ my.addr1 }} {{ my.addr2 }} {{ my.addr3 }}</l-item>
+                <l-item label="Join date">{{ my.join_date }}</l-item>
+                <l-item label="Roles">{{ my.roles.join(",") }}</l-item>
+
+
+            </l-list>
+        </l-card>
+    </l-page>
+</template>

package/dist/runtime/pages/User/update-password.vue

@@ -0,0 +1,45 @@
+<script setup>
+
+const obj = reactive({
+    old_password: "",
+    new_password: "",
+    confirm_password: ""
+})
+
+const qua = useQuasar();
+const router = useRouter();
+
+const onSave = async () => {
+    if (await m("updatePassword", {
+        old_password: obj.old_password,
+        new_password: obj.new_password,
+    })) {
+        //back
+        router.back();
+    } else {
+        //show error
+        qua.notify({
+            message: "Invalid old password",
+            color: "negative",
+            icon: "sym_o_error",
+            position: "top",
+            timeout: 2000
+        });
+    }
+}
+
+</script>
+<template>
+    <l-page>
+        <l-form @save="onSave">
+            <l-input label="Old password" v-model="obj.old_password" type="password"
+                :rules="[v => !!v || 'Old password is required']" />
+            <l-input label="New password" v-model="obj.new_password" type="password"
+                :rules="[v => !!v || 'New password is required']" />
+            <l-input label="Confirm password" v-model="obj.confirm_password" type="password" :rules="[
+                v => !!v || 'Confirm password is required',
+                v => v == obj.new_password || 'Confirm password does not match'
+            ]" />
+        </l-form>
+    </l-page>
+</template>

package/dist/runtime/pages/UserLog/index.vue

@@ -0,0 +1,53 @@
+<script setup>
+const onRequest = async (params) => {
+    listData("UserLog", params);
+};
+
+const columns = [
+    {
+        label: "ID",
+        name: "userlog_id",
+        sortable: true,
+        searchable: true,
+    },
+    {
+        label: "User",
+        name: "username"
+    },
+    {
+        label: "Login time",
+        name: "login_dt",
+        sortable: true,
+        searchable: true,
+    }, {
+        label: "Login out",
+        name: "logout_dt",
+        sortable: true,
+        searchable: true,
+    },
+    {
+        label: "Result",
+        name: "result",
+        sortable: true,
+        searchable: true,
+    }, {
+        label: "User agent",
+        name: "user_agent",
+        sortable: true,
+        searchable: true,
+    },
+
+
+
+
+
+]
+
+</script>
+
+<template>
+    <l-page>
+        <l-table @request="onRequest" :columns="columns" sort-by="login_dt:desc">
+        </l-table>
+    </l-page>
+</template>

package/dist/runtime/pages/index.vue

@@ -0,0 +1,9 @@
+<template>
+    <q-page padding>
+        <l-card>
+            <q-card-section>
+                Hello
+            </q-card-section>
+        </l-card>
+    </q-page>
+</template>

package/dist/runtime/pages/logout.vue

@@ -0,0 +1,10 @@
+<script setup>
+
+await mutation({
+    operation: "logout"
+});
+
+window.self.location = "/";
+
+</script>
+<template></template>

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,4 @@
+import "./assets/main.css";
+import './assets/element.css';
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.mjs

@@ -0,0 +1,58 @@
+import { Quasar, Dialog, Notify, Loading } from "quasar";
+import ElementPlus from "element-plus";
+import { createI18n } from "vue-i18n";
+import { defineNuxtPlugin } from "#app";
+import "./assets/main.css";
+import "./assets/element.css";
+import zhTW from "element-plus/es/locale/lang/zh-tw";
+import en from "element-plus/es/locale/lang/en";
+import message_en from "./locales/en.json";
+import message_zh from "./locales/zh-hk.json";
+import routes from "./routes.mjs";
+localStorage.getItem("locale") || localStorage.setItem("locale", "en");
+import { useLight } from "./composables/useLight.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  let locale = localStorage.getItem("locale") || "en";
+  nuxtApp.vueApp.config.errorHandler = (error) => {
+    console.log(error);
+    const light = useLight();
+    light.addError(error);
+  };
+  const i18n = createI18n({
+    legacy: false,
+    locale,
+    messages: {
+      en: Object.assign(en, message_en),
+      "zh-hk": Object.assign(zhTW, message_zh),
+      "zh-tw": Object.assign(zhTW, message_zh)
+    },
+    fallbackWarn: false,
+    missingWarn: false
+  });
+  nuxtApp.vueApp.use(i18n);
+  nuxtApp.vueApp.use(ElementPlus);
+  nuxtApp.vueApp.use(Quasar, {
+    config: {
+      brand: {
+        primary: "#7367f0",
+        secondary: "#82868b",
+        accent: "#9C27B0",
+        dark: "#4b4b4b",
+        darkPage: "#121212",
+        positive: "#28c76f",
+        negative: "#ea5455",
+        info: "#00cfe8",
+        warning: "#ff9f43"
+      }
+    },
+    plugins: {
+      Dialog,
+      Notify,
+      Loading
+    }
+  });
+  const router = useRouter();
+  routes.forEach((route) => {
+    router.addRoute(route);
+  });
+});

package/dist/runtime/routes.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    name: string;
+    path: string;
+    component: typeof index;
+}[];
+export default _default;
+declare function index(): Promise<any>;