update settings (#42)

src/api/settings.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getSettings() {
+  return request({
+    url: `/api/v1/settings/setting/`,
+    method: 'get'
+  })
+}

src/i18n/langs/cn.js

@@ -521,7 +521,90 @@ const cn = {
   },
   setting: {
     'setting': '系统设置',
-    'basicsetting': '基本设置'
+    'Basic': '基本设置',
+    'Email': '邮件设置',
+    'EmailContent': '邮件内容设置',
+    'Ldap': 'LDAP设置',
+    'Terminal': '终端设置',
+    'Security': '安全设置',
+    'createUserSetting': '创建用户设置',
+    'basicSetting': '基本设置',
+    'SecuritySetting': '安全设置',
+    'PasswordCheckRule': '密码校验规则',
+    'siteUrl': '当前站点URL',
+    'userGuideUrl': '用户向导URL',
+    'emailSubjectPrefix': 'Email主题前缀',
+    'emailHost': 'SMTP主机',
+    'emailPort': 'SMTP端口',
+    'emailHostUser': 'SMTP账号',
+    'emailHostPassword': 'SMTP密码',
+    'emailEmailFrom': '发送账号',
+    'emailRecipient': '测试收件人',
+    'emailUserSSL': '使用SSL',
+    'emailUserTLS': '使用TLS',
+    'emailCustomUserCreatedSubject': '创建用户邮件的主题',
+    'emailCustomUserCreatedHonorific': '创建用户邮件的敬语',
+    'emailCustomUserCreatedBody': '创建用户邮件的内容',
+    'emailCustomUserCreatedSignature': '署名',
+    'authLdapServerUri': 'LDAP地址',
+    'authLdapBindDn': '绑定DN',
+    'authLdapBindPassword': '密码',
+    'authLdapSearchOu': '用户OU',
+    'authLdapSearchFilter': '用户过滤器',
+    'authLdapUserAttrMap': 'LDAP属性映射',
+    'authLdap': '启用LDAP认证',
+    'terminalPasswordAuth': '密码认证',
+    'terminalPublicKeyAuth': '密钥认证',
+    'terminalHeartbeatInterval': '心跳间隔',
+    'terminalAssetListSortBy': '资产列表排序',
+    'terminalAssetListPageSize': '资产分页每页数量',
+    'terminalSessionKeepDuration': '会话保留时长',
+    'terminalTelnetRegex': 'Telnet 成功正则表达式',
+    'securityMfaAuth': '多因子认证',
+    'securityCommandExecution': '批量命令',
+    'securityServiceAccountRegistration': '终端注册',
+    'securityLoginLimitCount': '限制登录失败次数',
+    'securityLoginLimitTime': '禁止登录时间间隔',
+    'securityMaxIdleTime': '连接最大空闲时间',
+    'securityPasswordExpirationTime': '密码过期时间',
+    'securityPasswordMinLength': '密码最小长度',
+    'securityPasswordUpperCase': '必须包含大写字母',
+    'securityPasswordLowerCase': '必须包含小写字母',
+    'securityPasswordNumber': '必须包含数字字符',
+    'securityPasswordSpecialChar': '必须包含特殊字符',
+    'Hostname': '主机名'
+  },
+  helpText: {
+    'siteUrl': 'eg: http://jumpserver.abc.com:8080',
+    'userGuideUrl': '用户第一次登录，修改profile后重定向到地址',
+    'emailSubjectPrefix': '提示: 一些关键字可能会被邮件提供商拦截，如 跳板机、JumpServer',
+    'emailHostPassword': '提示：一些邮件提供商需要输入的是Token',
+    'emailEmailFrom': '提示：发送邮件账号，默认使用SMTP账号作为发送账号',
+    'emailRecipient': '提示：仅用来作为测试邮件收件人',
+    'emailCustomUserCreatedSubject': '提示: 创建用户时，发送设置密码邮件的主题 (例如: 创建用户成功)',
+    'emailCustomUserCreatedHonorific': '提示: 创建用户时，发送设置密码邮件的敬语 (例如: 您好)',
+    'emailCustomUserCreatedBody': '提示: 创建用户时，发送设置密码邮件的内容',
+    'emailCustomUserCreatedSignature': '提示: 邮件的署名 (例如: jumpserver)',
+    'authLdapSearchOu': '使用|分隔各OU',
+    'authLdapSearchFilter': '可能的选项是(cn或uid或sAMAccountName=%(user)s)',
+    'authLdapUserAttrMap': '用户属性映射代表怎样将LDAP中用户属性映射到jumpserver用户上，username, name,email 是jumpserver的属性',
+    'terminalHeartbeatInterval': '单位: 秒',
+    'terminalSessionKeepDuration': '单位：天。 会话、录像、命令记录超过该时长将会被删除(仅影响数据库存储, oss等不受影响)',
+    'terminalTelnetRegex': '登录telnet服务器成功后的提示正则表达式，如: Last\\s*login|success|成功',
+    'securityLoginLimitTime': '提示：（单位：分）当用户登录失败次数达到限制后，那么在此时间间隔内禁止登录',
+    'securityMaxIdleTime': '提示：如果超过该配置没有操作，连接会被断开 （单位：分）',
+    'securityPasswordExpirationTime': '提示：（单位：天）如果用户在此期间没有更新密码，用户密码将过期失效； 密码过期提醒邮件将在密码过期前5天内由系统（每天）自动发送给用户'
+  },
+  helpTip: {
+    'emailUserSSL': '如果SMTP端口是465，通常需要启用SSL',
+    'emailUserTLS': '如果SMTP端口是587，通常需要启用TLS',
+    'securityMfaAuth': '开启后，所有用户登录必须使用多因子认证（对所有用户有效，包括管理员)',
+    'securityCommandExecution': '允许用户批量执行命令',
+    'securityServiceAccountRegistration': '允许使用bootstrap token注册终端, 当终端注册成功后可以禁止',
+    'securityPasswordUpperCase': '开启后，用户密码修改、重置必须包含大写字母',
+    'securityPasswordLowerCase': '开启后，用户密码修改、重置必须包含小写字母',
+    'securityPasswordNumber': '开启后，用户密码修改、重置必须包含数字字符',
+    'securityPasswordSpecialChar': '开启后，用户密码修改、重置必须包含特殊字符'
   },
   ...zhLocale
 }

