✨ User security center

pkg/views/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ["plugin:vue/vue3-recommended"],
+  rules: {
+    "vue/multi-word-component-names": "off",
+  },
+}

pkg/views/src/layouts/master.vue

@@ -10,7 +10,7 @@
       <v-menu>
         <template #activator="{ props }">
           <v-btn flat exact v-bind="props" icon>
-            <v-avatar color="transparent" icon="mdi-account-circle" :src="id.userinfo.data?.avatar" />
+            <v-avatar color="transparent" icon="mdi-account-circle" :image="'/api/avatar/' + id.userinfo.data?.avatar" />
           </v-btn>
         </template>
 
@@ -19,7 +19,7 @@
           <v-list-item title="Create account" prepend-icon="mdi-account-plus" :to="{ name: 'auth.sign-up' }" />
         </v-list>
         <v-list density="compact" v-else>
-          <v-list-item title="Dashboard" prepend-icon="mdi-view-dashboard" :to="{ name: 'dashboard' }" />
+          <v-list-item title="User Center" prepend-icon="mdi-account-supervisor" exact :to="{ name: 'dashboard' }" />
         </v-list>
       </v-menu>
     </div>

pkg/views/src/layouts/user-center.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-container class="pt-6 px-6">
+    <v-row>
+      <v-col :xs="12" :sm="12" :md="4" :lg="3">
+        <v-card title="Navigation">
+          <v-list density="comfortable">
+            <v-list-item title="Dashboard" prepend-icon="mdi-view-dashboard" :to="{ name: 'dashboard' }" exact />
+            <v-list-item title="Personalize" prepend-icon="mdi-card-bulleted-outline" :to="{ name: 'personalize' }" />
+            <v-list-item title="Security" prepend-icon="mdi-security" :to="{ name: 'security' }" />
+          </v-list>
+        </v-card>
+      </v-col>
+
+      <v-col :xs="12" :sm="12" :md="8" :lg="9">
+        <router-view />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

pkg/views/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router"
 import { useUserinfo } from "@/stores/userinfo"
 import MasterLayout from "@/layouts/master.vue"
