系统参数LDAP设置

backend/src/main/java/io/metersphere/commons/constants/ParamConstants.java

@@ -29,6 +29,7 @@ public interface ParamConstants {
 
     enum Classify implements ParamConstants {
         MAIL("smtp"),
+        LDAP("ldap"),
         REGISTRY("registry");
 
         private String value;
@@ -112,4 +113,25 @@ public interface ParamConstants {
             return this.value;
         }
     }
+
+    enum LDAP implements ParamConstants {
+        URL("ldap.url"),
+        DN("ldap.dn"),
+        PASSWORD("ldap.password"),
+        OU("ldap.ou"),
+        FILTER("ldap.filter"),
+        MAPPING("ldap.mapping"),
+        OPEN("ldap.open");
+
+        private String value;
+
+        LDAP(String value) {
+            this.value = value;
+        }
+
+        @Override
+        public String getValue() {
+            return value;
+        }
+    }
 }

backend/src/main/java/io/metersphere/controller/SystemParameterController.java

@@ -2,9 +2,9 @@ package io.metersphere.controller;
 
 import io.metersphere.base.domain.SystemParameter;
 import io.metersphere.commons.constants.ParamConstants;
+import io.metersphere.ldap.domain.LdapInfo;
 import io.metersphere.service.SystemParameterService;
 import org.springframework.web.bind.annotation.*;
-
 import javax.annotation.Resource;
 import java.util.HashMap;
 import java.util.List;
@@ -35,4 +35,14 @@ public class SystemParameterController {
         return SystemParameterService.mailInfo(ParamConstants.Classify.MAIL.getValue());
     }
 
+    @PostMapping("/save/ldap")
+    public void saveLdap(@RequestBody List<SystemParameter> systemParameter) {
+        SystemParameterService.saveLdap(systemParameter);
+    }
+
+    @GetMapping("/ldap/info")
+    public LdapInfo getLdapInfo() {
+        return SystemParameterService.getLdapInfo(ParamConstants.Classify.LDAP.getValue());
+    }
+
 }

backend/src/main/java/io/metersphere/ldap/domain/LdapInfo.java

+package io.metersphere.ldap.domain;
+
+import lombok.Data;
+
+@Data
+public class LdapInfo {
+
+    private String url;
+    private String dn;
+    private String password;
+    private String ou;
+    private String filter;
+    private String mapping;
+    private String open;
+
+}

backend/src/main/java/io/metersphere/service/SystemParameterService.java

@@ -7,12 +7,13 @@ import io.metersphere.commons.constants.ParamConstants;
 import io.metersphere.commons.exception.MSException;
 import io.metersphere.commons.utils.EncryptUtils;
 import io.metersphere.i18n.Translator;
+import io.metersphere.ldap.LdapService;
+import io.metersphere.ldap.domain.LdapInfo;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.BooleanUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.mail.javamail.JavaMailSenderImpl;
 import org.springframework.stereotype.Service;
-
 import javax.annotation.Resource;
 import javax.mail.MessagingException;
 import java.util.*;
@@ -112,4 +113,47 @@ public class SystemParameterService {
         paramList.sort(Comparator.comparingInt(SystemParameter::getSort));
         return paramList;
     }
