✨ Security page

src/components/chat/ChatEditor.vue

@@ -171,6 +171,8 @@ watch(
   (val) => {
     if (val) {
       data.value.reply_id = val.id
+    } else {
+      data.value.reply_id = null
     }
   }
 )
@@ -180,6 +182,8 @@ watch(
   (val) => {
     if (val) {
       data.value = val
+    } else {
+      resetEditor()
     }
   }
 )

src/layouts/settings.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container class="wrapper pt-6 px-6">
-    <div class="content">
+    <div class="content min-w-0">
       <router-view />
     </div>
 
@@ -10,6 +10,7 @@
           <v-list-item title="Basis" prepend-icon="mdi-network" exact :to="{ name: 'settings' }" />
           <v-list-item title="Personalize" prepend-icon="mdi-card-bulleted-outline" :to="{ name: 'settings.account.personalize' }" />
           <v-list-item title="Personal Page" prepend-icon="mdi-sitemap" :to="{ name: 'settings.account.personal-page' }" />
+          <v-list-item title="Security" prepend-icon="mdi-security" :to="{ name: 'settings.account.security' }" />
 
           <v-divider class="border-[#000] my-2" />
 

src/router/settings.ts

@@ -14,5 +14,10 @@ export const settingRouter = [
     path: "account/personal-page",
     name: "settings.account.personal-page",
     component: () => import("@/views/users/me/personal-page.vue")
+  },
+  {
+    path: "account/security",
+    name: "settings.account.security",
+    component: () => import("@/views/users/me/security.vue")
   }
 ]

src/views/users/me/security.vue

