feat: add change password ui

api/admin.go

@@ -139,7 +139,36 @@ func AdminDeleteUser(c *gin.Context) {
 		model.DeleteNetByNetID(n.ID)
 	}
 	model.DeleteUserByUserID(request.UserID)
-	status.UpdateSuccess(c, gin.H{})
+	status.UpdateSuccess(c, nil)
+}
+
+func AdminUpdateUserPassword(c *gin.Context) {
+	var request struct {
+		Username string `json:"username"`
+		Password string `json:"password"`
+	}
+	if err := c.BindJSON(&request); err != nil {
+		status.UpdateCode(c, status.InvalidRequest)
+		return
+	}
+	if isInvalidUsername(request.Username) {
+		status.UpdateCode(c, status.InvalidUsername)
+		return
+	}
+	if len(request.Password) == 0 {
+		status.UpdateCode(c, status.InvalidPassword)
+		return
+	}
+
+	user := model.User{Name: request.Username}
+	db := storage.Get()
+	if result := db.Model(&model.User{}).Where(user).Take(&user); result.Error != nil {
+		status.UpdateCode(c, status.UnexpectedError)
+		return
+	}
+	user.Password = hashUserPassword(user.Name, request.Password)
+	user.Save()
+	status.UpdateSuccess(c, nil)
 }
 
 func AdminGetOpenRegisterConfig(c *gin.Context) {
@@ -162,7 +191,7 @@ func AdminSetOpenRegisterConfig(c *gin.Context) {
 	} else {
 		model.SetConfig("openreg", "false")
 	}
-	status.UpdateSuccess(c, gin.H{})
+	status.UpdateSuccess(c, nil)
 }
 
 func AdminGetRegisterIntervalConfig(c *gin.Context) {
@@ -186,5 +215,5 @@ func AdminSetRegisterIntervalConfig(c *gin.Context) {
 	}
 
 	model.SetConfig("reginterval", strconv.FormatUint(uint64(request.RegInterval), 10))
-	status.UpdateSuccess(c, gin.H{})
+	status.UpdateSuccess(c, nil)
 }

api/user.go