+
+    public void saveLdap(List<SystemParameter> parameters) {
+        SystemParameterExample example = new SystemParameterExample();
+        parameters.forEach(param -> {
+            if (param.getParamKey().equals(ParamConstants.LDAP.PASSWORD.getValue())) {
+                String string = EncryptUtils.aesEncrypt(param.getParamValue()).toString();
+                param.setParamValue(string);
+            }
+            example.createCriteria().andParamKeyEqualTo(param.getParamKey());
+            if (systemParameterMapper.countByExample(example) > 0) {
+                systemParameterMapper.updateByPrimaryKey(param);
+            } else {
+                systemParameterMapper.insert(param);
+            }
+            example.clear();
+        });
+    }
+
+    public LdapInfo getLdapInfo(String type) {
+        List<SystemParameter> params = getParamList(type);
+        LdapInfo ldap = new LdapInfo();
+        if (!CollectionUtils.isEmpty(params)) {
+            for (SystemParameter param : params) {
+                if (StringUtils.equals(param.getParamKey(), ParamConstants.LDAP.URL.getValue())) {
+                    ldap.setUrl(param.getParamValue());
+                } else if (StringUtils.equals(param.getParamKey(), ParamConstants.LDAP.DN.getValue())) {
+                    ldap.setDn(param.getParamValue());
+                } else if (StringUtils.equals(param.getParamKey(), ParamConstants.LDAP.PASSWORD.getValue())) {
+                    String password = EncryptUtils.aesDecrypt(param.getParamValue()).toString();
+                    ldap.setPassword(password);
+                } else if (StringUtils.equals(param.getParamKey(), ParamConstants.LDAP.OU.getValue())) {
+                    ldap.setOu(param.getParamValue());
+                } else if (StringUtils.equals(param.getParamKey(), ParamConstants.LDAP.FILTER.getValue())) {
+                    ldap.setFilter(param.getParamValue());
+                } else if (StringUtils.equals(param.getParamKey(), ParamConstants.LDAP.MAPPING.getValue())) {
+                    ldap.setMapping(param.getParamValue());
+                } else if (StringUtils.equals(param.getParamKey(), ParamConstants.LDAP.OPEN.getValue())) {
+                    ldap.setOpen(param.getParamValue());
+                }
+            }
+        }
+        return ldap;
+    }
 }

frontend/src/business/components/settings/system/EmailSetting.vue

