@hostlink/nuxt-light 1.16.0 → 1.17.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.16.0",
+  "version": "1.17.1",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/L/System/Setting/developer.vue

@@ -4,11 +4,14 @@ import { useQuasar } from 'quasar'
 
 const $q = useQuasar()
 
-const modelValue = defineModel<{
-    mode: string
-}>()
 
+export interface LSystemSettingDeveloperProps {
+    mode: string
+}
 
+const modelValue = defineModel<LSystemSettingDeveloperProps>({
+    required: true,
+})
 
 if (modelValue.value.mode != 'prod') {
     modelValue.value.mode = 'dev'
@@ -16,18 +19,18 @@ if (modelValue.value.mode != 'prod') {
     modelValue.value.mode = 'prod'
 }
 
-const onSubmit = async (d, form) => {
-    let data = [];
+const onSubmit = async (d: LSystemSettingDeveloperProps) => {
+    let data: { name: string, value: string }[] = [];
     Object.keys(d).forEach((key) => {
         data.push({
             name: key,
-            value: d[key]
+            value: d[key as keyof LSystemSettingDeveloperProps]
         })
     })
     await m("updateAppConfigs", { data })
     //update the modelValue
     Object.keys(d).forEach((key) => {
-        modelValue.value[key] = d[key]
+        modelValue.value[key as keyof LSystemSettingDeveloperProps] = d[key as keyof LSystemSettingDeveloperProps]
     })
 
     $q.notify({ message: "Settings saved", color: "positive" })

package/dist/runtime/components/L/System/Setting/forget-password.vue

@@ -4,13 +4,17 @@ import { q, m } from '#imports'
 import { useQuasar } from 'quasar'
 const $q = useQuasar()
 
-const modelValue = defineModel<{
+export type LSystemSettingForgetPasswordProps = {
     forget_password_enabled: string,
     forget_password_subject: string,
     forget_password_template: string,
-}>()
+}
+
+const modelValue = defineModel<LSystemSettingForgetPasswordProps>({
+    required: true,
+})
 
-if (!modelValue.value.forget_password_enabled == "0") {
+if (modelValue.value.forget_password_enabled != "0") {
     modelValue.value.forget_password_enabled = "1"
 }
 
@@ -23,8 +27,8 @@ if (!modelValue.value.forget_password_template) {
 }
 
 
-const onSubmit = async (d) => {
-    let data = [];
+const onSubmit = async (d: any) => {
+    let data: any = [];
     Object.keys(d).forEach((key) => {
         if (d[key] === undefined) {
             d[key] = ""
@@ -36,10 +40,11 @@ const onSubmit = async (d) => {
         })
     })
     await m("updateAppConfigs", { data })
-    //update the props.data
-    Object.keys(d).forEach((key) => {
-        modelValue.value[key] = d[key]
-    })
+
+    modelValue.value.forget_password_enabled = d.forget_password_enabled
+    modelValue.value.forget_password_subject = d.forget_password_subject
+    modelValue.value.forget_password_template = d.forget_password_template
+
     $q.notify({ message: "Settings saved", color: "positive" })
 }
 

package/dist/runtime/components/L/System/Setting/mail.vue

@@ -74,7 +74,7 @@ const onSubmit = async (d) => {
             <FormKit type="l-input" label="SMTP Password" name="mail_password"></FormKit>
 
             <FormKit type="l-select" label="SMTP Encryption" name="mail_encryption" :options="[
-                { label: 'None', value: 'none' },
+                { label: 'None', value: '' },
                 { label: 'SSL', value: 'ssl' },
                 { label: 'TLS', value: 'tls' },
             ]"></FormKit>

package/dist/runtime/components/L/System/Setting/security.vue

@@ -4,7 +4,7 @@ import { useQuasar } from 'quasar'
 
 const $q = useQuasar()
 
-const modelValue = defineModel<{
+export type LSystemSettingSecurityProps = {
     password_contains_uppercase: string
     password_contains_lowercase: string
     password_contains_numeric: string
@@ -14,20 +14,25 @@ const modelValue = defineModel<{
     auth_lockout_duration: string
     auth_lockout_attempts: string
     access_token_expire: string
-}>()
+}
+
+const modelValue = defineModel<LSystemSettingSecurityProps>({
+    required: true
+})
+
+const onSubmit = async (d: LSystemSettingSecurityProps) => {
+    let data: { name: string, value: string }[] = []
 
-const onSubmit = async (d, form) => {
-    let data = [];
     Object.keys(d).forEach((key) => {
         data.push({
             name: key,
-            value: d[key]
+            value: d[key as keyof LSystemSettingSecurityProps]
         })
     })
     await m("updateAppConfigs", { data })
     //update the modelValue
     Object.keys(d).forEach((key) => {
-        modelValue.value[key] = d[key]
+        modelValue.value[key as keyof LSystemSettingSecurityProps] = d[key as keyof LSystemSettingSecurityProps]
     })
 
     $q.notify({ message: "Settings saved", color: "positive" })
@@ -46,7 +51,7 @@ const onSubmit = async (d, form) => {
         two_factor_authentication: modelValue.two_factor_authentication,
         auth_lockout_duration: modelValue.auth_lockout_duration,
         auth_lockout_attempts: modelValue.auth_lockout_attempts,
-        access_token_expire: modelValue.access_token_expire
+        access_token_expire: modelValue.access_token_expire,
 
     }" @submit="onSubmit">
         <q-field label="Password policy" stack-label :color="$light.color">
@@ -63,9 +68,8 @@ const onSubmit = async (d, form) => {
         </FormKit>
 
 
-        <q-field label="Two factor authentication" stack-label :color="$light.color">
-            <FormKit type="l-checkbox" label="Enable" name="two_factor_authentication" true-value="1" false-value="0" />
-        </q-field>
+        <FormKit type="l-checkbox" name="two_factor_authentication" true-value="1" false-value="0"
+            label="Two factor authentication" />
 
         <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."
@@ -78,5 +82,13 @@ const onSubmit = async (d, form) => {
         <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)."
             validation="required" />
+
+
+        <!-- form-kit label="Password expiration" true-value="1" false-value="0" name="password_expiration"
+            type="l-checkbox"></form-kit>
+
+
+        <form-kit label="Password expiration duration" name="password_expiration_duration" type="l-input"
+            hint="The number of days before the password expires. Default is 90 days." validation="required"></form-kit -->
     </FormKit>
 </template>

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

@@ -18,7 +18,16 @@ watch(route, (to, from) => {
 
 let app = null
 try {
-    app = (await q({ app: ['company', 'companyLogo', 'logged', 'twoFactorAuthentication', 'googleClientId'] })).app;
+    app = (await q({
+        app: {
+            company: true,
+            companyLogo: true,
+            logged: true,
+            twoFactorAuthentication: true,
+            googleClientId: true,
+            forgetPasswordEnabled: true
+        }
+    })).app;
     light.setCompany(app.company);
     light.setCompanyLogo(app.companyLogo);
 } catch (e) {
@@ -41,8 +50,7 @@ provide('color', color)
     <q-layout v-if="!app.logged">
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
-                <l-login :two-factor-authentication="app.twoFactorAuthentication"
-                    :google-client-id="app.googleClientId"></l-login>
+                <l-login v-bind="app"></l-login>
             </q-page>
         </q-page-container>
     </q-layout>
@@ -53,7 +61,7 @@ provide('color', color)
             <slot name="header"></slot>
         </template>
 
-      
+
 
 
 

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

@@ -3,14 +3,15 @@ import { useLight } from "#imports";
 import { ref, reactive, onMounted } from 'vue'
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { m, notify, api } from '#imports';
+import { m, api } from '#imports';
 
 
 const light = useLight();
 
 const props = defineProps({
   twoFactorAuthentication: Boolean,
-  googleClientId: String
+  googleClientId: String,
+  forgetPasswordEnabled: Boolean
 })
 
 const { t } = useI18n();
@@ -20,8 +21,28 @@ const data = reactive({
   username: "", password: "", code: ""
 });
 
+
 const $q = useQuasar()
 
+const loginWithCode = (username, password) => {
+  $q.dialog({
+    title: "Enter your code",
+    message: "Please enter your two factor authentication code (If you lost your authenticator, please contact your administrator)",
+    prompt: {
+      type: "text",
+      required: true
+    },
+    cancel: true,
+    persistent: true
+  }).onOk(async code => {
+    data.username = username;
+    data.password = password;
+    data.code = code;
+    submit();
+  });
+
+}
+
 const submit = async () => {
   if (await form1.value.validate()) {
 
@@ -29,7 +50,20 @@ const submit = async () => {
       await api.auth.login(data.username, data.password, data.code)
       window.self.location.reload();
     } catch (e) {
-      notify(e.message, "negative");
+      data.code = "";
+
+      if (e.message == "two factor authentication code is required") {
+
+        loginWithCode(data.username, data.password);
+        return;
+      }
+
+      $q.notify({
+        message: e.message,
+        color: "negative",
+        icon: "sym_o_error",
+      });
+
 
     }
   }
@@ -192,7 +226,8 @@ onMounted(() => {
     <q-card-actions>
       <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit" />
       <l-btn v-if="hasBioLogin" outline rounded color="primary" icon="sym_o_fingerprint" @click="bioLogin" />
-      <l-btn label="Forget password" outline rounded color="primary" icon="sym_o_lock_reset" @click="forgetPassword" />
+      <l-btn label="Forget password" outline rounded color="primary" icon="sym_o_lock_reset" @click="forgetPassword"
+        v-if="forgetPasswordEnabled" />
     </q-card-actions>
     <q-card-actions v-if="props.googleClientId">
       <div>

package/dist/runtime/index.d.ts

@@ -64,21 +64,30 @@ declare module '@formkit/inputs' {
             number?: string;
             dense?: boolean;
         };
-    }
-    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        lCheckbox: {
+            type: 'l-checkbox';
+            name: string;
+            label: string;
+            dense?: boolean;
+        };
         lDatePicker: {
             type: 'l-date-picker';
             name: string;
             label: string;
             dense?: boolean;
         };
-    }
-    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
         lForm: {
             type: 'l-form';
             gutter?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
             bordered?: boolean;
         };
+        lSelect: {
+            type: 'l-select';
+            name: string;
+            label: string;
+            options: Array<any>;
+            dense?: boolean;
+        };
     }
 }
 export declare const useLight: (options?: {

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

@@ -1,5 +1,5 @@
 <script setup>
-import { m } from '../../'
+import { m } from '#imports'
 import { useQuasar } from "quasar"
 const quasar = useQuasar();
 
@@ -25,11 +25,14 @@ const onSubmit = async (data) => {
 </script>
 <template>
     <l-page>
-        <FormKit type="l-form" @submit="onSubmit">
-            <FormKit type="l-input" label="Email" name="email" validation="required|email"></FormKit>
-            <FormKit type="l-input" label="Subject" name="subject" validation="required"></FormKit>
-            <FormKit type="l-input" input-type="textarea" label="Content" name="content" validation="required">
-            </FormKit>
-        </FormKit>
+        <form-kit type="l-form" @submit="onSubmit" :value="{
+            subject: 'Test email',
+            content: 'Hello, this is a test email'
+        }">
+            <form-kit type="l-input" label="Email" name="email" validation="required|email"></form-kit>
+            <form-kit type="l-input" label="Subject" name="subject" validation="required"></form-kit>
+            <form-kit type="l-input" input-type="textarea" label="Content" name="content" validation="required">
+            </form-kit>
+        </form-kit>
     </l-page>
 </template>

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

@@ -1,7 +1,10 @@
 <script setup>
-import { useLight, getObject } from "#imports";
+import { useLight, getObject, m } from "#imports";
 import { useRoute } from "vue-router"
 import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
 const route = useRoute();
 
 const obj = await getObject(["canUpdate"]);
@@ -11,6 +14,36 @@ const light = useLight();
 const tab = ref('overview');
 const id = route.params.user_id;
 
+const reset2fa = async () => {
+
+    //confirm
+    await $q.dialog({
+        title: "Reset 2FA",
+        message: "Are you sure you want to reset 2FA?",
+        color: "negative",
+        ok: true,
+        cancel: true
+    }).onOk(async () => {
+        try {
+            await m('reset2FA', { id: parseInt(id) });
+            $q.notify({
+                type: 'positive',
+                message: '2FA reset successfully'
+            });
+        } catch (e) {
+            $q.notify({
+                type: 'negative',
+                message: e.message
+            });
+        }
+
+    })
+
+
+
+
+
+}
 
 </script>
 
@@ -21,6 +54,7 @@ const id = route.params.user_id;
             <l-btn to="change-password" icon="sym_o_key" permission="user.changePassword"
                 label="Change password"></l-btn>
             <l-btn to="update-role" icon="sym_o_people" permission="user.role.add" label="Update role"></l-btn>
+            <l-btn label="Reset 2FA" icon="sym_o_key" permission="user.reset2fa" @click="reset2fa"></l-btn>
         </template>
 
         <q-card flat bordered>

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

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, reactive } from "vue"
+import { useQuasar } from "quasar"
 import { q, m, notify } from '#imports'
+const $q = useQuasar()
 
 const my = await q("my", ["twoFactorEnabled"])
 const my2FA = await m("my2FA", [])
@@ -25,6 +27,21 @@ if (my.twoFactorEnabled) {
     show.value = false;
 }
 
+const onCopy = () => {
+    navigator.clipboard.writeText(my2FA.secret).then(() => {
+        $q.notify({
+            message: "Secret copied",
+            color: "green",
+        })
+    }, () => {
+        $q.notify({
+            message: "Failed to copy",
+            color: "red",
+        })
+
+    })
+}
+
 
 </script>
 <template>
@@ -37,18 +54,33 @@ if (my.twoFactorEnabled) {
             <p>
                 For Android user, install
                 <a type="primary" target="_blank"
-                    href="https://play.google.com/store/apps/details?id=com.azure.authenticator">Authenticator</a>
+                    href="https://play.google.com/store/apps/details?id=com.azure.authenticator">Microsoft
+                    Authenticator</a>
+
+                or
+                <a type="primary" target="_blank"
+                    href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Google
+                    Authenticator</a>
+
             </p>
 
             <p>
                 For iOS user, install
                 <a type="primary" target="_blank"
-                    href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458">Authenticator</a>
+                    href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458">Microsoft
+                    Authenticator</a>
+                or
+                <a type="primary" target="_blank"
+                    href="https://apps.apple.com/us/app/google-authenticator/id388497605">Google
+                    Authenticator</a>
+
             </p>
         </div>
         <q-img :src="my2FA.image" width="250px" />
         <p>
-            Secret : {{ my2FA.secret }}
+            Secret : <strong>{{ my2FA.secret }}</strong>
+
+            <q-btn flat round dense icon="sym_o_content_copy" @click="onCopy" />
         </p>
 
         <l-input v-model="obj.code" label="Code"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.16.0",
+  "version": "1.17.1",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",