src/i18n/langs/en.js

@@ -333,7 +333,92 @@ const en = {
   },
   setting: {
     'setting': 'System Setting',
-    'basicsetting': 'Basic Setting'
+    'Basic': 'Basic setting',
+    'Email': 'Email setting',
+    'EmailContent': 'Email content setting',
+    'Ldap': 'LDAP setting',
+    'Terminal': 'Terminal setting',
+    'Security': 'Security setting',
+    'createUserSetting': 'Create User setting',
+    'basicSetting': 'Basic setting',
+    'SecuritySetting': 'Security setting',
+    'PasswordCheckRule': 'Password check rule',
+    'siteUrl': 'Current SITE URL',
+    'userGuideUrl': 'User Guide URL',
+    'emailSubjectPrefix': 'Email Subject Prefix',
+    'emailHost': 'SMTP host',
+    'emailPort': 'SMTP port',
+    'emailHostUser': 'SMTP user',
+    'emailHostPassword': 'SMTP password',
+    'emailEmailFrom': 'Send user',
+    'emailRecipient': 'Test recipient',
+    'emailUserSSL': 'Use SSL',
+    'emailUserTLS': 'Use TLS',
+    'emailCustomUserCreatedSubject': 'Create user email subject',
+    'emailCustomUserCreatedHonorific': 'Create user honorific',
+    'emailCustomUserCreatedBody': 'Create user email content',
+    'emailCustomUserCreatedSignature': 'Signature',
+    'authLdapServerUri': 'LDAP server',
+    'authLdapBindDn': 'Bind DN',
+    'authLdapBindPassword': 'Password',
+    'authLdapSearchOu': 'User OU',
+    'authLdapSearchFilter': 'User search filter',
+    'authLdapUserAttrMap': 'User attr map',
+    'authLdap': 'Enable LDAP auth',
+    'terminalPasswordAuth': 'Password auth',
+    'terminalPublicKeyAuth': 'Public key auth',
+    'terminalHeartbeatInterval': 'Heartbeat interval',
+    'terminalAssetListSortBy': 'List sort by',
+    'terminalAssetListPageSize': 'List page size',
+    'terminalSessionKeepDuration': 'Session keep duration',
+    'terminalTelnetRegex': 'Telnet login regex',
+    'securityMfaAuth': 'MFA',
+    'securityCommandExecution': 'Batch execute commands',
+    'securityServiceAccountRegistration': 'Service account registration',
+    'securityLoginLimitCount': 'Limit the number of login failures',
+    'securityLoginLimitTime': 'No logon interval',
+    'securityMaxIdleTime': 'Connection max idle time',
+    'securityPasswordExpirationTime': 'Password expiration time',
+    'securityPasswordMinLength': 'Password minimum length',
+    'securityPasswordUpperCase': 'Must contain capital letters',
+    'securityPasswordLowerCase': 'Must contain lowercase letters',
+    'securityPasswordNumber': 'Must contain numeric characters',
+    'securityPasswordSpecialChar': 'Must contain special characters',
+    'Hostname': 'Hostname'
+  },
+  helpText: {
+    'siteUrl': 'eg: http://jumpserver.abc.com:8080',
+    'userGuideUrl': 'User first login update profile done redirect to it',
+    'emailSubjectPrefix': 'Tips: Some word will be intercept by mail provider',
+    'emailHostPassword': 'Tips: Some provider use token except password',
+    'emailEmailFrom': 'Tips: Send mail account, default SMTP account as the send account',
+    'emailRecipient': 'Tips: Used only as a test mail recipient',
+    'emailCustomUserCreatedSubject': 'Tips: When creating a user, send the subject of the email (eg:Create account successfully)',
+    'emailCustomUserCreatedHonorific': 'Tips: When creating a user, send the honorific of the email (eg:Hello)',
+    'emailCustomUserCreatedBody': 'Tips:When creating a user, send the content of the email',
+    'emailCustomUserCreatedSignature': 'Tips: Email signature (eg:jumpserver)',
+    'authLdapSearchOu': 'Use | split User OUs',
+    'authLdapSearchFilter': 'Choice may be (cn|uid|sAMAccountName)=%(user)s)',
+    'authLdapUserAttrMap': 'User attr map present how to map LDAP user attr to jumpserver, username,name,email is jumpserver attr',
+    'terminalHeartbeatInterval': 'Units: seconds',
+    'terminalSessionKeepDuration': 'Units: days, Session, record, command will be delete if more than duration, only in database',
+    'terminalTelnetRegex': 'ex: Last\\s*login|success|成功',
+    'securityLoginLimitTime': 'Tip: (unit/minute) if the user has failed to log in for a limited number of times, no login is allowed during this time interval.',
+    'securityMaxIdleTime': 'If idle time more than it, disconnect connection Unit: minute',
+    'securityPasswordExpirationTime': 'Tip: (unit: day) If the user does not update the password during the time, ' +
+        'the user password will expire failure;The password expiration reminder' +
+        ' mail will be automatic sent to the user by system within 5 days (daily) before the password expires'
+  },
+  helpTip: {
+    'emailUserSSL': 'If SMTP port is 465, may be select',
+    'emailUserTLS': 'If SMTP port is 587, may be select',
+    'securityMfaAuth': 'After opening, all user login must use MFA(valid for all users, including administrators)',
+    'securityCommandExecution': 'Allow user batch execute commands',
+    'securityServiceAccountRegistration': 'Allow using bootstrap token register service account, when terminal setup, can disable it',
+    'securityPasswordUpperCase': '开启后，用户密码修改、重置必须包含大写字母',
+    'securityPasswordLowerCase': '开启后，用户密码修改、重置必须包含小写字母',
+    'securityPasswordNumber': '开启后，用户密码修改、重置必须包含数字字符',
+    'securityPasswordSpecialChar': '开启后，用户密码修改、重置必须包含特殊字符'
   },
   ...enLocale
 }

