@hostlink/nuxt-light 1.0.2 → 1.0.3

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.0.2"
+  "version": "1.0.3"
 }

package/dist/runtime/components/l-app-main.vue

@@ -17,7 +17,10 @@ const appVersion = config.public.appVersion ?? '0.0.1';
 const quasar = useQuasar();
 const tt = await q({
     system: ["devMode"],
-    app: ["menus", "viewAsMode", "languages", { i18nMessages: ["name", "value"] }],
+    app: ["menus", "viewAsMode", "languages",
+        "copyrightYear",
+        "copyrightName",
+        { i18nMessages: ["name", "value"] }],
     my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])],
 })
 
@@ -195,7 +198,7 @@ const containerStyle = computed(() => {
 
                 <q-toolbar-title>
                     {{ light.getCompany() }}
-                    <template  v-if="tt.system.devMode">
+                    <template v-if="tt.system.devMode">
                         - Development mode
                     </template>
                 </q-toolbar-title>
@@ -332,7 +335,9 @@ const containerStyle = computed(() => {
         <q-footer bordered v-if="style.footer">
             <q-item>
                 <q-item-section>
-                    {{ light.getCompany() }} {{ appVersion }} - Copyright 2023 HostLink(HK). Build {{ light.getVersion() }}
+                    {{ light.getCompany() }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName }}.
+                    Build {{
+                        light.getVersion() }}
                 </q-item-section>
             </q-item>
         </q-footer>

package/dist/runtime/components/l-card.vue

@@ -38,7 +38,7 @@ const showBody = computed(() => !minimize.value || fullScreen.value);
 <template>
     <q-card v-bind="attrs" :class="{ 'fullscreen': fullScreen, 'no-margin': fullScreen }">
         <q-bar :class="cl" v-if="title">
-            <div>{{ title }}</div>
+            <div>{{ $t(title) }}</div>
             <q-space />
             <!-- q-btn-dropdown dense flat icon="sym_o_search" persistent>
                 <div class="q-ma-md">

package/dist/runtime/components/l-col.vue

@@ -7,7 +7,7 @@ const props = defineProps({
     },
     gutter: {
         type: String,
-        default: "none"
+        default: "md"
     }
 })
 

package/dist/runtime/components/l-customizer.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { defineModel } from 'vue'
 const COLORS = [
     'primary',
     'secondary',
@@ -84,7 +83,7 @@ const props = defineProps({
         <q-separator />
         <q-item>
             <q-item-section>
-                <q-item-label>Color</q-item-label>
+                <q-item-label>{{ $t('Color') }}</q-item-label>
                 <div class="row">
                     <div v-for="c in COLORS" :key="c" :class="`bg-${c}`" style="width: 1.5rem; height: 1.5rem;"
                         class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:color', c)" />
@@ -115,7 +114,7 @@ const props = defineProps({
 
         <q-item>
             <q-item-section>
-                <q-item-label>Menu overlay header </q-item-label>
+                <q-item-label>Menu overlay header</q-item-label>
             </q-item-section>
             <q-item-section side>
                 <q-toggle :model-value="menuOverlayHeader"
@@ -127,7 +126,7 @@ const props = defineProps({
 
         <q-item>
             <q-item-section>
-                <q-item-label>Show footer</q-item-label>
+                <q-item-label>{{ $t('Show footer') }}</q-item-label>
             </q-item-section>
             <q-item-section side>
                 <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)" />

package/dist/runtime/components/l-file-manager.vue

@@ -464,7 +464,7 @@ const isDark = computed(() => light.isDarkMode());
 </script>
 <template>
   <q-layout view="hHh lpR fFf" :class="isDark ? '' : 'bg-white'" container :style="{ 'min-height': height }">
-    <q-header bordered :class="isDark?'':'bg-white text-grey-8'" height-hint="64">
+    <q-header bordered :class="isDark ? '' : 'bg-white text-grey-8'" height-hint="64">
       <q-toolbar>
         <q-btn flat round @click="toggleLeftDrawer" aria-label="Menu" icon="menu" class="q-mr-sm" />
 
@@ -629,7 +629,7 @@ const isDark = computed(() => light.isDarkMode());
 
         <q-table flat bordered :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
           :pagination="pagination" row-key="path" selection="multiple" v-model:selected="selected" dense
-          :loading="loading">
+          :loading="loading" :loading-label="$t('Loading...')" :no-data-label="$t('No data available')">
           <template #body-cell-icon="props">
             <q-td auto-width>
               <q-icon name="sym_o_folder" v-if="props.value == 'folder'" size="sm" />
@@ -646,14 +646,14 @@ const isDark = computed(() => light.isDarkMode());
                       <q-item-section avatar>
                         <q-icon name="sym_o_delete"></q-icon>
                       </q-item-section>
-                      <q-item-section>{{ $t('Delete') }} </q-item-section>
+                      <q-item-section>{{ $t('Delete') }}</q-item-section>
                     </q-item>
 
                     <q-item v-if="props.row.type == 'file'" clickable v-close-popup @click="onDownloadRow(props.row)">
                       <q-item-section avatar>
                         <q-icon name="sym_o_download"></q-icon>
                       </q-item-section>
-                      <q-item-section>Download</q-item-section>
+                      <q-item-section>{{ $t('Download') }}</q-item-section>
                     </q-item>
 
                     <q-item clickable v-close-popup @click="onRenameRow(props.row)" v-if="canRenameRow(props.row)">

package/dist/runtime/components/l-row.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="row q-col-gutter-md">
-        <slot></slot>
+    <div>
+        <div class="row q-col-gutter-md">
+            <slot></slot>
+        </div>
     </div>
 </template>

package/dist/runtime/components/l-table.vue

@@ -589,7 +589,7 @@ const getCellClass = (col: any, row: any) => {
 
 
         <template #top-right="props" v-if="fullscreen || searchable">
-            <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" placeholder="Search">
+            <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')">
                 <template v-slot:append>
                     <q-icon name="search" />
                 </template>
@@ -618,8 +618,9 @@ const getCellClass = (col: any, row: any) => {
                     <template v-if="col.searchable">
 
                         <template v-if="col.searchType == 'number'">
-                            <q-input dense clearable filled square v-model.number="filters[col.name]"
-                                @keydown.enter.prevent="onFilters" @clear="onFilters" mask="##########"></q-input>
+                            <q-input style="min-width: 80px;" dense clearable filled square
+                                v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters" @clear="onFilters"
+                                mask="##########"></q-input>
                         </template>
 
                         <template v-if="col.searchType == 'select'">
@@ -635,7 +636,7 @@ const getCellClass = (col: any, row: any) => {
                         </template>
 
                         <template v-if="!col.searchType">
-                            <q-input dense clearable filled square v-model="filters[col.name]"
+                            <q-input style="min-width: 80px;" dense clearable filled square v-model="filters[col.name]"
                                 @keydown.enter.prevent="onFilters" @clear="onFilters" enterkeyhint="search"></q-input>
 
                         </template>

package/dist/runtime/formkit/Form.vue

@@ -77,13 +77,13 @@ if (!props.context.onSubmit) {
     <form v-bind="context.attrs">
         <l-card :bordered="bordered">
             <q-card-section>
-                <div :class="`q-col-gutter-${gutter}`">
+                <div :class="`q-gutter-${gutter}`">
                     <slot v-bind="context"></slot>
                 </div>
             </q-card-section>
 
             <q-card-actions align="right">
-                <l-btn color="primary" icon="sym_o_check" label="Submit" @click="onSubmit" :disabled="!context.state.dirty"
+                <l-btn icon="sym_o_check" label="Submit" @click="onSubmit" :disabled="!context.state.dirty"
                     :loading="loading"></l-btn>
             </q-card-actions>
         </l-card>

package/dist/runtime/locales/en.json

@@ -1,16 +1,9 @@
 {
-    "SystemBackup": "System backup",
-    "SystemValue": "System value",
-    "UserGroup": "User group",
-    "UserLog": "User log",
-    "FileManager": "File manager",
-    "mail-test": "Mail test",
-    "vx-table-message": "Showing {0} to {1} of {2} entries",
-    "vx-per-page": "Per page",
-    "Dashboard": "Dashboard",
-    "Theme Customizer": "Theme Customizer",
-    "Customize & Preview in Real Time": "Customize & Preview in Real Time",
-    "Permission": "Permission",
+    "Must contain at least {0} characters": "Must contain at least {0} characters",
+    "contains_uppercase": "Must contain at least one uppercase letter",
+    "contains_lowercase": "Must contain at least one lowercase letter",
+    "contains_numeric": "Must contain at least one number",
+    "contains_symbol": "Must contain at least one special character",
     "storage_usage": "{0} free of {1}",
     "input_required": "Please input {0}",
     "input_min": "Please input at least {0} characters"

package/dist/runtime/locales/zh-hk.json

@@ -1,4 +1,19 @@
 {
+    "Password policy": "密碼規則",
+    "Must contain at least {0} characters": "必須包含至少{0}個字元",
+    "contains_symbol": "必須包含符號",
+    "contains_numeric": "必須包含數字",
+    "contains_lowercase": "必須包含小寫字母",
+    "contains_uppercase": "必須包含大寫字母",
+    "Last access time": "最後存取時間",
+    "Default": "預設",
+    "Register": "註冊",
+    "Reset your 2FA": "重設雙重認證",
+    "Result": "結果",
+    "Update password": "更新密碼",
+    "Two factor auth": "雙重認證",
+    "Color": "顏色",
+    "Show footer": "顯示頁尾",
     "Date": "日期",
     "Online": "在線",
     "Update": "更新",
@@ -108,8 +123,6 @@
     "Rename": "重新命名",
     "Database": "資料庫",
     "Charset": "字元編碼",
-    "vx-table-message": "顯示 {0} 至 {1} 共 {2} 項資料",
-    "vx-per-page": "每頁顯示",
     "Role": "角色",
     "Permission": "權限",
     "Old password": "舊密碼",

package/dist/runtime/pages/Permission/all.vue

@@ -69,7 +69,7 @@ const onUpdate = (value, role, permission) => {
 
 <template>
     <l-page>
-        <q-table :columns="columns" flat bordered :rows="rows" :pagination="{ rowsPerPage: 0 }">
+        <q-table :columns="columns" flat bordered :rows="rows" :pagination="{ rowsPerPage: 0 }" dense>
             <template #body="props">
                 <q-tr :props="props">
                     <q-td>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { q } from '../../'
+import { q } from '#imports'
 
 let roles = await q("listRole", ["name"]);
 roles = roles.map((role) => {
@@ -9,10 +9,6 @@ roles = roles.map((role) => {
     };
 });
 
-const onSubmit = (e) => {
-    e.preventDefault();
-    console.log("submit");
-}
 </script>
 
 <template>

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

@@ -15,9 +15,11 @@ const { system: { database } } = await query({
     <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-expansion-item :label="table.name" v-for="table in database.table">
                     <div class=" q-ma-sm">
-                        <q-table dense :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/package.vue

@@ -1,9 +1,28 @@
 <script setup>
+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 dense :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 '../../'
 
@@ -18,7 +19,13 @@ const fields = ["company", "company_logo",
     "password_min_length",
     "file_manager",
     "two_factor_authentication",
-    "mode"];
+    "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) => {
@@ -43,7 +50,10 @@ const onSubmit = async (d, form) => {
         color: "positive",
         icon: "check"
     })
-    router.go(-1);
+
+    reset(form, d)
+
+
 }
 
 
@@ -57,11 +67,12 @@ if (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" 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_contains_uppercase" true-value="1"
                     false-value="0" />
@@ -88,11 +99,31 @@ if (obj.mode != '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>
+
+
+            <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>

package/dist/runtime/pages/User/setting/two-factor-auth.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive } from "vue"
-import { q, m, notify } from '../../../'
+import { q, m, notify } from '#imports'
 
 const my = await q("my", ["twoFactorEnabled"])
 const my2FA = await m("my2FA", [])
@@ -36,24 +36,30 @@ if (my.twoFactorEnabled) {
             </p>
             <p>
                 For Android user, install
-                <el-link type="primary" target="_blank"
-                    href="https://play.google.com/store/apps/details?id=com.azure.authenticator">Authenticator</el-link>
+                <a type="primary" target="_blank"
+                    href="https://play.google.com/store/apps/details?id=com.azure.authenticator">Authenticator</a>
             </p>
 
             <p>
                 For iOS user, install
-                <el-link type="primary" target="_blank"
-                    href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458">Authenticator</el-link>
+                <a type="primary" target="_blank"
+                    href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458">Authenticator</a>
             </p>
         </div>
         <q-img :src="my2FA.image" width="250px" />
+        <p>
+            Secret : {{ my2FA.secret }}
+        </p>
+
         <l-input v-model="obj.code" label="Code"
             hint="Please scan the QR code with your authenticator app, and enter the code" required />
     </l-form>
     <div v-else>
         <q-card-section>
-            Your 2FA is enabled
-            <l-btn @click="show = true" label="Reset Your 2FA" icon="sym_o_refresh" />
+            <div>
+                Your 2FA is enabled
+            </div>
+            <l-btn @click="show = true" label="Reset your 2FA" icon="sym_o_refresh" />
         </q-card-section>
 
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",