@hostlink/nuxt-light 1.19.0 → 1.19.2

package/dist/module.json

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

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

@@ -8,6 +8,7 @@ export interface LSystemSettingAuthenticationProps {
     authentication_google_client_id: string,
     authentication_facebook_app_id: string,
     authentication_microsoft_client_id: string,
+    authentication_microsoft_tenant_id: string
 }
 
 
@@ -15,7 +16,8 @@ withDefaults(defineProps<LSystemSettingAuthenticationProps>(), {
     authentication_password_based: "1",
     authentication_google_client_id: "",
     authentication_facebook_app_id: "",
-    authentication_microsoft_client_id: ""
+    authentication_microsoft_client_id: "",
+    authentication_microsoft_tenant_id: "",
 })
 
 const emits = defineEmits(["submit"])
@@ -50,5 +52,6 @@ const onSubmit = async (d: LSystemSettingAuthenticationProps) => {
         <form-kit label="Facebook App ID" type="l-input" name="authentication_facebook_app_id" />
 
         <form-kit label="Microsoft Client ID" type="l-input" name="authentication_microsoft_client_id" />
+        <form-kit label="Microsoft Tenant ID" type="l-input" name="authentication_microsoft_tenant_id" />
     </form-kit>
 </template>

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

@@ -3,7 +3,16 @@ import { q, m } from '#imports'
 import { useQuasar } from 'quasar'
 const $q = useQuasar()
 
-const modelValue = defineModel<{
+
+const emits = defineEmits(["submit"])
+
+const { authorizationUrl } = await q({
+    authorizationUrl: true
+})
+
+console.log(authorizationUrl);
+
+withDefaults(defineProps<{
     mail_driver: string,
     mail_host: string
     mail_port: string
@@ -14,70 +23,57 @@ const modelValue = defineModel<{
     mail_from_name: string
     mail_reply_to: string
     mail_reply_to_name: string
-}>()
+}>(), {
+    mail_driver: "mail",
+})
 
-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" })
+const onLoginGmail = () => {
+    let state = encodeURIComponent(window.self.location.origin + window.self.location.pathname + "?mail_driver=gmail");
+    let url = "https://accounts.google.com/o/oauth2/v2/auth?scope=openid%20email%20profile%20https%3A%2F%2Fmail.google.com%2F&access_type=offline&state=" + state + "&response_type=code&redirect_uri=https%3A%2F%2Fraymond4.hostlink.com.hk%2Flight%2Fgmail_notification%2Fredirect.php&client_id=790028313082-8qqnoqvkqtqssufto11k6qe6pnievcpv.apps.googleusercontent.com&prompt=consent";
+    window.open(url, "_blank");
 }
 
 </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-form" :bordered="false" :value="$props" @submit="$emit('submit', $event)" #default="{ value }">
+        {{ authorizationUrl }}
 
         <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>
+        },
+        {
+            label: 'Gmail', value: 'gmail'
+        }
+        ]" validation="required"></FormKit>
+
+        <template v-if="value.mail_driver === 'gmail'">
+            <l-btn label="Login" @click="onLoginGmail"></l-btn>
+        </template>
+
+        <template v-else>
+
+
+            <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>
+
         </template>
 
 

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

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router';
 import { useLight, q, m } from "#imports";
 import { useQuasar } from 'quasar';
@@ -7,15 +7,12 @@ import { ref, computed, reactive, provide, watch, toRaw } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 import { api } from '#imports';
 
-const { t } = useI18n();
-
 const emits = defineEmits(["logout"]);
 const $q = useQuasar();
 $q.loading.show()
 
 const config = useRuntimeConfig();
 
