From bbfac8af45384f3e2f8f4b31857bf4e14fdb98a2 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 18 Mar 2021 00:01:23 +0800
Subject: [PATCH] feat(status): support username-password login

---
 .../plugin-status/client/components/card.vue  |  8 ++-
 .../plugin-status/client/components/input.vue | 14 ++---
 packages/plugin-status/client/index.ts        | 32 ++++++++++-
 packages/plugin-status/client/main.ts         | 13 +++--
 .../plugin-status/client/views/home/index.vue |  8 ++-
 .../client/views/layout/index.vue             |  1 -
 .../client/views/layout/navbar.vue            | 31 +++++++++-
 .../client/views/layout/sidebar.vue           |  4 +-
 packages/plugin-status/client/views/login.vue | 56 +++++++++++--------
 .../plugin-status/client/views/profile.vue    | 31 +++++++++-
 packages/plugin-status/server/adapter.ts      | 27 ++++++---
 packages/plugin-status/server/index.ts        |  4 ++
 packages/plugin-status/server/mysql.ts        |  1 +
 13 files changed, 175 insertions(+), 55 deletions(-)

diff --git a/packages/plugin-status/client/components/card.vue b/packages/plugin-status/client/components/card.vue
index 6db856ab73..dd8b6edfac 100644
--- a/packages/plugin-status/client/components/card.vue
+++ b/packages/plugin-status/client/components/card.vue
@@ -23,7 +23,7 @@ $paddingX: 1.2rem;
 $paddingY: 1.6rem;
 
 .k-card {
-  margin: 0 auto;
+  margin: 0 auto 2rem;
   width: 100%;
   border-radius: 8px;
   background: rgba(0, 0, 0, .24);
@@ -39,6 +39,12 @@ $paddingY: 1.6rem;
 
   .k-card-body {
     padding: $paddingX $paddingY;
+    > :first-child {
+      margin-top: 0;
+    }
+    > :last-child {
+      margin-bottom: 0;
+    }
   }
 
   &.frameless .k-card-body {
diff --git a/packages/plugin-status/client/components/input.vue b/packages/plugin-status/client/components/input.vue
index ee261dbf29..552f72f32f 100644
--- a/packages/plugin-status/client/components/input.vue
+++ b/packages/plugin-status/client/components/input.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="k-input" :class="{ focused, disabled }">
-    <i v-if="prefixIcon" :class="'fas fa-' + prefixIcon" class="prefix"/>
+    <i v-if="prefix" :class="'fas fa-' + prefix" class="prefix" @click="$emit('clickPrefix')"/>
     <input
       ref="input"
       :value="modelValue"
@@ -21,7 +21,7 @@
       @blur="onBlur"
       @keydown.enter.stop="$emit('enter', $event)"
     />
-    <i v-if="suffixIcon" :class="'fas fa-' + suffixIcon" class="suffix"/>
+    <i v-if="suffix" :class="'fas fa-' + suffix" class="suffix" @click="$emit('clickSuffix')"/>
   </div>
 </template>
 
@@ -30,8 +30,8 @@
 import { defineProps, ref, computed, defineEmit } from 'vue'
 
 const props = defineProps({
-  prefixIcon: String,
-  suffixIcon: String,
+  prefix: String,
+  suffix: String,
   placeholder: String,
   disabled: Boolean,
   validate: Function,
@@ -50,11 +50,11 @@ const invalid = ref(false)
 
 const inputStyle = computed(() => ({
   fontSize: props.size + 'em',
-  paddingLeft: +!!(props.prefixIcon) + 1 + 'em',
-  paddingRight: +!!(props.suffixIcon) + 1 + 'em',
+  paddingLeft: +!!(props.prefix) + 1 + 'em',
+  paddingRight: +!!(props.suffix) + 1 + 'em',
 }))
 
-const emit = defineEmit(['update:modelValue', 'focus', 'blur', 'enter'])
+const emit = defineEmit(['update:modelValue', 'focus', 'blur', 'enter', 'clickPrefix', 'clickSuffix'])
 
 function onInput (event) {
   if (props.validate) {
diff --git a/packages/plugin-status/client/index.ts b/packages/plugin-status/client/index.ts
index 9d478727fc..477a28c4d4 100644
--- a/packages/plugin-status/client/index.ts
+++ b/packages/plugin-status/client/index.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { User } from 'koishi-core'
 import type { Payload } from '~/server'
 
@@ -20,9 +20,26 @@ export namespace storage {
     if (typeof localStorage === 'undefined') return
     localStorage.setItem(prefix + key, JSON.stringify(value))
   }
+
+  export function create<T>(key: string, fallback?: T) {
+    const wrapper = ref<T>({ ...fallback, ...get(key) })
+    watch(wrapper, () => set(key, wrapper.value), {
+      deep: typeof fallback === 'object',
+    })
+    return wrapper
+  }
+}
+
+interface Config {
+  authType?: 0 | 1
+  username?: string
+  password?: string
+  platform?: string
+  userId?: string
 }
 
-export const user = ref<User>(storage.get('user'))
+export const user = storage.create<User>('user')
+export const config = storage.create<Config>('config', { authType: 0 })
 export const status = ref<Payload>(null)
 export const socket = ref<WebSocket>(null)
 
@@ -51,3 +68,14 @@ export function send(type: string, body: any) {
 export function receive<T = any>(event: string, listener: (data: T) => void) {
   listeners[event] = listener
 }
+
+export async function sha256(password: string) {
+  const data = new TextEncoder().encode(password)
+  const buffer = await crypto.subtle.digest('SHA-256', data)
+  const view = new DataView(buffer)
+  let output = ''
+  for (let i = 0; i < view.byteLength; i += 4) {
+    output += ('00000000' + view.getUint32(i).toString(16)).slice(-8)
+  }
+  return output
+}
diff --git a/packages/plugin-status/client/main.ts b/packages/plugin-status/client/main.ts
index 895c87abeb..23b26d3200 100644
--- a/packages/plugin-status/client/main.ts
+++ b/packages/plugin-status/client/main.ts
@@ -15,6 +15,7 @@ import 'element-plus/lib/theme-chalk/el-button.css'
 
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 import '@fortawesome/fontawesome-free/css/brands.css'
+import '@fortawesome/fontawesome-free/css/regular.css'
 import '@fortawesome/fontawesome-free/css/solid.css'
 
 import './index.scss'
@@ -22,8 +23,8 @@ import './index.scss'
 declare module 'vue-router' {
   interface RouteMeta {
     icon?: string
-    status?: boolean
-    auth?: boolean
+    hidden?: boolean
+    authorize?: boolean
     frameless?: boolean
   }
 }
@@ -50,17 +51,17 @@ const router = createRouter({
   }, {
     path: '/sandbox',
     name: '沙盒',
-    meta: { icon: 'laptop-code', auth: true },
+    meta: { icon: 'laptop-code', authorize: true },
     component: () => import('./views/sandbox.vue'),
   }, {
     path: '/profile',
     name: '资料',
-    meta: { icon: 'user-circle', auth: true },
+    meta: { icon: 'user-circle', authorize: true, hidden: true },
     component: () => import('./views/profile.vue'),
   }, {
     path: '/login',
     name: '登录',
-    meta: { icon: 'sign-in-alt', frameless: true },
+    meta: { icon: 'sign-in-alt', frameless: true, hidden: true },
     component: () => import('./views/login.vue'),
   }],
 })
@@ -77,7 +78,7 @@ app.use(ElCollapseTransition)
 app.use(router)
 
 router.beforeEach((route) => {
-  if (route.meta.auth && !user.value) {
+  if (route.meta.authorize && !user.value) {
     return '/login'
   }
 })
diff --git a/packages/plugin-status/client/views/home/index.vue b/packages/plugin-status/client/views/home/index.vue
index cf2c843393..48b4104c1f 100644
--- a/packages/plugin-status/client/views/home/index.vue
+++ b/packages/plugin-status/client/views/home/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="basic-stats">
+  <div class="stats-grid basic-stats">
     <card-numeric title="当前消息频率" icon="paper-plane">{{ upRate }} / min</card-numeric>
     <card-numeric title="近期消息频率" icon="history">{{ recentRate }} / d</card-numeric>
     <card-numeric title="命名插件数量" icon="plug">{{ status.pluginCount }}</card-numeric>
@@ -8,7 +8,7 @@
     <card-numeric title="活跃群数量" icon="users">32</card-numeric>
   </div>
   <load-chart :status="status"/>
-  <div class="chart-stats">
+  <div class="stats-grid chart-stats">
     <history-chart :status="status"/>
     <hour-chart :status="status"/>
     <group-chart :status="status"/>
@@ -39,6 +39,10 @@ const recentRate = computed(() => {
 
 <style lang="scss">
 
+.stats-grid .k-card {
+  margin: 0;
+}
+
 .basic-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
diff --git a/packages/plugin-status/client/views/layout/index.vue b/packages/plugin-status/client/views/layout/index.vue
index 6b52bca737..923323fd0a 100644
--- a/packages/plugin-status/client/views/layout/index.vue
+++ b/packages/plugin-status/client/views/layout/index.vue
@@ -27,7 +27,6 @@ const frameless = computed(() => route.meta.frameless)
 
 body {
   margin: 0;
-  font-size: 14px;
   min-height: 100vh;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
diff --git a/packages/plugin-status/client/views/layout/navbar.vue b/packages/plugin-status/client/views/layout/navbar.vue
index f99d30af71..e55917ac32 100644
--- a/packages/plugin-status/client/views/layout/navbar.vue
+++ b/packages/plugin-status/client/views/layout/navbar.vue
@@ -2,8 +2,13 @@
   <nav>
     <span class="title">Koishi 控制台</span>
     <span class="right">
-      <router-link v-if="user" to="/profile">{{ user.name }}</router-link>
-      <router-link v-else to="/login">登录</router-link>
+      <template v-if="user">
+        <router-link to="/profile">{{ user.name }}<i class="fas fa-user-circle"/></router-link>
+        <el-button type="text" @click="logout">登出<i class="fas fa-sign-in-alt"/></el-button>
+      </template>
+      <template v-else>
+        <router-link to="/login">登录<i class="fas fa-sign-in-alt"/></router-link>
+      </template>
     </span>
   </nav>
 </template>
@@ -11,6 +16,14 @@
 <script lang="ts" setup>
 
 import { user } from '~/client'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+async function logout() {
+  await router.push('/login')
+  user.value = null
+}
 
 </script>
 
@@ -30,6 +43,20 @@ nav {
   .right {
     font-size: 1.05rem;
     float: right;
+
+    i {
+      margin-left: 0.4rem;
+    }
+
+    > * + * {
+      margin-left: 1rem;
+    }
+  }
+
+  .el-button {
+    font-size: 1.05rem !important;
+    min-height: auto !important;
+    padding: 0 !important;
   }
 }
 
diff --git a/packages/plugin-status/client/views/layout/sidebar.vue b/packages/plugin-status/client/views/layout/sidebar.vue
index 280e52fb5b..6489e947a8 100644
--- a/packages/plugin-status/client/views/layout/sidebar.vue
+++ b/packages/plugin-status/client/views/layout/sidebar.vue
@@ -2,9 +2,9 @@
   <aside>
     <ul>
       <template v-for="(route, index) in $router.getRoutes()" :key="index">
-        <li v-if="!route.meta.frameless" :class="{ current: route.name === $route.name }">
+        <li v-if="!route.meta.hidden" :class="{ current: route.name === $route.name }">
           <router-link :to="route.path">
-            <i :class="['fas', `fa-${route.meta.icon}`]"/>
+            <i :class="`fas fa-${route.meta.icon}`"/>
             {{ route.name }}
           </router-link>
         </li>
diff --git a/packages/plugin-status/client/views/login.vue b/packages/plugin-status/client/views/login.vue
index 784606cdd2..cefd28fa46 100644
--- a/packages/plugin-status/client/views/login.vue
+++ b/packages/plugin-status/client/views/login.vue
@@ -1,22 +1,31 @@
 <template>
   <k-card class="login">
     <h1>
-      <span :class="{ inactive: type === 1 }" @click="type = 0">平台账户登录</span>
+      <span :class="{ inactive: config.authType === 1 }" @click="config.authType = 0">平台账户登录</span>
       /
-      <span :class="{ inactive: type === 0 }" @click="type = 1">用户名密码登录</span>
+      <span :class="{ inactive: config.authType === 0 }" @click="config.authType = 1">用户名密码登录</span>
     </h1>
     <template v-if="data.token">
       <p class="hint">欢迎你，{{ data.name || 'Koishi 用户' }}！</p>
       <p class="hint">请用上述账号将下面的验证码私聊发送给任意机器人：</p>
       <p class="token">{{ data.token }}</p>
     </template>
+    <template v-else-if="config.authType === 0">
+      <k-input prefix="at" placeholder="平台名" v-model="config.platform"/>
+      <k-input prefix="user" placeholder="账号" v-model="config.userId" @enter="enter"/>
+      <p class="error" v-if="data.message">{{ data.message }}</p>
+      <div class="control">
+        <k-button @click="$router.back()">返回</k-button>
+        <k-button @click="enter">获取验证码</k-button>
+      </div>
+    </template>
     <template v-else>
-      <k-input :prefix-icon="presets[type][0]" :placeholder="presets[type][1]" v-model="form1"/>
-      <k-input :prefix-icon="presets[type][2]" :placeholder="presets[type][3]" v-model="form2" @enter="enter"/>
+      <k-input prefix="user" placeholder="用户名" v-model="config.username"/>
+      <k-input prefix="lock" placeholder="密码" v-model="config.password" type="password" @enter="enter"/>
       <p class="error" v-if="data.message">{{ data.message }}</p>
       <div class="control">
         <k-button @click="$router.back()">返回</k-button>
-        <k-button @click="enter">{{ presets[type][4] }}</k-button>
+        <k-button @click="login">登录</k-button>
       </div>
     </template>
   </k-card>
@@ -26,41 +35,38 @@
 
 import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { send, receive, user } from '~/client'
-
-const presets = [
-  ['at', '平台名', 'user', '账号', '获取验证码'],
-  ['user', '用户名', 'lock', '密码', '登录'],
-]
+import { send, receive, user, config, sha256 } from '~/client'
 
-interface TokenData {
+interface LoginData {
   token?: string
   name?: string
   message?: string
 }
 
-const type = ref(0)
-const data = ref<TokenData>({})
-const form1 = ref('')
-const form2 = ref('')
-
+const data = ref<LoginData>({})
 const router = useRouter()
 
-receive('token', body => data.value = body)
+receive('login', body => data.value = body)
 
 watch(user, (value) => {
   if (!value) return
   router.push('/profile')
 })
 
-const timestamp = ref(0)
+let timestamp = 0
 
 async function enter() {
   const now = Date.now()
-  if (now < timestamp.value) return
-  if (!form1.value || !form2.value) return
-  timestamp.value = now + 10000
-  send('token', { platform: form1.value, userId: form2.value })
+  if (now < timestamp) return
+  const { platform, userId } = config.value
+  if (!platform || !userId) return
+  timestamp = now + 1000
+  send('token', { platform, userId })
+}
+
+async function login() {
+  const { username, password } = config.value
+  send('login', { username, password: await sha256(password) })
 }
 
 </script>
@@ -75,6 +81,10 @@ section.login {
   flex-direction: column;
   justify-content: center;
 
+  .k-card-body {
+    padding: 3rem 0 !important;
+  }
+
   h1 {
     font-size: 1.5rem;
     margin: 2.5rem auto;
diff --git a/packages/plugin-status/client/views/profile.vue b/packages/plugin-status/client/views/profile.vue
index 111a8b4edf..3c1b32d6c2 100644
--- a/packages/plugin-status/client/views/profile.vue
+++ b/packages/plugin-status/client/views/profile.vue
@@ -1,9 +1,36 @@
 <template>
-  {{ user }}
+  <k-card title="基本资料">
+    <p>用户名：{{ user.name }}</p>
+    <p>权限等级：{{ user.authority }}</p>
+  </k-card>
+  <k-card title="设置密码">
+    <k-input v-model="password" @enter="enter"
+      :type="hidden ? 'password' : 'text'"
+      :suffix="hidden ? 'eye-slash' : 'eye'"
+      @click-suffix="hidden = !hidden"
+    />
+    <p>
+      <k-button type="danger" solid :disabled="!password" @click="enter">应用更改</k-button>
+    </p>
+  </k-card>
 </template>
 
 <script lang="ts" setup>
 
-import { user } from '~/client'
+import { user, config, send, sha256 } from '~/client'
+import { ref } from 'vue'
+
+const hidden = ref(true)
+const password = ref(config.value.password)
+
+async function enter() {
+  if (!password.value) return
+  const { id } = user.value
+  send('password', { id, password: await sha256(password.value) })
+  config.value.password = password.value
+}
 
 </script>
+
+<style lang="scss">
+</style>
diff --git a/packages/plugin-status/server/adapter.ts b/packages/plugin-status/server/adapter.ts
index 3527f5c04d..a52706dddb 100644
--- a/packages/plugin-status/server/adapter.ts
+++ b/packages/plugin-status/server/adapter.ts
@@ -1,4 +1,5 @@
-import { Adapter, Bot, BotOptions, Context, Logger, Random } from 'koishi-core'
+import { Adapter, Bot, BotOptions, Context, Logger, omit, Random } from 'koishi-core'
+import { createHash } from 'crypto'
 import Profile from './profile'
 import WebSocket from 'ws'
 
@@ -17,12 +18,13 @@ class WebBot extends Bot<'sandbox'> {
   }
 
   async sendMessage(channelId: string, content: string) {
-    this.socket.send({
-      type: 'message',
-      body: content,
-    })
+    this._sendSocket('message', content)
     return Random.uuid()
   }
+
+  _sendSocket(type: string, body: any) {
+    this.socket.send(JSON.stringify({ type, body }))
+  }
 }
 
 const logger = new Logger('status')
@@ -75,7 +77,7 @@ export class WebAdapter extends Adapter<'sandbox'> {
         if (type === 'token') {
           const { platform, userId } = body
           const user = await this.app.database.getUser(platform, userId, ['name'])
-          if (!user) return socket.send(JSON.stringify({ type: 'token', body: { message: '没有此账户。' } }))
+          if (!user) return bot._sendSocket('login', { message: '没有此账户。' })
           const id = `${platform}:${userId}`
           const token = Random.uuid()
           const expire = Date.now() + this.config.expiration
@@ -83,7 +85,18 @@ export class WebAdapter extends Adapter<'sandbox'> {
           setTimeout(() => {
             if (states[id]?.[1] > Date.now()) delete states[id]
           }, this.config.expiration)
-          socket.send(JSON.stringify({ type: 'token', body: { token, name: user.name } }))
+          bot._sendSocket('token', { token, name: user.name })
+        } else if (type === 'password') {
+          const { id, password } = body
+          await this.app.database.setUser('id', id, { password })
+        } else if (type === 'login') {
+          const { username, password } = body
+          const user = await this.app.database.getUser('name', username, ['password', 'authority', 'id'])
+          if (!user) return bot._sendSocket('login', { message: '没有此账户。' })
+          if (user.password !== createHash('sha256').update(password).digest('hex')) {
+            if (!user) return bot._sendSocket('login', { message: '用户名或密码错误。' })
+          }
+          bot._sendSocket('user', omit(user, ['password']))
         } else {
           logger.info(type, body)
         }
diff --git a/packages/plugin-status/server/index.ts b/packages/plugin-status/server/index.ts
index c5b20f2e7a..41ccc87e6b 100644
--- a/packages/plugin-status/server/index.ts
+++ b/packages/plugin-status/server/index.ts
@@ -16,6 +16,10 @@ declare module 'koishi-core' {
   interface EventMap {
     'status/tick'(): void
   }
+
+  interface User {
+    password: string
+  }
 }
 
 export interface Config extends WebUI.Config {
diff --git a/packages/plugin-status/server/mysql.ts b/packages/plugin-status/server/mysql.ts
index 03006c892a..e0d57caf22 100644
--- a/packages/plugin-status/server/mysql.ts
+++ b/packages/plugin-status/server/mysql.ts
@@ -173,6 +173,7 @@ Database.extend('koishi-plugin-mysql', {
 
 Database.extend('koishi-plugin-mysql', ({ tables, Domain }) => {
   tables.user.lastCall = 'timestamp'
+  tables.user.password = 'varchar(64)'
   tables.channel.name = 'varchar(50)'
   tables.channel.activity = new Domain.Json()
 })