@hostlink/nuxt-light 0.0.17 → 0.0.18

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.17"
+  "version": "0.0.18"
 }

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

@@ -1,10 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useLight, q, getCurrentUser } from '../light';
-import { ref, computed, reactive, provide } from 'vue';
-
-
-
+import { useLight, q, getCurrentUser, m } from '../light';
+import { ref, computed, reactive, provide, watch } from 'vue';
+import packageJson from '../../package.json'
 
 const light = useLight();
 const props = defineProps({
@@ -14,6 +12,7 @@ const props = defineProps({
 });
 
 let app = await q("app", ["menus"]);
+let my = await q("my", ["styles"]);
 const menus = ref(app.menus)
 
 const i18n = useI18n();
@@ -50,10 +49,10 @@ const layoutView = computed(() => {
 })
 
 const style = reactive({
-    headerColor: 'bg-primary',
+    color: my.styles?.color || 'bg-primary',
     theme: 'semi-dark',
     miniState: false,
-    dense: false
+    dense: my.styles?.dense
 });
 
 
@@ -109,12 +108,26 @@ const reloadMenu = async () => {
 
 provide('reloadMenu', reloadMenu)
 
+watch(() => style.dense, async (value) => {
+    await m("updateMyStyle", {
+        name: "dense",
+        value: value
+    });
+})
+
+watch(() => style.color, async (value) => {
+    await m("updateMyStyle", {
+        name: "color",
+        value: value
+    });
+})
+
 </script>
 
 
 <template>
     <q-layout :view="layoutView">
-        <q-header bordered class="text-white" :class="style.headerColor">
+        <q-header bordered class="text-white" :class="style.color">
             <q-toolbar>
                 <q-btn dense flat round icon="menu" class="q-mr-sm" @click="toggleLeftDrawer" />
 
@@ -149,20 +162,27 @@ provide('reloadMenu', reloadMenu)
 
 
                 <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
-                    <q-menu max-width="200px">
+                    <q-menu max-width="250px">
                         <q-list>
                             <q-item v-close-popup to="/User/profile">
                                 <q-item-section avatar>
                                     <q-icon name="sym_o_person" />
                                 </q-item-section>
-                                <q-item-section>Profile</q-item-section>
+                                <q-item-section>{{ $t('Profile') }}</q-item-section>
+                            </q-item>
+
+                            <q-item v-close-popup to="/User/setting">
+                                <q-item-section avatar>
+                                    <q-icon name="sym_o_settings" />
+                                </q-item-section>
+                                <q-item-section>{{ $t('Setting') }}</q-item-section>
                             </q-item>
 
                             <q-item v-close-popup v-if="showViewAs" to="/System/view_as">
                                 <q-item-section avatar>
                                     <q-icon name="sym_o_visibility" />
                                 </q-item-section>
-                                <q-item-section>View as</q-item-section>
+                                <q-item-section>{{ $t('View as') }}</q-item-section>
                             </q-item>
 
                             <q-separator />
@@ -171,7 +191,7 @@ provide('reloadMenu', reloadMenu)
                                 <q-item-section avatar>
                                     <q-icon name="logout" />
                                 </q-item-section>
-                                <q-item-section>Logout</q-item-section>
+                                <q-item-section>{{ $t('Logout') }}</q-item-section>
                             </q-item>
                         </q-list>
                     </q-menu>
@@ -193,7 +213,7 @@ provide('reloadMenu', reloadMenu)
         <q-drawer overlay v-model="rightDrawerOpen" side="right" bordered>
             <!-- drawer content -->
             <q-scroll-area class="fit">
-                <l-customizer v-model:headerColor="style.headerColor" v-model:theme="style.theme"
+                <l-customizer v-model:headerColor="style.color" v-model:theme="style.theme"
                     v-model:miniState="style.miniState" v-model:dense="style.dense"
                     v-model:menuOverlayHeader="style.menuOverlayHeader" />
             </q-scroll-area>
@@ -201,8 +221,6 @@ provide('reloadMenu', reloadMenu)
 
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <!-- Error message -->
-
-
             <q-card v-for="error in errors" flat class="q-ma-md" bordered style="border-color: var(--q-negative)">
                 <q-card-section>
                     <q-btn dense flat round icon="close" class="q-mr-sm" @click="light.removeError(error)"></q-btn>{{

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

@@ -10,6 +10,8 @@ if (props.permission) {
     if (my.granted) {
         granted.value = true;
     }
+} else {
+    granted.value = true;
 }
 
 </script>

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

@@ -11,6 +11,10 @@ const form = ref(null);
 const props = defineProps({
     modelValue: {
         type: Object
+    },
+    bordered: {
+        type: Boolean,
+        default: true
     }
 });
 
@@ -63,7 +67,7 @@ const onSubmit = (e) => {
 </script>
 <template>
     <q-form ref="form" @submit="onSubmit">
-        <l-card>
+        <l-card :bordered="bordered">
             <q-card-section>
                 <slot></slot>
             </q-card-section>

package/dist/runtime/lib/index.d.ts

@@ -14,4 +14,5 @@ import removeObject from "./removeObject";
 import t from "./t";
 import updateObject from "./updateObject";
 import viewAs from "./viewAs";
-export { addObject, f, getApiUrl, getCurrentUser, getObject, id, list, listData, login, m, mutation, q, removeObject, t, updateObject, viewAs };
+declare const notify: (message: string, color?: string) => void;
+export { addObject, f, getApiUrl, getCurrentUser, getObject, id, list, listData, login, m, mutation, q, removeObject, t, updateObject, viewAs, notify };

package/dist/runtime/lib/index.mjs

@@ -1,3 +1,4 @@
+import { Notify } from "quasar";
 import addObject from "./addObject.mjs";
 import f from "./f.mjs";
 import getApiUrl from "./getApiUrl.mjs";
@@ -14,4 +15,11 @@ import removeObject from "./removeObject.mjs";
 import t from "./t.mjs";
 import updateObject from "./updateObject.mjs";
 import viewAs from "./viewAs.mjs";
-export { addObject, f, getApiUrl, getCurrentUser, getObject, id, list, listData, login, m, mutation, q, removeObject, t, updateObject, viewAs };
+const notify = function(message, color = "green") {
+  Notify.create({
+    message,
+    color,
+    position: "top"
+  });
+};
+export { addObject, f, getApiUrl, getCurrentUser, getObject, id, list, listData, login, m, mutation, q, removeObject, t, updateObject, viewAs, notify };

package/dist/runtime/light.d.ts

@@ -4,4 +4,4 @@ interface Light {
     removeError: (error: String) => void;
 }
 export declare function useLight(): Light;
-export { addObject, f, getApiUrl, getCurrentUser, getObject, id, list, listData, login, m, mutation, q, removeObject, t, updateObject, viewAs } from "./lib";
+export { notify, addObject, f, getApiUrl, getCurrentUser, getObject, id, list, listData, login, m, mutation, q, removeObject, t, updateObject, viewAs } from "./lib";

package/dist/runtime/light.mjs

@@ -16,6 +16,7 @@ export function useLight() {
   };
 }
 export {
+  notify,
   addObject,
   f,
   getApiUrl,

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

@@ -6,7 +6,8 @@ const my = await q("my", ["username", "first_name", "last_name", "email", "phone
 <template>
     <l-page title="User profile">
         <template #header>
-            <q-btn rounded icon="sym_o_key" to="update-password" outline color="primary" label="Update password"></q-btn>
+            <l-btn icon="sym_o_key" to="update-password" label="Update password" />
+            <l-btn icon="sym_o_key" to="two-factor-auth" label="Two factor auth" />
         </template>
         <l-card>
             <l-list>

package/dist/runtime/pages/User/setting/2fa.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { reactive } from "vue"
+import { m } from "../../light"
+import { useQuasar } from "quasar";
+const quasar = useQuasar()
+const my2FA = await m("my2FA", [])
+const obj = reactive({});
+const save = async () => {
+
+    try {
+        await m("updateMy2FA", {
+            code: obj.code,
+            secret: my2FA.secret
+        });
+
+    } catch (e) {
+        quasar.notify({
+            message: e.message,
+            type: "negative",
+            position: "top"
+        })
+
+        return
+    }
+}
+
+</script>
+<template>
+    <l-page>
+
+        <l-card>
+            <l-form @save="save">
+
+                <div>
+
+                    <p>
+                        Now download the app and scan the qrcode. Input the code to the
+                        following input and submit
+                    </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>
+                    </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>
+                    </p>
+                </div>
+                <q-img :src="my2FA.image" width="250px" />
+                <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>
+
+        </l-card>
+
+    </l-page>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup>
+import { reactive } from "vue"
+import { q, m, notify } from "../../../light"
+const app = q("app"["hasBioAuth"]);
+</script>
+<template>
+    <l-card :bordered="false">
+
+
+        <q-card-section v-if="!app.hasBioAuth">
+            Biometric authentication is not installed, please install web-auth/webauthn-lib on the server.
+        </q-card-section>
+    </l-card>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup>
+import { reactive } from "vue"
+import { q, m, notify } from "../../../light"
+
+const obj = reactive(await q("my", ["username", "email", "first_name", "last_name"]))
+const save = async () => {
+    try {
+        await m("updateMy", {
+            data: {
+                email: obj.email,
+                first_name: obj.first_name,
+                last_name: obj.last_name
+
+            }
+        });
+        notify("Your profile has been updated")
+
+    } catch (e) {
+        notify(e.message, "red")
+    }
+
+
+
+}
+</script>
+<template>
+    <l-form @save="save" :bordered="false">
+        <l-input label="Username" v-model="obj.username" readonly></l-input>
+        <l-input label="Email" v-model="obj.email" required></l-input>
+        <l-input label="First Name" v-model="obj.first_name" required></l-input>
+        <l-input label="Last Name" v-model="obj.last_name"></l-input>
+
+    </l-form>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup>
+import { reactive } from "vue"
+import { q, m, notify } from "../../../light"
+const obj = reactive(await q("my", ["phone", "addr1", "addr2", "addr3"]))
+const save = async () => {
+    try {
+        await m("updateMy", {
+            data: obj
+        });
+        notify("Your information has been updated")
+
+    } catch (e) {
+        notify(e.message, "red")
+    }
+}
+</script>
+<template>
+    <l-form @save="save" :bordered="false">
+        <l-input label="Phone" v-model="obj.phone"></l-input>
+        <l-input label="Address1" v-model="obj.addr1"></l-input>
+        <l-input label="Address2" v-model="obj.addr2"></l-input>
+        <l-input label="Address3" v-model="obj.addr3"></l-input>
+
+    </l-form>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup>
+import { reactive } from "vue"
+import { q, m, notify } from "../../../light"
+
+const obj = reactive({
+    old_password: "",
+    new_password: "",
+    confirm_password: ""
+})
+
+const onSave = async () => {
+    if (await m("updatePassword", {
+        old_password: obj.old_password,
+        new_password: obj.new_password,
+    })) {
+        notify("Your password has been updated")
+    } else {
+        notify("Old password is incorrect", "red")
+    }
+}
+
+</script>
+<template>
+    <l-form @save="onSave" :bordered="false">
+        <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>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+    <div>Style</div>
+</template>

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

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, reactive } from "vue"
+import { q, m, notify } from "../../../light"
+
+const my = await q("my", ["twoFactorEnabled"])
+const my2FA = await m("my2FA", [])
+const obj = reactive({});
+const save = async () => {
+
+    try {
+        await m("updateMy2FA", {
+            code: obj.code,
+            secret: my2FA.secret
+        });
+        notify("Your 2FA has been updated")
+
+    } catch (e) {
+        notify(e.message, "red")
+    }
+}
+
+const show = ref(true);
+
+if (my.twoFactorEnabled) {
+    show.value = false;
+}
+
+
+</script>
+<template>
+    <l-form @save="save" :bordered="false" v-if="show">
+        <div>
+            <p>
+                Now download the app and scan the qrcode. Input the code to the
+                following input and submit
+            </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>
+            </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>
+            </p>
+        </div>
+        <q-img :src="my2FA.image" width="250px" />
+        <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" />
+        </q-card-section>
+
+    </div>
+</template>

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

@@ -0,0 +1,33 @@
+<script setup>
+import { ref } from "vue"
+const tab = ref("general")
+</script>
+
+<template>
+    <l-page>
+        <l-card>
+            <q-splitter unit="px" :model-value="120">
+                <template #before>
+                    <q-tabs v-model="tab" vertical >
+                        <q-route-tab name="general" icon="sym_o_info" :label="$t('General')" to="/User/setting" exact
+                            replace />
+                        <q-route-tab name="information" icon="sym_o_info" :label="$t('Information')"
+                            to="/User/setting/information" exact replace />
+                        <q-route-tab name="password" icon="sym_o_password" :label="$t('Password')"
+                            to="/User/setting/password" exact replace />
+                        <q-route-tab name="style" icon="sym_o_style" :label="$t('Style')" to="/User/setting/style" exact
+                            replace />
+                        <q-route-tab name="2fa" icon="sym_o_key" :label="$t('2FA')" to="/User/setting/two-factor-auth" exact replace />
+                        <q-route-tab name="bio" icon="sym_o_fingerprint" :label="$t('Bio')" to="/User/setting/bio-auth"
+                            exact replace />
+                    </q-tabs>
+                </template>
+
+                <template #after>
+                    <router-view>
+                    </router-view>
+                </template>
+            </q-splitter>
+        </l-card>
+    </l-page>
+</template>

package/dist/runtime/routes.d.ts

@@ -1,7 +1,19 @@
-declare const _default: {
+declare const _default: ({
     name: string;
     path: string;
     component: typeof index;
-}[];
+    children?: undefined;
+} | {
+    path: string;
+    component: typeof User_setting;
+    children: {
+        name: string;
+        path: string;
+        component: typeof User_setting_index;
+    }[];
+    name?: undefined;
+})[];
 export default _default;
 declare function index(): Promise<any>;
+declare function User_setting(): Promise<any>;
+declare function User_setting_index(): Promise<any>;

package/dist/runtime/routes.mjs

@@ -91,6 +91,46 @@ function User_profile() {
     /* webpackChunkName: "User-profile" */ './pages/User/profile.vue'
   )
 }
+function User_setting() {
+  return import(
+    /* webpackChunkName: "User-setting" */ './pages/User/setting.vue'
+  )
+}
+function User_setting_index() {
+  return import(
+    /* webpackChunkName: "User-setting-index" */ './pages/User/setting/index.vue'
+  )
+}
+function User_setting_2fa() {
+  return import(
+    /* webpackChunkName: "User-setting-2fa" */ './pages/User/setting/2fa.vue'
+  )
+}
+function User_setting_bio_auth() {
+  return import(
+    /* webpackChunkName: "User-setting-bio-auth" */ './pages/User/setting/bio-auth.vue'
+  )
+}
+function User_setting_information() {
+  return import(
+    /* webpackChunkName: "User-setting-information" */ './pages/User/setting/information.vue'
+  )
+}
+function User_setting_password() {
+  return import(
+    /* webpackChunkName: "User-setting-password" */ './pages/User/setting/password.vue'
+  )
+}
+function User_setting_style() {
+  return import(
+    /* webpackChunkName: "User-setting-style" */ './pages/User/setting/style.vue'
+  )
+}
+function User_setting_two_factor_auth() {
+  return import(
+    /* webpackChunkName: "User-setting-two-factor-auth" */ './pages/User/setting/two-factor-auth.vue'
+  )
+}
 function User_update_password() {
   return import(
     /* webpackChunkName: "User-update-password" */ './pages/User/update-password.vue'
@@ -233,6 +273,47 @@ export default [
     path: '/User/profile',
     component: User_profile,
   },
+  {
+    path: '/User/setting',
+    component: User_setting,
+    children: [
+      {
+        name: 'User-setting',
+        path: '',
+        component: User_setting_index,
+      },
+      {
+        name: 'User-setting-2fa',
+        path: '2fa',
+        component: User_setting_2fa,
+      },
+      {
+        name: 'User-setting-bio-auth',
+        path: 'bio-auth',
+        component: User_setting_bio_auth,
+      },
+      {
+        name: 'User-setting-information',
+        path: 'information',
+        component: User_setting_information,
+      },
+      {
+        name: 'User-setting-password',
+        path: 'password',
+        component: User_setting_password,
+      },
+      {
+        name: 'User-setting-style',
+        path: 'style',
+        component: User_setting_style,
+      },
+      {
+        name: 'User-setting-two-factor-auth',
+        path: 'two-factor-auth',
+        component: User_setting_two_factor_auth,
+      },
+    ],
+  },
   {
     name: 'User-update-password',
     path: '/User/update-password',

package/package.json

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