@hostlink/nuxt-light 1.18.3 → 1.19.1

package/dist/module.json

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

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

@@ -1,7 +1,7 @@
 <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()

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

@@ -0,0 +1,57 @@
+<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,
+    authentication_microsoft_tenant_id: string
+}
+
+
+withDefaults(defineProps<LSystemSettingAuthenticationProps>(), {
+    authentication_password_based: "1",
+    authentication_google_client_id: "",
+    authentication_facebook_app_id: "",
+    authentication_microsoft_client_id: "",
+    authentication_microsoft_tenant_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 label="Microsoft Tenant ID" type="l-input" name="authentication_microsoft_tenant_id" />
+    </form-kit>
+</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

@@ -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";
@@ -24,23 +23,49 @@ try {
             companyLogo: true,
             logged: true,
             twoFactorAuthentication: true,
+            forgetPasswordEnabled: true,
             googleClientId: true,
-            forgetPasswordEnabled: true
+            microsoftClientId: true,
+            microsoftTenantId: 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'
+        });
+    }
+}
+
+
 
 
 </script>
@@ -48,12 +73,13 @@ try {
     <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>
     </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-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-login.vue

@@ -1,20 +1,27 @@
-<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 } from '#imports';
+import { api, useHead, m } from '#imports';
 import { useI18n } from 'vue-i18n';
 
+
 const { t } = useI18n();
 
 const emits = defineEmits(["login"]);
 
-const props = defineProps({
-  twoFactorAuthentication: Boolean,
-  googleClientId: String,
-  forgetPasswordEnabled: Boolean,
-  company: String,
-  companyLogo: String
-})
+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
@@ -27,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
     },
@@ -46,10 +54,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();
       //
@@ -68,13 +81,15 @@ const submit = async () => {
         color: "negative",
         icon: "sym_o_error",
       });
+    } finally {
+      loading.value = false;
 
 
     }
   }
 }
 
-const resetPassword = (username, code) => {
+const resetPassword = (username: string, code: string) => {
   $q.dialog({
     title: t("Reset password"),
     message: t("Please enter your new password"),
@@ -116,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
       },
@@ -144,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",
+    });
   }
 
 }
