feat: add admin add user ui

frontend/src/LoginView.vue

@@ -1,22 +1,22 @@
 <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>
         </a-input>
       </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>
 

frontend/src/RegisterView.vue

@@ -1,22 +1,22 @@
 <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>
         </a-input>
       </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>
 

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>

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>

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>

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>

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" />

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>

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>

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>