@hostlink/nuxt-light 1.73.1 → 1.74.0

package/dist/runtime/pages/User/setting/two-factor-auth.vue

@@ -1,192 +1,437 @@
 <script setup>
-import { ref, reactive } from "vue";
+import { computed, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
-import { q, m, navigateTo } from "#imports";
+import { m, q } from "#imports";
 const $q = useQuasar();
-const { my } = await q({
+const initial = await q({
   my: {
-    my2FA: true
+    twoFactorEnabled: true
+  },
+  app: {
+    twoFactorAuthentication: true
   }
 });
-const obj = reactive({
-  code: ""
-});
+const twoFactorEnabled = ref(Boolean(initial.my?.twoFactorEnabled));
+const systemRequiresTwoFactor = Boolean(initial.app?.twoFactorAuthentication);
+const setup = ref(null);
 const currentStep = ref(1);
 const secretVisible = ref(false);
-const loading = ref(false);
+const setupLoading = ref(false);
+const saveLoading = ref(false);
+const disableLoading = ref(false);
+const disableDialog = ref(false);
+const setupForm = reactive({
+  code: ""
+});
+const disableForm = reactive({
+  password: "",
+  code: ""
+});
+const validSetupCode = computed(() => /^\d{6}$/.test(setupForm.code));
+const validDisableForm = computed(() => disableForm.password.length > 0 && /^\d{6}$/.test(disableForm.code));
+const errorMessage = (error) => error instanceof Error ? error.message : String(error);
+const resetSetup = () => {
+  setup.value = null;
+  setupForm.code = "";
+  currentStep.value = 1;
+  secretVisible.value = false;
+};
+const startSetup = async () => {
+  setupLoading.value = true;
+  try {
+    const result = await q({
+      my: {
+        my2FA: true
+      }
+    });
+    setup.value = result.my.my2FA;
+    currentStep.value = 1;
+  } catch (error) {
+    $q.notify({
+      message: `Setup failed: ${errorMessage(error)}`,
+      color: "negative"
+    });
+  } finally {
+    setupLoading.value = false;
+  }
+};
 const save = async () => {
-  loading.value = true;
+  if (!setup.value || !validSetupCode.value) {
+    return;
+  }
+  saveLoading.value = true;
   try {
     await m("updateMy2FA", {
-      code: obj.code,
-      secret: my.my2FA.secret
+      code: setupForm.code,
+      secret: setup.value.secret
     });
+    twoFactorEnabled.value = true;
+    resetSetup();
     $q.notify({
-      message: "\u{1F389} Two-Factor Authentication has been successfully enabled!",
+      message: "Two-Factor Authentication has been successfully enabled!",
       color: "positive",
-      timeout: 5e3,
-      actions: [
-        { label: "Dismiss", color: "white" }
-      ]
+      timeout: 5e3
     });
-    await navigateTo("/User/setting");
-  } catch (e) {
+  } catch (error) {
     $q.notify({
-      message: `\u274C Setup failed: ${e.message}`,
+      message: `Setup failed: ${errorMessage(error)}`,
       color: "negative",
-      timeout: 5e3,
-      actions: [
-        { label: "Retry", color: "white" }
-      ]
+      timeout: 5e3
     });
   } finally {
-    loading.value = false;
+    saveLoading.value = false;
   }
 };
-const show = ref(true);
-if (my.twoFactorEnabled) {
-  show.value = false;
-  currentStep.value = 3;
-}
-const onCopy = async () => {
+const openDisableDialog = () => {
+  disableForm.password = "";
+  disableForm.code = "";
+  disableDialog.value = true;
+};
+const disableTwoFactor = async () => {
+  if (!validDisableForm.value) {
+    return;
+  }
+  disableLoading.value = true;
   try {
-    await navigator.clipboard.writeText(my.my2FA.secret);
+    await m("disableMy2FA", {
+      password: disableForm.password,
+      code: disableForm.code
+    });
+    twoFactorEnabled.value = false;
+    disableDialog.value = false;
+    disableForm.password = "";
+    disableForm.code = "";
+    resetSetup();
     $q.notify({
-      message: "\u2705 Secret key copied to clipboard",
+      message: "Two-Factor Authentication has been disabled.",
       color: "positive",
-      timeout: 2e3,
-      icon: "content_copy"
+      timeout: 5e3
     });
-  } catch (e) {
+  } catch (error) {
+    $q.notify({
+      message: `Unable to disable Two-Factor Authentication: ${errorMessage(error)}`,
+      color: "negative",
+      timeout: 5e3
+    });
+  } finally {
+    disableLoading.value = false;
+  }
+};
+const onCopy = async () => {
+  if (!setup.value?.secret) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(setup.value.secret);
+  } catch {
     const textArea = document.createElement("textarea");
-    textArea.value = my.my2FA.secret;
+    textArea.value = setup.value.secret;
     document.body.appendChild(textArea);
     textArea.select();
     document.execCommand("copy");
     document.body.removeChild(textArea);
-    $q.notify({
-      message: "\u2705 Secret key copied to clipboard",
-      color: "positive",
-      timeout: 2e3
-    });
   }
+  $q.notify({
+    message: "Secret key copied to clipboard",
+    color: "positive",
+    timeout: 2e3,
+    icon: "content_copy"
+  });
 };
 </script>
 
-<style scoped>
-.two-factor-setup{margin:0 auto;max-width:800px}.setup-header{text-align:center}.app-card{transition:all .3s ease}.app-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}.qr-card{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border:2px dashed #1976d2}.secret-input{font-family:Courier New,monospace;font-size:14px}.code-input .q-field__control input{font-family:Courier New,monospace;font-size:24px;font-weight:700;letter-spacing:8px;text-align:center}.verify-section{text-align:center}@media (max-width:600px){.app-card{margin-bottom:1rem}.qr-card img{width:180px!important}.code-input .q-field__control input{font-size:20px;letter-spacing:4px}}.q-btn--loading{pointer-events:none}.q-stepper--vertical .q-stepper__step--done .q-stepper__label{opacity:.7}.q-btn,.q-card{transition:all .2s ease}.q-btn:hover{transform:translateY(-1px)}
-</style>
-
 <template>
     <div class="two-factor-setup">
-        <!-- Header -->
         <div class="setup-header q-mb-lg">
-            <h5 class="q-my-md">{{ $t('Setup Two-Factor Authentication') }}</h5>
-            <q-stepper v-model="currentStep" vertical color="primary" animated flat>
-                <q-step :name="1" title="Download Authenticator App" icon="download" :done="currentStep > 1">
-                    <div class="q-mb-md">
-                        <p class="text-body1 q-mb-md">{{ $t('Choose and download an authenticator app for your device:')
-                            }}</p>
-
-                        <!-- App Selection Cards -->
-                        <div class="row q-gutter-md q-mb-lg">
-                            <div class="col-12 col-md-5">
-                                <q-card flat bordered class="app-card">
-                                    <q-card-section class="q-pa-md">
-                                        <div class="text-h6 q-mb-sm">📱 Android</div>
-                                        <div class="q-gutter-sm">
-                                            <q-btn outline color="primary" size="sm" target="_blank"
-                                                href="https://play.google.com/store/apps/details?id=com.azure.authenticator"
-                                                label="Microsoft Authenticator" class="full-width" />
-                                            <q-btn outline color="primary" size="sm" target="_blank"
-                                                href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
-                                                label="Google Authenticator" class="full-width" />
-                                        </div>
-                                    </q-card-section>
-                                </q-card>
-                            </div>
+            <h5 class="q-my-md">{{ $t("Two-Factor Authentication") }}</h5>
+        </div>
 
-                            <div class="col-12 col-md-5">
-                                <q-card flat bordered class="app-card">
-                                    <q-card-section class="q-pa-md">
-                                        <div class="text-h6 q-mb-sm">🍎 iOS</div>
-                                        <div class="q-gutter-sm">
-                                            <q-btn outline color="primary" size="sm" target="_blank"
-                                                href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458"
-                                                label="Microsoft Authenticator" class="full-width" />
-                                            <q-btn outline color="primary" size="sm" target="_blank"
-                                                href="https://apps.apple.com/us/app/google-authenticator/id388497605"
-                                                label="Google Authenticator" class="full-width" />
-                                        </div>
-                                    </q-card-section>
-                                </q-card>
-                            </div>
-                        </div>
+        <q-card v-if="twoFactorEnabled" flat bordered>
+            <q-card-section class="text-center q-pa-xl">
+                <q-icon name="verified_user" color="positive" size="64px" />
+                <div class="text-h6 q-mt-md">
+                    {{ $t("Two-Factor Authentication is enabled") }}
+                </div>
+                <p class="text-grey-7 q-mt-sm">
+                    {{ $t("Your account is protected by an authenticator app.") }}
+                </p>
 
-                        <q-btn color="primary" @click="currentStep = 2" :label="$t('I have installed the app')"
-                            icon-right="arrow_forward" />
-                    </div>
-                </q-step>
-
-                <q-step :name="2" title="Scan QR Code" icon="qr_code" :done="currentStep > 2">
-                    <div class="text-center q-mb-md">
-                        <p class="text-body1 q-mb-md">{{ $t('Scan this QR code with your authenticator app:') }}</p>
-
-                        <q-card flat bordered class="qr-card inline-block q-pa-lg">
-                            <q-img :src="my.my2FA.image" width="200px" class="q-mb-md" />
-
-                            <!-- Manual Entry Option -->
-                            <q-expansion-item icon="key" :label="$t('Enter manually instead')" class="text-left">
-                                <div class="q-pa-md bg-grey-1 rounded-borders">
-                                    <div class="text-caption text-grey-7 q-mb-xs">{{ $t('Secret Key:') }}</div>
-                                    <div class="row items-center q-gutter-sm">
-                                        <div class="col">
-                                            <q-input
-                                                :model-value="secretVisible ? (my.my2FA?.secret || '') : '●'.repeat(my.my2FA?.secret?.length || 16)"
-                                                readonly dense outlined class="secret-input" />
-                                        </div>
-                                        <q-btn flat round dense :icon="secretVisible ? 'visibility_off' : 'visibility'"
-                                            @click="secretVisible = !secretVisible"
-                                            :title="secretVisible ? $t('Hide') : $t('Show')" />
-                                        <q-btn flat round dense icon="content_copy" @click="onCopy"
-                                            :title="$t('Copy to clipboard')" />
-                                    </div>
+                <q-banner v-if="systemRequiresTwoFactor" rounded class="bg-blue-1 text-primary q-mt-lg">
+                    <template #avatar>
+                        <q-icon name="policy" />
+                    </template>
+                    {{ $t("Two-Factor Authentication is required by your administrator and cannot be disabled.") }}
+                </q-banner>
+
+                <q-btn
+                    v-else
+                    outline
+                    color="negative"
+                    icon="remove_moderator"
+                    :label="$t('Disable Two-Factor Authentication')"
+                    class="q-mt-lg"
+                    @click="openDisableDialog"
+                />
+            </q-card-section>
+        </q-card>
+
+        <q-card v-else-if="!setup" flat bordered>
+            <q-card-section class="text-center q-pa-xl">
+                <q-icon name="security" color="grey-6" size="64px" />
+                <div class="text-h6 q-mt-md">
+                    {{ $t("Two-Factor Authentication is not enabled") }}
+                </div>
+                <p class="text-grey-7 q-mt-sm">
+                    {{ $t("Add an extra layer of security to your account with an authenticator app.") }}
+                </p>
+                <q-btn
+                    color="primary"
+                    icon="add_moderator"
+                    :label="$t('Set up Two-Factor Authentication')"
+                    :loading="setupLoading"
+                    class="q-mt-md"
+                    @click="startSetup"
+                />
+            </q-card-section>
+        </q-card>
+
+        <q-stepper v-else v-model="currentStep" vertical color="primary" animated flat bordered>
+            <q-step
+                :name="1"
+                :title="$t('Download Authenticator App')"
+                icon="download"
+                :done="currentStep > 1"
+            >
+                <p class="text-body1 q-mb-md">
+                    {{ $t("Choose and download an authenticator app for your device:") }}
+                </p>
+
+                <div class="row q-col-gutter-md q-mb-lg">
+                    <div class="col-12 col-md-6">
+                        <q-card flat bordered class="app-card">
+                            <q-card-section>
+                                <div class="text-h6 q-mb-sm">📱 Android</div>
+                                <div class="q-gutter-sm">
+                                    <q-btn
+                                        outline
+                                        color="primary"
+                                        size="sm"
+                                        target="_blank"
+                                        href="https://play.google.com/store/apps/details?id=com.azure.authenticator"
+                                        label="Microsoft Authenticator"
+                                        class="full-width"
+                                    />
+                                    <q-btn
+                                        outline
+                                        color="primary"
+                                        size="sm"
+                                        target="_blank"
+                                        href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
+                                        label="Google Authenticator"
+                                        class="full-width"
+                                    />
                                 </div>
-                            </q-expansion-item>
+                            </q-card-section>
                         </q-card>
+                    </div>
 
-                        <div class="q-mt-md">
-                            <q-btn color="primary" @click="currentStep = 3" :label="$t('I have scanned the code')"
-                                icon-right="arrow_forward" />
-                        </div>
+                    <div class="col-12 col-md-6">
+                        <q-card flat bordered class="app-card">
+                            <q-card-section>
+                                <div class="text-h6 q-mb-sm">🍎 iOS</div>
+                                <div class="q-gutter-sm">
+                                    <q-btn
+                                        outline
+                                        color="primary"
+                                        size="sm"
+                                        target="_blank"
+                                        href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458"
+                                        label="Microsoft Authenticator"
+                                        class="full-width"
+                                    />
+                                    <q-btn
+                                        outline
+                                        color="primary"
+                                        size="sm"
+                                        target="_blank"
+                                        href="https://apps.apple.com/us/app/google-authenticator/id388497605"
+                                        label="Google Authenticator"
+                                        class="full-width"
+                                    />
+                                </div>
+                            </q-card-section>
+                        </q-card>
                     </div>
-                </q-step>
-
-                <q-step :name="3" title="Verify Setup" icon="verified_user">
-                    <div class="verify-section">
-                        <p class="text-body1 q-mb-md">
-                            {{ $t('Enter the 6-digit code from your authenticator app to complete setup:') }}
-                        </p>
-
-                        <div class="row justify-center q-mb-lg">
-                            <div class="col-12 col-sm-8 col-md-6">
-                                <q-input v-model="obj.code" :label="$t('Verification Code')"
-                                    hint="6-digit code from your authenticator app" type="tel" inputmode="numeric"
-                                    pattern="[0-9]*" outlined maxlength="6" class="text-center code-input" required>
-                                    <template v-slot:prepend>
-                                        <q-icon name="security" />
-                                    </template>
-                                </q-input>
+                </div>
+
+                <div class="row q-gutter-sm">
+                    <q-btn
+                        color="primary"
+                        :label="$t('I have installed the app')"
+                        icon-right="arrow_forward"
+                        @click="currentStep = 2"
+                    />
+                    <q-btn flat :label="$t('Cancel')" @click="resetSetup" />
+                </div>
+            </q-step>
+
+            <q-step :name="2" :title="$t('Scan QR Code')" icon="qr_code" :done="currentStep > 2">
+                <div class="text-center q-mb-md">
+                    <p class="text-body1 q-mb-md">
+                        {{ $t("Scan this QR code with your authenticator app:") }}
+                    </p>
+
+                    <q-card flat bordered class="qr-card inline-block q-pa-lg">
+                        <q-img :src="setup.image" width="200px" class="q-mb-md" />
+
+                        <q-expansion-item
+                            icon="key"
+                            :label="$t('Enter manually instead')"
+                            class="text-left"
+                        >
+                            <div class="q-pa-md bg-grey-1 rounded-borders">
+                                <div class="text-caption text-grey-7 q-mb-xs">
+                                    {{ $t("Secret Key:") }}
+                                </div>
+                                <div class="row items-center q-gutter-sm">
+                                    <div class="col">
+                                        <q-input
+                                            :model-value="secretVisible ? setup.secret : '●'.repeat(setup.secret.length)"
+                                            readonly
+                                            dense
+                                            outlined
+                                            class="secret-input"
+                                        />
+                                    </div>
+                                    <q-btn
+                                        flat
+                                        round
+                                        dense
+                                        :icon="secretVisible ? 'visibility_off' : 'visibility'"
+                                        :title="secretVisible ? $t('Hide') : $t('Show')"
+                                        @click="secretVisible = !secretVisible"
+                                    />
+                                    <q-btn
+                                        flat
+                                        round
+                                        dense
+                                        icon="content_copy"
+                                        :title="$t('Copy to clipboard')"
+                                        @click="onCopy"
+                                    />
+                                </div>
                             </div>
-                        </div>
+                        </q-expansion-item>
+                    </q-card>
 
-                        <div class="text-center">
-                            <q-btn @click="save" color="positive" size="lg" :label="$t('Complete Setup')"
-                                icon="check_circle" :loading="loading" />
+                    <div class="q-mt-md q-gutter-sm">
+                        <q-btn flat icon="arrow_back" :label="$t('Back')" @click="currentStep = 1" />
+                        <q-btn
+                            color="primary"
+                            :label="$t('I have scanned the code')"
+                            icon-right="arrow_forward"
+                            @click="currentStep = 3"
+                        />
+                        <q-btn flat :label="$t('Cancel')" @click="resetSetup" />
+                    </div>
+                </div>
+            </q-step>
+
+            <q-step :name="3" :title="$t('Verify Setup')" icon="verified_user">
+                <div class="verify-section">
+                    <p class="text-body1 q-mb-md">
+                        {{ $t("Enter the 6-digit code from your authenticator app to complete setup:") }}
+                    </p>
+
+                    <div class="row justify-center q-mb-lg">
+                        <div class="col-12 col-sm-8 col-md-6">
+                            <q-input
+                                v-model.trim="setupForm.code"
+                                :label="$t('Verification Code')"
+                                :hint="$t('6-digit code from your authenticator app')"
+                                type="tel"
+                                inputmode="numeric"
+                                pattern="[0-9]*"
+                                outlined
+                                maxlength="6"
+                                class="text-center code-input"
+                                autocomplete="one-time-code"
+                            >
+                                <template #prepend>
+                                    <q-icon name="security" />
+                                </template>
+                            </q-input>
                         </div>
                     </div>
-                </q-step>
-            </q-stepper>
-        </div>
+
+                    <div class="text-center q-gutter-sm">
+                        <q-btn flat icon="arrow_back" :label="$t('Back')" @click="currentStep = 2" />
+                        <q-btn
+                            color="positive"
+                            size="lg"
+                            :label="$t('Complete Setup')"
+                            icon="check_circle"
+                            :loading="saveLoading"
+                            :disable="!validSetupCode"
+                            @click="save"
+                        />
+                        <q-btn flat :label="$t('Cancel')" @click="resetSetup" />
+                    </div>
+                </div>
+            </q-step>
+        </q-stepper>
+
+        <q-dialog v-model="disableDialog" persistent>
+            <q-card style="width: 480px; max-width: 90vw">
+                <q-form @submit.prevent="disableTwoFactor">
+                    <q-card-section>
+                        <div class="text-h6">{{ $t("Disable Two-Factor Authentication") }}</div>
+                    </q-card-section>
+
+                    <q-card-section class="q-pt-none">
+                        <q-banner rounded class="bg-orange-1 text-dark q-mb-lg">
+                            <template #avatar>
+                                <q-icon name="warning" color="warning" />
+                            </template>
+                            {{ $t("This will reduce the security of your account.") }}
+                        </q-banner>
+
+                        <q-input
+                            v-model="disableForm.password"
+                            type="password"
+                            :label="$t('Current password')"
+                            autocomplete="current-password"
+                            outlined
+                            class="q-mb-md"
+                        />
+                        <q-input
+                            v-model.trim="disableForm.code"
+                            type="tel"
+                            inputmode="numeric"
+                            pattern="[0-9]*"
+                            maxlength="6"
+                            :label="$t('Current 2FA code')"
+                            autocomplete="one-time-code"
+                            outlined
+                        />
+                    </q-card-section>
+
+                    <q-card-actions align="right">
+                        <q-btn v-close-popup flat :label="$t('Cancel')" :disable="disableLoading" />
+                        <q-btn
+                            type="submit"
+                            color="negative"
+                            :label="$t('Disable')"
+                            :loading="disableLoading"
+                            :disable="!validDisableForm"
+                        />
+                    </q-card-actions>
+                </q-form>
+            </q-card>
+        </q-dialog>
     </div>
 </template>
+
+<style scoped>
+.two-factor-setup{margin:0 auto;max-width:800px}.setup-header,.verify-section{text-align:center}.app-card{height:100%;transition:all .2s ease}.app-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}.qr-card{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border:2px dashed #1976d2}.secret-input{font-family:Courier New,monospace;font-size:14px}.code-input :deep(input){font-family:Courier New,monospace;font-size:24px;font-weight:700;letter-spacing:8px;text-align:center}@media (max-width:600px){.qr-card img{width:180px!important}.code-input :deep(input){font-size:20px;letter-spacing:4px}}
+</style>

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

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from "vue";
 import { useRoute } from "vue-router";
-const tab = ref("general");
+const tab = ref("profile");
 const route = useRoute();
 </script>
 
@@ -11,9 +11,8 @@ const route = useRoute();
             <q-splitter unit="px" :model-value="120">
                 <template #before>
                     <q-tabs v-model="tab" vertical active-color="primary">
-                        <q-route-tab name="general" icon="sym_o_info" :label="$t('General')" to="/User/setting" exact />
-                        <q-route-tab name="information" icon="sym_o_info" :label="$t('Information')"
-                            to="/User/setting/information" exact />
+                        <q-route-tab name="profile" icon="sym_o_person" :label="$t('Profile')" to="/User/setting"
+                            exact />
                         <q-route-tab name="password" icon="sym_o_password" :label="$t('Password')"
                             to="/User/setting/password" exact />
                         <q-route-tab name="style" icon="sym_o_style" :label="$t('Style')" to="/User/setting/style"

package/dist/runtime/types/form.d.ts

@@ -0,0 +1,2 @@
+export type LFormLayout = "grid" | "stack";
+export type LFormGutter = "none" | "xs" | "sm" | "md" | "lg" | "xl";

package/dist/runtime/utils/filterMenuItems.d.ts

@@ -0,0 +1,10 @@
+export interface SearchableMenuItem {
+    label?: string;
+    to?: string;
+    path?: string;
+    children?: SearchableMenuItem[];
+    [key: string]: unknown;
+}
+type TranslateLabel = (label: string) => string;
+export declare function filterMenuItems<T extends SearchableMenuItem>(items: readonly T[] | null | undefined, query: string | null | undefined, translateLabel?: TranslateLabel): T[];
+export {};