+import UserCenterLayout from "@/layouts/user-center.vue"
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,7 +9,17 @@ const router = createRouter({
     {
       path: "/",
       component: MasterLayout,
-      children: [{ path: "/", name: "dashboard", component: () => import("@/views/dashboard.vue") }],
+      children: [
+        {
+          path: "/",
+          component: UserCenterLayout,
+          children: [
+            { path: "/", name: "dashboard", component: () => import("@/views/dashboard.vue") },
+            { path: "/me/personalize", name: "personalize", component: () => import("@/views/personalize.vue") },
+            { path: "/me/security", name: "security", component: () => import("@/views/security.vue") },
+          ],
+        },
+      ],
     },
     {
       path: "/auth",

pkg/views/src/views/dashboard.vue

@@ -1,3 +1,31 @@
 <template>
-  <v-container>Hello, world!</v-container>
+  <div>
+    <v-card class="px-1 mb-3">
+      <v-card-text class="flex gap-3.5">
+        <v-avatar
+          color="grey-lighten-2"
+          icon="mdi-account-circle"
+          class="rounded-card"
+          :size="54"
+          :image="'/api/avatar/' + id.userinfo.data.avatar"
+        />
+        <div>
+          <h1 class="text-2xl">{{ id.userinfo.displayName }}</h1>
+          <p>What can I help you today?</p>
+        </div>
+      </v-card-text>
+    </v-card>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { useUserinfo } from "@/stores/userinfo"
+
+const id = useUserinfo()
+</script>
+
+<style>
+.rounded-card {
+  border-radius: 8px;
+}
+</style>

pkg/views/src/views/personalize.vue

@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <v-card class="mb-3" title="Information" prepend-icon="mdi-face-man-profile" :loading="loading">
+      <template #text>
+        <v-form class="mt-1" @submit.prevent="submit">
+          <v-row dense>
+            <v-col :xs="12" :md="6">
+              <v-text-field
+                readonly
+                hide-details
+                label="Username"
+                density="comfortable"
+                variant="outlined"
+                v-model="data.name"
+              />
+            </v-col>
+            <v-col :xs="12" :md="6">
+              <v-text-field
+                hide-details
+                label="Nickname"
+                density="comfortable"
+                variant="outlined"
+                v-model="data.nick"
+              />
+            </v-col>
+            <v-col :cols="12">
+              <v-textarea
+                hide-details
+                label="Description"
+                density="comfortable"
+                variant="outlined"
+                v-model="data.description"
+              />
+            </v-col>
+            <v-col :xs="12" :md="6" :lg="4">
+              <v-text-field
+                hide-details
+                label="First Name"
+                density="comfortable"
+                variant="outlined"
+                v-model="data.first_name"
+              />
+            </v-col>
+            <v-col :xs="12" :md="6" :lg="4">
+              <v-text-field
+                hide-details
+                label="Last Name"
+                density="comfortable"
+                variant="outlined"
+                v-model="data.last_name"
+              />
+            </v-col>
+            <v-col :xs="12" :lg="4">
+              <v-text-field
+                hide-details
+                label="Birthday"
+                density="comfortable"
+                variant="outlined"
+                type="datetime-local"
+                v-model="data.birthday"
+              />
+            </v-col>
+          </v-row>
+
+          <v-btn type="submit" class="mt-2" variant="text" prepend-icon="mdi-content-save" :disabled="loading">
+            Apply Changes
+          </v-btn>
+        </v-form>
+      </template>
+    </v-card>
+
+    <v-card>
+      <template #text>
+        <div class="flex items-center gap-3">
+          <v-avatar
+            color="grey-lighten-2"
+            icon="mdi-account-circle"
+            class="rounded-card"
+            size="large"
+            :image="'/api/avatar/' + id.userinfo.data.avatar"
+          />
+          <v-file-input
+            clearable
+            hide-details
+            label="Upload another avatar"
+            variant="outlined"
+            density="comfortable"
+            accept="image/*"
+            prepend-icon=""
+            append-icon="mdi-upload"
+            v-model="avatar"
+            @click:append="applyAvatar"
+          />
+        </div>
+      </template>
+    </v-card>
+
+    <v-snackbar v-model="done" :timeout="3000"> Your personal information has been updated. </v-snackbar>
+
+    <!-- @vue-ignore -->
+    <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import { useUserinfo, getAtk } from "@/stores/userinfo"
+import { request } from "@/scripts/request"
+
+const id = useUserinfo()
+
+const error = ref<string | null>(null)
+const done = ref(false)
+const loading = ref(false)
+
+const data = ref<any>({})
+const avatar = ref<any>(null)
+
+watch(
+  id,
+  (val) => {
+    if (val.isReady) {
+      data.value.name = id.userinfo.data.name
+      data.value.nick = id.userinfo.data.nick
+      data.value.first_name = id.userinfo.data.profile.first_name
+      data.value.last_name = id.userinfo.data.profile.last_name
+      data.value.birthday = id.userinfo.data.profile.birthday
+
+      if (data.value.birthday) data.value.birthday = data.value.birthday.substring(0, 16)
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+async function submit() {
+  const payload = data.value
+  if (payload.birthday) payload.birthday = new Date(payload.birthday).toISOString()
+
+  loading.value = true
+  const res = await request("/api/users/me", {
+    method: "PUT",
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
+    body: JSON.stringify(payload),
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    await id.readProfiles()
+    done.value = true
+    error.value = null
+  }
+  loading.value = false
+}
+
+async function applyAvatar() {
+  if (!avatar.value) return
+
+  if (loading.value) return
+
+  const payload = new FormData()
+  payload.set("avatar", avatar.value[0])
+
+  loading.value = true
+  const res = await request("/api/avatar", {
+    method: "PUT",
+    headers: { Authorization: `Bearer ${getAtk()}` },
+    body: payload,
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    await id.readProfiles()
+    done.value = true
+    error.value = null
+    avatar.value = null
+  }
+  loading.value = false
+}
+</script>
+
+<style>
+.rounded-card {
+  border-radius: 8px;
+}
+</style>

pkg/views/src/views/security.vue

@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <v-expansion-panels>
+      <v-expansion-panel eager title="Challenges">
+        <template #text>
+          <v-card :loading="reverting.challenges" variant="outlined">
+            <v-data-table-server
+              density="compact"
+              :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
+              density="compact"
+              :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>
+                    <v-chip v-for="value in item.audiences" size="x-small" color="warning" class="capitalize">
+                      {{ value }}
+                    </v-chip>
+                  </td>
+                  <td>
+                    <v-chip v-for="value in item.claims" size="x-small" color="info" class="font-mono">
+                      {{ value }}
+                    </v-chip>
+                  </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
+              density="compact"
+              :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-[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-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(
+    "/api/users/me/challenges?" +
+      new URLSearchParams({
+        take: pagination.challenges.pageSize.toString(),
+        offset: ((pagination.challenges.page - 1) * pagination.challenges.pageSize).toString(),
+      }),
+    {
+      headers: { Authorization: `Bearer ${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(
+    "/api/users/me/sessions?" +
+      new URLSearchParams({
+        take: pagination.sessions.pageSize.toString(),
+        offset: ((pagination.sessions.page - 1) * pagination.sessions.pageSize).toString(),
+      }),
+    {
+      headers: { Authorization: `Bearer ${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(
+    "/api/users/me/events?" +
+      new URLSearchParams({
+        take: pagination.events.pageSize.toString(),
+        offset: ((pagination.events.page - 1) * pagination.events.pageSize).toString(),
+      }),
+    {
+      headers: { Authorization: `Bearer ${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(`/api/users/me/sessions/${item.id}`, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${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>