@hostlink/nuxt-light 1.18.2 → 1.19.0

package/dist/module.json

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

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

@@ -1,10 +1,11 @@
 <script setup>
 import { ref } from 'vue'
 import { useQuasar, useDialogPluginComponent } from 'quasar'
-import { m, api } from '#imports';
+import { api } from '#imports';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 const $q = useQuasar()
 
-
 const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
 
 const username = ref('')
@@ -13,7 +14,7 @@ const onOKClick = async () => {
     if (username.value == '' || email.value == '') {
         $q.notify({
             type: 'negative',
-            message: 'Username and Email is required'
+            message: t('Username and Email is required')
         })
         return;
     }
@@ -34,34 +35,31 @@ const onOKClick = async () => {
     } 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
+                {{ t('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
+                {{ t('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-input v-model="username" :label="$t('Username')" stack-label
+                    :rules="[val => !!val || $t('Username is required')]" hide-bottom-space />
+                <q-input v-model="email" :label="$t('Email')" stack-label type="email" hide-bottom-space
+                    :rules="[val => !!val || $t('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-btn :label="$t('Cancel')" @click="onDialogCancel" flat color="primary" />
+                <q-btn :label="$t('OK')" @click="onOKClick" flat color="primary" />
             </q-card-actions>
         </q-card>
     </q-dialog>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useLight, m } from "#imports"
+const light = useLight()
+
+
+export interface LSystemSettingAuthenticationProps {
+    authentication_password_based: string,
+    authentication_google_client_id: string,
+    authentication_facebook_app_id: string,
+    authentication_microsoft_client_id: string,
+}
+
+
+withDefaults(defineProps<LSystemSettingAuthenticationProps>(), {
+    authentication_password_based: "1",
+    authentication_google_client_id: "",
+    authentication_facebook_app_id: "",
+    authentication_microsoft_client_id: ""
+})
+
+const emits = defineEmits(["submit"])
+
+const onSubmit = async (d: LSystemSettingAuthenticationProps) => {
+
+    //at least one authentication method should be enabled
+    if (d.authentication_password_based === "0" && !d.authentication_google_client_id && !d.authentication_facebook_app_id && !d.authentication_microsoft_client_id) {
+
+        light.notify({ message: "At least one authentication method should be enabled", color: "negative" })
+        return
+
+    }
+
+
+
+    emits("submit", d)
+}
+
+</script>
+<template>
+
+
+    <form-kit type="l-form" :bordered="false" @submit="onSubmit" :value="$props">
+
+        <form-kit label="Password based" type="l-checkbox" name="authentication_password_based" true-value="1"
+            false-value="0" />
+        <q-separator />
+
+        <form-kit label="Google Client ID" type="l-input" name="authentication_google_client_id" />
+
+        <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>
+</template>

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

@@ -39,7 +39,7 @@ const onSubmit = async (d, form) => {
         file_manager: modelValue.file_manager,
         revision: modelValue.revision
     }" @submit="onSubmit">
-        <q-field label="File manager" stack-label>
+        <q-field :label="$t('File Manager')" stack-label>
             <FormKit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
         </q-field>
 

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

@@ -7,6 +7,8 @@ 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()
@@ -59,9 +61,8 @@ const tt = await q({
 let app = tt.app
 let my = reactive(tt.my)
 
-const light = useLight({
-    color: my.styles?.color || 'primary'
-});
+const light = useLight();
+
 light.init(my.styles);
 
 //set permission
@@ -158,9 +159,6 @@ const onChangeLocale = async (locale) => {
     window.location.reload();
 }
 
-const errors = computed(() => {
-    return light.getErrors();
-})
 
 const reloadMenu = async () => {
     //menus.value = app.menus;
@@ -231,23 +229,22 @@ const onToggleFav = async () => {
         return;
     }
 
-    $q.dialog({
+    light.dialog({
         title: 'Add to favorite',
         message: 'Enter favorite label',
         prompt: {
             //get window title, remove - and replace with space
             model: route.name.replace(/-/g, ' '),
+            isValid: (val) => val !== '',
         },
         cancel: true,
         persistent: true,
     }).onOk(async (data) => {
-        if (data === '') return;
         if (await m("addMyFavorite", {
             path: route.fullPath,
             label: data,
         })) {
             light.reloadMyFavorites();
-
         }
     })
 }
@@ -424,8 +421,8 @@ const onLogout = async () => {
 
         <q-page-container :class="containerClass" :style="containerStyle"> <!-- Error message -->
             <slot name="header"></slot>
-            <div class="q-gutter-sm q-pa-sm" v-if="errors.length > 0">
-                <q-banner dense inline-actions class="bg-grey-4" v-for=" error in errors " rounded>
+            <div class="q-gutter-sm q-pa-sm" v-if="$light.errors.length > 0">
+                <q-banner dense inline-actions class="bg-grey-4" v-for=" error in $light.errors " rounded>
                     {{ error }}
                     <template v-slot:action>
                         <q-btn flat label="Detail" @click="$q.dialog({
@@ -433,7 +430,7 @@ const onLogout = async () => {
                             message: error.stack,
                             fullWidth: true,
                         })"></q-btn>
-                        <q-btn flat icon="sym_o_close" round dense @click="light.removeError(error)" />
+                        <q-btn flat icon="sym_o_close" round dense @click="$light.removeError(error)" />
                     </template>
                 </q-banner>
 
@@ -461,7 +458,7 @@ const onLogout = async () => {
                 <q-item-section>
                     {{ light.company }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName
                     }}. Build
-                    {{ light.getVersion() }}
+                    {{ light.version }}
                 </q-item-section>
             </q-item>
         </q-footer>

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

@@ -1,7 +1,6 @@
 <script setup>
-import { provide, ref } from 'vue'
-import { useLight, watch } from "#imports";
-
+import { ref } from 'vue'
+import { reloadNuxtApp, useLight, watch } from "#imports";
 import { useQuasar } from 'quasar'
 import { q } from '#imports'
 import { useRoute } from "vue-router";
@@ -25,31 +24,55 @@ try {
             logged: true,
             twoFactorAuthentication: true,
             googleClientId: true,
-            forgetPasswordEnabled: true
+            forgetPasswordEnabled: true,
+            microsoftClientId: true,
+            passwordBasedEnabled: true,
+            facebookAppId: true,
         }
     })).app;
     light.company = app.value.company;
     light.companyLogo = app.value.companyLogo;
 } catch (e) {
-
     quasar.dialog({
         title: 'Error',
-        message: 'Error loading api data. Please reload the page.',
+        message: e.message,
         ok: 'Reload',
     }).onOk(() => {
         window.location.reload();
     });
 }
 
+if (app.value.facebookAppId) {
+
+    //load facebook sdk
+
+    (function (d, s, id) {
+        var js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) { return; }
+        js = d.createElement(s); js.id = id;
+        js.src = "https://connect.facebook.net/en_US/sdk.js";
+        fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk')
+    );
+
+    window.fbAsyncInit = function () {
+        FB.init({
+            appId: app.value.facebookAppId,
+            xfbml: true,
+            version: 'v21.0'
+        });
+    }
+}
+
+
 
-const color = ref(light.color);
-provide('color', color)
 
 </script>
 <template>
     <q-layout v-if="!app.logged">
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
+                <div id="fb-root"></div>
                 <l-login v-bind="app" @login="app.logged = true"></l-login>
             </q-page>
         </q-page-container>

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

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

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

@@ -0,0 +1,28 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+const button = ref(null);
+const emits = defineEmits(["login"]);
+
+onMounted(() => {
+    if (window.FB) {
+        window.FB.XFBML.parse()
+    }
+
+})
+
+window.onFacebookLogin = () => {
+
+
+
+
+    window.FB.getAccessToken(accessToken => {
+        emits('login', accessToken)
+    })
+}
+
+</script>
+<template>
+    <div class="fb-login-button" data-size="large" data-button-type="" data-layout="" data-auto-logout-link="false"
+        data-use-continue-as="false" ref="button" data-onlogin="onFacebookLogin()"></div>
+</template>

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

@@ -82,8 +82,7 @@ const onCancel = async () => {
 <template>
     <q-dialog ref="dialogRef">
 
-        <q-card :style="{ width }" :loading="loading">
-
+        <q-card :style="{ width }" :loading="loading" class="q-dialog-plugin">
             <q-toolbar>
                 <q-toolbar-title v-if="title">
                     {{ title }}

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

@@ -11,7 +11,7 @@ export interface LInputProps extends QInputProps {
     required?: boolean;
 }
 
-const i18n = useI18n();
+const { t } = useI18n();
 const light = useLight();
 
 const props = withDefaults(defineProps<LInputProps>(), {
@@ -37,13 +37,13 @@ const new_rules = props.rules || [];
 
 //has required prop (in properties)
 if (props.required) {
-    new_rules.push(val => !!val || i18n.t('input_required', [i18n.t(props.label ?? "")]));
+    new_rules.push(val => !!val || t('input_required', [t(props.label ?? "")]));
 }
 
 if (props.type == "email") {
     new_rules.push(val => {
         if (val && !val.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
-            return i18n.t("Invalid email format");
+            return t("Invalid email format");
         }
     });
 }
@@ -51,7 +51,7 @@ if (props.type == "email") {
 if (new_rules.indexOf("containUpper") >= 0) {
     new_rules.push(val => {
         if (val && !val.match(/[A-Z]/)) {
-            return i18n.t("Must contain at least one uppercase letter");
+            return t("Must contain at least one uppercase letter");
         }
     });
 }
@@ -59,7 +59,7 @@ if (new_rules.indexOf("containUpper") >= 0) {
 if (new_rules.indexOf("containLower") >= 0) {
     new_rules.push(val => {
         if (val && !val.match(/[a-z]/)) {
-            return i18n.t("Must contain at least one lowercase letter");
+            return t("Must contain at least one lowercase letter");
         }
     });
 }
@@ -67,7 +67,7 @@ if (new_rules.indexOf("containLower") >= 0) {
 if (new_rules.indexOf("containNumber") >= 0) {
     new_rules.push(val => {
         if (val && !val.match(/[0-9]/)) {
-            return i18n.t("Must contain at least one number");
+            return t("Must contain at least one number");
         }
     });
 }
@@ -75,7 +75,7 @@ if (new_rules.indexOf("containNumber") >= 0) {
 if (new_rules.indexOf("containSpecial") >= 0) {
     new_rules.push(val => {
         if (val && !val.match(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/)) {
-            return i18n.t("Must contain at least one symbol");
+            return t("Must contain at least one symbol");
         }
     });
 }
@@ -90,7 +90,7 @@ if (minLength) {
     const min = parseInt(minLength.replace("minLength:", ""));
     new_rules.push(val => {
         if (val && val.length < min) {
-            return i18n.t("input_min", [min]);
+            return t("input_min", [min]);
         }
     });
 }
@@ -139,7 +139,7 @@ const attrs = computed(() => {
     if (props.stackLabel === undefined) a.stackLabel = light.getStyle("inputStackLabel");
 
     if (props.label) {
-        a.label = i18n.t(props.label);
+        a.label = t(props.label);
 
         if (props.required) {
             a.label = "* " + a.label;
@@ -147,6 +147,11 @@ const attrs = computed(() => {
     }
 
     if (props.color === undefined) a.color = light.color
+
+    if (props.hint) {
+        a.hint = t(props.hint);
+    }
+
     return a;
 })
 

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

@@ -1,16 +1,23 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { useQuasar } from 'quasar';
-import { api, useHead } from '#imports';
+import { api, useHead, m, useLight } from '#imports';
+import { useI18n } from 'vue-i18n';
+
+
+const { t } = useI18n();
 
 const emits = defineEmits(["login"]);
 
 const props = defineProps({
   twoFactorAuthentication: Boolean,
-  googleClientId: String,
+  googleClientId: String | undefined,
   forgetPasswordEnabled: Boolean,
   company: String,
-  companyLogo: String
+  companyLogo: String,
+  microsoftClientId: String | undefined,
+  passwordBasedEnabled: Boolean,
+  facebookAppId: String | undefined,
 })
 
 useHead({
@@ -26,8 +33,8 @@ 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)",
+    title: t("Enter your code"),
+    message: t("Please enter your two factor authentication code (If you lost your authenticator, please contact your administrator)"),
     prompt: {
       type: "text",
       required: true
@@ -43,10 +50,15 @@ const loginWithCode = (username, password) => {
 
 }
 
+const loading = ref(false);
+
 const submit = async () => {
   if (await form1.value.validate()) {
 
+
+
     try {
+      loading.value = true;
       await api.auth.login(data.username, data.password, data.code)
       //window.self.location.reload();
       //
@@ -65,6 +77,8 @@ const submit = async () => {
         color: "negative",
         icon: "sym_o_error",
       });
+    } finally {
+      loading.value = false;
 
 
     }
@@ -73,8 +87,8 @@ const submit = async () => {
 
 const resetPassword = (username, code) => {
   $q.dialog({
-    title: "Reset password",
-    message: "Please enter your new password",
+    title: t("Reset password"),
+    message: t("Please enter your new password"),
     prompt: {
       model: "",
       type: "password",
@@ -88,7 +102,7 @@ const resetPassword = (username, code) => {
     try {
       await api.auth.resetPassword(username, password, code);
       $q.notify({
-        message: "Your password has been reset successfully",
+        message: t("Your password has been reset successfully"),
         color: "positive",
         icon: "sym_o_check",
       });
@@ -110,8 +124,8 @@ const forgetPassword = async () => {
     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",
+      title: t("Enter your code"),
+      message: t("Please enter the code sent to your email, your code will expire in 10 minutes"),
       prompt: {
         type: "text",
         required: true
@@ -123,7 +137,7 @@ const forgetPassword = async () => {
         resetPassword(data.username, code);
       } else {
         $q.notify({
-          message: "Your code is invalid",
+          message: t("Your code is invalid or expired"),
           color: "negative",
           icon: "sym_o_error",
         });
@@ -156,6 +170,7 @@ const handleGoogleCredentialResponse = async (response) => {
 }
 
 onMounted(() => {
+
   if (props.googleClientId) {
     if (!window.google) {
       $q.notify({
@@ -188,6 +203,34 @@ onMounted(() => {
     );
   }
 })
+
+
+
+const microsoftLogin = async (resp) => {
+  try {
+    await api.auth.microsoftLogin(resp.accessToken);
+    emits("login");
+  } catch (e) {
+    $q.notify({
+      message: e.message,
+      color: "negative",
+    });
+
+  }
+
+}
+
+const facebookLogin = (accessToken) => {
+  m("facebookLogin", { access_token: accessToken }).then(() => {
+    emits("login");
+  }).catch((e) => {
+    $q.notify({
+      message: e.message,
+      color: "negative",
+    });
+  });
+}
+
 </script>
 
 <template>
@@ -201,7 +244,7 @@ onMounted(() => {
       <div class="text-h6">
         {{ company }}
       </div>
-      <q-form ref="form1">
+      <q-form ref="form1" v-if="passwordBasedEnabled">
         <div class="q-gutter-sm">
           <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
             clearable :outlined="false" stackLabel autocomplete="username">
@@ -226,15 +269,24 @@ onMounted(() => {
       </q-form>
     </q-card-section>
     <q-card-actions>
-      <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit" />
+      <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit"
+        v-if="passwordBasedEnabled" />
       <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"
         v-if="forgetPasswordEnabled" />
     </q-card-actions>
-    <q-card-actions v-if="props.googleClientId">
+    <q-card-actions v-if="googleClientId">
       <div>
         <div id="g_id_signin"></div>
       </div>
     </q-card-actions>
+
+    <q-card-actions v-if="microsoftClientId">
+      <l-microsoft-button :client-id="microsoftClientId" @login="microsoftLogin"></l-microsoft-button>
+    </q-card-actions>
+
+    <q-card-actions v-if="facebookAppId">
+      <l-facebook-button @login="facebookLogin" />
+    </q-card-actions>
   </q-card>
 </template>