From a6927dc9b430da20639d1f47c0c698d21cfc22ce Mon Sep 17 00:00:00 2001
From: lanthora <lanthora@outlook.com>
Date: Wed, 24 Jul 2024 11:54:18 +0800
Subject: [PATCH] feat: add admin add user ui

---
 frontend/src/LoginView.vue                    | 10 +--
 frontend/src/RegisterView.vue                 | 10 +--
 frontend/src/components/AdminView.vue         | 12 ----
 frontend/src/components/DeviceView.vue        |  6 +-
 frontend/src/components/NetworkView.vue       |  6 +-
 frontend/src/components/SdwanView.vue         |  6 +-
 frontend/src/components/SettingView.vue       |  8 +--
 frontend/src/components/UserInfoView.vue      |  6 +-
 .../src/components/UserManagementView.vue     | 63 +++++++++++++++++--
 frontend/src/components/UserView.vue          | 12 ----
 10 files changed, 73 insertions(+), 66 deletions(-)

diff --git a/frontend/src/LoginView.vue b/frontend/src/LoginView.vue
index e5f62c5..5fb27d0 100644
--- a/frontend/src/LoginView.vue
+++ b/frontend/src/LoginView.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="container">
     <a-form
-      :model="formState"
+      :model="loginState"
       :hideRequiredMark="true"
       name="login"
       class="login-form"
       @finish="onFinish"
     >
       <a-form-item name="username" :rules="[{ required: true, message: 'Input your username' }]">
-        <a-input v-model:value="formState.username">
+        <a-input v-model:value="loginState.username">
           <template #prefix>
             <user-outlined class="site-form-item-icon" />
           </template>
@@ -16,7 +16,7 @@
       </a-form-item>
 
       <a-form-item name="password" :rules="[{ required: true, message: 'Input your password' }]">
-        <a-input-password v-model:value="formState.password">
+        <a-input-password v-model:value="loginState.password">
           <template #prefix>
             <lock-outlined class="site-form-item-icon" />
           </template>
@@ -39,7 +39,7 @@ import { reactive, computed } from 'vue'
 import axios from 'axios'
 import { useRouter } from 'vue-router'
 
