Merge pull request #67 from jumpserver/profile

Profile

src/i18n/langs/cn.json

@@ -197,7 +197,9 @@
     },
     "updateErrorMsg": "更新失败",
     "updateSelected": "更新所选",
-    "updateSuccessMsg": "更新成功"
+    "updateSuccessMsg": "更新成功",
+    "Disable": "禁用",
+    "Enable": "启用"
   },
   "dashboard": {
     "ActiveAsset": "近期被登录过",

src/layout/components/NavHeader/AccountDropdown.vue

@@ -54,7 +54,7 @@ export default {
     handleClick(val) {
       switch (val) {
         case 'profile':
-          this.$router.push({ name: 'userProfile' })
+          this.$router.push({ name: 'UserProfile' })
           break
         case 'AdminPage':
           setPermission('Admin')

src/router/index.js

@@ -65,8 +65,8 @@ export const commonRoutes = {
     children: [
       {
         path: '',
-        name: 'userProfile',
-        component: () => import('@/userviews/users/index'),
+        name: 'UserProfile',
+        component: () => import('@/userviews/users/UserProfile/index'),
         meta: { title: i18n.t('route.UserProfile'), icon: 'user', activeMenu: '/users/profile' }
       }
     ]

src/userviews/users/UserProfile/PasswordUpdate.vue

@@ -0,0 +1,65 @@
+<template>
+  <IBox>
+    <GenericCreateUpdateForm
+      :fields="fields"
+      :fields-meta="fieldsMeta"
+      :initial="object"
+      :url="url"
+      :get-method="getMethod"
+    />
+  </IBox>
+</template>
+
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import { IBox } from '@/components'
+
+export default {
+  name: 'PasswordUpdate',
+  components: {
+    GenericCreateUpdateForm,
+    IBox
+  },
+  props: {
+    object: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      url: '/api/v1/users/profile/password/',
+      fields: ['old_password', 'new_password', 'new_password_again'],
+      fieldsMeta: {
+        old_password: {
+          label: '原密码',
+          el: {
+            type: 'password'
+          }
+        },
+        new_password: {
+          label: '新密码',
+          el: {
+            type: 'password'
+          }
+        },
+        new_password_again: {
+          label: '确认密码',
+          el: {
+            type: 'password'
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    getMethod() {
+      return 'put'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/userviews/users/UserProfile/ProfileInfo.vue

@@ -14,7 +14,7 @@ import DetailCard from '@/components/DetailCard'
 import QuickActions from '@/components/QuickActions'
 import { toSafeLocalDateStr } from '@/utils/common'
 export default {
-  name: 'UserProfile',
+  name: 'ProfileInfo',
   components: {
     DetailCard,
     QuickActions
@@ -27,47 +27,37 @@ export default {
   },
   data() {
     return {
+      url: `/api/v1/users/profile/`,
       quickActions: [
         {
           title: this.$t('assets.SetMFA'),
           attrs: {
             type: 'primary',
-            label: this.$t('common.Reset')
+            label: this.object.mfa_enabled ? this.$t('common.Disable') : this.$t('common.Enable'),
+            disabled: this.object.mfa_force_enabled
           },
           callbacks: {
-            click: function() {}
+            click: function() {
+              if (this.object.mfa_enabled) {
+                if (!this.object.mfa_force_enabled) {
+                  window.location.href = `/users/profile/otp/disable/authentication/?next=${this.$route.fullPath}`
+                }
+              } else {
+                window.location.href = `/users/profile/otp/enable/start/?next=${this.$route.fullPath}`
+              }
+            }.bind(this)
           }
         },
         {
           title: this.$t('assets.UpdateMFA'),
-          attrs: {
-            type: 'primary',
-            label: this.$t('common.Reset')
-          },
-          callbacks: {
-            click: function() {}
-          }
-        },
-        {
-          title: this.$t('assets.UpdatePassword'),
           attrs: {
             type: 'primary',
             label: this.$t('common.Update')
           },
           callbacks: {
             click: function() {
-
-            }
-          }
-        },
-        {
-          title: this.$t('assets.UpdateSSHPublicKey'),
-          attrs: {
-            type: 'primary',
-            label: this.$t('common.Update')
-          },
-          callbacks: {
-            click: function() {}
+              window.location.href = `/users/profile/otp/update/?next=${this.$route.fullPath}`
+            }.bind(this)
           }
         },
         {
@@ -77,7 +67,9 @@ export default {
             label: this.$t('common.Reset')
           },
           callbacks: {
-            click: function() {}
+            click: function() {
+              window.open(`/users/profile/pubkey/generate/`, '_blank')
+            }
           }
         }
       ]
@@ -107,8 +99,8 @@ export default {
           key: this.$t('assets.IsActive')
         },
         {
-          value: `没有这个API`,
-          key: this.$t('assets.sshkey')
+          value: `${this.object.public_key_comment} ${this.object.public_key_hash_md5}`,
+          key: 'SSHKey'
         },
         {
           value: this.object.mfa_level_display,

src/userviews/users/UserProfile/ProfileUpdate.vue

@@ -0,0 +1,59 @@
+<template>
+  <IBox>
+    <GenericCreateUpdateForm
+      :fields="fields"
+      :fields-meta="fieldsMeta"
+      :initial="object"
+      :url="url"
+      :get-method="getMethod"
+    />
+  </IBox>
+</template>
+
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import { IBox } from '@/components'
+
+export default {
+  name: 'ProfileUpdate',
+  components: {
+    GenericCreateUpdateForm,
+    IBox
+  },
+  props: {
+    object: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      url: `/api/v1/users/profile/`,
+      fields: [
+        [this.$t('users.Account'), ['username', 'name', 'email']],
+        [this.$t('common.Other'), ['phone', 'wechat']]
+      ],
+      fieldsMeta: {
+        username: {
+          disabled: true
+        },
+        name: {
+          disabled: true
+        },
+        email: {
+          disabled: true
+        }
+      }
+    }
+  },
+  methods: {
+    getMethod() {
+      return 'put'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/userviews/users/UserProfile/SSHUpdate.vue

@@ -0,0 +1,74 @@
+<template>
+  <IBox>
+    <GenericCreateUpdateForm
+      :fields="fields"
+      :fields-meta="fieldsMeta"
+      :initial="object"
+      :url="url"
+      :get-method="getMethod"
+      :more-buttons="moreButtons"
+    />
+  </IBox>
+</template>
+
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import { IBox } from '@/components'
+
+export default {
+  name: 'SSHUpdate',
+  components: {
+    GenericCreateUpdateForm,
+    IBox
+  },
+  props: {
+    object: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      url: '/api/v1/users/profile/public-key/',
+      fields: [
+        ['原来SSH公钥', ['public_key_comment', 'public_key_hash_md5']],
+        ['更新SSH公钥', ['public_key']]
+      ],
+      fieldsMeta: {
+        public_key_comment: {
+          label: '名称',
+          disabled: true
+        },
+        public_key_hash_md5: {
+          label: '指纹',
+          disabled: true
+        },
+        public_key: {
+          el: {
+            type: 'textarea',
+            placeholder: 'ssh-rsa AAAA...'
+          },
+          helpText: '复制你的公钥到这里'
+        }
+      },
+      moreButtons: [
+        {
+          title: '重置并下载密钥',
+          callback: function() {
+            window.open(`/users/profile/pubkey/generate/`, '_blank')
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    getMethod() {
+      return 'put'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/userviews/users/UserProfile/index.vue

@@ -8,22 +8,41 @@
 
 <script>
 import { GenericDetailPage } from '@/layout/components'
-import UserProfile from './UserProfile.vue'
+import ProfileInfo from './ProfileInfo'
+import ProfileUpdate from './ProfileUpdate'
+import PasswordUpdate from './PasswordUpdate'
+import SSHUpdate from './SSHUpdate'
+
 export default {
-  name: 'AssetListDetail',
   components: {
     GenericDetailPage,
-    UserProfile
+    ProfileInfo,
+    ProfileUpdate,
+    PasswordUpdate,
+    SSHUpdate
   },
   data() {
     return {
       user: {},
       config: {
         title: this.$t('common.nav.Profile'),
+        activeMenu: 'ProfileInfo',
         submenu: [
           {
             title: this.$t('common.BasicInfo'),
-            name: 'UserProfile'
+            name: 'ProfileInfo'
+          },
+          {
+            title: '个人信息设置',
+            name: 'ProfileUpdate'
+          },
+          {
+            title: '登录密码设置',
+            name: 'PasswordUpdate'
+          },
+          {
+            title: 'SSH公钥设置',
+            name: 'SSHUpdate'
           }
         ],
         hasRightSide: false

vue.config.js

@@ -47,7 +47,7 @@ module.exports = {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       },
-      '^/(auth|static)': {
+      '^/(auth|static|dsers/profile/op/|users/profile/pubkey/generate/)': {
         target: `http://localhost:8080`,
         changeOrigin: true
       }