@hostlink/nuxt-light 1.15.4 → 1.17.0

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.15.4",
+  "version": "1.17.0",
   "builder": {
-    "@nuxt/module-builder": "0.8.3",
+    "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"
   }
 }

package/dist/runtime/components/L/ForgetPasswordDialog.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { ref } from 'vue'
+import { useQuasar, useDialogPluginComponent } from 'quasar'
+import { m, api } from '#imports';
+const $q = useQuasar()
+
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+
+const username = ref('')
+const email = ref('')
+const onOKClick = async () => {
+    if (username.value == '' || email.value == '') {
+        $q.notify({
+            type: 'negative',
+            message: 'Username and Email is required'
+        })
+        return;
+    }
+
+    try {
+        $q.loading.show();
+        await api.auth.forgetPassword(username.value, email.value);
+        onDialogOK({
+            username: username.value,
+            email: email.value
+        })
+    } catch (e) {
+        $q.notify({
+            type: 'negative',
+            message: e.message
+        })
+        onDialogCancel()
+    } finally {
+        $q.loading.hide();
+    }
+
+}
+
+</script>
+
+<template>
+    <q-dialog ref="dialogRef">
+        <q-card class="q-dialog-plugin">
+
+            <q-card-section class="q-dialog__title">
+                Forget Password
+            </q-card-section>
+
+            <q-card-section class="q-dialog__message">
+                Please enter your username and email address, we will send you a code to reset your password
+            </q-card-section>
+
+            <q-card-section>
+                <q-input v-model="username" label="Username" stack-label
+                    :rules="[val => !!val || 'Username is required']" hide-bottom-space />
+                <q-input v-model="email" label="Email" stack-label type="email" hide-bottom-space
+                    :rules="[val => !!val || 'Email is required']" />
+            </q-card-section>
+
+
+            <q-card-actions align="right">
+                <q-btn label="Cancel" @click="onDialogCancel" flat color="primary" />
+                <q-btn label="OK" @click="onOKClick" flat color="primary" />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>

