@hostlink/nuxt-light 1.0.1 → 1.0.3

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

@@ -1,7 +1,7 @@
 <script setup>
 import { useQuasar } from 'quasar'
-import { q, m } from '../../'
-import { ref, reactive } from "vue"
+import { q, m, notify } from '#imports'
+import { ref } from "vue"
 
 const qua = useQuasar();
 
@@ -60,6 +60,10 @@ const onRemoveChild = async (value, child) => {
         child: child.value
 
     });
+
+    //notify
+    notify("Role removed from role")
+
     //refresh
     roles.value = await loadData();
 }
@@ -70,6 +74,10 @@ const onAddChild = async (value, child) => {
         child: child.value.value
 
     });
+
+    //notify
+    notify("Role added to role")
+
     //refresh
     roles.value = await loadData();
 }
@@ -80,6 +88,10 @@ const onAddUser = async (value, user) => {
         user_id: user.value.user_id
 
     });
+
+    //notify
+    notify("User added to role")
+
     //refresh
     roles.value = await loadData();
 }
@@ -90,6 +102,10 @@ const onRemoveUser = async (value, user) => {
         user_id: user.value.user_id
 
     });
+
+    //notify
+    notify("User removed from role")
+
     //refresh
     roles.value = await loadData();
 }
@@ -97,7 +113,7 @@ const onRemoveUser = async (value, user) => {
 
 <template>
     <l-page>
-        <q-table :rows="roles" flat bordered :columns="columns" :rows-per-page-options="[0]">
+        <q-table :rows="roles" flat bordered :columns="columns" :rows-per-page-options="[0]" dense>
             <template #body-cell-_can_delete="props">
                 <q-td auto-width>
                     <q-btn v-if="props.row.canDelete" flat round dense icon="sym_o_delete"
@@ -108,7 +124,7 @@ const onRemoveUser = async (value, user) => {
 
             <template #body-cell-children="props">
                 <q-td>
-                    <q-select :options="role_options" v-model="props.row.children" multiple use-chips
+                    <q-select :options="role_options" v-model="props.row.children" multiple use-chips dense
                         @remove="onRemoveChild(props.row.name, $event)" @add="onAddChild(props.row.name, $event)">
 
                     </q-select>
@@ -116,7 +132,7 @@ const onRemoveUser = async (value, user) => {
             </template>
             <template #body-cell-user="props">
                 <q-td>
-                    <q-select :options="users" v-model="props.row.user" multiple use-chips option-label="name"
+                    <q-select :options="users" v-model="props.row.user" multiple use-chips dense option-label="name"
                         option-value="user_id" @add="onAddUser(props.row.name, $event)"
                         @remove="onRemoveUser(props.row.name, $event)">
 

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

@@ -1,6 +1,29 @@
+<script setup>
+import { q } from "#imports"
+const onClickDownload = async () => {
+
+    const data = await q({
+        system: {
+            database: {
+                export: true
+            }
+        }
+    });
+
+    const file = new File([data.system.database.export], "backup.sql", {
+        type: "text/plain;charset=utf-8"
+    });
+    //save to local
+
+    const a = document.createElement("a");
+    a.download = file.name;
+    a.href = URL.createObjectURL(file);
+    a.click();
+    URL.revokeObjectURL(a.href);
+}
+</script>
 <template>
     <l-page>
-        comming soon
-
+        <q-btn color="primary" label="Download" icon="sym_o_download" @click="onClickDownload"></q-btn>
     </l-page>
 </template>

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

@@ -14,10 +14,12 @@ const { system: { database } } = await query({
 <template>
     <l-page>
         <q-card flat bordered>
-            <q-list bordered class="rounded-borders" separator>
-                <q-expansion-item :label="table.name" v-for="table in database.table" expand-separator>
+            <q-list  bordered class="rounded-borders" separator>
+                <q-expansion-item :label="table.name" v-for="table in database.table">
                     <div class=" q-ma-sm">
-                        <q-table :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
+                        <q-table
+                        separator="cell"
+                         dense :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
                     </div>
 
                 </q-expansion-item>

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

@@ -5,7 +5,8 @@ const system = await q("system", ["server"])
 const columns = [
     {
         name: "name",
-        label: "Name"
+        label: "Name",
+        sortable: true
     },
     {
         name: "value",
@@ -17,6 +18,6 @@ const columns = [
 </script>
 <template>
     <l-page>
-        <l-table :rows="system.server" :columns="columns" :rows-per-page-options="[0]" hide-pagination></l-table>
+        <l-table searchable :rows="system.server" :columns="columns" :rows-per-page-options="[0]" hide-pagination></l-table>
     </l-page>
 </template>

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

@@ -274,10 +274,15 @@ const onAddChildMenu = (node, type) => {
                         <div class="q-gutter-md">
                             <l-input label="Label" v-model="selectedNode.label" />
                             <l-input label="To" v-model="selectedNode.to" />
-                            <l-input label="Icon" v-model="selectedNode.icon" hint="example: sym_o_add"/>
+                            <l-input label="Icon" v-model="selectedNode.icon" hint="example: sym_o_add" />
                             <l-input label="Permission" v-model="selectedNode.permission" />
                             <l-input label="UUID" v-model="selectedNode.uuid" readonly />
                         </div>
+
+                        <div>
+                            <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
+                        </div>
+
                     </q-card-section>
                 </template>
 

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

@@ -1,9 +1,28 @@
 <script setup>
-import { q } from '../../'
+import { ref, computed } from 'vue'
+import { q } from '#imports'
 const { system } = await q({ system: ["package"] })
+const filter = ref("")
+const filtered = computed(() => {
+    if (!filter.value) return system.package
+    return system.package.filter((row) => {
+        return Object.values(row).some((val) => {
+            return String(val).toLowerCase().includes(filter.value.toLowerCase())
+        })
+    })
+})
+
 </script>
 <template>
     <l-page>
-        <q-table :rows="system.package" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
+        <q-table dense :rows="filtered" :rows-per-page-options="[0]" hide-pagination flat bordered separator="cell">
+            <template v-slot:top-right>
+                <q-input outlined dense debounce="300" v-model="filter" placeholder="Search">
+                    <template v-slot:append>
+                        <q-icon name="sym_o_search" />
+                    </template>
+                </q-input>
+            </template>
+        </q-table>
     </l-page>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup>
 import { Notify } from 'quasar'
+import { reset } from "@formkit/core"
 import { useRouter } from 'vue-router'
 import { q, m } from '../../'
 
@@ -11,8 +12,20 @@ const obj = app.config.reduce((acc, cur) => {
 }, {});
 
 const fields = ["company", "company_logo",
-    "password_upper_case", "password_lower_case", "password_number", "password_special_character",
-    "file_manager", "two_factor_authentication"];
+    "password_contains_uppercase",
+    "password_contains_lowercase",
+    "password_contains_numeric",
+    "password_contains_symbol",
+    "password_min_length",
+    "file_manager",
+    "two_factor_authentication",
+    "mode",
+    "auth_lockout_duration",
+    "auth_lockout_attempts",
+    "access_token_expire",
+    "copyright_year",
+    "copyright_name"
+];
 
 //filter out fields that are not in the app.config table
 Object.keys(obj).forEach((key) => {
@@ -38,26 +51,40 @@ const onSubmit = async (d, form) => {
         icon: "check"
     })
 
-    router.go(-1);
+    reset(form, d)
 
 
 }
+
+
+if (obj.mode != 'prod') {
+    obj.mode = 'dev'
+} else {
+    obj.mode = 'prod'
+}
+
+
 </script>
 <template>
     <l-page>
-
         <FormKit type="l-form" :value="obj" #default="{ value }" @submit="onSubmit">
-            <FormKit type="l-input" label="Company" name="company"></FormKit>
+            <FormKit type="l-input" label="Company" name="company" validation="required"></FormKit>
             <FormKit type="l-input" label="Company logo" name="company_logo"></FormKit>
 
+            <q-separator />
+
             <q-field label="Password policy" stack-label>
-                <FormKit type="q-checkbox" label="Upper Case" name="password_upper_case" true-value="1" false-value="0" />
-                <FormKit type="q-checkbox" label="Lower Case" name="password_lower_case" true-value="1" false-value="0" />
-                <FormKit type="q-checkbox" label="Number" name="password_number" true-value="1" false-value="0" />
-                <FormKit type="q-checkbox" label="Special Character" name="password_special_character" true-value="1"
+                <FormKit type="q-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
+                    false-value="0" />
+                <FormKit type="q-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"
+                    false-value="0" />
+                <FormKit type="q-checkbox" label="Number" name="password_contains_numeric" true-value="1" false-value="0" />
+                <FormKit type="q-checkbox" label="Special Character" name="password_contains_symbol" true-value="1"
                     false-value="0" />
             </q-field>
 
+            <FormKit type="l-input" label="Password min Length" name="password_min_length" validation="required|number">
+            </FormKit>
 
             <q-field label="File manager" stack-label>
                 <FormKit type="q-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
@@ -67,7 +94,36 @@ const onSubmit = async (d, form) => {
                 <FormKit type="q-checkbox" label="Enable" name="two_factor_authentication" true-value="1" false-value="0" />
             </q-field>
 
+            <FormKit label="Mode" type="l-select" :options="[
+                { label: 'Production', value: 'prod' },
+                { label: 'Development', value: 'dev' },
+
+            ]" name="mode" validation="required">
+            </FormKit>
+
+            <q-separator />
+
+            <FormKit label="Auth lockout duration" type="l-input" name="auth_lockout_duration"
+                hint="The number of minutes the user is locked out after the maximum number of failed login attempts. Default is 15 minutes." />
+
+            <FormKit label="Auth lockout attempts" type="l-input" name="auth_lockout_attempts"
+                hint="The number of failed login attempts before the user is locked out. Default is 5 attempts." />
+
+
+
+            <FormKit label="Access token expiration" type="l-input" name="access_token_expire"
+                hint="The access token expiration time in seconds. Default is 28800 seconds (8 hours)." />
+
+
+
+
+            <q-separator />
+
+            <FormKit label="Copyright name" type="l-input" name="copyright_name" />
+            <FormKit label="Copyright year" type="l-input" name="copyright_year" validation="required" />
+
 
         </FormKit>
+
     </l-page>
 </template>

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

@@ -13,6 +13,7 @@ const onSave = async () => {
     })
 
 }
+
 </script>
 <template>
     <l-page>

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

@@ -1,6 +1,8 @@
 <script setup>
-import { list, m } from '../../'
+import { list, m } from '#imports'
 import { useRouter } from "vue-router"
+import { ref, computed } from "vue"
+import { Dialog } from 'quasar'
 
 let { data: users } = await list("User", null, ["user_id", "username", "name", "roles"]);
 
@@ -31,26 +33,51 @@ let columns = [
 
 const router = useRouter();
 const onCickView = async (id) => {
+    try {
+        if (await m("viewAs", { user_id: id })) {
+            router.back();
+        }
+    } catch (e) {
+        Dialog.create({
+            title: "Error",
+            message: e.message,
+            color: "negative",
+            ok: true
+        })
 
-    if (await m("viewAs", { user_id: id })) {
-        router.back();
     }
-
 }
+
+const filter = ref("")
+const filtered = computed(() => {
+    if (!filter.value) return users
+    return users.filter((row) => {
+        return Object.values(row).some((val) => {
+            return String(val).toLowerCase().includes(filter.value.toLowerCase())
+        })
+    })
+})
 </script>
 <template>
     <l-page>
-        <q-table flat :columns="columns" :rows="users" :rows-per-page-options="[0]">
+        <p>
+            Use this page to view the system as another user. This is useful for testing permissions.
+        </p>
+
+        <q-table flat :columns="columns" :rows="filtered" :rows-per-page-options="[0]" dense>
+            <template v-slot:top-right>
+                <q-input outlined dense debounce="300" v-model="filter" placeholder="Search" clearable>
+                    <template v-slot:append>
+                        <q-icon name="sym_o_search" />
+                    </template>
+                </q-input>
+            </template>
+
             <template #body-cell-view="props">
                 <q-td :props="props">
-                    <q-btn rounded outline color="primary" @click="onCickView(props.row.user_id)" label="view"
-                        icon="sym_o_search"></q-btn>
+                    <q-btn round circle flat dense @click="onCickView(props.row.user_id)" icon="sym_o_search"></q-btn>
                 </q-td>
-
             </template>
-
         </q-table>
-
-
     </l-page>
 </template>

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

@@ -98,7 +98,8 @@ const onDelete = async (name) => {
         <l-card>
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
-                    <q-table :rows="all" flat hide-bottom :rows-per-page-options="[0]" :columns="columns">
+                    <q-table :rows="all" flat :rows-per-page-options="[0]" :columns="columns" dense
+                        separator="cell">
                         <template #body="props">
                             <q-tr :props="props">
                                 <q-td key="_delete" auto-width>
@@ -122,9 +123,9 @@ const onDelete = async (name) => {
                 </template>
                 <template #after>
                     <l-form :bordered="false" @save="onSave">
-                        <l-input label="Name" required v-model.trim="obj.name"></l-input>
-                        <l-input v-for="language in app.languages" :label="language.name"
-                            v-model="obj[language.value]"></l-input>
+                        <l-input label="Name" required v-model.trim="obj.name" clearable></l-input>
+                        <l-input v-for="language in app.languages" :label="language.name" v-model="obj[language.value]"
+                            clearable></l-input>
                     </l-form>
                 </template>
             </q-splitter>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { reactive } from 'vue'
-import { getObject } from '../../../'
+import { getObject, q } from '#imports'
 const obj = reactive(await getObject(["username", "first_name", "last_name", "email", "phone",
     "addr1", "addr2", "addr3", "join_date", "expiry_date", "status", "language", "default_page"
 ]))
@@ -10,11 +10,16 @@ const options = [
     { label: 'Inactive', value: 1 }
 ];
 
-const languages = [
-    { label: 'English', value: 'en' },
-    { label: '中文', value: 'zh-hk' }
-]
+const tt = await q({
+    app: ["languages"],
+})
 
+const languages = tt.app.languages.map((lang) => {
+    return {
+        label: lang.name,
+        value: lang.value,
+    };
+})
 
 </script>
 
@@ -22,32 +27,28 @@ const languages = [
     <l-page>
         <FormKit type="l-form" :value="obj">
             <l-row>
-                <l-col md="6" gutter="md">
+                <l-col md="6">
                     <FormKit type="l-input" label="Username" name="username" validation="required" />
                     <FormKit type="l-input" label="First name" name="first_name" validation="required" />
                     <FormKit type="l-input" label="Last name" name="last_name" />
                     <FormKit type="l-input" label="Email" name="email" validation="required|email" />
                 </l-col>
 
-                <l-col md="6" gutter="md">
+                <l-col md="6">
                     <FormKit type="l-input" label="Phone" name="phone" />
                     <FormKit type="l-input" label="Address1" name="addr1" />
                     <FormKit type="l-input" label="Address2" name="addr2" />
                     <FormKit type="l-input" label="Address3" name="addr3" />
                 </l-col>
 
-                <l-col gutter="md">
+                <l-col>
                     <FormKit type="l-date-picker" label="Join date" name="join_date" validation="required" />
                     <FormKit type="l-date-picker" label="Expiry date" name="expiry_date" />
                     <FormKit type="l-select" label="Status" name="status" :options="options" validation="required" />
                     <FormKit type="l-select" label="Language" name="language" :options="languages" validation="required" />
                     <FormKit type="l-input" label="Default page" name="default_page" />
-
                 </l-col>
             </l-row>
-
         </FormKit>
-
-
     </l-page>
 </template>

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

@@ -1,8 +1,7 @@
 <script setup>
 import { reactive } from "vue"
 import { useRouter } from "vue-router";
-import { model } from "@hostlink/light";
-import { q } from '../../'
+import { q } from '#imports'
 const router = useRouter()
 const obj = reactive({
     username: null,
@@ -43,10 +42,19 @@ const options = [
     { label: 'Inactive', value: 1 }
 ];
 
-const languages = [
-    { label: 'English', value: 'en' },
-    { label: '中文', value: 'zh-hk' }
-]
+
+const tt = await q({
+    app: ["languages"],
+})
+
+const languages = tt.app.languages.map((lang) => {
+    return {
+        label: lang.name,
+        value: lang.value,
+    };
+})
+
+
 
 
 </script>
@@ -54,23 +62,23 @@ const languages = [
     <l-page>
         <FormKit type="l-form" :value="obj">
             <l-row>
-                <l-col md="6" gutter="md">
+                <l-col md="6">
                     <FormKit type="l-input" label="Username" name="username" validation="required" />
                     <FormKit type="l-input" label="Password" name="password" :validation="system.passwordPolicy"
-                        input-type="password" />
+                        input-type="password" autocomplete="new-password" />
                     <FormKit type="l-input" label="First name" name="first_name" validation="required" />
                     <FormKit type="l-input" label="Last name" name="last_name" />
                     <FormKit type="l-input" label="Email" name="email" validation="required|email" />
                 </l-col>
 
-                <l-col md="6" gutter="md">
+                <l-col md="6">
                     <FormKit type="l-input" label="Phone" name="phone" />
                     <FormKit type="l-input" label="Address1" name="addr1" />
                     <FormKit type="l-input" label="Address2" name="addr2" />
                     <FormKit type="l-input" label="Address3" name="addr3" />
                 </l-col>
 
-                <l-col gutter="md">
+                <l-col>
                     <FormKit type="l-date-picker" label="Join date" name="join_date" validation="required" />
                     <FormKit type="l-date-picker" label="Expiry date" name="expiry_date" />
                     <FormKit type="l-select" label="Status" name="status" :options="options" validation="required" />

package/dist/runtime/pages/User/setting/bio-auth.vue

@@ -1,12 +1,11 @@
 <script setup>
 import { Dialog } from "quasar";
 import { ref } from "vue"
-import { q, m, getCurrentUser } from '../../../'
+import { q, m, getCurrentUser } from '#imports'
 const app = await q("app", ["hasBioAuth"]);
 
 import { webauthnRegister } from "@hostlink/light"
 
-
 const data = ref(await q("listWebAuthn", ["uuid", "ip", "user_agent", "createdTime"]));
 
 const register = async () => {
@@ -16,14 +15,11 @@ const register = async () => {
         const user = await getCurrentUser();
         localStorage.setItem("username", user.username);
     } catch (e) {
-
         Dialog.create({
             title: "Error",
             message: e.message,
-            ok: "OK",
+            ok: "OK"
         })
-
-
     }
 }
 
@@ -55,6 +51,7 @@ const deleteItem = async (uuid) => {
     //confirm
     Dialog.create({
         title: "Delete",
+        color: "negative",
         message: "Are you sure you want to delete this item?",
         ok: "Yes",
         cancel: "No",
@@ -78,7 +75,7 @@ const deleteItem = async (uuid) => {
                 <l-btn label="Register" @click="register" icon="sym_o_add"></l-btn>
             </q-card-section>
 
-            <q-table :rows="data" :columns="columns">
+            <q-table :rows="data" :columns="columns" dense :rows-per-page-options="[0]">
                 <template #body-cell-action="props">
                     <q-td :props="props" auto-width>
                         <q-btn @click="deleteItem(props.row.uuid)" icon="sym_o_delete" round flat dense></q-btn>

package/dist/runtime/pages/User/setting/password.vue

@@ -1,11 +1,13 @@
 <script setup>
-
-import { Dialog } from 'quasar';
+import { useI18n } from 'vue-i18n'
+import { Dialog } from 'quasar'
 import { reset } from "@formkit/core"
 import { updatePassword } from "@hostlink/light"
-
+import { computed } from 'vue'
 import { q } from "#imports"
 
+const { t } = useI18n()
+
 const onSubmit = async (data, form) => {
     if (await updatePassword(data.old_password, data.new_password)) {
         reset(form);
@@ -21,25 +23,41 @@ const onSubmit = async (data, form) => {
             message: "Old password is incorrect",
             ok: "OK"
         })
-
-
     }
 }
 
 const system = await q("system", ["passwordPolicy"])
 
+const policies = computed(() => {
+    return system.passwordPolicy.split("|").map((policy) => {
+        let name = policy.split(":")[0]
+
+        if (name == "length") {
+            return t('Must contain at least {0} characters', [policy.split(":")[1]]);
+        }
+        
+        return t(name);
+    })
+})
+
 </script>
 <template>
     <FormKit type="l-form" :bordered="false" @submit="onSubmit">
-        <FormKit type="l-input" label="Old password" name="old_password" inputType="password" validation="required" />
+        <FormKit type="l-input" label="Old password" name="old_password" inputType="password" validation="required"
+            autocomplete="current-password" />
         <FormKit type="l-input" label="New password" name="new_password" inputType="password"
-            :validation="system.passwordPolicy" />
+            :validation="system.passwordPolicy" autocomplete="new-password" />
         <FormKit type="l-input" label="Confirm password" name="new_password_confirm" inputType="password"
             validation="required|confirm" />
     </FormKit>
 
-    <div>
-        <div>Password policy</div>
-        <div>{{ system.passwordPolicy }}</div>
-    </div>
+    <q-card flat>
+        <q-card-section>
+            <div>{{ $t('Password policy') }}</div>
+            <ul>
+                <li v-for="policy in policies" :key="policy">{{ policy }}</li>
+            </ul>
+
+        </q-card-section>
+    </q-card>
 </template>