@@ -153,12 +173,17 @@ 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",
+    });
   }
 }
 
 onMounted(() => {
+
   if (props.googleClientId) {
     if (!window.google) {
       $q.notify({
@@ -191,6 +216,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>
@@ -204,7 +257,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">
@@ -229,15 +282,25 @@ 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" :tenant-id="microsoftTenantId"
+        @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>

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { PublicClientApplication } from '@azure/msal-browser';
+import { useQuasar } from 'quasar';
+const $q = useQuasar()
+
+const props = defineProps({
+    clientId: {
+        type: String,
+        required: true
+    },
+    tenantId: String
+})
+
+const emits = defineEmits(["login"]);
+
+const onClick = async () => {
+    const myMSALObject = new PublicClientApplication({
+        auth: {
+            clientId: props.clientId,
+            authority: "https://login.microsoftonline.com/" + props.tenantId,
+            redirectUri: window.location.origin,
+        },
+        cache: {
+            cacheLocation: "memoryStorage",
+            storeAuthStateInCookie: false,
+        }
+    });
+
+    try {
+        await myMSALObject.initialize();
+
+        const resp = await myMSALObject.loginPopup({
+            scopes: ["user.read"]
+        });
+
+        emits("login", resp);
+
+    } catch (e: any) {
+        $q.dialog({
+            title: "Error",
+            message: e.message,
+            color: "negative",
+        });
+    }
+
+
+}
+
+</script>
+
+<template>
+    <a @click="onClick" class="cursor-pointer">
+        <svg xmlns="http://www.w3.org/2000/svg" width="215" height="41" viewBox="0 0 215 41">
+            <title>MS-SymbolLockup</title>
+            <rect width="215" height="41" fill="#fff" />
+            <path d="M214,1V40H1V1H214m1-1H0V41H215V0Z" fill="#8c8c8c" />
+            <path
+                d="M45.812,25.082V23.288a2.849,2.849,0,0,0,.576.4,4.5,4.5,0,0,0,.707.3,5.513,5.513,0,0,0,.747.187,3.965,3.965,0,0,0,.688.065,2.937,2.937,0,0,0,1.637-.365,1.2,1.2,0,0,0,.538-1.062,1.16,1.16,0,0,0-.179-.649,1.928,1.928,0,0,0-.5-.5,5.355,5.355,0,0,0-.757-.435q-.437-.209-.935-.436c-.356-.19-.687-.383-1-.578a4.358,4.358,0,0,1-.8-.648,2.728,2.728,0,0,1-.534-.8,2.6,2.6,0,0,1-.194-1.047,2.416,2.416,0,0,1,.333-1.285,2.811,2.811,0,0,1,.879-.9,4.026,4.026,0,0,1,1.242-.528,5.922,5.922,0,0,1,1.42-.172,5.715,5.715,0,0,1,2.4.374v1.721a3.832,3.832,0,0,0-2.3-.645,4.106,4.106,0,0,0-.773.074,2.348,2.348,0,0,0-.689.241,1.5,1.5,0,0,0-.494.433,1.054,1.054,0,0,0-.19.637,1.211,1.211,0,0,0,.146.608,1.551,1.551,0,0,0,.429.468,4.276,4.276,0,0,0,.688.414c.271.134.584.28.942.436q.547.285,1.036.6a4.881,4.881,0,0,1,.856.7,3.015,3.015,0,0,1,.586.846,2.464,2.464,0,0,1,.217,1.058,2.635,2.635,0,0,1-.322,1.348,2.608,2.608,0,0,1-.868.892,3.82,3.82,0,0,1-1.257.5,6.988,6.988,0,0,1-1.5.155c-.176,0-.392-.014-.649-.04s-.518-.067-.787-.117a7.772,7.772,0,0,1-.761-.187A2.4,2.4,0,0,1,45.812,25.082Z"
+                fill="#5e5e5e" />
+            <path
+                d="M55.129,16.426a1.02,1.02,0,0,1-.714-.272.89.89,0,0,1-.3-.688.916.916,0,0,1,.3-.7,1.008,1.008,0,0,1,.714-.278,1.039,1.039,0,0,1,.732.278.909.909,0,0,1,.3.7.9.9,0,0,1-.3.678A1.034,1.034,0,0,1,55.129,16.426Zm.842,9.074h-1.7V18h1.7Z"
+                fill="#5e5e5e" />
+            <path
+                d="M65.017,24.9q0,4.131-4.153,4.131a6.187,6.187,0,0,1-2.556-.491V26.986a4.726,4.726,0,0,0,2.337.7,2.342,2.342,0,0,0,2.672-2.628V24.24h-.029a2.947,2.947,0,0,1-4.742.436,4.041,4.041,0,0,1-.838-2.684,4.738,4.738,0,0,1,.9-3.04,3,3,0,0,1,2.476-1.128,2.384,2.384,0,0,1,2.2,1.216h.029V18h1.7Zm-1.684-2.835v-.973a1.91,1.91,0,0,0-.524-1.352A1.718,1.718,0,0,0,61.5,19.18a1.793,1.793,0,0,0-1.512.714,3.217,3.217,0,0,0-.546,2,2.774,2.774,0,0,0,.524,1.769,1.678,1.678,0,0,0,1.387.662,1.805,1.805,0,0,0,1.429-.632A2.391,2.391,0,0,0,63.333,22.064Z"
+                fill="#5e5e5e" />
+            <path
+                d="M73.908,25.5h-1.7V21.273q0-2.1-1.486-2.1a1.622,1.622,0,0,0-1.282.582,2.162,2.162,0,0,0-.5,1.469V25.5H67.229V18h1.707v1.245h.029A2.673,2.673,0,0,1,71.4,17.824a2.265,2.265,0,0,1,1.868.795,3.57,3.57,0,0,1,.644,2.3Z"
+                fill="#5e5e5e" />
+            <path
+                d="M80.962,16.426a1.02,1.02,0,0,1-.714-.272.89.89,0,0,1-.3-.688.916.916,0,0,1,.3-.7,1.008,1.008,0,0,1,.714-.278,1.039,1.039,0,0,1,.732.278.909.909,0,0,1,.3.7.9.9,0,0,1-.3.678A1.034,1.034,0,0,1,80.962,16.426ZM81.8,25.5H80.1V18h1.7Z"
+                fill="#5e5e5e" />
+            <path
+                d="M90.7,25.5H89V21.273q0-2.1-1.486-2.1a1.622,1.622,0,0,0-1.282.582,2.157,2.157,0,0,0-.506,1.469V25.5H84.023V18H85.73v1.245h.03a2.673,2.673,0,0,1,2.431-1.421,2.265,2.265,0,0,1,1.868.795,3.57,3.57,0,0,1,.644,2.3Z"
+                fill="#5e5e5e" />
+            <path
+                d="M106.984,18l-2.212,7.5h-1.78l-1.361-5.083a3.215,3.215,0,0,1-.1-.659H101.5a3.069,3.069,0,0,1-.131.644l-1.48,5.1H98.145L95.939,18H97.7l1.363,5.405a3.16,3.16,0,0,1,.087.645H99.2a3.384,3.384,0,0,1,.117-.659L100.832,18h1.6l1.347,5.428a3.732,3.732,0,0,1,.095.644h.052a3.387,3.387,0,0,1,.11-.644L105.365,18Z"
+                fill="#5e5e5e" />
+            <path
+                d="M109.1,16.426a1.018,1.018,0,0,1-.714-.272.886.886,0,0,1-.3-.688.912.912,0,0,1,.3-.7,1.006,1.006,0,0,1,.714-.278,1.039,1.039,0,0,1,.732.278.912.912,0,0,1,.3.7.9.9,0,0,1-.3.678A1.034,1.034,0,0,1,109.1,16.426Zm.841,9.074h-1.7V18h1.7Z"
+                fill="#5e5e5e" />
+            <path
+                d="M116.117,25.42a2.955,2.955,0,0,1-1.31.248q-2.182,0-2.183-2.094V19.333h-1.253V18h1.253V16.264l1.7-.483V18h1.794v1.333h-1.794v3.75a1.484,1.484,0,0,0,.241.952,1.006,1.006,0,0,0,.807.285,1.167,1.167,0,0,0,.746-.248Z"
+                fill="#5e5e5e" />
+            <path
+                d="M124.248,25.5h-1.7V21.4q0-2.226-1.487-2.226a1.556,1.556,0,0,0-1.26.644,2.568,2.568,0,0,0-.513,1.649V25.5h-1.707V14.4h1.707v4.849h.029a2.685,2.685,0,0,1,2.432-1.421q2.5,0,2.5,3.055Z"
+                fill="#5e5e5e" />
+            <path
+                d="M141.907,25.5h-1.728V18.7q0-.835.1-2.043h-.029a6.992,6.992,0,0,1-.285.988L136.831,25.5h-1.2l-3.143-7.793a7.236,7.236,0,0,1-.277-1.047h-.029q.057.63.058,2.058V25.5h-1.611V15h2.453l2.762,7a10.884,10.884,0,0,1,.41,1.2h.036c.181-.551.327-.962.44-1.23L139.541,15h2.366Z"
+                fill="#5e5e5e" />
+            <path
+                d="M145.158,16.426a1.022,1.022,0,0,1-.714-.272.89.89,0,0,1-.3-.688.916.916,0,0,1,.3-.7,1.009,1.009,0,0,1,.714-.278,1.043,1.043,0,0,1,.733.278.911.911,0,0,1,.3.7.9.9,0,0,1-.3.678A1.038,1.038,0,0,1,145.158,16.426ZM146,25.5h-1.7V18H146Z"
+                fill="#5e5e5e" />
+            <path
+                d="M153.589,25.156a4.2,4.2,0,0,1-2.131.52,3.606,3.606,0,0,1-2.695-1.044,3.691,3.691,0,0,1-1.026-2.706,4.07,4.07,0,0,1,1.1-2.978,3.944,3.944,0,0,1,2.948-1.124,4.3,4.3,0,0,1,1.81.36v1.582a2.743,2.743,0,0,0-1.67-.586,2.32,2.32,0,0,0-1.766.728,2.665,2.665,0,0,0-.688,1.908,2.536,2.536,0,0,0,.648,1.838,2.3,2.3,0,0,0,1.739.674,2.716,2.716,0,0,0,1.729-.652Z"
+                fill="#5e5e5e" />
+            <path
+                d="M159.625,19.619a1.4,1.4,0,0,0-.887-.242,1.513,1.513,0,0,0-1.259.682,3.04,3.04,0,0,0-.506,1.852V25.5h-1.7V18h1.7v1.545H157a2.606,2.606,0,0,1,.766-1.233,1.724,1.724,0,0,1,1.154-.444,1.432,1.432,0,0,1,.7.14Z"
+                fill="#5e5e5e" />
+            <path
+                d="M164.02,25.676a3.719,3.719,0,0,1-2.773-1.051,3.8,3.8,0,0,1-1.036-2.787,3.7,3.7,0,0,1,3.991-4.014,3.6,3.6,0,0,1,2.739,1.033,3.986,3.986,0,0,1,.982,2.864,3.932,3.932,0,0,1-1.059,2.875A3.8,3.8,0,0,1,164.02,25.676Zm.08-6.5a1.938,1.938,0,0,0-1.575.7,2.913,2.913,0,0,0-.579,1.919,2.744,2.744,0,0,0,.586,1.856,1.965,1.965,0,0,0,1.568.678,1.87,1.87,0,0,0,1.542-.666,2.956,2.956,0,0,0,.538-1.9,3,3,0,0,0-.538-1.911A1.858,1.858,0,0,0,164.1,19.18Z"
+                fill="#5e5e5e" />
+            <path
+                d="M169.182,25.266V23.691a3.392,3.392,0,0,0,2.1.725q1.539,0,1.538-.908a.714.714,0,0,0-.132-.436,1.241,1.241,0,0,0-.355-.318,2.784,2.784,0,0,0-.527-.25q-.3-.108-.677-.248a7.052,7.052,0,0,1-.832-.389,2.545,2.545,0,0,1-.615-.465,1.745,1.745,0,0,1-.37-.59,2.145,2.145,0,0,1-.125-.769,1.775,1.775,0,0,1,.256-.955,2.223,2.223,0,0,1,.69-.7,3.289,3.289,0,0,1,.98-.425,4.511,4.511,0,0,1,1.136-.143,5.181,5.181,0,0,1,1.86.315v1.487a3.136,3.136,0,0,0-1.816-.542,2.317,2.317,0,0,0-.582.066,1.472,1.472,0,0,0-.443.183.886.886,0,0,0-.286.282.669.669,0,0,0-.1.363.77.77,0,0,0,.1.41.93.93,0,0,0,.3.3,2.654,2.654,0,0,0,.483.234q.282.105.649.23a9.4,9.4,0,0,1,.867.4,2.886,2.886,0,0,1,.656.465,1.806,1.806,0,0,1,.417.6,2.034,2.034,0,0,1,.147.81,1.847,1.847,0,0,1-.264,1,2.205,2.205,0,0,1-.7.7,3.292,3.292,0,0,1-1.015.413,5.222,5.222,0,0,1-1.212.136A5.115,5.115,0,0,1,169.182,25.266Z"
+                fill="#5e5e5e" />
+            <path
+                d="M179.443,25.676a3.717,3.717,0,0,1-2.772-1.051,3.793,3.793,0,0,1-1.036-2.787,3.7,3.7,0,0,1,3.991-4.014,3.6,3.6,0,0,1,2.739,1.033,3.986,3.986,0,0,1,.982,2.864,3.932,3.932,0,0,1-1.059,2.875A3.8,3.8,0,0,1,179.443,25.676Zm.08-6.5a1.936,1.936,0,0,0-1.574.7,2.908,2.908,0,0,0-.579,1.919,2.739,2.739,0,0,0,.586,1.856,1.964,1.964,0,0,0,1.567.678,1.868,1.868,0,0,0,1.542-.666,2.95,2.95,0,0,0,.539-1.9,2.99,2.99,0,0,0-.539-1.911A1.857,1.857,0,0,0,179.523,19.18Z"
+                fill="#5e5e5e" />
+            <path
+                d="M189.067,15.781a1.533,1.533,0,0,0-.784-.2q-1.237,0-1.237,1.4V18h1.743v1.333h-1.736V25.5h-1.7V19.333h-1.282V18h1.282V16.784a2.362,2.362,0,0,1,.777-1.871,2.82,2.82,0,0,1,1.94-.684,2.879,2.879,0,0,1,1,.138Z"
+                fill="#5e5e5e" />
+            <path
+                d="M194.23,25.42a2.955,2.955,0,0,1-1.31.248q-2.182,0-2.183-2.094V19.333h-1.253V18h1.253V16.264l1.7-.483V18h1.793v1.333h-1.793v3.75a1.484,1.484,0,0,0,.241.952,1,1,0,0,0,.806.285,1.165,1.165,0,0,0,.746-.248Z"
+                fill="#5e5e5e" />
+            <rect x="13" y="11" width="9" height="9" fill="#f25022" />
+            <rect x="13" y="21" width="9" height="9" fill="#00a4ef" />
+            <rect x="23" y="11" width="9" height="9" fill="#7fba00" />
+            <rect x="23" y="21" width="9" height="9" fill="#ffb900" />
+        </svg>
+    </a>
+</template>

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

@@ -50,7 +50,6 @@ const onDelete = async () => {
 
 }
 
-console.log(light)
 useHead({
     title: light.company + " - " + title,
 })

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

@@ -1,6 +1,8 @@
 <script setup>
 import { ref } from 'vue'
-import { q, m } from '#imports'
+import { q, m, useLight } from '#imports';
+
+const light = useLight()
 
 const { app } = await q({ app: { config: ["name", "value"] } })
 const obj = app.config.reduce((acc, cur) => {
@@ -11,6 +13,24 @@ const obj = app.config.reduce((acc, cur) => {
 obj.revision = obj.revision ? obj.revision.split(',') : []
 
 const tab = ref('general')
+
+const onSubmit = async (d) => {
+    let data = [];
+    Object.keys(d).forEach((key) => {
+        data.push({
+            name: key,
+            value: d[key]
+        })
+    })
+    await m("updateAppConfigs", { data })
+
+    light.notify({ message: "Settings saved", color: "positive" })
+
+    //update the modelValue
+    Object.keys(d).forEach((key) => {
+        obj[key] = d[key]
+    })
+}
 </script>
 <template>
     <l-page>
@@ -24,6 +44,7 @@ const tab = ref('general')
                         <q-tab name="Modules" icon="sym_o_apps" :label="$t('Modules')" />
                         <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="authentication" icon="sym_o_passkey" :label="$t('Authentication')" />
                         <q-tab name="developer" icon="sym_o_code" :label="$t('Developer')" />
                     </q-tabs>
                 </template>
@@ -34,6 +55,7 @@ const tab = ref('general')
                     <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" />
+                    <l-system-setting-authentication v-if="tab == 'authentication'" v-bind="obj" @submit="onSubmit" />
                 </template>
             </q-splitter>
         </l-card>

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

@@ -1,13 +1,24 @@
 <script setup>
 import { reactive, onMounted, nextTick } from "vue"
 import { useQuasar } from "quasar";
-import { q, m, api, useLight } from '#imports'
+import { q, m, useLight } from '#imports'
 import { useI18n } from 'vue-i18n'
 
 const light = useLight()
 const { t } = useI18n()
 const quasar = useQuasar();
-let { app, my } = await q({ app: ['googleClientId'], my: ["gmail"] })
+let { app, my } = await q({
+    app: {
+        googleClientId: true,
+        microsoftClientId: true,
+        microsoftTenantId: true,
+        facebookAppId: true,
+    }, my: {
+        google: true,
+        microsoft: true,
+        facebook: true,
+    }
+})
 
 const $q = useQuasar();
 my = reactive(my);
@@ -17,7 +28,7 @@ const handleGoogleCredentialResponse = async (response) => {
         await m("googleRegister", { credential: response.credential })
 
         const resp = await q("my", ["gmail"]);
-        my.gmail = resp.gmail;
+        my.google = resp.google;
 
         light.notify({
             message: "Google account linked",
@@ -84,33 +95,147 @@ const onUnlink = async () => {
         my.gmail = null;
         window.location.reload();
     })
+}
+
+const ms = reactive({});
+
+const onUnlinkMicrosoft = async () => {
+    //confirm
+    light.dialog({
+        title: "Unlink",
+        color: "negative",
+        message: "Are you sure you want to unlink your Microsoft account?",
+        ok: "Yes",
+        cancel: "No",
+    }).onOk(async () => {
+        await m("unlinkMicrosoft");
+        my.microsoft = null;
+        window.location.reload();
+    })
+}
+
+const onLinkMicrosoft = async (resp) => {
+    try {
+        await m("microsoftRegister", { account_id: resp.account.localAccountId });
+        light.notify({
+            message: "Microsoft account linked",
+            color: "positive",
+        });
 
+        window.location.reload();
+    } catch (e) {
+        light.notify({
+            message: e.message,
+            color: "negative",
+        });
+    }
+}
+
+const onLinkFacebook = (accessToken) => {
+    try {
+        m("facebookRegister", { access_token: accessToken })
+        light.notify({
+            message: "Facebook account linked",
+            color: "positive",
+        });
+    } catch (e) {
+        light.notify({
+            message: e.message,
+            color: "negative",
+        });
+    }
+
+}
+
+const onUnlinkFacebook = async () => {
+    //confirm
+    light.dialog({
+        title: "Unlink",
+        color: "negative",
+        message: "Are you sure you want to unlink your Facebook account?",
+        ok: "Yes",
+        cancel: "No",
+    }).onOk(async () => {
+        await m("unlinkFacebook");
+        my.facebook = null;
+        window.location.reload();
+    })
 }
 
 </script>
 <template>
-    <q-card>
-        <template v-if="app.googleClientId">
-            <template v-if="my.gmail">
-                <q-card-section>
+    <q-card :bordered="false">
+        <q-card-section>
+            <h2 class="text-h6">Google</h2>
+            <template v-if="app.googleClientId">
+                <template v-if="my.google">
+
                     {{ $t('You have already linked your Google account.') }}<br />
-                    Your gmail id is {{ my.gmail }}
-                </q-card-section>
+                    Your gmail id is {{ my.google }}<br />
+                    <l-btn label="Unlink" @click="onUnlink" icon="sym_o_link_off"></l-btn>
 
-                <q-card-actions>
-                    <l-btn label="Unlink" @click="onUnlink" icon="sym_o_delete"></l-btn>
-                </q-card-actions>
+                </template>
 
+                <template v-else>
+                    {{ $t('Click the button below to link your Google account.') }}
+                    <div id="g_id_signin"></div>
+                </template>
             </template>
 
-            <q-card-section v-else>
-                {{ $t('Click the button below to link your Google account.') }}
-                <div id="g_id_signin"></div>
-            </q-card-section>
-        </template>
+            <template v-else>
+                Google login is not available. Please set authentication google client id in server settings.
+            </template>
+        </q-card-section>
+
 
-        <q-card-section v-else>
-            Google login is not available. Please set GOOGLE_CLIENT_ID in server settings.
+        <q-separator />
+
+        <q-card-section>
+            <h2 class="text-h6">Microsoft</h2>
+            <template v-if="app.microsoftClientId">
+                <template v-if="my.microsoft">
+                    {{ $t('You have already linked your Microsoft account.') }}<br />
+                    Your account id is {{ my.microsoft }}
+                    <br />
+                    <l-btn label="Unlink" @click="onUnlinkMicrosoft" icon="sym_o_link_off"></l-btn>
+                </template>
+                <template v-else>
+                    <div>{{ $t('Click the button below to link your Microsoft account.') }}</div>
+                    <div>
+                        <l-microsoft-button :client-id="app.microsoftClientId" :tenant-id="app.microsoftTenantId"
+                            @login="onLinkMicrosoft" />
+                    </div>
+                </template>
+            </template>
+            <template v-else>
+                Micorsoft login is not available. Please set authentication microsft client id in server settings.
+            </template>
         </q-card-section>
+
+
+        <q-separator />
+        <q-card-section>
+            <h2 class="text-h6">Facebook</h2>
+            <template v-if="app.facebookAppId">
+                <template v-if="my.facebook">
+                    {{ $t('You have already linked your Facebook account.') }}<br />
+                    Your account id is {{ my.facebook }}
+                    <l-btn label="Unlink" @click="onUnlinkFacebook" icon="sym_o_link_off"></l-btn>
+                </template>
+                <template v-else>
+                    <div>{{ $t('Click the button below to link your Facebook account.') }}</div>
+                    <l-facebook-button @login="onLinkFacebook" />
+                </template>
+            </template>
+            <template v-else>
+                Facebook login is not available. Please set authentication facebook app id in server settings.
+            </template>
+        </q-card-section>
+
+
+
+
+
+
     </q-card>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.18.3",
+  "version": "1.19.1",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -32,8 +32,9 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
+    "@azure/msal-browser": "^3.26.1",
     "@formkit/drag-and-drop": "^0.1.6",
-    "@hostlink/light": "^2.0.2",
+    "@hostlink/light": "^2.1.0",
     "@nuxt/kit": "^3.7.4",
     "@nuxt/module-builder": "^0.8.3",
     "@quasar/extras": "^1.16.11",
@@ -47,6 +48,7 @@
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
   },
   "devDependencies": {
+    "@azure/identity": "^4.5.0",
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/schema": "^3.7.4",