@hostlink/nuxt-light 1.55.0 → 1.56.0

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

@@ -141,167 +141,167 @@ const text1 = "Your social accounts are securely linked using industry-standard
 </script>
 
 <template>
-    <div class="q-pa-md">
-        <!-- 頁面標題 -->
-        <div class="q-mb-lg">
-            <h1 class="text-h4 q-mb-sm">{{ $t('Social Account Linking') }}</h1>
-            <p class="text-grey-6">{{ $t('Link your social accounts to enable quick sign-in and enhanced features.') }}
-            </p>
-        </div>
-
-        <!-- 社交平台連結區域 -->
-        <div class="row q-col-gutter-md">
-            <!-- Google -->
-            <div class="col-12 col-md-4">
-                <q-card class="full-height" :class="my.google ? 'bg-green-1 border-green' : 'bg-grey-1'">
-                    <q-card-section class="text-center q-pb-none">
-                        <q-avatar size="64px" class="q-mb-md" :color="my.google ? 'green' : 'grey-5'"
-                            text-color="white">
-                            <q-icon :name="fabGoogle" size="32px" />
-                        </q-avatar>
-                        <div class="text-h6 q-mb-xs">Google</div>
-                        <q-badge v-if="my.google" color="green" class="q-mb-md">
-                            {{ $t('Connected') }}
-                        </q-badge>
-                        <q-badge v-else color="grey-5" class="q-mb-md">
-                            {{ $t('Not Connected') }}
-                        </q-badge>
-                    </q-card-section>
-
-                    <q-card-section v-if="app.googleClientId">
-                        <template v-if="my.google">
-                            <div class="text-center q-mb-md">
-                                <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')" />
-                        </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>
-                        </template>
-                    </q-card-section>
-                    <q-card-section v-else>
-                        <q-banner class="bg-orange-2 text-orange-9">
-                            <template v-slot:avatar>
-                                <q-icon name="sym_o_warning" />
-                            </template>
-                            {{ $t('Service not configured. Please contact administrator.') }}
-                        </q-banner>
-                    </q-card-section>
-                </q-card>
-            </div>
-
-            <!-- Microsoft -->
-            <div class="col-12 col-md-4">
-                <q-card class="full-height" :class="my.microsoft ? 'bg-blue-1 border-blue' : 'bg-grey-1'">
-                    <q-card-section class="text-center q-pb-none">
-                        <q-avatar size="64px" class="q-mb-md" :color="my.microsoft ? 'blue' : 'grey-5'"
-                            text-color="white">
-                            <q-icon :name="fabMicrosoft" size="32px" />
-                        </q-avatar>
-                        <div class="text-h6 q-mb-xs">Microsoft</div>
-                        <q-badge v-if="my.microsoft" color="blue" class="q-mb-md">
-                            {{ $t('Connected') }}
-                        </q-badge>
-                        <q-badge v-else color="grey-5" class="q-mb-md">
-                            {{ $t('Not Connected') }}
-                        </q-badge>
-                    </q-card-section>
-
-                    <q-card-section v-if="app.microsoftClientId">
-                        <template v-if="my.microsoft">
-                            <div class="text-center q-mb-md">
-                                <div class="text-caption text-grey-6">{{ $t('Connected Account') }}</div>
-                                <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')" />
-                        </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">
-                                <l-microsoft-button :client-id="app.microsoftClientId"
-                                    :tenant-id="app.microsoftTenantId" @login="onLinkMicrosoft" />
-                            </div>
-                        </template>
-                    </q-card-section>
-                    <q-card-section v-else>
-                        <q-banner class="bg-orange-2 text-orange-9">
-                            <template v-slot:avatar>
-                                <q-icon name="sym_o_warning" />
-                            </template>
-                            {{ $t('Service not configured. Please contact administrator.') }}
-                        </q-banner>
-                    </q-card-section>
-                </q-card>
-            </div>
-
-            <!-- Facebook -->
-            <div class="col-12 col-md-4">
-                <q-card class="full-height" :class="my.facebook ? 'bg-indigo-1 border-indigo' : 'bg-grey-1'">
-                    <q-card-section class="text-center q-pb-none">
-                        <q-avatar size="64px" class="q-mb-md" :color="my.facebook ? 'indigo' : 'grey-5'"
-                            text-color="white">
-                            <q-icon :name="fabFacebook" size="32px" />
-                        </q-avatar>
-                        <div class="text-h6 q-mb-xs">Facebook</div>
-                        <q-badge v-if="my.facebook" color="indigo" class="q-mb-md">
-                            {{ $t('Connected') }}
-                        </q-badge>
-                        <q-badge v-else color="grey-5" class="q-mb-md">
-                            {{ $t('Not Connected') }}
-                        </q-badge>
-                    </q-card-section>
-
-                    <q-card-section v-if="app.facebookAppId">
-                        <template v-if="my.facebook">
-                            <div class="text-center q-mb-md">
-                                <div class="text-caption text-grey-6">{{ $t('Connected Account') }}</div>
-                                <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')" />
-                        </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" />
-                            </div>
-                        </template>
-                    </q-card-section>
-                    <q-card-section v-else>
-                        <q-banner class="bg-orange-2 text-orange-9">
-                            <template v-slot:avatar>
-                                <q-icon name="sym_o_warning" />
-                            </template>
-                            {{ $t('Service not configured. Please contact administrator.') }}
-                        </q-banner>
-                    </q-card-section>
-                </q-card>
-            </div>
-        </div>
-
-        <!-- 安全提示 -->
-        <q-card class="q-mt-lg bg-blue-1">
-            <q-card-section>
-                <div class="row items-center">
-                    <q-icon name="sym_o_security" color="blue" size="24px" class="q-mr-sm" />
-                    <div class="text-h6 text-blue-8">{{ $t('Security Notice') }}</div>
-                </div>
-                <p class="text-blue-7 q-mb-none q-mt-sm">
-                    {{ $t(text1) }}
-                </p>
-            </q-card-section>
-        </q-card>
-    </div>
+    <div class="q-pa-md">
+        <!-- 頁面標題 -->
+        <div class="q-mb-lg">
+            <h1 class="text-h4 q-mb-sm">{{ $t('Social Account Linking') }}</h1>
+            <p class="text-grey-6">{{ $t('Link your social accounts to enable quick sign-in and enhanced features.') }}
+            </p>
+        </div>
+
+        <!-- 社交平台連結區域 -->
+        <div class="row q-col-gutter-md">
+            <!-- Google -->
+            <div class="col-12 col-md-4">
+                <q-card class="full-height" :class="my.google ? 'bg-green-1 border-green' : 'bg-grey-1'">
+                    <q-card-section class="text-center q-pb-none">
+                        <q-avatar size="64px" class="q-mb-md" :color="my.google ? 'green' : 'grey-5'"
+                            text-color="white">
+                            <q-icon :name="fabGoogle" size="32px" />
+                        </q-avatar>
+                        <div class="text-h6 q-mb-xs">Google</div>
+                        <q-badge v-if="my.google" color="green" class="q-mb-md">
+                            {{ $t('Connected') }}
+                        </q-badge>
+                        <q-badge v-else color="grey-5" class="q-mb-md">
+                            {{ $t('Not Connected') }}
+                        </q-badge>
+                    </q-card-section>
+
+                    <q-card-section v-if="app.googleClientId">
+                        <template v-if="my.google">
+                            <div class="text-center q-mb-md">
+                                <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')" />
+                        </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>
+                        </template>
+                    </q-card-section>
+                    <q-card-section v-else>
+                        <q-banner class="bg-orange-2 text-orange-9">
+                            <template v-slot:avatar>
+                                <q-icon name="sym_o_warning" />
+                            </template>
+                            {{ $t('Service not configured. Please contact administrator.') }}
+                        </q-banner>
+                    </q-card-section>
+                </q-card>
+            </div>
+
+            <!-- Microsoft -->
+            <div class="col-12 col-md-4">
+                <q-card class="full-height" :class="my.microsoft ? 'bg-blue-1 border-blue' : 'bg-grey-1'">
+                    <q-card-section class="text-center q-pb-none">
+                        <q-avatar size="64px" class="q-mb-md" :color="my.microsoft ? 'blue' : 'grey-5'"
+                            text-color="white">
+                            <q-icon :name="fabMicrosoft" size="32px" />
+                        </q-avatar>
+                        <div class="text-h6 q-mb-xs">Microsoft</div>
+                        <q-badge v-if="my.microsoft" color="blue" class="q-mb-md">
+                            {{ $t('Connected') }}
+                        </q-badge>
+                        <q-badge v-else color="grey-5" class="q-mb-md">
+                            {{ $t('Not Connected') }}
+                        </q-badge>
+                    </q-card-section>
+
+                    <q-card-section v-if="app.microsoftClientId">
+                        <template v-if="my.microsoft">
+                            <div class="text-center q-mb-md">
+                                <div class="text-caption text-grey-6">{{ $t('Connected Account') }}</div>
+                                <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')" />
+                        </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">
+                                <l-microsoft-button :client-id="app.microsoftClientId"
+                                    :tenant-id="app.microsoftTenantId" @login="onLinkMicrosoft" />
+                            </div>
+                        </template>
+                    </q-card-section>
+                    <q-card-section v-else>
+                        <q-banner class="bg-orange-2 text-orange-9">
+                            <template v-slot:avatar>
+                                <q-icon name="sym_o_warning" />
+                            </template>
+                            {{ $t('Service not configured. Please contact administrator.') }}
+                        </q-banner>
+                    </q-card-section>
+                </q-card>
+            </div>
+
+            <!-- Facebook -->
+            <div class="col-12 col-md-4">
+                <q-card class="full-height" :class="my.facebook ? 'bg-indigo-1 border-indigo' : 'bg-grey-1'">
+                    <q-card-section class="text-center q-pb-none">
+                        <q-avatar size="64px" class="q-mb-md" :color="my.facebook ? 'indigo' : 'grey-5'"
+                            text-color="white">
+                            <q-icon :name="fabFacebook" size="32px" />
+                        </q-avatar>
+                        <div class="text-h6 q-mb-xs">Facebook</div>
+                        <q-badge v-if="my.facebook" color="indigo" class="q-mb-md">
+                            {{ $t('Connected') }}
+                        </q-badge>
+                        <q-badge v-else color="grey-5" class="q-mb-md">
+                            {{ $t('Not Connected') }}
+                        </q-badge>
+                    </q-card-section>
+
+                    <q-card-section v-if="app.facebookAppId">
+                        <template v-if="my.facebook">
+                            <div class="text-center q-mb-md">
+                                <div class="text-caption text-grey-6">{{ $t('Connected Account') }}</div>
+                                <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')" />
+                        </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" />
+                            </div>
+                        </template>
+                    </q-card-section>
+                    <q-card-section v-else>
+                        <q-banner class="bg-orange-2 text-orange-9">
+                            <template v-slot:avatar>
+                                <q-icon name="sym_o_warning" />
+                            </template>
+                            {{ $t('Service not configured. Please contact administrator.') }}
+                        </q-banner>
+                    </q-card-section>
+                </q-card>
+            </div>
+        </div>
+
+        <!-- 安全提示 -->
+        <q-card class="q-mt-lg bg-blue-1">
+            <q-card-section>
+                <div class="row items-center">
+                    <q-icon name="sym_o_security" color="blue" size="24px" class="q-mr-sm" />
+                    <div class="text-h6 text-blue-8">{{ $t('Security Notice') }}</div>
+                </div>
+                <p class="text-blue-7 q-mb-none q-mt-sm">
+                    {{ $t(text1) }}
+                </p>
+            </q-card-section>
+        </q-card>
+    </div>
 </template>
 
 <style scoped>

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