@@ -0,0 +1,270 @@
+<template>
+  <div>
+    <v-expansion-panels>
+      <v-expansion-panel eager title="Challenges">
+        <template #text>
+          <v-card :loading="reverting.challenges" variant="outlined">
+            <v-data-table-server
+              :headers="dataDefinitions.challenges"
+              :items="challenges"
+              :items-length="pagination.challenges.total"
+              :loading="reverting.challenges"
+              v-model:items-per-page="pagination.challenges.pageSize"
+              @update:options="readChallenges"
+              item-value="id"
+            >
+              <template v-slot:item="{ item }: { item: any }">
+                <tr>
+                  <td>{{ item.id }}</td>
+                  <td>{{ item.ip_address }}</td>
+                  <td>
+                    <v-tooltip :text="item.user_agent" location="top">
+                      <template #activator="{ props }">
+                        <div v-bind="props" class="text-ellipsis whitespace-nowrap overflow-hidden max-w-[280px]">
+                          {{ item.user_agent }}
+                        </div>
+                      </template>
+                    </v-tooltip>
+                  </td>
+                  <td>{{ new Date(item.created_at).toLocaleString() }}</td>
+                </tr>
+              </template>
+            </v-data-table-server>
+          </v-card>
+        </template>
+      </v-expansion-panel>
+
+      <v-expansion-panel eager title="Sessions">
+        <template #text>
+          <v-card :loading="reverting.sessions" variant="outlined">
+            <v-data-table-server
+              :headers="dataDefinitions.sessions"
+              :items="sessions"
+              :items-length="pagination.sessions.total"
+              :loading="reverting.sessions"
+              v-model:items-per-page="pagination.sessions.pageSize"
+              @update:options="readSessions"
+              item-value="id"
+            >
+              <template v-slot:item="{ item }: { item: any }">
+                <tr>
+                  <td>{{ item.id }}</td>
+                  <td>
+                    <div class="flex gap-1">
+                      <v-chip v-for="value in item.audiences" size="x-small" color="warning" class="capitalize">
+                        {{ value }}
+                      </v-chip>
+                    </div>
+                  </td>
+                  <td>
+                    <div class="flex gap-1">
+                      <v-chip v-for="value in item.claims" size="x-small" color="info" class="font-mono">
+                        {{ value }}
+                      </v-chip>
+                    </div>
+                  </td>
+                  <td>{{ new Date(item.created_at).toLocaleString() }}</td>
+                  <td>
+                    <v-tooltip text="Sign out">
+                      <template #activator="{ props }">
+                        <v-btn
+                          v-bind="props"
+                          variant="text"
+                          size="x-small"
+                          color="error"
+                          icon="mdi-logout-variant"
+                          @click="killSession(item)"
+                        />
+                      </template>
+                    </v-tooltip>
+                  </td>
+                </tr>
+              </template>
+            </v-data-table-server>
+          </v-card>
+        </template>
+      </v-expansion-panel>
+
+      <v-expansion-panel eager title="Events">
+        <template #text>
+          <v-card :loading="reverting.events" variant="outlined">
+            <v-data-table-server
+              :headers="dataDefinitions.events"
+              :items="events"
+              :items-length="pagination.events.total"
+              :loading="reverting.events"
+              v-model:items-per-page="pagination.events.pageSize"
+              @update:options="readEvents"
+              item-value="id"
+            >
+              <template v-slot:item="{ item }: { item: any }">
+                <tr>
+                  <td>{{ item.id }}</td>
+                  <td>{{ item.type }}</td>
+                  <td>{{ item.target }}</td>
+                  <td>{{ item.ip_address }}</td>
+                  <td>
+                    <v-tooltip :text="item.user_agent" location="top">
+                      <template #activator="{ props }">
+                        <div v-bind="props" class="text-ellipsis whitespace-nowrap overflow-hidden max-w-[180px]">
+                          {{ item.user_agent }}
+                        </div>
+                      </template>
+                    </v-tooltip>
+                  </td>
+                  <td>{{ new Date(item.created_at).toLocaleString() }}</td>
+                </tr>
+              </template>
+            </v-data-table-server>
+          </v-card>
+        </template>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { request } from "@/scripts/request"
+import { getAtk, useUserinfo } from "@/stores/userinfo"
+import { reactive, ref } from "vue"
+
+const id = useUserinfo()
+
+const error = ref<string | null>(null)
+
+const dataDefinitions: { [id: string]: any[] } = {
+  challenges: [
+    { align: "start", key: "id", title: "ID" },
+    { align: "start", key: "ip_address", title: "IP Address" },
+    { align: "start", key: "user_agent", title: "User Agent" },
+    { align: "start", key: "created_at", title: "Issued At" }
+  ],
+  sessions: [
+    { align: "start", key: "id", title: "ID" },
+    { align: "start", key: "audiences", title: "Audiences" },
+    { align: "start", key: "claims", title: "Claims" },
+    { align: "start", key: "created_at", title: "Issued At" },
+    { align: "start", key: "actions", title: "Actions", sortable: false }
+  ],
+  events: [
+    { align: "start", key: "id", title: "ID" },
+    { align: "start", key: "type", title: "Type" },
+    { align: "start", key: "target", title: "Affected Object" },
+    { align: "start", key: "ip_address", title: "IP Address" },
+    { align: "start", key: "user_agent", title: "User Agent" },
+    { align: "start", key: "created_at", title: "Performed At" }
+  ]
+}
+
+const challenges = ref<any>([])
+const sessions = ref<any>([])
+const events = ref<any>([])
+
+const reverting = reactive({ challenges: false, sessions: false, events: false })
+const pagination = reactive({
+  challenges: { page: 1, pageSize: 5, total: 0 },
+  sessions: { page: 1, pageSize: 5, total: 0 },
+  events: { page: 1, pageSize: 5, total: 0 }
+})
+
+async function readChallenges({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
+  if (itemsPerPage) pagination.challenges.pageSize = itemsPerPage
+  if (page) pagination.challenges.page = page
+
+  reverting.challenges = true
+  const res = await request(
+    "identity",
+    "/api/users/me/challenges?" +
+    new URLSearchParams({
+      take: pagination.challenges.pageSize.toString(),
+      offset: ((pagination.challenges.page - 1) * pagination.challenges.pageSize).toString()
+    }),
+    {
+      headers: { Authorization: `Bearer ${await getAtk()}` }
+    }
+  )
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+    challenges.value = data["data"]
+    pagination.challenges.total = data["count"]
+  }
+  reverting.challenges = false
+}
+
+async function readSessions({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
+  if (itemsPerPage) pagination.sessions.pageSize = itemsPerPage
+  if (page) pagination.sessions.page = page
+
+  reverting.sessions = true
+  const res = await request(
+    "identity",
+    "/api/users/me/sessions?" +
+    new URLSearchParams({
+      take: pagination.sessions.pageSize.toString(),
+      offset: ((pagination.sessions.page - 1) * pagination.sessions.pageSize).toString()
+    }),
+    {
+      headers: { Authorization: `Bearer ${await getAtk()}` }
+    }
+  )
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+    sessions.value = data["data"]
+    pagination.sessions.total = data["count"]
+  }
+  reverting.sessions = false
+}
+
+async function readEvents({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
+  if (itemsPerPage) pagination.events.pageSize = itemsPerPage
+  if (page) pagination.events.page = page
+
+  reverting.events = true
+  const res = await request(
+    "identity",
+    "/api/users/me/events?" +
+    new URLSearchParams({
+      take: pagination.events.pageSize.toString(),
+      offset: ((pagination.events.page - 1) * pagination.events.pageSize).toString()
+    }),
+    {
+      headers: { Authorization: `Bearer ${await getAtk()}` }
+    }
+  )
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+    events.value = data["data"]
+    pagination.events.total = data["count"]
+  }
+  reverting.events = false
+}
+
+Promise.all([readChallenges({}), readSessions({}), readEvents({})])
+
+async function killSession(item: any) {
+  reverting.sessions = true
+  const res = await request("identity", `/api/users/me/sessions/${item.id}`, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${await getAtk()}` }
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    await readSessions({})
+    error.value = null
+  }
+  reverting.sessions = false
+}
+</script>
+
+<style>
+.rounded-card {
+  border-radius: 8px;
+}
+</style>