-
 const appVersion = config.public.appVersion ?? '0.0.1';
 
 const tt = await q({
@@ -113,10 +110,9 @@ if (my && my.roles.indexOf('Administrators') != -1) {
     light.isAdmin = true;
 }
 
-const menuOverlayHeader = ref(false)
 const layoutView = computed(() => {
     let s = ''
-    s += menuOverlayHeader.value ? 'l' : 'h'
+    s += style.menuOverlayHeader ? 'l' : 'h'
     s += 'Hh LpR lFr'
     return s
 })
@@ -124,7 +120,8 @@ const layoutView = computed(() => {
 const style = reactive({
     miniState: my.styles?.miniState || false,
     dense: my.styles?.dense || false,
-    footer: my.styles?.footer || false
+    footer: my.styles?.footer || false,
+    menuOverlayHeader: my.styles?.menuOverlayHeader || false
 });
 
 const isMouseOnDrawer = ref(false)
@@ -176,6 +173,10 @@ watch(() => light.theme, async () => {
     $q.dark.set(light.isDarkMode());
 })
 
+watch(() => style.menuOverlayHeader, async (value) => {
+    await light.setStyle("menuOverlayHeader", value)
+})
+
 watch(() => style.miniState, async (value) => {
     await m("updateMyStyle", {
         name: "miniState",

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

@@ -23,9 +23,10 @@ try {
             companyLogo: true,
             logged: true,
             twoFactorAuthentication: true,
-            googleClientId: true,
             forgetPasswordEnabled: true,
+            googleClientId: true,
             microsoftClientId: true,
+            microsoftTenantId: true,
             passwordBasedEnabled: true,
             facebookAppId: true,
         }
@@ -78,7 +79,7 @@ if (app.value.facebookAppId) {
         </q-page-container>
     </q-layout>
 
-    <l-app-main v-else @logout="app.logged = false">
+    <l-app-main v-else @logout="app.logged = false" v-bind="app">
         <template #header>
             <slot name="header"></slot>
         </template>

package/dist/runtime/components/l-date-picker.vue

@@ -28,7 +28,8 @@ export interface LDatePickerProps {
     stackLabel?: boolean
     rules?: any[],
     range?: boolean,
-    mask?: string
+    mask?: string,
+    disable?: boolean
 }
 
 const props = withDefaults(defineProps<LDatePickerProps>(), {
@@ -41,7 +42,8 @@ const props = withDefaults(defineProps<LDatePickerProps>(), {
     square: undefined,
     stackLabel: undefined,
     mask: "YYYY-MM-DD",
-    range: false
+    range: false,
+    disable: false
 })
 
 
@@ -59,7 +61,7 @@ const localValue = computed({
         return modelValue.value
     },
     set: (value: string) => {
-        
+
 
         if (props.range) {
             //try to split

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

@@ -1,6 +1,10 @@
 <script setup>
 
 import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+
+const { t } = useI18n();
 
 const props = defineProps(["to"]);
 
@@ -9,10 +13,11 @@ const emit = defineEmits(["submit"]);
 const qua = useQuasar();
 const onDelete = () => {
     qua.dialog({
-        title: "Delete",
-        message: "Are you sure you want to delete this record?",
+        title: t("Delete"),
+        message: t("Are you sure you want to delete this record?"),
         cancel: true,
-        persistent: true
+        persistent: true,
+        color: "negative",
     }).onOk(async () => {
         emit("submit");
     })

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

@@ -1,3 +1,3 @@
 <template>
-     <q-btn flat round dense icon="sym_o_edit" to="edit" />
+     <q-btn flat round icon="sym_o_edit" to="edit" />
 </template>

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

@@ -1,7 +1,7 @@
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
+<script setup lang="ts">
+import { ref, reactive, onMounted, resolveComponent } from 'vue'
 import { useQuasar } from 'quasar';
-import { api, useHead, m, useLight } from '#imports';
+import { api, useHead, m } from '#imports';
 import { useI18n } from 'vue-i18n';
 
 
@@ -9,16 +9,19 @@ const { t } = useI18n();
 
 const emits = defineEmits(["login"]);
 
-const props = defineProps({
-  twoFactorAuthentication: Boolean,
-  googleClientId: String | undefined,
-  forgetPasswordEnabled: Boolean,
-  company: String,
-  companyLogo: String,
-  microsoftClientId: String | undefined,
-  passwordBasedEnabled: Boolean,
-  facebookAppId: String | undefined,
-})
+export interface LLoginProps {
+  company: string,
+  companyLogo: string,
+  twoFactorAuthentication: boolean,
+  forgetPasswordEnabled: boolean,
+  passwordBasedEnabled: boolean,
+  googleClientId?: string,
+  microsoftClientId?: string,
+  microsoftTenantId?: string,
+  facebookAppId?: string
+}
+
+const props = defineProps<LLoginProps>();
 
 useHead({
   title: props.company
@@ -31,11 +34,12 @@ const data = reactive({
 
 const $q = useQuasar()
 
-const loginWithCode = (username, password) => {
+const loginWithCode = (username: string, password: string) => {
   $q.dialog({
     title: t("Enter your code"),
     message: t("Please enter your two factor authentication code (If you lost your authenticator, please contact your administrator)"),
     prompt: {
+      model: "",
       type: "text",
       required: true
     },
@@ -85,7 +89,7 @@ const submit = async () => {
   }
 }
 
-const resetPassword = (username, code) => {
+const resetPassword = (username: string, code: string) => {
   $q.dialog({
     title: t("Reset password"),
     message: t("Please enter your new password"),
@@ -127,6 +131,7 @@ const forgetPassword = async () => {
       title: t("Enter your code"),
       message: t("Please enter the code sent to your email, your code will expire in 10 minutes"),
       prompt: {
+        model: "",
         type: "text",
         required: true
       },
@@ -155,8 +160,12 @@ const bioLogin = async () => {
   try {
     await api.auth.WebAuthn.login(localStorage.getItem("username"));
     window.self.location.reload();
-  } catch (e) {
-    notify(e.message, "negative");
+  } catch (e: any) {
+    $q.notify({
+      message: e.message,
+      color: "negative",
+      icon: "sym_o_error",
+    });
   }
 
 }
@@ -164,8 +173,12 @@ const handleGoogleCredentialResponse = async (response) => {
   try {
     await api.auth.googleLogin(response.credential);
     window.self.location.reload();
-  } catch (e) {
-    notify(e.message, "negative");
+  } catch (e: any) {
+    $q.notify({
+      message: e.message,
+      color: "negative",
+      icon: "sym_o_error",
+    });
   }
 }
 
@@ -282,7 +295,8 @@ const facebookLogin = (accessToken) => {
     </q-card-actions>
 
     <q-card-actions v-if="microsoftClientId">
-      <l-microsoft-button :client-id="microsoftClientId" @login="microsoftLogin"></l-microsoft-button>
+      <l-microsoft-button :client-id="microsoftClientId" :tenant-id="microsoftTenantId"
+        @login="microsoftLogin"></l-microsoft-button>
     </q-card-actions>
 
     <q-card-actions v-if="facebookAppId">

package/dist/runtime/components/l-microsoft-button.vue

@@ -8,6 +8,7 @@ const props = defineProps({
         type: String,
         required: true
     },
+    tenantId: String
 })
 
 const emits = defineEmits(["login"]);
@@ -16,7 +17,7 @@ const onClick = async () => {
     const myMSALObject = new PublicClientApplication({
         auth: {
             clientId: props.clientId,
-            authority: "https://login.microsoftonline.com/common",
+            authority: "https://login.microsoftonline.com/" + props.tenantId,
             redirectUri: window.location.origin,
         },
         cache: {

package/dist/runtime/components/l-user-userlog.vue

@@ -1,13 +1,29 @@
 <script setup lang="ts">
 import { model, q } from "#imports";
-const props = defineProps(['id']);
+const props = defineProps({
+    id: String
+});
+
+const columns = model('UserLog').columns({
+    userlog_id: true,
+    login_dt: true,
+    last_access_time: true,
+    logout_dt: true,
+    result: true,
+    user_agent: true
+}
+);
+
+
+
+const onRequestData = async (req) => {
+    req.loadObjects('UserLog', { user_id: props.id })
+}
+
 
-const columns = model('UserLog').columns(["userlog_id", "login_dt", "last_access_time", "logout_dt", "result", "user_agent"]);
 </script>
 <template>
-    <div>
-        <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request-data="async (req) => {
-            req.loadObjects('UserLog', { filters: { user_id: props.id } })
-        }" />
-    </div>
+
+    <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request-data="onRequestData" />
+
 </template>

package/dist/runtime/formkit/Checkbox.vue

@@ -15,8 +15,8 @@ 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" :error="error" :error-message="errorMessage" :disable="context.disabled"
+        v-bind="context.attrs" :label="context.label">
         <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/DatePicker.vue

@@ -16,7 +16,7 @@ const value = computed({
 </script>
 <template>
     <l-date-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
-        :error-message="errorMessage">
+        :error-message="errorMessage" :disable="context.disabled">
         <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/Input.vue

@@ -2,8 +2,6 @@
 import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
-
-
 const props = defineProps({
     context: {
         type: Object,
@@ -49,8 +47,12 @@ const onBlur = () => {
 }
 </script>
 <template>
+
     <l-input v-model="value" :label="context?.label" v-bind="context?.attrs" :error="error" :type="context?.inputType"
-        :error-message="errorMessage" @blur="onBlur">
+        :error-message="errorMessage" @blur="onBlur"
+        :disable="context.disabled"
+        
+        >
 
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/Select.vue

@@ -33,7 +33,7 @@ if (required) { //no clearable
 </script>
 <template>
     <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
-        :clearable="clearable" :required="required">
+        :clearable="clearable" :required="required" :disable="context.disabled">
         <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/Toggle.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -10,9 +10,11 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-
 </script>
 <template>
-    <q-toggle v-model="value" :label="context.label" v-bind="context.attrs">
+
+    <q-toggle v-model="value" :label="context.label" :disable="context.disabled" :color="$light.color"
+        v-bind="context.attrs">
+        <slot></slot>
     </q-toggle>
 </template>

package/dist/runtime/formkit/index.js

@@ -13,6 +13,7 @@ import FileVue from "./File.vue";
 import InputXlsxVue from "./InputXlsx.vue";
 import FileUploadVue from "./FileUpload.vue";
 import EditorVue from "./Editor.vue";
+import ToggleVue from "./Toggle.vue";
 export const createLightPlugin = () => {
   return (node) => {
     let type = node.props.type + "";
@@ -98,6 +99,11 @@ export const createLightPlugin = () => {
           ],
           features: [forms, disablesChildren]
         });
+      case "l-toggle":
+        return node.define({
+          type: "input",
+          component: ToggleVue
+        });
     }
   };
 };

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

@@ -1,6 +1,28 @@
 <script setup>
 import { ref } from 'vue'
-import { q, m, useLight } from '#imports';
+import { q, m, useLight, useRoute } from '#imports';
+import { useQuasar } from 'quasar';
+const route = useRoute()
+const tab = ref('general')
+const $q = useQuasar()
+
+
+if (route.query.mail_driver == 'gmail' && route.query.refresh_token) {
+
+    //save the mail_driver
+    await m("updateAppConfigs", {
+        data: [
+            { name: 'mail_driver', value: 'gmail' },
+            { name: 'mail_google_refresh_token', value: route.query.refresh_token }
+        ]
+    })
+    tab.value = 'mail'
+
+    //remove the query string
+    window.history.replaceState({}, document.title, window.location.pathname);
+
+    $q.notify({ message: "Gmail account added", color: "positive" })
+}
 
 const light = useLight()
 
@@ -12,7 +34,6 @@ const obj = app.config.reduce((acc, cur) => {
 
 obj.revision = obj.revision ? obj.revision.split(',') : []
 
-const tab = ref('general')
 
 const onSubmit = async (d) => {
     let data = [];
@@ -31,6 +52,9 @@ const onSubmit = async (d) => {
         obj[key] = d[key]
     })
 }
+
+
+
 </script>
 <template>
     <l-page>
@@ -50,7 +74,7 @@ const onSubmit = async (d) => {
                 </template>
                 <template #after>
                     <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-mail v-if="tab == 'mail'" v-bind="obj" @submit="onSubmit" />
                     <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" />

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

@@ -11,6 +11,7 @@ let { app, my } = await q({
     app: {
         googleClientId: true,
         microsoftClientId: true,
+        microsoftTenantId: true,
         facebookAppId: true,
     }, my: {
         google: true,
@@ -201,7 +202,8 @@ const onUnlinkFacebook = async () => {
                 <template v-else>
                     <div>{{ $t('Click the button below to link your Microsoft account.') }}</div>
                     <div>
-                        <l-microsoft-button :client-id="app.microsoftClientId" @login="onLinkMicrosoft" />
+                        <l-microsoft-button :client-id="app.microsoftClientId" :tenant-id="app.microsoftTenantId"
+                            @login="onLinkMicrosoft" />
                     </div>
                 </template>
             </template>

package/package.json

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