@hostlink/nuxt-light 1.73.1 → 1.74.0

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

@@ -6,17 +6,34 @@ const $q = useQuasar();
 const { data: app, refresh } = await useAsyncData(async () => {
   return await q({
     app: {
+      listFileSystem: true,
       fs: {
-        list: true,
-        types: true
+        types: true,
+        decoratorTypes: true
       },
       driveTypes: true
     }
   }).then((res) => res.app);
 });
-const items = computed(() => app.value.fs.list);
+const items = computed(() => app.value?.listFileSystem ?? []);
 const dialog = ref(false);
 const value = ref({});
+const clone = (data) => JSON.parse(JSON.stringify(data));
+const openAdd = () => {
+  value.value = {
+    data: {},
+    decorators: []
+  };
+  dialog.value = true;
+};
+const openEdit = (row) => {
+  value.value = clone({
+    ...row,
+    data: row.data ?? {},
+    decorators: row.decorators ?? []
+  });
+  dialog.value = true;
+};
 const onSubmit = async (data) => {
   loading.value = true;
   try {
@@ -39,19 +56,19 @@ const onSubmit = async (data) => {
   }
   loading.value = false;
 };
-const onRemove = async (selected2) => {
+const onRemove = async (rows) => {
   $q.dialog({
     title: "Confirm",
     message: "Are you sure you want to delete this file system?",
     ok: "Yes",
     cancel: "No"
   }).onOk(async () => {
-    for (let row of selected2) {
+    for (let row of rows) {
       await m("lightFSdelete", {
         uuid: row.uuid
       });
     }
-    selected2.value = [];
+    selected.value = [];
     refresh();
   });
 };
@@ -88,6 +105,11 @@ const columns = [
     name: "data",
     label: "Data",
     align: "left"
+  },
+  {
+    name: "decorators",
+    label: "Decorators",
+    align: "left"
   }
 ];
 const selected = ref([]);
@@ -96,12 +118,28 @@ const getType = (type) => {
   if (!type) return null;
   return app.value.fs.types.find((t) => t.name == type);
 };
+const getDecoratorType = (type) => {
+  if (!type) return null;
+  return app.value.fs.decoratorTypes.find((t) => t.name == type);
+};
+const isSecret = (key) => [
+  "secret_key",
+  "secretKey",
+  "password",
+  "token",
+  "access_key_secret"
+].includes(key);
+const displayValue = (key, optionValue) => {
+  if (isSecret(key) && optionValue) return "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
+  if (typeof optionValue === "boolean") return optionValue ? "Yes" : "No";
+  return optionValue;
+};
 </script>
 
 <template>
     <l-page title="File system">
         <q-dialog v-model="dialog" persistent>
-            <q-card style="width: 500px;">
+            <q-card style="width: 720px; max-width: 90vw;">
 
                 <q-toolbar>
                     <q-toolbar-title v-if="value.uuid">{{ $t('Edit File System') }}</q-toolbar-title>
@@ -116,15 +154,60 @@ const getType = (type) => {
                         option-value="name"></form-kit>
 
                     <form-kit type="group" name="data" v-if="value.type">
-                        <template v-for="(option, name) in getType(value.type).options">
-                            <form-kit type="l-input" :name="name" :label="name"
+                        <template v-for="(option, name) in getType(value.type)?.options" :key="name">
+                            <form-kit v-if="option.type === 'select'" type="l-select" :name="name" :label="name"
+                                :options="option.options" :validation="option.required ? 'required' : ''"
+                                :help="option.description"></form-kit>
+
+                            <form-kit v-else-if="option.type === 'boolean'" type="l-toggle" :name="name" :label="name"
+                                :help="option.description"></form-kit>
+
+                            <form-kit v-else type="l-input" :name="name" :label="name"
                                 :validation="option.required ? 'required' : ''" :help="option.description"
-                                :placeholder="option.placeholder"></form-kit>
+                                :placeholder="option.placeholder" :input-type="option.type === 'password' ? 'password' : 'text'"
+                                :number="option.type === 'int' ? 'integer' : undefined"></form-kit>
 
                         </template>
 
                     </form-kit>
 
+                    <div class="col-12">
+                        <q-separator class="q-mb-md"></q-separator>
+                        <div class="text-subtitle2">{{ $t('Filesystem decorators') }}</div>
+                        <div class="text-caption text-grey-7 q-mb-sm">
+                            {{ $t('Decorators are applied in order to every file operation.') }}
+                        </div>
+
+                        <form-kit type="l-repeater" name="decorators" :sortable="true"
+                            :add-label="$t('Add decorator')" #default="{ value: decorator }">
+                            <div class="row q-col-gutter-sm">
+                                <form-kit class="col-12" type="l-select" label="Decorator" name="type"
+                                    validation="required" :options="app.fs.decoratorTypes"
+                                    option-value="name"></form-kit>
+
+                                <form-kit class="col-12" type="group" name="data" v-if="decorator.type">
+                                    <template
+                                        v-for="(option, name) in getDecoratorType(decorator.type)?.options"
+                                        :key="name">
+                                        <form-kit v-if="option.type === 'select'" type="l-select" :name="name"
+                                            :label="name" :options="option.options"
+                                            :validation="option.required ? 'required' : ''"
+                                            :help="option.description"></form-kit>
+
+                                        <form-kit v-else-if="option.type === 'boolean'" type="l-toggle" :name="name"
+                                            :label="name" :help="option.description"></form-kit>
+
+                                        <form-kit v-else type="l-input" :name="name" :label="name"
+                                            :validation="option.required ? 'required' : ''"
+                                            :help="option.description" :placeholder="option.placeholder"
+                                            :input-type="option.type === 'password' ? 'password' : 'text'"
+                                            :number="option.type === 'int' ? 'integer' : undefined"></form-kit>
+                                    </template>
+                                </form-kit>
+                            </div>
+                        </form-kit>
+                    </div>
+
                 </form-kit>
 
             </q-card>
@@ -133,9 +216,7 @@ const getType = (type) => {
         <q-table :rows="items" :columns="columns" selection="multiple" flat bordered dense separator="cell"
             v-model:selected="selected" row-key="uuid" :loading="loading">
             <template #top-left>
-                <q-btn icon="sym_o_add" @click="value = {
-                    data: {}
-                }; dialog = true" flat round dense>
+                <q-btn icon="sym_o_add" @click="openAdd" flat round dense>
                     <q-tooltip>Add File System</q-tooltip>
                 </q-btn>
             </template>
@@ -152,16 +233,36 @@ const getType = (type) => {
                         <q-item v-for="(value, key) in props.row.data" :key="key">
                             <q-item-section>
                                 <q-item-label caption>{{ key }}</q-item-label>
-                                <q-item-label>{{ value }}</q-item-label>
+                                <q-item-label>{{ displayValue(key, value) }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </q-td>
+            </template>
+
+            <template #body-cell-decorators="props">
+                <q-td>
+                    <q-list v-if="props.row.decorators?.length" flat dense>
+                        <q-item v-for="(decorator, index) in props.row.decorators"
+                            :key="`${decorator.type}-${index}`">
+                            <q-item-section>
+                                <q-item-label>{{ getDecoratorType(decorator.type)?.label ?? decorator.type }}</q-item-label>
+                                <q-item-label caption>
+                                    <span v-if="decorator.data?.prefix">
+                                        {{ decorator.data.prefix }} /
+                                    </span>
+                                    {{ decorator.data?.scope ?? 'fixed' }}
+                                </q-item-label>
                             </q-item-section>
                         </q-item>
                     </q-list>
+                    <span v-else class="text-grey-6">—</span>
                 </q-td>
             </template>
 
             <template #body-cell-action="props">
                 <q-td auto-width>
-                    <q-btn icon="sym_o_edit" @click="value = props.row; dialog = true" flat round dense>
+                    <q-btn icon="sym_o_edit" @click="openEdit(props.row)" flat round dense>
                         <q-tooltip>Edit</q-tooltip>
                     </q-btn>
                 </q-td>

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>