@hostlink/nuxt-light 1.73.2 → 1.74.0

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

@@ -1,32 +1,49 @@
 <script setup>
-import { q, m, notify } from "#imports";
+import { reset } from "@formkit/core";
+import { m, notify, q } from "#imports";
 const { my } = await q({
   my: {
     username: true,
     email: true,
     first_name: true,
-    last_name: true
+    last_name: true,
+    phone: true,
+    addr1: true,
+    addr2: true,
+    addr3: true
   }
 });
 const onSubmit = async (data, form) => {
-  return await m("updateMy", {
+  await m("updateMy", {
     data: {
       email: data.email,
       first_name: data.first_name,
-      last_name: data.last_name
+      last_name: data.last_name,
+      phone: data.phone,
+      addr1: data.addr1,
+      addr2: data.addr2,
+      addr3: data.addr3
     }
-  }).then(() => {
-    notify("Your profile has been updated");
-    reset(form, data);
   });
+  notify("Your profile has been updated");
+  reset(form, data);
 };
 </script>
 
 <template>
-    <FormKit type="l-form" :value="my" :bordered="false" @submit="onSubmit">
-        <FormKit type="l-input" label="Username" name="username" readonly></FormKit>
-        <FormKit type="l-input" label="Email" name="email" validation="required|email"></FormKit>
-        <FormKit type="l-input" label="First name" name="first_name" validation="required"></FormKit>
-        <FormKit type="l-input" label="Last name" name="last_name"></FormKit>
+    <FormKit type="l-form" layout="stack" :value="my" :bordered="false" @submit="onSubmit">
+        <div class="text-h6">{{ $t("Personal information") }}</div>
+        <FormKit type="l-input" label="Username" name="username" readonly />
+        <FormKit type="l-input" label="Email" name="email" validation="required|email" />
+        <FormKit type="l-input" label="First name" name="first_name" validation="required" />
+        <FormKit type="l-input" label="Last name" name="last_name" />
+
+        <q-separator spaced />
+
+        <div class="text-h6">{{ $t("Contact information") }}</div>
+        <FormKit type="l-input" label="Phone" name="phone" />
+        <FormKit type="l-input" label="Address1" name="addr1" />
+        <FormKit type="l-input" label="Address2" name="addr2" />
+        <FormKit type="l-input" label="Address3" name="addr3" />
     </FormKit>
 </template>

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

@@ -1,34 +1,10 @@
 <script setup>
-import { reset } from "@formkit/core";
-import { q, m, notify } from "#imports";
-const { my } = await q({
-  my: {
-    phone: true,
-    addr1: true,
-    addr2: true,
-    addr3: true
-  }
+import { navigateTo } from "#imports";
+await navigateTo("/User/setting", {
+  replace: true
 });
-const onSubmit = (data, form) => {
-  return m("updateMy", {
-    data: {
-      phone: data.phone,
-      addr1: data.addr1,
-      addr2: data.addr2,
-      addr3: data.addr3
-    }
-  }).then(() => {
-    notify("Your information has been updated");
-    reset(form, data);
-  });
-};
 </script>
 
 <template>
-    <FormKit type="l-form" :value="my" :bordered="false" @submit="onSubmit">
-        <FormKit type="l-input" label="Phone" name="phone"></FormKit>
-        <FormKit type="l-input" label="Address1" name="addr1"></FormKit>
-        <FormKit type="l-input" label="Address2" name="addr2"></FormKit>
-        <FormKit type="l-input" label="Address3" name="addr3"></FormKit>
-    </FormKit>
+    <div />
 </template>

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

@@ -1,13 +1,12 @@
 <script setup>
-import { reactive, onMounted, nextTick } from "vue";
-import { useQuasar } from "quasar";
+import { nextTick, onMounted, reactive, ref } from "vue";
 import { q, useLight } from "#imports";
 import { getApiClient } from "@hostlink/light";
-import { fabGoogle, fabFacebook, fabMicrosoft } from "@quasar/extras/fontawesome-v6";
+import { fabGoogle, fabFacebook, fabMicrosoft } from "@quasar/extras/fontawesome-v7";
+import { loadGoogleIdentityServices } from "../../../utils/socialSdk";
 const api = getApiClient();
 const light = useLight();
-const quasar = useQuasar();
-let { app, my } = await q({
+const response = await q({
   app: {
     googleClientId: true,
     microsoftClientId: true,
@@ -20,123 +19,152 @@ let { app, my } = await q({
     facebook: true
   }
 });
-const $q = useQuasar();
-my = reactive(my);
-const handleGoogleCredentialResponse = async (response) => {
+const app = response.app;
+const my = reactive(response.my);
+const providerLoading = reactive({
+  google: false,
+  microsoft: false,
+  facebook: false
+});
+const googleSdkLoading = ref(false);
+const googleSdkError = ref("");
+const errorMessage = (error) => error instanceof Error ? error.message : String(error);
+const notifyError = (error) => {
+  light.notify({
+    message: errorMessage(error),
+    color: "negative",
+    icon: "sym_o_error"
+  });
+};
+const refreshAccounts = async () => {
+  const result = await q({
+    my: {
+      google: true,
+      microsoft: true,
+      facebook: true
+    }
+  });
+  Object.assign(my, result.my);
+};
+const handleGoogleCredentialResponse = async (credentialResponse) => {
+  if (!credentialResponse.credential || providerLoading.google) {
+    return;
+  }
+  providerLoading.google = true;
   try {
-    await api.auth.google.register(response.credential);
-    const resp = await q({
-      my: { google: true }
-    });
-    my.google = resp.my.google;
+    await api.auth.google.register(credentialResponse.credential);
+    await refreshAccounts();
     light.notify({
       message: "Google account linked",
       color: "positive"
     });
-  } catch (e) {
-    console.log(e);
+  } catch (error) {
+    notifyError(error);
+  } finally {
+    providerLoading.google = false;
   }
 };
-onMounted(() => {
-  if (app.googleClientId) {
-    if (!window.google) {
-      quasar.notify({
-        message: "Google login is not available",
-        //set script https://accounts.google.com/gsi/client in nuuxt.config.js
-        color: "negative",
-        icon: "sym_o_error",
-        position: "top",
-        timeout: 2e3
-      });
+const initializeGoogle = async () => {
+  if (!app.googleClientId || my.google) {
+    return;
+  }
+  googleSdkLoading.value = true;
+  googleSdkError.value = "";
+  try {
+    const google = await loadGoogleIdentityServices();
+    googleSdkLoading.value = false;
+    await nextTick();
+    const target = document.getElementById("g_id_signin");
+    if (!target || my.google) {
       return;
     }
-  }
-  nextTick(() => {
+    target.replaceChildren();
     google.accounts.id.initialize({
       client_id: app.googleClientId,
       callback: handleGoogleCredentialResponse
     });
-    google.accounts.id.renderButton(
-      document.getElementById("g_id_signin"),
-      {
-        type: "profile",
-        shape: "pill",
-        theme: "outline",
-        text: "signin_with",
-        size: "large",
-        logo_alignment: "left"
-      }
-    );
-  });
-});
-const onUnlink = async () => {
-  light.dialog({
-    title: "Unlink",
-    color: "negative",
-    message: "Are you sure you want to unlink your Google account?",
-    ok: "Yes",
-    cancel: "No"
-  }).onOk(async () => {
-    await api.auth.google.unlink();
-    my.gmail = null;
-    window.location.reload();
-  });
+    google.accounts.id.renderButton(target, {
+      type: "profile",
+      shape: "pill",
+      theme: "outline",
+      text: "signin_with",
+      size: "large",
+      logo_alignment: "left"
+    });
+  } catch (error) {
+    googleSdkError.value = errorMessage(error);
+    notifyError(error);
+  } finally {
+    googleSdkLoading.value = false;
+  }
 };
-const onUnlinkMicrosoft = async () => {
+const unlinkProvider = (provider, label, unlink) => {
   light.dialog({
     title: "Unlink",
     color: "negative",
-    message: "Are you sure you want to unlink your Microsoft account?",
+    message: `Are you sure you want to unlink your ${label} account?`,
     ok: "Yes",
     cancel: "No"
   }).onOk(async () => {
-    await api.auth.microsoft.unlink();
-    my.microsoft = null;
-    window.location.reload();
+    providerLoading[provider] = true;
+    try {
+      await unlink();
+      await refreshAccounts();
+      light.notify({
+        message: `${label} account unlinked`,
+        color: "positive"
+      });
+      if (provider === "google") {
+        await initializeGoogle();
+      }
+    } catch (error) {
+      notifyError(error);
+    } finally {
+      providerLoading[provider] = false;
+    }
   });
 };
-const onLinkMicrosoft = async (resp) => {
+const onUnlinkGoogle = () => unlinkProvider("google", "Google", api.auth.google.unlink);
+const onUnlinkMicrosoft = () => unlinkProvider("microsoft", "Microsoft", api.auth.microsoft.unlink);
+const onUnlinkFacebook = () => unlinkProvider("facebook", "Facebook", api.auth.facebook.unlink);
+const onLinkMicrosoft = async (microsoftResponse) => {
+  const accountId = microsoftResponse.account?.localAccountId;
+  if (!accountId || providerLoading.microsoft) {
+    return;
+  }
+  providerLoading.microsoft = true;
   try {
-    await api.auth.microsoft.register(resp.account.localAccountId);
+    await api.auth.microsoft.register(accountId);
+    await refreshAccounts();
     light.notify({
       message: "Microsoft account linked",
       color: "positive"
     });
-    window.location.reload();
-  } catch (e) {
-    light.notify({
-      message: e.message,
-      color: "negative"
-    });
+  } catch (error) {
+    notifyError(error);
+  } finally {
+    providerLoading.microsoft = false;
   }
 };
 const onLinkFacebook = async (accessToken) => {
+  if (providerLoading.facebook) {
+    return;
+  }
+  providerLoading.facebook = true;
   try {
     await api.auth.facebook.register(accessToken);
+    await refreshAccounts();
     light.notify({
       message: "Facebook account linked",
       color: "positive"
     });
-  } catch (e) {
-    light.notify({
-      message: e.message,
-      color: "negative"
-    });
+  } catch (error) {
+    notifyError(error);
+  } finally {
+    providerLoading.facebook = false;
   }
 };
-const onUnlinkFacebook = async () => {
-  light.dialog({
-    title: "Unlink",
-    color: "negative",
-    message: "Are you sure you want to unlink your Facebook account?",
-    ok: "Yes",
-    cancel: "No"
-  }).onOk(async () => {
-    await api.auth.facebook.unlink();
-    my.facebook = null;
-    window.location.reload();
-  });
-};
+onMounted(initializeGoogle);
 const text1 = "Your social accounts are securely linked using industry-standard OAuth protocols. You can unlink them at any time.";
 </script>
 
@@ -174,14 +202,21 @@ const text1 = "Your social accounts are securely linked using industry-standard
                                 <div class="text-caption text-grey-6">{{ $t('Connected Account') }}</div>
                                 <div class="text-body2 text-weight-medium q-mt-xs">{{ my.google }}</div>
                             </div>
-                            <q-btn class="full-width" color="negative" outline @click="onUnlink" icon="sym_o_link_off"
-                                :label="$t('Unlink Account')" />
+                            <q-btn class="full-width" color="negative" outline @click="onUnlinkGoogle"
+                                icon="sym_o_link_off" :label="$t('Unlink Account')"
+                                :loading="providerLoading.google" />
                         </template>
                         <template v-else>
                             <div class="text-center q-mb-md text-grey-6">
                                 {{ $t('Click to link your Google account for quick sign-in') }}
                             </div>
-                            <div id="g_id_signin" class="flex justify-center"></div>
+                            <div v-if="googleSdkLoading" class="flex justify-center q-pa-sm">
+                                <q-spinner color="primary" size="32px" />
+                            </div>
+                            <q-banner v-else-if="googleSdkError" class="bg-red-1 text-negative">
+                                {{ $t('Google login is not available') }}
+                            </q-banner>
+                            <div v-else id="g_id_signin" class="flex justify-center"></div>
                         </template>
                     </q-card-section>
                     <q-card-section v-else>
@@ -219,13 +254,17 @@ const text1 = "Your social accounts are securely linked using industry-standard
                                 <div class="text-body2 text-weight-medium q-mt-xs">{{ my.microsoft }}</div>
                             </div>
                             <q-btn class="full-width" color="negative" outline @click="onUnlinkMicrosoft"
-                                icon="sym_o_link_off" :label="$t('Unlink Account')" />
+                                icon="sym_o_link_off" :label="$t('Unlink Account')"
+                                :loading="providerLoading.microsoft" />
                         </template>
                         <template v-else>
                             <div class="text-center q-mb-md text-grey-6">
                                 {{ $t('Click to link your Microsoft account for quick sign-in') }}
                             </div>
-                            <div class="flex justify-center">
+                            <div v-if="providerLoading.microsoft" class="flex justify-center q-pa-sm">
+                                <q-spinner color="primary" size="32px" />
+                            </div>
+                            <div v-else class="flex justify-center">
                                 <l-microsoft-button :client-id="app.microsoftClientId"
                                     :tenant-id="app.microsoftTenantId" @login="onLinkMicrosoft" />
                             </div>
@@ -266,14 +305,16 @@ const text1 = "Your social accounts are securely linked using industry-standard
                                 <div class="text-body2 text-weight-medium q-mt-xs">{{ my.facebook }}</div>
                             </div>
                             <q-btn class="full-width" color="negative" outline @click="onUnlinkFacebook"
-                                icon="sym_o_link_off" :label="$t('Unlink Account')" />
+                                icon="sym_o_link_off" :label="$t('Unlink Account')"
+                                :loading="providerLoading.facebook" />
                         </template>
                         <template v-else>
                             <div class="text-center q-mb-md text-grey-6">
                                 {{ $t('Click to link your Facebook account for quick sign-in') }}
                             </div>
                             <div class="flex justify-center">
-                                <l-facebook-button @login="onLinkFacebook" />
+                                <l-facebook-button :app-id="app.facebookAppId"
+                                    :disable="providerLoading.facebook" @login="onLinkFacebook" />
                             </div>
                         </template>
                     </q-card-section>