@@ -202,7 +202,7 @@ func UserLogout(c *gin.Context) {
 	c.SetCookie("id", "", -1, "/", "", false, true)
 	c.SetCookie("token", "", -1, "/", "", false, true)
 
-	status.UpdateSuccess(c, gin.H{})
+	status.UpdateSuccess(c, nil)
 }
 
 func ChangePassword(c *gin.Context) {
@@ -234,7 +234,7 @@ func ChangePassword(c *gin.Context) {
 	c.SetCookie("id", strconv.FormatUint(uint64(user.ID), 10), 86400, "/", "", false, true)
 	c.SetCookie("token", user.Token, 86400, "/", "", false, true)
 
-	status.UpdateSuccess(c, gin.H{})
+	status.UpdateSuccess(c, nil)
 }
 
 func isInvalidUsername(username string) bool {

frontend/src/HomeView.vue → frontend/src/components/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
   <LoadingView v-if="showLoading()" class="container"></LoadingView>
-  <UserView v-if="showUser()"></UserView>
+  <NormalView v-if="showNormal()"></NormalView>
   <AdminView v-if="showAdmin()"></AdminView>
 </template>
 
@@ -17,10 +17,10 @@ onMounted(() => {
 })
 
 const showLoading = () => {
-  return !showUser() && !showAdmin()
+  return !showNormal() && !showAdmin()
 }
 
-const showUser = () => {
+const showNormal = () => {
   return component.value == 'normal'
 }
 

frontend/src/components/UserManagementView.vue → frontend/src/components/admin/AdminUserView.vue

@@ -3,36 +3,39 @@
     <a-page-header title="User" sub-title="user management" />
   </a-layout-header>
   <a-layout-content :style="{ margin: '24px 16px 0' }">
-    <div
-      :style="{
-        padding: '24px',
-        background: '#fff',
-        margin: '0px 0px 24px 0px'
-      }"
-    >
-      <a-form layout="inline" :model="addUserState" @finish="handleFinish">
+    <div :style="{ padding: '24px', background: '#fff' }">
+      <a-form layout="inline" :model="userState">
         <a-form-item>
-          <a-input v-model:value="addUserState.username" placeholder="Username">
+          <a-input v-model:value="userState.username" placeholder="Username">
             <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
           </a-input>
         </a-form-item>
         <a-form-item>
-          <a-input v-model:value="addUserState.password" type="password" placeholder="Password">
+          <a-input v-model:value="userState.password" type="password" placeholder="Password">
             <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
           </a-input>
         </a-form-item>
         <a-form-item>
           <a-button
             type="primary"
-            html-type="submit"
-            :disabled="addUserState.username === '' || addUserState.password === ''"
+            @click="adminAddUser"
+            :disabled="userState.username === '' || userState.password === ''"
           >
             Create
           </a-button>
         </a-form-item>
+        <a-form-item>
+          <a-button
+            type="primary"
+            @click="adminUpdateUserPassword"
+            :disabled="userState.username === '' || userState.password === ''"
+          >
+            Update
+          </a-button>
+        </a-form-item>
       </a-form>
     </div>
-    <div :style="{ padding: '24px', background: '#fff' }">
+    <div :style="{ padding: '24px', margin: '24px 0px 0px', background: '#fff' }">
       <a-table :columns="userColumns" :dataSource="userSource">
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'action'">
@@ -51,28 +54,39 @@ import { message } from 'ant-design-vue'
 import axios from 'axios'
 import { onMounted, ref } from 'vue'
 
-const addUserState = ref({
+const userState = ref({
   username: '',
   password: ''
 })
 
-const adminAddUser = async (username, password) => {
+const adminAddUser = async () => {
   const response = await axios.post('/api/admin/addUser', {
-    username: username,
-    password: password
+    username: userState.value.username,
+    password: userState.value.password
   })
 
   const status = response.data.status
   if (status == 0) {
     message.success(response.data.msg)
-    addUserState.value.username = ''
-    addUserState.value.password = ''
+    userState.value.username = ''
+    userState.value.password = ''
     updateUserSource()
   }
 }
 
-const handleFinish = () => {
-  adminAddUser(addUserState.value.username, addUserState.value.password)
+const adminUpdateUserPassword = async () => {
+  const response = await axios.post('/api/admin/updateUserPassword', {
+    username: userState.value.username,
+    password: userState.value.password
+  })
+
+  const status = response.data.status
+  if (status == 0) {
+    message.success(response.data.msg)
+    userState.value.username = ''
+    userState.value.password = ''
+    updateUserSource()
+  }
 }
 
 const userColumns = [

frontend/src/components/AdminView.vue → frontend/src/components/admin/AdminView.vue

@@ -6,7 +6,7 @@
       </div>
       <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
         <a-menu-item key="user">
-          <user-outlined />
+          <team-outlined />
           <span class="nav-text">User</span>
         </a-menu-item>
         <a-menu-item key="setting">
@@ -16,8 +16,8 @@
       </a-menu>
     </a-layout-sider>
     <a-layout>
-      <UserManagementView v-if="showUserManagement()"></UserManagementView>
-      <SettingView v-if="showSetting()"></SettingView>
+      <AdminUserView v-if="showUser()"></AdminUserView>
+      <AdminSettingView v-if="showSetting()"></AdminSettingView>
       <a-layout-footer style="text-align: center">Cacao © 2024</a-layout-footer>
     </a-layout>
   </a-layout>
@@ -28,7 +28,7 @@ import { ref } from 'vue'
 
 const selectedKeys = ref(['user'])
 
-const showUserManagement = () => {
+const showUser = () => {
   return selectedKeys.value.includes('user')
 }
 

frontend/src/components/UserView.vue → frontend/src/components/normal/NormalView.vue

@@ -5,9 +5,9 @@
         <a-avatar src="/favicon.ico" />
       </div>
       <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
-        <a-menu-item key="user">
-          <user-outlined />
-          <span class="nav-text">User</span>
+        <a-menu-item key="overview">
+          <bar-chart-outlined />
+          <span class="nav-text">Overview</span>
         </a-menu-item>
         <a-menu-item key="device">
           <desktop-outlined />
@@ -21,24 +21,30 @@
           <thunderbolt-outlined />
           <span class="nav-text">SD-WAN</span>
         </a-menu-item>
+        <a-menu-item key="user">
+          <user-outlined />
+          <span class="nav-text">User</span>
+        </a-menu-item>
       </a-menu>
     </a-layout-sider>
     <a-layout>
-      <UserInfoView v-if="showUserInfo()"></UserInfoView>
+      <OverviewView v-if="showOverview()"></OverviewView>
       <DeviceView v-if="showDevice()"></DeviceView>
       <NetworkView v-if="showNetwork()"></NetworkView>
       <SdwanView v-if="showSdwan()"></SdwanView>
+      <UserView v-if="showUser()"></UserView>
       <a-layout-footer style="text-align: center">Cacao © 2024</a-layout-footer>
     </a-layout>
   </a-layout>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-const selectedKeys = ref(['user'])
+import OverviewView from './OverviewView.vue'
+const selectedKeys = ref(['overview'])
 
-const showUserInfo = () => {
-  return selectedKeys.value.includes('user')
+const showOverview = () => {
+  return selectedKeys.value.includes('overview')
 }
 const showDevice = () => {
   return selectedKeys.value.includes('device')
@@ -49,6 +55,9 @@ const showNetwork = () => {
 const showSdwan = () => {
   return selectedKeys.value.includes('sdwan')
 }
+const showUser = () => {
+  return selectedKeys.value.includes('user')
+}
 </script>
 
 <style scoped>

frontend/src/components/normal/OverviewView.vue

@@ -0,0 +1,40 @@
+<template>
+  <a-layout-header :style="{ background: '#fff', padding: 0 }">
+    <a-page-header title="Overview" sub-title="statistics overview" />
+  </a-layout-header>
+  <a-layout-content :style="{ margin: '24px 16px 0' }">
+    <div :style="{ padding: '24px', background: '#fff' }">
+      <a-row>
+        <a-col :span="12"><a-statistic title="Net" :value="overview.netnum" /></a-col>
+        <a-col :span="12"><a-statistic title="Device" :value="overview.devnum" /></a-col>
+        <a-col :span="12"><a-statistic title="RX" :value="overview.rxsum" /></a-col>
+        <a-col :span="12"><a-statistic title="TX" :value="overview.txsum" /></a-col>
+      </a-row>
+    </div>
+  </a-layout-content>
+</template>
+
+<script setup>
+import axios from 'axios'
+import { ref, onMounted } from 'vue'
+
+const overview = ref({
+  netnum: '',
+  devnum: '',
+  rxsum: '',
+  txsum: ''
+})
+
+onMounted(() => {
+  getUserInformation()
+})
+
+const getUserInformation = async () => {
+  const response = await axios.post('/api/user/info')
+  const status = response.data.status
+  if (status == 0) {
+    overview.value = response.data.data
+    console.log(overview.value)
+  }
+}
+</script>