src/router/index.js

@@ -131,7 +131,7 @@ export const constantRoutes = [
     children: [{
       path: 'settings',
       name: 'Settings',
-      component: () => import('@/views/tree/index'),
+      component: () => import('@/views/settings/index'),
       meta: { title: 'Settings', icon: 'gears' }
     }]
   }

src/views/settings/Basic.vue

@@ -0,0 +1,72 @@
+<template>
+  <GenericCreateUpdateForm
+    :fields="selectFields"
+    :url="url"
+    :initial="object"
+    :update-success-next-route="successUrl"
+    :create-success-next-route="successUrl"
+    :clean-form-value="cleanFormValue"
+    :object="object"
+    :fields-meta="fieldsMeta"
+    :get-method="getMethod"
+  />
+
+</template>
+
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+
+export default {
+  name: 'Basic',
+  components: {
+    GenericCreateUpdateForm
+  },
+  props: {
+    object: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectFields: ['SITE_URL', 'USER_GUIDE_URL', 'EMAIL_SUBJECT_PREFIX'],
+      successUrl: { name: 'Settings', params: { activeMenu: 'Basic' }},
+      fieldsMeta: {
+        SITE_URL: {
+          label: this.$t('setting.siteUrl'),
+          rules: [
+            { required: true }
+          ],
+          helpText: this.$t('helpText.siteUrl')
+        },
+        USER_GUIDE_URL: {
+          label: this.$t('setting.userGuideUrl'),
+          helpText: this.$t('helpText.userGuideUrl')
+        },
+        EMAIL_SUBJECT_PREFIX: {
+          label: this.$t('setting.emailSubjectPrefix'),
+          rules: [
+            { required: true }
+          ],
+          helpText: this.$t('helpText.emailSubjectPrefix')
+        }
+      },
+      url: '/api/v1/settings/setting/'
+    }
+  },
+  methods: {
+    cleanFormValue(data) {
+      return {
+        basic: data
+      }
+    },
+    getMethod() {
+      return 'put'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Email.vue

@@ -0,0 +1,94 @@
+<template>
+  <GenericCreateUpdateForm
+    :fields="selectFields"
+    :url="url"
+    :initial="object"
+    :update-success-next-route="successUrl"
+    :clean-form-value="cleanFormValue"
+    :object="object"
+    :fields-meta="fieldsMeta"
+    :get-method="getMethod"
+  />
+</template>
+
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+
+export default {
+  name: 'Email',
+  components: {
+    GenericCreateUpdateForm
+  },
+  props: {
+    object: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectFields: ['EMAIL_HOST', 'EMAIL_PORT', 'EMAIL_HOST_USER', 'EMAIL_HOST_PASSWORD',
+        'EMAIL_FROM', 'EMAIL_RECIPIENT', 'EMAIL_USE_SSL', 'EMAIL_USE_TLS'],
+      successUrl: { name: 'Settings', params: { activeMenu: 'Email' }},
+      fieldsMeta: {
+        EMAIL_HOST: {
+          label: this.$t('setting.emailHost'),
+          rules: [
+            { required: true }
+          ]
+        },
+        EMAIL_PORT: {
+          label: this.$t('setting.emailPort'),
+          rules: [
+            { required: true }
+          ]
+        },
+        EMAIL_HOST_USER: {
+          label: this.$t('setting.emailHostUser'),
+          rules: [
+            { required: true }
+          ]
+        },
+        EMAIL_HOST_PASSWORD: {
+          label: this.$t('setting.emailHostPassword'),
+          helpText: this.$t('helpText.emailHostPassword')
+        },
+        EMAIL_FROM: {
+          label: this.$t('setting.emailEmailFrom'),
+          helpText: this.$t('helpText.emailEmailFrom')
+        },
+        EMAIL_RECIPIENT: {
+          label: this.$t('setting.emailRecipient'),
+          helpText: this.$t('helpText.emailRecipient')
+        },
+        EMAIL_USE_SSL: {
+          label: this.$t('setting.emailUserSSL'),
+          type: 'checkbox',
+          helpTips: this.$t('helpTip.emailUserSSL')
+        },
+        EMAIL_USE_TLS: {
+          label: this.$t('setting.emailUserTLS'),
+          type: 'checkbox',
+          helpTips: this.$t('helpTip.emailUserTLS')
+        }
+      },
+      url: '/api/v1/settings/setting/'
+    }
+  },
+  methods: {
+    cleanFormValue(data) {
+      return {
+        email: data
+      }
+    },
+    getMethod() {
+      return 'put'
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/EmailContent.vue

@@ -0,0 +1,74 @@
+<template>
+  <GenericCreateUpdateForm
+    :fields="selectFields"
+    :url="url"
+    :initial="object"
+    :update-success-next-route="successUrl"
+    :clean-form-value="cleanFormValue"
+    :object="object"
+    :fields-meta="fieldsMeta"
+    :get-method="getMethod"
+  />
+
+</template>
+
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+export default {
+  name: 'EmailContent',
+  components: {
+    GenericCreateUpdateForm
+  },
+  props: {
+    object: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectFields: [
+        [this.$t('setting.createUserSetting'), ['EMAIL_CUSTOM_USER_CREATED_SUBJECT', 'EMAIL_CUSTOM_USER_CREATED_HONORIFIC',
+          'EMAIL_CUSTOM_USER_CREATED_BODY', 'EMAIL_CUSTOM_USER_CREATED_SIGNATURE']]
+      ],
+      successUrl: { name: 'Settings', params: { activeMenu: 'EmailContent' }},
+      fieldsMeta: {
+        EMAIL_CUSTOM_USER_CREATED_SUBJECT: {
+          label: this.$t('setting.emailCustomUserCreatedSubject'),
+          helpText: this.$t('helpText.emailCustomUserCreatedSubject')
+        },
+        EMAIL_CUSTOM_USER_CREATED_HONORIFIC: {
+          label: this.$t('setting.emailCustomUserCreatedHonorific'),
+          helpText: this.$t('helpText.emailCustomUserCreatedHonorific')
+        },
+        EMAIL_CUSTOM_USER_CREATED_BODY: {
+          label: this.$t('setting.emailCustomUserCreatedBody'),
+          el: {
+            type: 'textarea'
+          },
+          helpText: this.$t('helpText.emailCustomUserCreatedBody')
+        },
+        EMAIL_CUSTOM_USER_CREATED_SIGNATURE: {
+          label: this.$t('setting.emailCustomUserCreatedSignature'),
+          helpText: this.$t('helpText.emailCustomUserCreatedSignature')
+        }
+      },
+      url: '/api/v1/settings/setting/'
+    }
+  },
+  methods: {
+    cleanFormValue(data) {
+      return {
+        email_content: data
+      }
+    },
+    getMethod() {
+      return 'put'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Ldap.vue

@@ -0,0 +1,89 @@
+<template>
+  <GenericCreateUpdateForm
+    :fields="selectFields"
+    :url="url"
+    :initial="object"
+    :update-success-next-route="successUrl"
+    :clean-form-value="cleanFormValue"
+    :object="object"
+    :fields-meta="fieldsMeta"
+    :get-method="getMethod"
+  />
+</template>
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+
+export default {
+  name: 'Ldap',
+  components: {
+    GenericCreateUpdateForm
+  },
+  props: {
+    object: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectFields: ['AUTH_LDAP_SERVER_URI', 'AUTH_LDAP_BIND_DN', 'AUTH_LDAP_BIND_PASSWORD', 'AUTH_LDAP_SEARCH_OU',
+        'AUTH_LDAP_SEARCH_FILTER', 'AUTH_LDAP_USER_ATTR_MAP', 'AUTH_LDAP'],
+      successUrl: { name: 'Settings', params: { activeMenu: 'Email' }},
+      fieldsMeta: {
+        AUTH_LDAP_SERVER_URI: {
+          label: this.$t('setting.authLdapServerUri'),
+          rules: [
+            { required: true }
+          ]
+        },
+        AUTH_LDAP_BIND_DN: {
+          label: this.$t('setting.authLdapBindDn')
+        },
+        AUTH_LDAP_BIND_PASSWORD: {
+          label: this.$t('setting.authLdapBindPassword')
+        },
+        AUTH_LDAP_SEARCH_OU: {
+          label: this.$t('setting.authLdapSearchOu'),
+          helpText: this.$t('helpText.authLdapSearchOu')
+        },
+        AUTH_LDAP_SEARCH_FILTER: {
+          label: this.$t('setting.authLdapSearchFilter'),
+          rules: [
+            { required: true }
+          ],
+          helpText: this.$t('helpText.authLdapSearchFilter')
+        },
+        AUTH_LDAP_USER_ATTR_MAP: {
+          label: this.$t('setting.authLdapUserAttrMap'),
+          el: {
+            type: 'textarea'
+          },
+          rules: [
+            { required: true }
+          ],
+          helpText: this.$t('helpText.authLdapUserAttrMap')
+        },
+        AUTH_LDAP: {
+          label: this.$t('setting.authLdap'),
+          type: 'checkbox'
+        }
+      },
+      url: '/api/v1/settings/setting/'
+    }
+  },
+  methods: {
+    cleanFormValue(data) {
+      return {
+        ldap: data
+      }
+    },
+    getMethod() {
+      return 'put'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Security.vue

@@ -0,0 +1,122 @@
+<template>
+  <GenericCreateUpdateForm
+    :fields="selectFields"
+    :url="url"
+    :initial="object"
+    :update-success-next-route="successUrl"
+    :clean-form-value="cleanFormValue"
+    :object="object"
+    :fields-meta="fieldsMeta"
+    :get-method="getMethod"
+  />
+</template>
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+
+export default {
+  name: 'Security',
+  components: {
+    GenericCreateUpdateForm
+  },
+  props: {
+    object: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectFields: [
+        [this.$t('setting.SecuritySetting'), ['SECURITY_MFA_AUTH', 'SECURITY_COMMAND_EXECUTION', 'SECURITY_SERVICE_ACCOUNT_REGISTRATION',
+          'SECURITY_LOGIN_LIMIT_COUNT', 'SECURITY_LOGIN_LIMIT_TIME', 'SECURITY_MAX_IDLE_TIME',
+          'SECURITY_PASSWORD_EXPIRATION_TIME']],
+        [this.$t('setting.PasswordCheckRule'), ['SECURITY_PASSWORD_MIN_LENGTH', 'SECURITY_PASSWORD_UPPER_CASE',
+          'SECURITY_PASSWORD_LOWER_CASE', 'SECURITY_PASSWORD_NUMBER', 'SECURITY_PASSWORD_SPECIAL_CHAR']]
+      ],
+      successUrl: { name: 'Settings', params: { activeMenu: 'Security' }},
+      fieldsMeta: {
+        SECURITY_MFA_AUTH: {
+          label: this.$t('setting.securityMfaAuth'),
+          type: 'checkbox',
+          helpTips: this.$t('helpTip.securityMfaAuth')
+        },
+        SECURITY_COMMAND_EXECUTION: {
+          label: this.$t('setting.securityCommandExecution'),
+          type: 'checkbox',
+          helpTips: this.$t('helpTip.securityCommandExecution')
+        },
+        SECURITY_SERVICE_ACCOUNT_REGISTRATION: {
+          label: this.$t('setting.securityServiceAccountRegistration'),
+          type: 'checkbox',
+          helpTips: this.$t('helpTip.securityServiceAccountRegistration')
+        },
+        SECURITY_LOGIN_LIMIT_COUNT: {
+          label: this.$t('setting.securityLoginLimitCount'),
+          rules: [
+            { required: true }
+          ]
+        },
+        SECURITY_LOGIN_LIMIT_TIME: {
+          label: this.$t('setting.securityLoginLimitTime'),
+          rules: [
+            { required: true }
+          ],
+          helpText: this.$t('helpText.securityLoginLimitTime')
+        },
+        SECURITY_MAX_IDLE_TIME: {
+          label: this.$t('setting.securityMaxIdleTime'),
+          helpText: this.$t('helpText.securityMaxIdleTime')
+        },
+        SECURITY_PASSWORD_EXPIRATION_TIME: {
+          label: this.$t('setting.securityPasswordExpirationTime'),
+          rules: [
+            { required: true }
+          ],
+          helpText: this.$t('helpText.securityPasswordExpirationTime')
+        },
+        SECURITY_PASSWORD_MIN_LENGTH: {
+          label: this.$t('setting.securityPasswordMinLength'),
+          rules: [
+            { required: true }
+          ]
+        },
+        SECURITY_PASSWORD_UPPER_CASE: {
+          label: this.$t('setting.securityPasswordUpperCase'),
+          type: 'checkbox',
+          helpTips: this.$t('helpTip.securityPasswordUpperCase')
+        },
+        SECURITY_PASSWORD_LOWER_CASE: {
+          label: this.$t('setting.securityPasswordLowerCase'),
+          type: 'checkbox',
+          helpTips: this.$t('helpTip.securityPasswordLowerCase')
+        },
+        SECURITY_PASSWORD_NUMBER: {
+          label: this.$t('setting.securityPasswordNumber'),
+          type: 'checkbox',
+          helpTips: this.$t('helpTip.securityPasswordNumber')
+        },
+        SECURITY_PASSWORD_SPECIAL_CHAR: {
+          label: this.$t('setting.securityPasswordSpecialChar'),
+          type: 'checkbox',
+          helpTips: this.$t('helpTip.securityPasswordSpecialChar')
+        }
+      },
+      url: '/api/v1/settings/setting/'
+    }
+  },
+  methods: {
+    cleanFormValue(data) {
+      return {
+        security: data
+      }
+    },
+    getMethod() {
+      return 'put'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Terminal.vue

@@ -0,0 +1,112 @@
+<template>
+  <GenericCreateUpdateForm
+    :fields="selectFields"
+    :url="url"
+    :initial="object"
+    :update-success-next-route="successUrl"
+    :clean-form-value="cleanFormValue"
+    :object="object"
+    :fields-meta="fieldsMeta"
+    :get-method="getMethod"
+  />
+
+</template>
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+export default {
+  name: 'Terminal',
+  components: {
+    GenericCreateUpdateForm
+  },
+  props: {
+    object: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectFields: [
+        [this.$t('setting.basicSetting'), ['TERMINAL_PASSWORD_AUTH', 'TERMINAL_PUBLIC_KEY_AUTH', 'TERMINAL_HEARTBEAT_INTERVAL',
+          'TERMINAL_ASSET_LIST_SORT_BY', 'TERMINAL_ASSET_LIST_PAGE_SIZE', 'TERMINAL_SESSION_KEEP_DURATION',
+          'TERMINAL_TELNET_REGEX']]
+      ],
+      successUrl: { name: 'Settings', params: { activeMenu: 'Terminal' }},
+      fieldsMeta: {
+        TERMINAL_PASSWORD_AUTH: {
+          label: this.$t('setting.terminalPasswordAuth'),
+          type: 'checkbox'
+        },
+        TERMINAL_PUBLIC_KEY_AUTH: {
+          label: this.$t('setting.terminalPublicKeyAuth'),
+          type: 'checkbox'
+        },
+        TERMINAL_HEARTBEAT_INTERVAL: {
+          label: this.$t('setting.terminalHeartbeatInterval'),
+          rules: [
+            { required: true }
+          ],
+          helpText: this.$t('helpText.terminalHeartbeatInterval')
+        },
+        TERMINAL_ASSET_LIST_SORT_BY: {
+          label: this.$t('setting.terminalAssetListSortBy'),
+          type: 'select',
+          options: [
+            { label: this.$t('setting.Hostname'),
+              value: 'hostname'
+            },
+            {
+              label: 'IP',
+              value: 'ip'
+            }
+          ],
+          rules: [
+            { required: true }
+          ]
+        },
+        TERMINAL_ASSET_LIST_PAGE_SIZE: {
+          label: this.$t('setting.terminalAssetListPageSize'),
+          type: 'select',
+          options: [
+            { label: 'All', value: 'all' },
+            { label: 'Auto', value: 'auto' },
+            { label: '10', value: 10 },
+            { label: '15', value: 15 },
+            { label: '25', value: 25 },
+            { label: '50', value: 50 }
+          ],
+          rules: [
+            { required: true }
+          ]
+        },
+        TERMINAL_SESSION_KEEP_DURATION: {
+          label: this.$t('setting.terminalSessionKeepDuration'),
+          rules: [
+            { required: true }
+          ],
+          helpText: this.$t('helpText.terminalSessionKeepDuration')
+        },
+        TERMINAL_TELNET_REGEX: {
+          label: this.$t('setting.terminalTelnetRegex'),
+          helpText: this.$t('helpText.terminalTelnetRegex')
+        }
+      },
+      url: '/api/v1/settings/setting/'
+    }
+  },
+  methods: {
+    cleanFormValue(data) {
+      return {
+        terminal: data
+      }
+    },
+    getMethod() {
+      return 'put'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div v-if="!loading">
+    <TabPage :submenu="submenu" :active-menu.sync="activeMenu">
+      <IBox>
+        <keep-alive>
+          <component :is="activeMenu" :object="componentData" />
+        </keep-alive>
+      </IBox>
+    </TabPage>
+  </div>
+</template>
+
+<script>
+import { TabPage } from '@/layout/components'
+import { AutoDataForm } from '@/components'
+import { IBox } from '@/components'
+import Basic from './Basic'
+import Email from './Email'
+import EmailContent from './EmailContent'
+import Ldap from './Ldap'
+import Terminal from './Terminal'
+import Security from './Security'
+import { getSettings } from '@/api/settings'
+export default {
+  components: {
+    IBox,
+    TabPage,
+    AutoDataForm,
+    Basic,
+    Email,
+    EmailContent,
+    Ldap,
+    Terminal,
+    Security
+  },
+  data() {
+    return {
+      loading: true,
+      activeMenu: 'Basic',
+      settingsData: {},
+      submenu: [
+        {
+          title: this.$t('setting.Basic'),
+          name: 'Basic'
+        },
+        {
+          title: this.$t('setting.Email'),
+          name: 'Email'
+        },
+        {
+          title: this.$t('setting.EmailContent'),
+          name: 'EmailContent'
+        },
+        {
+          title: this.$t('setting.Ldap'),
+          name: 'Ldap'
+        },
+        {
+          title: this.$t('setting.Terminal'),
+          name: 'Terminal'
+        },
+        {
+          title: this.$t('setting.Security'),
+          name: 'Security'
+        }
+      ]
+    }
+  },
+  computed: {
+    Title() {
+      return this.$t('settings.setting')
+    },
+    componentData() {
+      switch (this.activeMenu) {
+        case 'Basic':
+          return this.basicData(this.settingsData)
+        case 'Email':
+          return this.emailData(this.settingsData)
+        case 'EmailContent':
+          return this.emailContentData(this.settingsData)
+        case 'Ldap':
+          return this.ldapData(this.settingsData)
+        case 'Terminal':
+          return this.terminalData(this.settingsData)
+        case 'Security':
+          return this.securityData(this.settingsData)
+      }
+      return this.basicData(this.settingsData)
+    }
+
+  },
+  mounted() {
+    getSettings().then(data => {
+      this.settingsData = data
+      this.initial()
+      this.loading = false
+    })
+  },
+  methods: {
+    initial() {
+      const params = this.$route.params
+      switch (params.activeMenu) {
+        case 'Basic':
+          this.activeMenu = 'Basic'
+          break
+        case 'Email':
+          this.activeMenu = 'Email'
+          break
+        case 'EmailContent':
+          this.activeMenu = 'EmailContent'
+          break
+        case 'Ldap':
+          this.activeMenu = 'Ldap'
+          break
+        case 'Terminal':
+          this.activeMenu = 'Terminal'
+          break
+        case 'Security':
+          this.activeMenu = 'Security'
+          break
+      }
+    },
+    basicData(data) {
+      return data.basic
+    },
+    emailData(data) {
+      return data.email
+    },
+    emailContentData(data) {
+      return data.email_content
+    },
+    ldapData(data) {
+      return data.ldap
+    },
+    terminalData(data) {
+      return data.terminal
+    },
+    securityData(data) {
+      return data.security
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>