@hostlink/nuxt-light 1.18.2 → 1.19.0

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

@@ -1,10 +1,25 @@
 <script setup>
 import { reactive, onMounted, nextTick } from "vue"
 import { useQuasar } from "quasar";
-import { q, m, api } 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,
+        facebookAppId: true,
+    }, my: {
+        google: true,
+        microsoft: true,
+        facebook: true,
+    }
+})
 
+const $q = useQuasar();
 my = reactive(my);
 
 const handleGoogleCredentialResponse = async (response) => {
@@ -12,13 +27,11 @@ const handleGoogleCredentialResponse = async (response) => {
         await m("googleRegister", { credential: response.credential })
 
         const resp = await q("my", ["gmail"]);
-        my.gmail = resp.gmail;
+        my.google = resp.google;
 
-        quasar.notify({
+        light.notify({
             message: "Google account linked",
             color: "positive",
-            position: "top",
-            timeout: 2000
         });
     } catch (e) {
         console.log(e)
@@ -67,35 +80,160 @@ onMounted(() => {
 
 });
 
-const unlink = async () => {
-    await m("unlinkGoogle");
-    my.gmail = null;
-    window.location.reload();
+const onUnlink = async () => {
+
+    //confirm
+    light.dialog({
+        title: "Unlink",
+        color: "negative",
+        message: "Are you sure you want to unlink your Google account?",
+        ok: "Yes",
+        cancel: "No",
+    }).onOk(async () => {
+        await m("unlinkGoogle");
+        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>
-    <l-card :bordered="false">
-
-        <template v-if="app.googleClientId">
-            <q-card-section v-if="my.gmail">
-                <p>
-                    You have already linked your Google account.<br />
-
-                    Your gmail is {{ my.gmail }}
-                </p>
-                <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
-            </q-card-section>
-
-            <q-card-section v-else>
-                Click the button below to link your Google account.
-                <div id="g_id_signin"></div>
-            </q-card-section>
-        </template>
-
-        <q-card-section v-else>
-            Google login is not available. Please set GOOGLE_CLIENT_ID in server settings.
+    <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.google }}<br />
+                    <l-btn label="Unlink" @click="onUnlink" icon="sym_o_link_off"></l-btn>
+
+                </template>
+
+                <template v-else>
+                    {{ $t('Click the button below to link your Google account.') }}
+                    <div id="g_id_signin"></div>
+                </template>
+            </template>
+
+            <template v-else>
+                Google login is not available. Please set authentication google client id in server settings.
+            </template>
         </q-card-section>
 
-    </l-card>
+
+        <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" @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/dist/runtime/pages/User/setting/two-factor-auth.vue

@@ -48,8 +48,7 @@ const onCopy = () => {
     <l-form @submit="save" :bordered="false" v-if="show">
         <div>
             <p>
-                Now download the app and scan the qrcode. Input the code to the
-                following input and submit
+                {{ $t('Now download the app and scan the qrcode. Input the code to the following input and submit') }}
             </p>
             <p>
                 For Android user, install
@@ -84,7 +83,7 @@ const onCopy = () => {
         </p>
 
         <l-input v-model="obj.code" label="Code"
-            hint="Please scan the QR code with your authenticator app, and enter the code" required />
+            hint="Please scan the QR code with your authenticator app, and enter the code generated" required />
     </l-form>
     <div v-else>
         <q-card-section>

package/dist/runtime/plugin.js

@@ -1,5 +1,6 @@
 import { Quasar, Dialog, Notify, Loading, AppFullscreen } from "quasar";
 import { createI18n } from "vue-i18n";
+import { createLight } from "./light.js";
 import { defineNuxtPlugin } from "#app";
 import "./assets/main.css";
 import message_en from "./locales/en.json";
@@ -23,7 +24,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   api.models.create("SystemValue", TypeSystemValue);
   api.models.create("MailLog", TypeMailLog);
   api.models.create("EventLog", TypeEventLog);
-  nuxtApp.vueApp.config.globalProperties.$light = useLight();
   nuxtApp.vueApp.config.errorHandler = (err, instance, info) => {
     console.log(err);
     const light = useLight();
@@ -44,6 +44,9 @@ export default defineNuxtPlugin((nuxtApp) => {
     fallbackWarn: false,
     missingWarn: false
   });
+  nuxtApp.vueApp.use(createLight({
+    i18n
+  }));
   nuxtApp.vueApp.use(i18n);
   nuxtApp.vueApp.use(Quasar, {
     config: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.18.2",
+  "version": "1.19.0",
   "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",

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

@@ -1,34 +0,0 @@
-<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>