+<template>
+  <div>
+    <el-card class="box-card" v-loading="result.loading">
+      <!--邮件表单-->
+      <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline"
+               :disabled="show" v-loading="loading">
+        <el-row>
+          <el-col>
+            <el-form-item :label="$t('system_parameter_setting.SMTP_host')" prop="host">
+            </el-form-item>
+            <el-input v-model="formInline.host" :placeholder="$t('system_parameter_setting.SMTP_host')"
+                      v-on:input="change()"></el-input>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item :label="$t('system_parameter_setting.SMTP_port')" prop="port">
+            </el-form-item>
+            <el-input v-model="formInline.port" :placeholder="$t('system_parameter_setting.SMTP_port')"
+                      v-on:input="change()"></el-input>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item :label="$t('system_parameter_setting.SMTP_account')" prop="account">
+            </el-form-item>
+            <el-input v-model="formInline.account" :placeholder="$t('system_parameter_setting.SMTP_account')"
+                      v-on:input="change()"></el-input>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-form-item :label="$t('system_parameter_setting.SMTP_password')" prop="password">
+            </el-form-item>
+            <el-input v-model="formInline.password" :placeholder="$t('system_parameter_setting.SMTP_password')"
+                      autocomplete="new-password" show-password type="text" @focus="changeType" ref="input">
+            </el-input>
+          </el-col>
+        </el-row>
+
+        <!---->
+        <div style="border: 0px;margin-bottom: 20px;margin-top: 20px">
+          <el-checkbox v-model="formInline.SSL" :label="$t('system_parameter_setting.SSL')"></el-checkbox>
+        </div>
+        <div style="border: 0px;margin-bottom: 20px">
+          <el-checkbox v-model="formInline.TLS" :label="$t('system_parameter_setting.TLS')"></el-checkbox>
+        </div>
+        <div style="border: 0px;margin-bottom: 20px">
+          <el-checkbox v-model="formInline.SMTP" :label="$t('system_parameter_setting.SMTP')"></el-checkbox>
+        </div>
+        <template v-slot:footer>
+        </template>
+      </el-form>
+      <div style="margin-left: 640px">
+        <el-button type="primary" @click="testConnection('formInline')" :disabled="disabledConnection">
+          {{$t('system_parameter_setting.test_connection')}}
+        </el-button>
+        <el-button @click="edit" v-if="showEdit">{{$t('commons.edit')}}</el-button>
+        <el-button type="success" @click="save('formInline')" v-if="showSave" :disabled="disabledSave">
+          {{$t('commons.save')}}
+        </el-button>
+        <el-button @click="cancel" type="info" v-if="showCancel">{{$t('commons.cancel')}}</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "EmailSetting",
+    data() {
+      return {
+        formInline: {
+          /*host: 'smtp.163.com',
+          port: '465',
+          account: 'xjj0608@163.com',
+          password: '2345678',*/
+        },
+
+        input: '',
+        visible: true,
+        result: {},
+        showEdit: true,
+        showSave: false,
+        showCancel: false,
+        show: true,
+        disabledConnection: false,
+        disabledSave: false,
+        loading: false,
+        rules: {
+          host: [
+            {
+              required: true,
+              message: ''
+            },
+          ],
+          port: [
+            {
+              required: true,
+              message: ' '
+            }
+          ],
+          account: [
+            {
+              required: true,
+              message: ' '
+            }]
+        }
+      }
+    },
+
+    activated() {
+      this.query()
+    },
+    methods: {
+      changeType() {
+        this.$refs.input = 'password'
+      },
+      query() {
+        this.result = this.$get("/system/mail/info", response => {
+          this.$set(this.formInline, "host", response.data[0].paramValue);
+          this.$set(this.formInline, "port", response.data[1].paramValue);
+          this.$set(this.formInline, "account", response.data[2].paramValue);
+          this.$set(this.formInline, "password", response.data[3].paramValue);
+          this.$set(this.formInline, "SSL", JSON.parse(response.data[4].paramValue));
+          this.$set(this.formInline, "TLS", JSON.parse(response.data[5].paramValue));
+          this.$set(this.formInline, "SMTP", JSON.parse(response.data[6].paramValue));
+        })
+      },
+      change() {
+        if (!this.formInline.host || !this.formInline.port || !this.formInline.account) {
+          this.disabledConnection = true;
+          this.disabledSave = true;
+        } else {
+          this.disabledConnection = false;
+          this.disabledSave = false;
+        }
+      },
+      testConnection(formInline) {
+        let param = {
+          "smtp.server": this.formInline.host,
+          "smtp.port": this.formInline.port,
+          "smtp.account": this.formInline.account,
+          "smtp.password": this.formInline.password,
+          "smtp.ssl": this.formInline.SSL,
+          "smtp.tls": this.formInline.TLS,
+          "smtp.smtp": this.formInline.SMTP,
+        };
+        this.$refs[formInline].validate((valid) => {
+          if (valid) {
+            this.result = this.$post("/system/testConnection", param, response => {
+              this.$success(this.$t('commons.connection_successful'));
+            })
+          } else {
+            return false;
+          }
+        })
+      },
+      edit() {
+        this.showEdit = false;
+        this.showSave = true;
+        this.showCancel = true;
+        this.show = false;
+      },
+      save(formInline) {
+        this.showEdit = true;
+        this.showCancel = false;
+        this.showSave = false;
+        this.show = true;
+        let param = [
+          {paramKey: "smtp.host", paramValue: this.formInline.host, type: "text", sort: 1},
+          {paramKey: "smtp.port", paramValue: this.formInline.port, type: "text", sort: 2},
+          {paramKey: "smtp.account", paramValue: this.formInline.account, type: "text", sort: 3},
+          {paramKey: "smtp.password", paramValue: this.formInline.password, type: "password", sort: 4},
+          {paramKey: "smtp.ssl", paramValue: this.formInline.SSL, type: "text", sort: 5},
+          {paramKey: "smtp.tls", paramValue: this.formInline.TLS, type: "text", sort: 6},
+          {paramKey: "smtp.smtp", paramValue: this.formInline.SMTP, type: "text", sort: 7}
+        ]
+
+        this.$refs[formInline].validate(valid => {
+          if (valid) {
+            this.result = this.$post("/system/edit/email", param, response => {
+              let flag = response.success;
+              if (flag) {
+                this.$success(this.$t('commons.save_success'));
+              } else {
+                this.$message.error(this.$t('commons.save_failed'));
+              }
+            });
+          } else {
+            return false;
+          }
+        })
+      },
+      cancel() {
+        this.showEdit = true;
+        this.showCancel = false;
+        this.showSave = false;
+        this.show = true;
+        this.query();
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+  .text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 30px;
+  }
+
+  .box-card {
+    padding-left: 5px;
+  }
+
+  /deep/ .el-input__inner {
+    border-width: 0px;
+    border-bottom-width: 1px;
+  }
+</style>

frontend/src/business/components/settings/system/LdapSetting.vue

+<template>
+  <div>
+    <el-card class="box-card" v-loading="result.loading">
+      <el-form :model="form" size="small" :rules="rules" :disabled="show" ref="form">
+        <el-form-item label="LDAP地址" prop="url">
+          <el-input v-model="form.url" placeholder="请输入LDAP地址 (如 ldap://localhost:389)"></el-input>
+        </el-form-item>
+        <el-form-item label="绑定DN" prop="dn">
+          <el-input v-model="form.dn" placeholder="请输入DN"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="form.password" placeholder="请输入密码" show-password auto-complete="new-password"></el-input>
+        </el-form-item>
+        <el-form-item label="用户OU" porp="ou">
+          <el-input v-model="form.ou" placeholder="输入用户OU (使用|分隔各OU)"></el-input>
+        </el-form-item>
+        <el-form-item label="用户过滤器" prop="filter">
+          <el-input v-model="form.filter" placeholder="输入过滤器 [可能的选项是cn或uid或sAMAccountName=%(user)s]"></el-input>
+        </el-form-item>
+        <el-form-item label="LDAP属性映射" prop="mapping">
+          <el-input v-model="form.mapping" placeholder="属性映射"></el-input>
+        </el-form-item>
+        <el-form-item label="启用LDAP认证" prop="open">
+          <el-checkbox v-model="form.open"></el-checkbox>
+        </el-form-item>
+      </el-form>
+
+      <div>
+        <el-button type="primary" plain v-if="showEdit" size="small" @click="edit">编辑</el-button>
+        <el-button type="success" plain v-if="showSave" size="small" @click="save('form')">保存</el-button>
+        <el-button type="info" plain v-if="showCancel" size="small" @click="cancel">取消</el-button>
+        <el-button size="small" :disabled="!show" @click="testConnection">测试连接</el-button>
+        <el-button size="small" :disabled="!show">测试登录</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "LdapSetting",
+    data() {
+      return {
+        form: {
+          open: false
+        },
+        result: {},
+        show: true,
+        showEdit: true,
+        showSave: false,
+        showCancel: false,
+        rules: {
+          url: {required: true, message: '请输入LDAP地址', trigger: ['change']},
+          dn: {required: true, message: '请输入DN', trigger: ['change']},
+          password: {required: true, message: '请输入密码', trigger: ['change']}
+        }
+      }
+    },
+    created() {
+      this.init();
+    },
+    methods: {
+      init() {
+        this.$get("/system/ldap/info", response => {
+          this.form = response.data;
+          this.form.open = this.form.open === 'true' ? true : false;
+        })
+      },
+      edit() {
+        this.show = false;
+        this.showEdit = false;
+        this.showSave = true;
+        this.showCancel = true;
+      },
+      cancel() {
+        this.showEdit = true;
+        this.showCancel = false;
+        this.showSave = false;
+        this.show = true;
+        this.init();
+      },
+      testConnection() {
+        this.$post("/system/test-connection/ldap", this.params, response => {
+          console.log(response)
+        })
+      },
+      save(form) {
+
+        let param = [
+          {paramKey: "ldap.url", paramValue: this.form.url, type: "text", sort: 1},
+          {paramKey: "ldap.dn", paramValue: this.form.dn, type: "text", sort: 2},
+          {paramKey: "ldap.password", paramValue: this.form.password, type: "password", sort: 3},
+          {paramKey: "ldap.ou", paramValue: this.form.ou, type: "text", sort: 4},
+          {paramKey: "ldap.filter", paramValue: this.form.filter, type: "text", sort: 5},
+          {paramKey: "ldap.mapping", paramValue: this.form.mapping, type: "text", sort: 6},
+          {paramKey: "ldap.open", paramValue: this.form.open, type: "text", sort: 7}
+        ]
+
+        this.$refs[form].validate(valid => {
+          if (valid) {
+            this.result = this.$post("/system/save/ldap", param, response => {
+              this.show = true;
+              this.showEdit = true;
+              this.showSave = false;
+              this.showCancel = false;
+              this.$success("保存成功")
+              this.init();
+            });
+          } else {
+            return false;
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/settings/system/SystemParameterSetting.vue

 <template>
   <div>
-    <el-card class="box-card" v-loading="result.loading">
-      <template v-slot:header>
-        <h2>{{$t('system_parameter_setting.mailbox_service_settings')}}</h2>
-      </template>
-      <!--邮件表单-->
-      <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline"
-               :disabled="show" v-loading="loading">
-        <el-row>
-          <el-col>
-            <el-form-item :label="$t('system_parameter_setting.SMTP_host')" prop="host">
-            </el-form-item>
-            <el-input v-model="formInline.host" :placeholder="$t('system_parameter_setting.SMTP_host')"
-                      v-on:input="change()"></el-input>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col>
-            <el-form-item :label="$t('system_parameter_setting.SMTP_port')" prop="port">
-            </el-form-item>
-            <el-input v-model="formInline.port" :placeholder="$t('system_parameter_setting.SMTP_port')"
-                      v-on:input="change()"></el-input>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col>
-            <el-form-item :label="$t('system_parameter_setting.SMTP_account')" prop="account">
-            </el-form-item>
-            <el-input v-model="formInline.account" :placeholder="$t('system_parameter_setting.SMTP_account')"
-                      v-on:input="change()"></el-input>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col>
-            <el-form-item :label="$t('system_parameter_setting.SMTP_password')" prop="password">
-            </el-form-item>
-            <el-input v-model="formInline.password" :placeholder="$t('system_parameter_setting.SMTP_password')"
-                      autocomplete="new-password" show-password type="text" @focus="changeType" ref="input">
-            </el-input>
-          </el-col>
-        </el-row>
-
-        <!---->
-        <div style="border: 0px;margin-bottom: 20px;margin-top: 20px">
-          <el-checkbox v-model="formInline.SSL" :label="$t('system_parameter_setting.SSL')"></el-checkbox>
-        </div>
-        <div style="border: 0px;margin-bottom: 20px">
-          <el-checkbox v-model="formInline.TLS" :label="$t('system_parameter_setting.TLS')"></el-checkbox>
-        </div>
-        <div style="border: 0px;margin-bottom: 20px">
-          <el-checkbox v-model="formInline.SMTP" :label="$t('system_parameter_setting.SMTP')"></el-checkbox>
-        </div>
-        <template v-slot:footer>
-        </template>
-      </el-form>
-      <div style="margin-left: 640px">
-        <el-button type="primary" @click="testConnection('formInline')" :disabled="disabledConnection">
-          {{$t('system_parameter_setting.test_connection')}}
-        </el-button>
-        <el-button @click="edit" v-if="showEdit">{{$t('commons.edit')}}</el-button>
-        <el-button type="success" @click="save('formInline')" v-if="showSave" :disabled="disabledSave">
-          {{$t('commons.save')}}
-        </el-button>
-        <el-button @click="cancel" type="info" v-if="showCancel">{{$t('commons.cancel')}}</el-button>
-      </div>
-    </el-card>
+    <el-tabs class="system-setting" v-model="activeName">
+      <el-tab-pane label="邮箱设置" name="email">
+        <email-setting/>
+      </el-tab-pane>
+      <el-tab-pane label="LDAP设置" name="ldap">
+        <ldap-setting/>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-
+  import EmailSetting from "./EmailSetting";
+  import LdapSetting from "./LdapSetting";
   export default {
     name: "SystemParameterSetting",
+    components: {
+      EmailSetting, LdapSetting
+    },
     data() {
       return {
-        formInline: {
-          /*host: 'smtp.163.com',
-          port: '465',
-          account: 'xjj0608@163.com',
-          password: '2345678',*/
-        },
-
-        input: '',
-        visible: true,
-        result: {},
-        showEdit: true,
-        showSave: false,
-        showCancel: false,
-        show: true,
-        disabledConnection: false,
-        disabledSave: false,
-        loading: false,
-        rules: {
-          host: [
-            {
-              required: true,
-              message: ''
-            },
-          ],
-          port: [
-            {
-              required: true,
-              message: ' '
-            }
-          ],
-          account: [
-            {
-              required: true,
-              message: ' '
-            }]
-        }
-      }
-    },
-
-    activated() {
-      this.query()
-    },
-    methods: {
-      changeType() {
-        this.$refs.input = 'password'
-      },
-      query() {
-        this.result = this.$get("/system/mail/info", response => {
-          this.$set(this.formInline, "host", response.data[0].paramValue);
-          this.$set(this.formInline, "port", response.data[1].paramValue);
-          this.$set(this.formInline, "account", response.data[2].paramValue);
-          this.$set(this.formInline, "password", response.data[3].paramValue);
-          this.$set(this.formInline, "SSL", JSON.parse(response.data[4].paramValue));
-          this.$set(this.formInline, "TLS", JSON.parse(response.data[5].paramValue));
-          this.$set(this.formInline, "SMTP", JSON.parse(response.data[6].paramValue));
-        })
-      },
-      change() {
-        if (!this.formInline.host || !this.formInline.port || !this.formInline.account) {
-          this.disabledConnection = true;
-          this.disabledSave = true;
-        } else {
-          this.disabledConnection = false;
-          this.disabledSave = false;
-        }
-      },
-      testConnection(formInline) {
-        let param = {
-          "smtp.server": this.formInline.host,
-          "smtp.port": this.formInline.port,
-          "smtp.account": this.formInline.account,
-          "smtp.password": this.formInline.password,
-          "smtp.ssl": this.formInline.SSL,
-          "smtp.tls": this.formInline.TLS,
-          "smtp.smtp": this.formInline.SMTP,
-        };
-        this.$refs[formInline].validate((valid) => {
-          if (valid) {
-            this.result = this.$post("/system/testConnection", param, response => {
-              this.$success(this.$t('commons.connection_successful'));
-            })
-          } else {
-            return false;
-          }
-        })
-      },
-      edit() {
-        this.showEdit = false;
-        this.showSave = true;
-        this.showCancel = true;
-        this.show = false;
-      },
-      save(formInline) {
-        this.showEdit = true;
-        this.showCancel = false;
-        this.showSave = false;
-        this.show = true;
-        let param = [
-          {paramKey: "smtp.host", paramValue: this.formInline.host, type: "text", sort: 1},
-          {paramKey: "smtp.port", paramValue: this.formInline.port, type: "text", sort: 2},
-          {paramKey: "smtp.account", paramValue: this.formInline.account, type: "text", sort: 3},
-          {paramKey: "smtp.password", paramValue: this.formInline.password, type: "password", sort: 4},
-          {paramKey: "smtp.ssl", paramValue: this.formInline.SSL, type: "text", sort: 5},
-          {paramKey: "smtp.tls", paramValue: this.formInline.TLS, type: "text", sort: 6},
-          {paramKey: "smtp.smtp", paramValue: this.formInline.SMTP, type: "text", sort: 7}
-        ]
-
-        this.$refs[formInline].validate(valid => {
-          if (valid) {
-            this.result = this.$post("/system/edit/email", param, response => {
-              let flag = response.success;
-              if (flag) {
-                this.$success(this.$t('commons.save_success'));
-              } else {
-                this.$message.error(this.$t('commons.save_failed'));
-              }
-            });
-          } else {
-            return false;
-          }
-        })
-      },
-      cancel() {
-        this.showEdit = true;
-        this.showCancel = false;
-        this.showSave = false;
-        this.show = true;
-        this.query();
+        activeName: 'email'
       }
-
     }
   }
 </script>
 
 <style scoped>
-  .text {
-    font-size: 18px;
-  }
-
-  .item {
-    margin-bottom: 30px;
-  }
-
-  .box-card {
-    padding-left: 5px;
-  }
 
-  /deep/ .el-input__inner {
-    border-width: 0px;
-    border-bottom-width: 1px;
-  }
 </style>