@hostlink/nuxt-light 1.59.3 → 1.60.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.59.3",
+  "version": "1.60.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -264,6 +264,11 @@ const routes = [
         name: "User-setting-two-factor-auth",
         path: "two-factor-auth",
         file: "runtime/pages/User/setting/two-factor-auth.vue"
+      },
+      {
+        name: "User-setting-sessions",
+        path: "sessions",
+        file: "runtime/pages/User/setting/sessions.vue"
       }
     ]
   }

package/dist/runtime/components/l-app-main.vue

@@ -315,7 +315,7 @@ const onLogout = async () => {
                                 <q-item-section avatar>
                                     <q-icon name="sym_o_settings_account_box" />
                                 </q-item-section>
-                                <q-item-section>{{ $t("Setting") }}</q-item-section>
+                                <q-item-section>{{ $t("Settings") }}</q-item-section>
                             </q-item>
 
                             <q-item v-close-popup v-if="showViewAs" to="/System/view_as">

package/dist/runtime/components/l-menu.vue

@@ -58,7 +58,7 @@ const hasChildLink = () => {
                 <template v-if="menu.to && (menu.to.startsWith('http://') || menu.to.startsWith('https://'))">
                     <q-item v-ripple :href="menu.to" v-if="!value.type" target="_blank">
                         <q-item-section avatar>
-                            <q-icon :name="menu.icon" />
+                            <q-icon :name="menu.icon"  />
                         </q-item-section>
                         <q-item-section>{{ $t(menu.label) }}</q-item-section>
                     </q-item>
@@ -67,7 +67,7 @@ const hasChildLink = () => {
                 <template v-else>
                     <q-item v-ripple :to="menu.to" v-if="!value.type">
                         <q-item-section avatar>
-                            <q-icon :name="menu.icon" />
+                            <q-icon :name="menu.icon"  />
                         </q-item-section>
                         <q-item-section>{{ $t(menu.label) }}</q-item-section>
                     </q-item>

package/dist/runtime/components/l-tab.d.vue.ts

@@ -1,9 +1,10 @@
 import type { QTabPanelProps, QTabProps } from 'quasar';
+type __VLS_Props = QTabPanelProps & QTabProps;
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<QTabPanelProps | QTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QTabPanelProps | QTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/l-tab.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { getCurrentInstance } from "vue";
 const instance = getCurrentInstance();
-defineProps({
-  name: { type: null, required: false },
-  disable: { type: Boolean, required: false, skipCheck: true },
+const props = defineProps({
+  name: { type: [Number, String], required: false },
+  disable: { type: Boolean, required: false },
   icon: { type: null, required: false },
   label: { type: null, required: false },
   alert: { type: [Boolean, String], required: false, skipCheck: true },
@@ -24,7 +24,7 @@ const parent_type = instance?.parent?.type.name;
     </template>
 
     <template v-if="parent_type == 'QTabs'">
-        <q-tab v-bind="$props" :label="$t($props.label ?? '')">
+        <q-tab v-bind="$props" :label="$t(String($props.label))">
         </q-tab>
     </template>
 </template>

package/dist/runtime/components/l-tab.vue.d.ts

@@ -1,9 +1,10 @@
 import type { QTabPanelProps, QTabProps } from 'quasar';
+type __VLS_Props = QTabPanelProps & QTabProps;
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<QTabPanelProps | QTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QTabPanelProps | QTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/l-table.d.vue.ts

@@ -15,8 +15,7 @@ export type LTableColumn = QTableColumn & {
      * @deprecated use gql instead
      */
     gqlField?: string | Array<string> | Object;
-    backgroundColor?: string | Function;
-    searchMethod?: string;
+    searchMethod?: "equals" | "contains";
     autoWidth?: boolean;
 };
 export type LTableProps = QTableProps & {

package/dist/runtime/components/l-table.vue

@@ -429,17 +429,6 @@ const hasRowExpand = computed(() => {
 const hasActions = computed(() => {
   return props.actions.length > 0 || ss.indexOf("actions") >= 0;
 });
-const getCellStyle = (col, row) => {
-  const style = col.cellStyle ?? {};
-  if (col.backgroundColor) {
-    if (typeof col.backgroundColor == "function") {
-      style.backgroundColor = col.backgroundColor(row);
-    } else {
-      style.backgroundColor = col.backgroundColor;
-    }
-  }
-  return style;
-};
 const localSelected = computed({
   get() {
     return props.selected;
@@ -578,8 +567,8 @@ const hasFilters = computed(() => {
                         <slot :name="'body-cell-' + col.name" v-bind="props"></slot>
                     </template>
                     <template v-else>
-                        <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"
-                            :style="getCellStyle(col, props.row)"><template v-if="col.to" class="bg-primary">
+                        <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"><template
+                                v-if="col.to" class="bg-primary">
                                 <l-link :to="col.to(props.row)" v-if="col.to(props.row)">{{ col.value }}</l-link>
                             </template>
                             <template v-else-if="col.component">
@@ -655,7 +644,8 @@ const hasFilters = computed(() => {
                 <q-td v-if="selection != 'none'" auto-width />
                 <q-td v-if="hasRowExpand" auto-width />
                 <q-td v-if="hasActions" auto-width />
-                <q-td v-for="col in props.cols">
+                <q-td v-for="col in props.cols" :key="col.name" :style="col.style">
+
                     <template v-if="col.searchable">
 
                         <template v-if="col.searchType == 'number'">

package/dist/runtime/components/l-table.vue.d.ts

@@ -15,8 +15,7 @@ export type LTableColumn = QTableColumn & {
      * @deprecated use gql instead
      */
     gqlField?: string | Array<string> | Object;
-    backgroundColor?: string | Function;
-    searchMethod?: string;
+    searchMethod?: "equals" | "contains";
     autoWidth?: boolean;
 };
 export type LTableProps = QTableProps & {

package/dist/runtime/models/UserLog.js

@@ -6,7 +6,8 @@ export default defineLightModel({
       label: "ID",
       sortable: true,
       searchable: true,
-      autoWidth: true
+      autoWidth: true,
+      searchMethod: "equals"
     },
     username: {
       label: "User",
@@ -22,7 +23,8 @@ export default defineLightModel({
     logout_dt: {
       label: "Logout time",
       sortable: true,
-      searchable: true
+      searchable: true,
+      searchType: "date"
     },
     result: {
       label: "Result",
@@ -38,8 +40,11 @@ export default defineLightModel({
           label: "FAIL",
           value: "FAIL"
         }
-      ],
-      autoWidth: true
+      ]
+      /*       style(row) {
+                      return row.result === "SUCCESS" ? "background-color: var(--q-positive);" : "background-color: var(--q-negative);";
+      
+                  } */
     },
     user_agent: {
       label: "User agent",
@@ -52,6 +57,11 @@ export default defineLightModel({
       sortable: true,
       searchable: true,
       searchType: "date"
+    },
+    ip: {
+      label: "IP Address",
+      sortable: true,
+      searchable: true
     }
   }
 });

package/dist/runtime/pages/System/database/table.vue

@@ -3,7 +3,7 @@ import { q, m, useLight, useAsyncData } from "#imports";
 import { resolveComponent, ref, reactive, computed } from "vue";
 const light = useLight();
 const { data, refresh } = await useAsyncData("database", async () => {
-  const { system } = await q({
+  return await q({
     system: {
       database: {
         table: true,
@@ -12,8 +12,7 @@ const { data, refresh } = await useAsyncData("database", async () => {
         tableStatus: true
       }
     }
-  });
-  return system.database;
+  }).then((res) => res.system.database);
 });
 const SYSTEM_TABLES = ["Config", "EventLog", "MailLog", "Permission", "Role", "SystemValue", "Translate", "User", "UserLog", "UserRole", "MyFavorite", "CustomField"];
 const custom_tables = computed(() => {

package/dist/runtime/pages/User/setting/sessions.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,136 @@
+<script setup>
+import { q, m, useQuasar, useAsyncData } from "#imports";
+const $q = useQuasar();
+const { data: my, refresh } = await useAsyncData("user-sessions", async () => {
+  return await q({
+    my: {
+      sessions: true
+    }
+  }).then((res) => res.my);
+});
+const getDeviceIcon = (userAgent) => {
+  if (userAgent.includes("Mobile")) return "smartphone";
+  if (userAgent.includes("Tablet")) return "tablet";
+  return "desktop_mac";
+};
+const getLocationDisplay = (session) => {
+  if (session.location?.country) {
+    return `${session.location.country} ${session.ip}`;
+  }
+  return session.ip;
+};
+const getLocationCode = (session) => {
+  return session.location?.countryCode || "Unknown";
+};
+const revokeSession = async (jti) => {
+  $q.dialog({
+    title: "Confirm",
+    message: "Are you sure you want to revoke this session?",
+    cancel: true,
+    persistent: true
+  }).onOk(async () => {
+    try {
+      await m("revokeSession", {
+        jti
+      });
+      $q.notify({
+        type: "positive",
+        message: "Session revoked successfully."
+      });
+      await refresh();
+    } catch (error) {
+      $q.notify({
+        type: "negative",
+        message: "Failed to revoke session."
+      });
+    }
+  });
+};
+</script>
+
+<template>
+    <div>
+
+        <q-list bordered separator>
+            <q-item-label header>This is a list of devices that have logged into your account. Revoke any sessions that
+                you do not recognize.</q-item-label>
+
+            <q-item v-for="session in my.sessions" :key="session.jti">
+                <q-item-section avatar>
+                    <q-icon :name="getDeviceIcon(session.user_agent)" color="primary" size="lg" />
+                </q-item-section>
+
+                <q-item-section>
+                    <q-item-label class="text-weight-bold">
+                        {{ getLocationDisplay(session) }}
+                    </q-item-label>
+                    <q-item-label caption lines="2">
+                        <div class="flex items-center q-my-xs">
+                            <q-badge color="positive" label="active" />
+                            <q-badge v-if="session.is_current" color="info" label="This device" class="q-ml-sm" />
+                        </div>
+                        <div class="q-mt-sm">
+                            Last accessed on {{ session.last_access_time }}
+                        </div>
+                        <div v-if="session.location?.city" class="text-caption">
+                            Seen in {{ getLocationCode(session) }}
+                        </div>
+                    </q-item-label>
+                </q-item-section>
+
+                <q-item-section side top>
+                    <q-btn flat dense round icon="info" color="primary">
+                        <q-popup-proxy anchor="top right" self="top left" :offset="[0, 10]">
+                            <q-card style="min-width: 300px">
+                                <q-card-section>
+                                    <div class="text-h6">Session Details</div>
+                                </q-card-section>
+
+                                <q-separator />
+
+                                <q-card-section>
+                                    <div class="q-mb-md">
+                                        <div class="text-caption text-grey">Session ID</div>
+                                        <div class="text-body2">{{ session.jti }}</div>
+                                    </div>
+
+                                    <div class="q-mb-md">
+                                        <div class="text-caption text-grey">IP Address</div>
+                                        <div class="text-body2">{{ session.ip }}</div>
+                                    </div>
+
+                                    <div class="q-mb-md">
+                                        <div class="text-caption text-grey">Login Time</div>
+                                        <div class="text-body2">{{ session.login_dt }}</div>
+                                    </div>
+
+                                    <div v-if="session.location" class="q-mb-md">
+                                        <div class="text-caption text-grey">Location</div>
+                                        <div class="text-body2">
+                                            {{ session.location.city }}, {{ session.location.regionName }}, {{
+                                                session.location.country }}
+                                        </div>
+                                    </div>
+
+                                    <div class="q-mb-md">
+                                        <div class="text-caption text-grey">User Agent</div>
+                                        <div class="text-body2 text-break" style="font-size: 12px">{{ session.user_agent
+                                            }}</div>
+                                    </div>
+                                </q-card-section>
+
+                                <q-separator />
+
+                                <q-card-actions align="right">
+                                    <q-btn flat label="Close" v-close-popup />
+                                    <q-btn flat label="Revoke" color="negative" :disable="session.is_current"
+                                        @click="revokeSession(session.jti)" />
+                                </q-card-actions>
+                            </q-card>
+                        </q-popup-proxy>
+                    </q-btn>
+                </q-item-section>
+            </q-item>
+        </q-list>
+    </div>
+</template>

package/dist/runtime/pages/User/setting/sessions.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -28,6 +28,8 @@ const route = useRoute();
                             to="/User/setting/favorite" exact />
 
                         <q-route-tab name="menu" icon="sym_o_menu" :label="$t('Menu')" to="/User/setting/menu" exact />
+                        <q-route-tab name="sessions" icon="sym_o_devices" :label="$t('Sessions')"
+                            to="/User/setting/sessions" exact />
                     </q-tabs>
                 </template>
 

package/dist/runtime/pages/UserLog/index.vue

@@ -7,7 +7,8 @@ const columns = model("UserLog").columns({
   last_access_time: true,
   logout_dt: true,
   result: true,
-  user_agent: true
+  user_agent: true,
+  ip: true
 });
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.59.3",
+  "version": "1.60.1",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",