package/dist/runtime/components/L/ForgetPasswordResetDialog.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useQuasar, useDialogPluginComponent } from 'quasar'
+import { m, api } from '#imports';
+const $q = useQuasar()
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+
+defineProps({
+    username: String,
+    code: String
+})
+
+</script>
+<template>
+    <q-dialog ref="dialogRef">
+        <q-card class="q-dialog-plugin">
+            <q-card-section class="q-dialog__title">
+                Reset password
+            </q-card-section>
+
+            <q-card-section class="q-dialog__message">
+                Please enter your new password
+            </q-card-section>
+
+            <q-card-section>
+                <form-kit type="form" :actions="false">
+                    <form-kit type="l-input" name="password" :stack-label="true"></form-kit>
+                </form-kit>
+            </q-card-section>
+
+
+
+        </q-card>
+    </q-dialog>
+</template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { q, m } from '#imports'
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+const modelValue = defineModel<{
+    mode: string
+}>()
+
+
+
+if (modelValue.value.mode != 'prod') {
+    modelValue.value.mode = 'dev'
+} else {
+    modelValue.value.mode = 'prod'
+}
+
+const onSubmit = async (d, form) => {
+    let data = [];
+    Object.keys(d).forEach((key) => {
+        data.push({
+            name: key,
+            value: d[key]
+        })
+    })
+    await m("updateAppConfigs", { data })
+    //update the modelValue
+    Object.keys(d).forEach((key) => {
+        modelValue.value[key] = d[key]
+    })
+
+    $q.notify({ message: "Settings saved", color: "positive" })
+}
+
+</script>
+<template>
+    <FormKit type="l-form" :bordered="false" :value="{
+        mode: modelValue.mode
+    }" @submit="onSubmit">
+        <FormKit label="Mode" type="l-select" :options="[
+            { label: 'Production', value: 'prod' },
+            { label: 'Development', value: 'dev' },
+
+        ]" name="mode" validation="required">
+        </FormKit>
+    </FormKit>
+</template>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+
+import { q, m } from '#imports'
+import { useQuasar } from 'quasar'
+const $q = useQuasar()
+
+const modelValue = defineModel<{
+    forget_password_enabled: string,
+    forget_password_subject: string,
+    forget_password_template: string,
+}>()
+
+if (!modelValue.value.forget_password_enabled == "0") {
+    modelValue.value.forget_password_enabled = "1"
+}
+
+if (!modelValue.value.forget_password_subject) {
+    modelValue.value.forget_password_subject = "Password Reset Code"
+}
+
+if (!modelValue.value.forget_password_template) {
+    modelValue.value.forget_password_template = "Your password reset code is: {code}"
+}
+
+
+const onSubmit = async (d) => {
+    let data = [];
+    Object.keys(d).forEach((key) => {
+        if (d[key] === undefined) {
+            d[key] = ""
+        }
+
+        data.push({
+            name: key,
+            value: d[key]
+        })
+    })
+    await m("updateAppConfigs", { data })
+    //update the props.data
+    Object.keys(d).forEach((key) => {
+        modelValue.value[key] = d[key]
+    })
+    $q.notify({ message: "Settings saved", color: "positive" })
+}
+
+</script>
+<template>
+    <form-kit type="l-form" :value="{
+        forget_password_enabled: modelValue.forget_password_enabled,
+        forget_password_subject: modelValue.forget_password_subject,
+        forget_password_template: modelValue.forget_password_template,
+    }" @submit="onSubmit">
+        <form-kit type="l-checkbox" label="Forget Password Enabled" name="forget_password_enabled" true-value="1"
+            false-value="0" />
+
+        <form-kit type="l-input" label="Forget Password Subject" name="forget_password_subject" />
+        <form-kit type="l-input" label="Forget Password Template" name="forget_password_template"
+            input-type="textarea" />
+
+    </form-kit>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { q, m } from '#imports'
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+const modelValue = defineModel<{
+    company: string
+    company_logo: string
+    copyright_name: string
+    copyright_year: string
+}>()
+
+
+const onSubmit = async (d, form) => {
+    let data = [];
+    Object.keys(d).forEach((key) => {
+        data.push({
+            name: key,
+            value: d[key]
+        })
+    })
+    await m("updateAppConfigs", { data })
+
+    Object.keys(d).forEach((key) => {
+        modelValue.value[key] = d[key]
+
+    })
+
+    $q.notify({ message: "Settings saved", color: "positive" })
+}
+
+</script>
+<template>
+    <FormKit type="l-form" :bordered="false" :value="{
+        company: modelValue.company,
+        company_logo: modelValue.company_logo,
+        copyright_name: modelValue.copyright_name,
+        copyright_year: modelValue.copyright_year
+    }" @submit="onSubmit">
+
+        <FormKit type="l-input" label="Company" name="company" validation="required"></FormKit>
+        <FormKit type="l-input" label="Company logo" name="company_logo"></FormKit>
+
+        <FormKit label="Copyright name" type="l-input" name="copyright_name" validation="required" />
+        <FormKit label="Copyright year" type="l-input" name="copyright_year" validation="required" />
+
+    </FormKit>
+</template>

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { q, m } from '#imports'
+import { useQuasar } from 'quasar'
+const $q = useQuasar()
+
+const modelValue = defineModel<{
+    mail_driver: string,
+    mail_host: string
+    mail_port: string
+    mail_username: string
+    mail_password: string
+    mail_encryption: string
+    mail_from: string
+    mail_from_name: string
+    mail_reply_to: string
+    mail_reply_to_name: string
+}>()
+
+if (!modelValue.value.mail_driver) {
+    modelValue.value.mail_driver = "mail"
+}
+
+const onSubmit = async (d) => {
+    let data = [];
+    Object.keys(d).forEach((key) => {
+        if (d[key] === undefined) {
+            d[key] = ""
+        }
+
+        data.push({
+            name: key,
+            value: d[key]
+        })
+    })
+    await m("updateAppConfigs", { data })
+    //update the props.data
+    Object.keys(d).forEach((key) => {
+        modelValue.value[key] = d[key]
+    })
+    $q.notify({ message: "Settings saved", color: "positive" })
+}
+
+</script>
+<template>
+    <FormKit type="l-form" :bordered="false" :value="{
+        mail_driver: modelValue.mail_driver,
+        mail_host: modelValue.mail_host,
+        mail_port: modelValue.mail_port,
+        mail_username: modelValue.mail_username,
+        mail_password: modelValue.mail_password,
+        mail_encryption: modelValue.mail_encryption,
+        mail_from: modelValue.mail_from,
+        mail_from_name: modelValue.mail_from_name,
+        mail_reply_to: modelValue.mail_reply_to,
+        mail_reply_to_name: modelValue.mail_reply_to_name,
+    }" @submit="onSubmit" #default="{ value }">
+
+        <FormKit type="l-select" label="Mail Driver" name="mail_driver" :options="[{
+            label: 'Mail', value: 'mail'
+        }, {
+            label: 'SMTP', value: 'smtp'
+        }]" validation="required"></FormKit>
+
+        <FormKit type="l-input" label="From Address" name="mail_from" validation="email"></FormKit>
+        <FormKit type="l-input" label="From Name" name="mail_from_name"></FormKit>
+        <FormKit type="l-input" label="Reply To Address" name="mail_reply_to" validation="email">
+        </FormKit>
+        <FormKit type="l-input" label="Reply To Name" name="mail_reply_to_name"></FormKit>
+
+        <template v-if="value.mail_driver === 'smtp'">
+            <FormKit type="l-input" label="SMTP Host" name="mail_host"></FormKit>
+            <FormKit type="l-input" label="SMTP Port" name="mail_port"></FormKit>
+            <FormKit type="l-input" label="SMTP Username" name="mail_username"></FormKit>
+            <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: '' },
+                { label: 'SSL', value: 'ssl' },
+                { label: 'TLS', value: 'tls' },
+            ]"></FormKit>
+        </template>
+
+
+
+
+    </FormKit>
+
+</template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { q, m } from '#imports'
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+const modelValue = defineModel<{
+    file_manager: string
+    revision: string
+}>()
+
+const onSubmit = async (d, form) => {
+    let data = [];
+    Object.keys(d).forEach((key) => {
+        data.push({
+            name: key,
+            value: d[key]
+        })
+    })
+    await m("updateAppConfigs", {
+        data
+    })
+    //update the modelValue
+    Object.keys(d).forEach((key) => {
+        modelValue.value[key] = d[key]
+    })
+
+    $q.notify({
+        message: "Settings saved",
+        color: "positive"
+    })
+}
+
+
+</script>
+
+<template>
+    <FormKit type="l-form" :bordered="false" :value="{
+        file_manager: modelValue.file_manager,
+        revision: modelValue.revision
+    }" @submit="onSubmit">
+        <q-field label="File manager" stack-label>
+            <FormKit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
+        </q-field>
+
+        <FormKit type="l-select" label="Revision" name="revision" use-input use-chips multiple hide-dropdown-icon
+            input-debounce="0" new-value-mode="add-unique" />
+
+
+    </FormKit>
+
+</template>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { q, m } from '#imports'
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+const modelValue = defineModel<{
+    password_contains_uppercase: string
+    password_contains_lowercase: string
+    password_contains_numeric: string
+    password_contains_symbol: string
+    password_min_length: string
+    two_factor_authentication: string
+    auth_lockout_duration: string
+    auth_lockout_attempts: string
+    access_token_expire: string
+}>()
+
+const onSubmit = async (d, form) => {
+    let data = [];
+    Object.keys(d).forEach((key) => {
+        data.push({
+            name: key,
+            value: d[key]
+        })
+    })
+    await m("updateAppConfigs", { data })
+    //update the modelValue
+    Object.keys(d).forEach((key) => {
+        modelValue.value[key] = d[key]
+    })
+
+    $q.notify({ message: "Settings saved", color: "positive" })
+}
+
+</script>
+
+<template>
+
+    <FormKit type="l-form" :bordered="false" :value="{
+        password_contains_uppercase: modelValue.password_contains_uppercase,
+        password_contains_lowercase: modelValue.password_contains_lowercase,
+        password_contains_numeric: modelValue.password_contains_numeric,
+        password_contains_symbol: modelValue.password_contains_symbol,
+        password_min_length: modelValue.password_min_length,
+        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
+
+    }" @submit="onSubmit">
+        <q-field label="Password policy" stack-label :color="$light.color">
+            <FormKit type="l-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
+                false-value="0" />
+            <FormKit type="l-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"
+                false-value="0" />
+            <FormKit type="l-checkbox" label="Number" name="password_contains_numeric" true-value="1" false-value="0" />
+            <FormKit type="l-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="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 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."
+            validation="required" />
+
+        <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."
+            validation="required" />
+
+        <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" />
+    </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-checkbox.vue