-const formState = reactive({
+const loginState = reactive({
   username: '',
   password: ''
 })
@@ -63,7 +63,7 @@ const onFinish = (values) => {
 }
 
 const disabled = computed(() => {
-  return !(formState.username && formState.password)
+  return !(loginState.username && loginState.password)
 })
 </script>
 
diff --git a/frontend/src/RegisterView.vue b/frontend/src/RegisterView.vue
index bbc62b4..323f9c8 100644
--- a/frontend/src/RegisterView.vue
+++ b/frontend/src/RegisterView.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="container">
     <a-form
-      :model="formState"
+      :model="registerState"
       :hideRequiredMark="true"
       name="register"
       class="register-form"
       @finish="onFinish"
     >
       <a-form-item name="username" :rules="[{ required: true, message: 'Input your username' }]">
-        <a-input v-model:value="formState.username">
+        <a-input v-model:value="registerState.username">
           <template #prefix>
             <UserOutlined class="site-form-item-icon" />
           </template>
@@ -16,7 +16,7 @@
       </a-form-item>
 
       <a-form-item name="password" :rules="[{ required: true, message: 'Input your password' }]">
-        <a-input-password v-model:value="formState.password">
+        <a-input-password v-model:value="registerState.password">
           <template #prefix>
             <LockOutlined class="site-form-item-icon" />
           </template>
@@ -42,7 +42,7 @@ import { reactive, computed } from 'vue'
 import axios from 'axios'
 import { useRouter } from 'vue-router'
 
-const formState = reactive({
+const registerState = reactive({
   username: '',
   password: ''
 })
@@ -66,7 +66,7 @@ const onFinish = (values) => {
 }
 
 const disabled = computed(() => {
-  return !(formState.username && formState.password)
+  return !(registerState.username && registerState.password)
 })
 </script>
 
diff --git a/frontend/src/components/AdminView.vue b/frontend/src/components/AdminView.vue
index 1da30ac..6c16e7c 100644
--- a/frontend/src/components/AdminView.vue
+++ b/frontend/src/components/AdminView.vue
@@ -43,16 +43,4 @@ const showSetting = () => {
   margin: 16px;
   text-align: center;
 }
-
-.site-layout-sub-header-background {
-  background: #fff;
-}
-
-.site-layout-background {
-  background: #fff;
-}
-
-[data-theme='dark'] .site-layout-sub-header-background {
-  background: #141414;
-}
 </style>
diff --git a/frontend/src/components/DeviceView.vue b/frontend/src/components/DeviceView.vue
index d6ec6b1..d73f72b 100644
--- a/frontend/src/components/DeviceView.vue
+++ b/frontend/src/components/DeviceView.vue
@@ -1,10 +1,6 @@
 <template>
   <a-layout-header :style="{ background: '#fff', padding: 0 }">
-    <a-page-header
-      style="border: 1px solid rgb(235, 237, 240)"
-      title="Device"
-      sub-title="view and manage devices"
-    />
+    <a-page-header title="Device" sub-title="view and manage devices" />
   </a-layout-header>
   <a-layout-content :style="{ margin: '24px 16px 0' }">
     <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">content</div>
diff --git a/frontend/src/components/NetworkView.vue b/frontend/src/components/NetworkView.vue
index db9b98d..0fefb6d 100644
--- a/frontend/src/components/NetworkView.vue
+++ b/frontend/src/components/NetworkView.vue
@@ -1,10 +1,6 @@
 <template>
   <a-layout-header :style="{ background: '#fff', padding: 0 }">
-    <a-page-header
-      style="border: 1px solid rgb(235, 237, 240)"
-      title="Network"
-      sub-title="create and manage private networks"
-    />
+    <a-page-header title="Network" sub-title="create and manage private networks" />
   </a-layout-header>
   <a-layout-content :style="{ margin: '24px 16px 0' }">
     <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">content</div>
diff --git a/frontend/src/components/SdwanView.vue b/frontend/src/components/SdwanView.vue
index d612e58..72cb32c 100644
--- a/frontend/src/components/SdwanView.vue
+++ b/frontend/src/components/SdwanView.vue
@@ -1,10 +1,6 @@
 <template>
   <a-layout-header :style="{ background: '#fff', padding: 0 }">
-    <a-page-header
-      style="border: 1px solid rgb(235, 237, 240)"
-      title="SD-WAN"
-      sub-title="software-defined wide area network"
-    />
+    <a-page-header title="SD-WAN" sub-title="software-defined wide area network" />
   </a-layout-header>
   <a-layout-content :style="{ margin: '24px 16px 0' }">
     <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">content</div>
diff --git a/frontend/src/components/SettingView.vue b/frontend/src/components/SettingView.vue
index 0dfd4a7..336e1e5 100644
--- a/frontend/src/components/SettingView.vue
+++ b/frontend/src/components/SettingView.vue
@@ -1,13 +1,9 @@
 <template>
   <a-layout-header :style="{ background: '#fff', padding: 0 }">
-    <a-page-header
-      style="border: 1px solid rgb(235, 237, 240)"
-      title="Setting"
-      sub-title="system configuration"
-    />
+    <a-page-header title="Setting" sub-title="system configuration" />
   </a-layout-header>
   <a-layout-content :style="{ margin: '24px 16px 0' }">
-    <div :style="{ padding: '40px', background: '#fff' }">
+    <div :style="{ padding: '24px', background: '#fff' }">
       <a-form :label-col="{ style: { width: '150px' } }">
         <a-form-item label="Registration Allowed">
           <a-switch v-model:checked="openRegister" @change="setOpenRegisterConfig" />
diff --git a/frontend/src/components/UserInfoView.vue b/frontend/src/components/UserInfoView.vue
index ed5df64..75a4e2f 100644
--- a/frontend/src/components/UserInfoView.vue
+++ b/frontend/src/components/UserInfoView.vue
@@ -1,10 +1,6 @@
 <template>
   <a-layout-header :style="{ background: '#fff', padding: 0 }">
-    <a-page-header
-      style="border: 1px solid rgb(235, 237, 240)"
-      title="User"
-      sub-title="user information"
-    />
+    <a-page-header title="User" sub-title="user information" />
   </a-layout-header>
   <a-layout-content :style="{ margin: '24px 16px 0' }">
     <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">content</div>
diff --git a/frontend/src/components/UserManagementView.vue b/frontend/src/components/UserManagementView.vue
index 3813a19..7cd0193 100644
--- a/frontend/src/components/UserManagementView.vue
+++ b/frontend/src/components/UserManagementView.vue
@@ -1,12 +1,63 @@
 <template>
   <a-layout-header :style="{ background: '#fff', padding: 0 }">
-    <a-page-header
-      style="border: 1px solid rgb(235, 237, 240)"
-      title="User"
-      sub-title="user management"
-    />
+    <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', minHeight: '360px' }">content</div>
+    <div
+      :style="{
+        padding: '24px',
+        background: '#fff',
+        margin: '0px 0px 24px 0px'
+      }"
+    >
+      <a-form layout="inline" :model="addUserState" @finish="handleFinish">
+        <a-form-item>
+          <a-input v-model:value="addUserState.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">
+            <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 === ''"
+          >
+            Create
+          </a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+    <div :style="{ padding: '24px', background: '#fff' }">content</div>
   </a-layout-content>
 </template>
+
+<script setup>
+import axios from 'axios'
+import { reactive } from 'vue'
+
+const addUserState = reactive({
+  username: '',
+  password: ''
+})
+
+const adminAddUser = async (username, password) => {
+  const response = await axios.post('/api/admin/addUser', {
+    username: username,
+    password: password
+  })
+
+  const status = response.data.status
+  if (status == 0) {
+    // TODO: refresh user list
+  }
+}
+
+const handleFinish = () => {
+  adminAddUser(addUserState.username, addUserState.password)
+}
+</script>
diff --git a/frontend/src/components/UserView.vue b/frontend/src/components/UserView.vue
index d035b5f..572b2f8 100644
--- a/frontend/src/components/UserView.vue
+++ b/frontend/src/components/UserView.vue
@@ -57,16 +57,4 @@ const showSdwan = () => {
   margin: 16px;
   text-align: center;
 }
-
-.site-layout-sub-header-background {
-  background: #fff;
-}
-
-.site-layout-background {
-  background: #fff;
-}
-
-[data-theme='dark'] .site-layout-sub-header-background {
-  background: #141414;
-}
 </style>