@@ -37,23 +37,23 @@ const policies = computed(() => {
 </script>
 
 <template>
-    <FormKit type="l-form" :bordered="false" @submit="onSubmit">
-        <FormKit type="l-input" label="Old password" name="old_password" inputType="password" validation="required"
-            autocomplete="current-password" />
-        <FormKit type="l-input" label="New password" name="new_password" inputType="password"
-            :validation="system.passwordPolicy" autocomplete="new-password" />
-        <FormKit type="l-input" label="Confirm password" name="new_password_confirm" inputType="password"
-            validation="required|confirm" />
-    </FormKit>
-
-    <q-separator spaced />
-
-    <q-card flat :bordered="false">
-        <q-card-section>
-            <div>{{ $t('Password policy') }}</div>
-            <ul>
-                <li v-for="policy in policies" :key="policy">{{ policy }}</li>
-            </ul>
-        </q-card-section>
-    </q-card>
+    <FormKit type="l-form" :bordered="false" @submit="onSubmit">
+        <FormKit type="l-input" label="Old password" name="old_password" inputType="password" validation="required"
+            autocomplete="current-password" />
+        <FormKit type="l-input" label="New password" name="new_password" inputType="password"
+            :validation="system.passwordPolicy" autocomplete="new-password" />
+        <FormKit type="l-input" label="Confirm password" name="new_password_confirm" inputType="password"
+            validation="required|confirm" />
+    </FormKit>
+
+    <q-separator spaced />
+
+    <q-card flat :bordered="false">
+        <q-card-section>
+            <div>{{ $t('Password policy') }}</div>
+            <ul>
+                <li v-for="policy in policies" :key="policy">{{ policy }}</li>
+            </ul>
+        </q-card-section>
+    </q-card>
 </template>

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

@@ -80,110 +80,108 @@ const inputDesign = computed({
 </script>
 
 <template>
-    <div class="q-pa-md">
-        <l-row>
-            <l-col md="6">
-                <l-card title="Table" minimizable class="col-12">
-                    <q-card-section>
-                        <q-toggle v-model="styles.table.dense" label="Dense" />
-                        <q-toggle v-model="styles.table.flat" label="Flat" />
-                        <q-toggle v-model="styles.table.bordered" label="Bordered" />
-                        <q-toggle v-model="styles.table.square" label="Square" />
-
-                        <q-field :label="`Separator`" stack-label>
-                            <q-option-group v-model="styles.table.separator" inline :options="[
-                                { label: 'Horizontal', value: 'horizontal' },
-                                { label: 'Vertical', value: 'vertical' },
-                                { label: 'Cell', value: 'cell' },
-                                { label: 'None', value: 'none' },
-                            ]" />
-                        </q-field>
-
-                    </q-card-section>
-                </l-card>
-
-                <l-card title="Card" minimizable>
-                    <q-card-section>
-                        <q-toggle v-model="styles.card.flat" label="Flat" />
-                        <q-toggle v-model="styles.card.bordered" label="Bordered" />
-                        <q-toggle v-model="styles.card.square" label="Square" />
-                    </q-card-section>
-                </l-card>
-
-                <l-card title="Button" minimizable>
-                    <q-card-section>
-                        <q-toggle v-model="styles.button.outline" label="Outline" />
-                        <q-toggle v-model="styles.button.flat" label="Flat" />
-                        <q-toggle v-model="styles.button.unelevated" label="Unelevated" />
-                        <q-toggle v-model="styles.button.rounded" label="Rounded" />
-                        <q-toggle v-model="styles.button.push" label="Push" />
-                        <q-toggle v-model="styles.button.square" label="Square" />
-                        <q-toggle v-model="styles.button.glossy" label="Glossy" />
-                        <q-toggle v-model="styles.button.dense" label="Dense" />
-
-                    </q-card-section>
-                </l-card>
-
-                <l-card title="Input" minimizable>
-                    <q-card-section>
-
-                        <q-option-group v-model="inputDesign" inline :options="[
-                            { label: 'None', value: 'none' },
-                            { label: 'Filled', value: 'filled' },
-                            { label: 'Outlined', value: 'outlined' },
-                            { label: 'Standout', value: 'standout' },
-                            { label: 'Borderless', value: 'borderless' },
-                        ]" />
-
-
-
-                        <q-toggle v-model="styles.input.rounded" label="Rounded" />
-                        <q-toggle v-model="styles.input.dense" label="Dense" />
-                        <q-toggle v-model="styles.input.square" label="Square" />
-                        <q-toggle v-model="styles.input.stackLabel" label="Stack label" />
-                    </q-card-section>
-                </l-card>
-
-                <l-btn @click="setDefault()" icon="sym_o_refresh" label="Default"></l-btn>
-                <l-btn icon="sym_o_save" label="Save" @click="onSave" />
-            </l-col>
-
-            <l-col md="6">
-                <q-card v-bind="styles.card">
-                    <q-toolbar>
-                        <q-toolbar-title>UI preview</q-toolbar-title>
-                    </q-toolbar>
-                    <q-card-section class="q-gutter-md">
-
-                        <q-btn color="primary" icon="sym_o_person" label="Button" v-bind="styles.button"></q-btn>
-
-                        <q-input label="Input" v-bind="styles.input" />
-
-                        <q-select label="Select" v-bind="styles.input" :options="[
-                            { label: 'A', value: 'a' },
-                            { label: 'B', value: 'b' },
-                            { label: 'C', value: 'c' }
-                        ]" v-model="preview.select" />
-
-                        <q-table :columns="columns" :rows="[
-                            { name: 'A', phone: '123' },
-                            { name: 'B', phone: '456' },
-                            { name: 'C', phone: '789' },
-                        ]" v-bind="styles.table" selection="multiple" title="Table">
-
-                            <template #body-cell-action="props">
-                                <q-td auto-width>
-                                    <q-btn flat round icon="sym_o_search" size="sm"></q-btn>
-                                </q-td>
-                            </template>
-                        </q-table>
-
-                    </q-card-section>
-
-                </q-card>
-
-            </l-col>
-
-        </l-row>
-    </div>
+    <div class="q-pa-md">
+        <l-row>
+            <l-col md="6">
+                <l-card title="Table" minimizable class="col-12">
+                    <q-card-section>
+                        <q-toggle v-model="styles.table.dense" label="Dense" />
+                        <q-toggle v-model="styles.table.flat" label="Flat" />
+                        <q-toggle v-model="styles.table.bordered" label="Bordered" />
+                        <q-toggle v-model="styles.table.square" label="Square" />
+
+                        <q-field :label="`Separator`" stack-label>
+                            <q-option-group v-model="styles.table.separator" inline :options="[
+                                { label: 'Horizontal', value: 'horizontal' },
+                                { label: 'Vertical', value: 'vertical' },
+                                { label: 'Cell', value: 'cell' },
+                                { label: 'None', value: 'none' },
+                            ]" />
+                        </q-field>
+
+                    </q-card-section>
+                </l-card>
+
+                <l-card title="Card" minimizable>
+                    <q-card-section>
+                        <q-toggle v-model="styles.card.flat" label="Flat" />
+                        <q-toggle v-model="styles.card.bordered" label="Bordered" />
+                        <q-toggle v-model="styles.card.square" label="Square" />
+                    </q-card-section>
+                </l-card>
+
+                <l-card title="Button" minimizable>
+                    <q-card-section>
+                        <q-toggle v-model="styles.button.outline" label="Outline" />
+                        <q-toggle v-model="styles.button.flat" label="Flat" />
+                        <q-toggle v-model="styles.button.unelevated" label="Unelevated" />
+                        <q-toggle v-model="styles.button.rounded" label="Rounded" />
+                        <q-toggle v-model="styles.button.push" label="Push" />
+                        <q-toggle v-model="styles.button.square" label="Square" />
+                        <q-toggle v-model="styles.button.glossy" label="Glossy" />
+                        <q-toggle v-model="styles.button.dense" label="Dense" />
+
+                    </q-card-section>
+                </l-card>
+
+                <l-card title="Input" minimizable>
+                    <q-card-section>
+
+                        <q-option-group v-model="inputDesign" inline :options="[
+                            { label: 'None', value: 'none' },
+                            { label: 'Filled', value: 'filled' },
+                            { label: 'Outlined', value: 'outlined' },
+                            { label: 'Standout', value: 'standout' },
+                            { label: 'Borderless', value: 'borderless' },
+                        ]" />
+
+                        <q-toggle v-model="styles.input.rounded" label="Rounded" />
+                        <q-toggle v-model="styles.input.dense" label="Dense" />
+                        <q-toggle v-model="styles.input.square" label="Square" />
+                        <q-toggle v-model="styles.input.stackLabel" label="Stack label" />
+                    </q-card-section>
+                </l-card>
+
+                <l-btn @click="setDefault()" icon="sym_o_refresh" label="Default"></l-btn>
+                <l-btn icon="sym_o_save" label="Save" @click="onSave" />
+            </l-col>
+
+            <l-col md="6">
+                <q-card v-bind="styles.card">
+                    <q-toolbar>
+                        <q-toolbar-title>UI preview</q-toolbar-title>
+                    </q-toolbar>
+                    <q-card-section class="q-gutter-md">
+
+                        <q-btn color="primary" icon="sym_o_person" label="Button" v-bind="styles.button"></q-btn>
+
+                        <q-input label="Input" v-bind="styles.input" />
+
+                        <q-select label="Select" v-bind="styles.input" :options="[
+                            { label: 'A', value: 'a' },
+                            { label: 'B', value: 'b' },
+                            { label: 'C', value: 'c' }
+                        ]" v-model="preview.select" />
+
+                        <q-table :columns="columns" :rows="[
+                            { name: 'A', phone: '123' },
+                            { name: 'B', phone: '456' },
+                            { name: 'C', phone: '789' },
+                        ]" v-bind="styles.table" selection="multiple" title="Table">
+
+                            <template #body-cell-action="props">
+                                <q-td auto-width>
+                                    <q-btn flat round icon="sym_o_search" size="sm"></q-btn>
+                                </q-td>
+                            </template>
+                        </q-table>
+
+                    </q-card-section>
+
+                </q-card>
+
+            </l-col>
+
+        </l-row>
+    </div>
 </template>