@@ -5,15 +5,16 @@ import type { QCheckboxProps } from "quasar"
 export interface LCheckboxProps extends QCheckboxProps {
 }
 
+const modelValue = defineModel();
+
 const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps<LCheckboxProps>()
 
 const localValue = computed({
-    get: () => props.modelValue,
+    get: () => modelValue.value,
     set: (value) => {
-        //  popup.value.hide();
-        emit('update:modelValue', value)
+        modelValue.value = value;
     }
 });
 </script>

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

@@ -3,24 +3,46 @@ 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 i18n = useI18n();
+const { t } = useI18n();
+
 const form1 = ref(null);
 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()) {
 
@@ -28,41 +50,63 @@ 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",
+      });
+
 
     }
   }
 }
 
-const forgetPassword = async () => {
+const resetPassword = (username, code) => {
   $q.dialog({
-    title: i18n.t("Forget password"),
-    message: "Please enter your email address, we will send you a code to reset your password",
+    title: "Reset password",
+    message: "Please enter your new password",
     prompt: {
-      type: "email",
-      required: true,
+      model: "",
+      type: "password",
       isValid: (val) => {
-        //test val is email
-        const re = /\S+@\S+\.\S+/;
-        return re.test(val);
+        return val.length > 0;
       }
     },
-    cancel: true
-  }).onOk(async email => {
-    $q.loading.show();
+    cancel: true,
+    persistent: true
+  }).onOk(async password => {
     try {
-      await api.auth.forgetPassword(email);
+      await api.auth.resetPassword(username, password, code);
+      $q.notify({
+        message: "Your password has been reset successfully",
+        color: "positive",
+        icon: "sym_o_check",
+      });
     } catch (e) {
       $q.notify({
         message: e.message,
         color: "negative",
         icon: "sym_o_error",
       });
-      return;
-    } finally {
-      $q.loading.hide();
+      resetPassword(username, code);
     }
+  });
+}
 
+
+const forgetPassword = async () => {
+
+  $q.dialog({
+    component: resolveComponent("l-forget-password-dialog"),
+  }).onOk(async (data) => {
     $q.dialog({
       title: "Enter your code",
       message: "Please enter the code sent to your email, your code will expire in 10 minutes",
@@ -73,23 +117,8 @@ const forgetPassword = async () => {
       cancel: true,
       persistent: true
     }).onOk(async code => {
-      if (await api.auth.verifyCode(email, code)) {
-        $q.dialog({
-          title: "Reset password",
-          message: "Please enter your new password",
-          required: true,
-          prompt: {
-            type: "password"
-          },
-        }).onOk(async password => {
-          if (await api.auth.resetPassword(email, password, code)) {
-            $q.notify({
-              message: "Your password has been reset successfully",
-              color: "positive",
-              icon: "sym_o_check",
-            });
-          }
-        });
+      if (await api.auth.verifyCode(data.username, code)) {
+        resetPassword(data.username, code);
       } else {
         $q.notify({
           message: "Your code is invalid",

package/dist/runtime/formkit/Checkbox.vue

@@ -14,7 +14,9 @@ const { error, errorMessage } = getErrorMessage(props.context.node);
 
 </script>
 <template>
-    <l-checkbox v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage">
+
+    <l-checkbox v-model="value" :label="context.label" v-bind="context.attrs" :error="error"
+        :error-message="errorMessage">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/formkit/Form.vue

@@ -8,16 +8,6 @@ const route = useRoute();
 const router = useRouter();
 const quasar = useQuasar();
 
-declare module '@formkit/inputs' {
-    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
-        lForm: {
-            type: 'l-form';
-            gutter?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-            bordered?: boolean;
-        };
-    }
-}
-
 
 let props = defineProps({
     context: {

package/dist/runtime/formkit/Input.vue

@@ -47,7 +47,6 @@ const onBlur = () => {
         error.value = false
     }
 }
-
 </script>
 <template>
     <l-input v-model="value" :label="context?.label" v-bind="context?.attrs" :error="error" :type="context?.inputType"

package/dist/runtime/index.d.ts

@@ -73,6 +73,13 @@ declare module '@formkit/inputs' {
             dense?: boolean;
         };
     }
+    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        lForm: {
+            type: 'l-form';
+            gutter?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+            bordered?: boolean;
+        };
+    }
 }
 export declare const useLight: (options?: {
     color?: string;
@@ -118,4 +125,4 @@ export declare const useLight: (options?: {
     isGranted: (right?: string) => boolean;
     setPermissions: (permissions: Array<string>) => void;
 };
-export * from "./lib.js";
+export * from "./lib/index.js";

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

@@ -1,9 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { useQuasar } from 'quasar'
-import { reset } from "@formkit/core"
 import { q, m } from '#imports'
-const quasar = useQuasar()
 
 const { app } = await q({ app: { config: ["name", "value"] } })
 const obj = app.config.reduce((acc, cur) => {
@@ -11,163 +8,32 @@ const obj = app.config.reduce((acc, cur) => {
     return acc
 }, {});
 
-const fields = ["company", "company_logo",
-    "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",
-    "revision"
-];
-
 obj.revision = obj.revision ? obj.revision.split(',') : []
 
-//filter out fields that are not in the app.config table
-Object.keys(obj).forEach((key) => {
-    if (!fields.includes(key)) {
-        delete obj[key]
-    }
-})
-
-const onSubmit = async (d, form) => {
-    let data = [];
-    Object.keys(d).forEach((key) => {
-        data.push({
-            name: key,
-            value: d[key]
-        })
-    })
-
-    await m("updateAppConfigs", { data })
-    //show success
-    quasar.notify({
-        message: "Settings updated",
-        color: "positive",
-        icon: "check"
-    })
-
-    reset(form, d)
-
-
-}
-
-
-if (obj.mode != 'prod') {
-    obj.mode = 'dev'
-} else {
-    obj.mode = 'prod'
-}
-
 const tab = ref('general')
-
 </script>
 <template>
     <l-page>
 
         <l-card>
-            <q-splitter unit="px" :model-value="120">
+            <q-splitter unit="px" :model-value="145">
                 <template #before>
                     <q-tabs v-model="tab" vertical :active-color="$light.color">
                         <q-tab name="general" icon="sym_o_info" :label="$t('General')" />
                         <q-tab name="security" icon="sym_o_security" :label="$t('Security')" />
                         <q-tab name="Modules" icon="sym_o_apps" :label="$t('Modules')" />
-                        <q-tab name="Developer" icon="sym_o_code" :label="$t('Developer')" />
+                        <q-tab name="mail" icon="sym_o_email" :label="$t('Mail')" />
+                        <q-tab name="forget-password" icon="sym_o_lock" :label="$t('Forget Password')" />
+                        <q-tab name="developer" icon="sym_o_code" :label="$t('Developer')" />
                     </q-tabs>
                 </template>
                 <template #after>
-                    <FormKit type="l-form" :bordered="false" :value="{
-                        company: obj.company,
-                        company_logo: obj.company_logo,
-                        copyright_name: obj.copyright_name,
-                        copyright_year: obj.copyright_year
-                    }" v-if="tab == 'general'" @submit="onSubmit">
-                        <FormKit type="l-input" label="Company" name="company" validation="required"></FormKit>
-                        <FormKit type="l-input" label="Company logo" name="company_logo"></FormKit>
-
-                        <FormKit label="Copyright name" type="l-input" name="copyright_name" validation="required" />
-                        <FormKit label="Copyright year" type="l-input" name="copyright_year" validation="required" />
-
-                    </FormKit>
-
-                    <FormKit type="l-form" :bordered="false" :value="{
-                        password_contains_uppercase: obj.password_contains_uppercase,
-                        password_contains_lowercase: obj.password_contains_lowercase,
-                        password_contains_numeric: obj.password_contains_numeric,
-                        password_contains_symbol: obj.password_contains_symbol,
-                        password_min_length: obj.password_min_length,
-                        two_factor_authentication: obj.two_factor_authentication,
-                        auth_lockout_duration: obj.auth_lockout_duration,
-                        auth_lockout_attempts: obj.auth_lockout_attempts,
-                        access_token_expire: obj.access_token_expire,
-                    }" v-if="tab == 'security'" @submit="onSubmit">
-                        <q-field label="Password policy" stack-label>
-                            <FormKit type="l-checkbox" label="Upper Case" name="password_contains_uppercase"
-                                true-value="1" false-value="0" />
-                            <FormKit type="l-checkbox" label="Lower Case" name="password_contains_lowercase"
-                                true-value="1" false-value="0" />
-                            <FormKit type="l-checkbox" label="Number" name="password_contains_numeric" true-value="1"
-                                false-value="0" />
-                            <FormKit type="l-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="Two factor authentication" stack-label>
-                            <FormKit type="l-checkbox" label="Enable" name="two_factor_authentication" true-value="1"
-                                false-value="0" />
-                        </q-field>
-
-                        <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."
-                            validation="required" />
-
-                        <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."
-                            validation="required" />
-
-                        <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" />
-                    </FormKit>
-
-                    <FormKit type="l-form" :bordered="false" :value="{
-                        file_manager: obj.file_manager,
-                        revision: obj.revision
-                    }" v-if="tab == 'Modules'" @submit="onSubmit">
-                        <q-field label="File manager" stack-label>
-                            <FormKit type="l-checkbox" label="Show" name="file_manager" true-value="1"
-                                false-value="0" />
-                        </q-field>
-
-                        <FormKit type="l-select" label="Revision" name="revision" use-input use-chips multiple
-                            hide-dropdown-icon input-debounce="0" new-value-mode="add-unique" />
-
-
-                    </FormKit>
-
-                    <FormKit type="l-form" :bordered="false" :value="{
-                        mode: obj.mode,
-
-                    }" v-if="tab == 'Developer'" @submit="onSubmit">
-                        <FormKit label="Mode" type="l-select" :options="[
-                            { label: 'Production', value: 'prod' },
-                            { label: 'Development', value: 'dev' },
-
-                        ]" name="mode" validation="required">
-                        </FormKit>
-                    </FormKit>
+                    <l-system-setting-general v-if="tab == 'general'" v-model="obj" />
+                    <l-system-setting-mail v-if="tab == 'mail'" v-model="obj" />
+                    <l-system-setting-security v-if="tab == 'security'" v-model="obj" />
+                    <l-system-setting-modules v-if="tab == 'Modules'" v-model="obj" />
+                    <l-system-setting-developer v-if="tab == 'developer'" v-model="obj" />
+                    <l-system-setting-forget-password v-if="tab == 'forget-password'" v-model="obj" />
                 </template>
             </q-splitter>
         </l-card>

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.15.4",
+  "version": "1.17.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@formkit/drag-and-drop": "^0.1.6",
-    "@hostlink/light": "^2.0.1",
+    "@hostlink/light": "^2.0.2",
     "@nuxt/kit": "^3.7.4",
     "@nuxt/module-builder": "^0.8.3",
     "@quasar/extras": "^1.16.11",