feature: 支持密码重置可选择短信验证方式 #631

src/pages/src/common/demand-import.js

@@ -41,6 +41,7 @@ import {
   bkProgress,
   bkRadio,
   bkRadioGroup,
+  bkRadioButton,
   bkRoundProgress,
   bkRow,
   bkSearchSelect,
@@ -100,6 +101,7 @@ Vue.use(bkProcess);
 Vue.use(bkProgress);
 Vue.use(bkRadio);
 Vue.use(bkRadioGroup);
+Vue.use(bkRadioButton);
 Vue.use(bkRoundProgress);
 Vue.use(bkRow);
 Vue.use(bkSearchSelect);

src/pages/src/language/lang/en.js

@@ -164,6 +164,7 @@ export default {
   修复: '【FIX】',
   优化: '【OPTIMIZATION】',
   // 密码
+  原密码: 'Old Password',
   重置密码: 'Reset Password',
   密码长度为: 'Password length is',
   '-32个字符，必须包含': '-32 characters, it must be included',
@@ -173,7 +174,13 @@ export default {
   数字: 'number',
   '特殊字符（除空格）': 'Special characters (except spaces)',
   '请输入账户绑定的邮箱，我们将为您发送密码重置邮件': 'Please enter your account bound email address and we will send you a password reset email',
+  '请输入账号信息，我们将为您发送重置密码短信': 'Please enter your account information, and we will send you a message to reset your password',
+  '请输入用户名/手机号': 'Please enter username or mobile number',
+  发送验证码: 'Send verification code',
+  请输入验证码: 'Please enter the verification code',
   请输入邮箱: 'Please enter email address',
+  后: 'after',
+  重新发送: 'Resend',
   '邮箱格式错误，请重新输入': 'Mailbox format error, please re - enter',
   发送密码重置邮件: 'Send a password reset message',
   已发送密码重置邮件: 'A password reset message has been sent',
@@ -187,6 +194,7 @@ export default {
   '两次输入的密码不一致，请重新输入': 'The passwords entered twice do not match. Please re-enter them',
   设置新密码: 'Set new password',
   请输入新密码进行密码重设: 'Please enter a new password for password reset',
+  请输入原密码: 'Please enter old password',
   请输入新密码: 'Please enter a new password',
   请再次确认新密码: 'Please confirm the new password again',
   密码修改成功: 'Password changed successfully',
@@ -260,6 +268,8 @@ export default {
   最近三个月: 'Last 3 months',
   时间: 'Time',
   操作人员: 'The operator',
+  操作用户: 'The operator',
+  用户全名: 'Full name',
   操作对象: 'Action object',
   操作类型: 'Operation type',
   用户目录管理无权限访问: '【Categories Management】No access authority',
@@ -446,4 +456,5 @@ export default {
   退出登录: 'Log out',
   确认退出登录_: '确认退出登录？',
   _需要设置新密码: ', You need to set a new password',
+  导入覆盖提升: 'After checking, it is allowed to edit the personal information of existing users, and the existing user information will face the risk of being modified, so be cautious.',
 };

src/pages/src/language/lang/zh.js

@@ -164,6 +164,7 @@ export default {
   修复: '【修复】',
   优化: '【优化】',
   // 密码
+  原密码: '原密码',
   重置密码: '重置密码',
   密码长度为: '密码长度为',
   '-32个字符，必须包含': '-32个字符，必须包含',
@@ -173,6 +174,12 @@ export default {
   数字: '数字',
   '特殊字符（除空格）': '特殊字符（除空格）',
   '请输入账户绑定的邮箱，我们将为您发送密码重置邮件': '请输入账户绑定的邮箱，我们将为您发送密码重置邮件',
+  '请输入账号信息，我们将为您发送重置密码短信': '请输入账号信息，我们将为您发送重置密码短信',
+  '请输入用户名/手机号': '请输入用户名/手机号',
+  发送验证码: '发送验证码',
+  请输入验证码: '请输入验证码',
+  后: '后',
+  重新发送: '重新发送',
   请输入邮箱: '请输入邮箱',
   '邮箱格式错误，请重新输入': ' 邮箱格式错误，请重新输入',
   发送密码重置邮件: '发送密码重置邮件',
@@ -187,6 +194,7 @@ export default {
   '两次输入的密码不一致，请重新输入': '两次输入的密码不一致，请重新输入',
   设置新密码: '设置新密码',
   请输入新密码进行密码重设: '请输入新密码进行密码重设',
+  请输入原密码: '请输入原密码',
   请输入新密码: '请输入新密码',
   请再次确认新密码: '请再次确认新密码',
   密码修改成功: '密码修改成功',
@@ -260,6 +268,8 @@ export default {
   最近三个月: '最近三个月',
   时间: '时间',
   操作人员: '操作人员',
+  操作用户: '操作用户',
+  用户全名: '用户全名',
   操作对象: '操作对象',
   操作类型: '操作类型',
   用户目录管理无权限访问: '【用户目录管理】无权限访问',
@@ -445,4 +455,5 @@ export default {
   退出登录: '退出登录',
   确认退出登录_: '确认退出登录？',
   _需要设置新密码: '，需要设置新密码',
+  导入覆盖提升: '勾选后，将允许对已经存在用户的个人信息进行编辑操作，现存用户信息将面临被修改风险，谨慎操作。',
 };

src/pages/src/store/modules/password.js

@@ -33,5 +33,13 @@ export default {
     reset(context, params, config = {}) {
       return http.post('api/v1/web/passwords/reset/send_email/', params);
     },
+    // 获取短信验证码
+    sendSms(context, params, config = {}) {
+      return http.post('api/v1/web/passwords/reset/verification_code/send_sms/', params);
+    },
+    // 发送验证码
+    sendCode(context, params, config = {}) {
+      return http.post('api/v1/web/passwords/reset/verification_code/verify/', params);
+    },
   },
 };

src/pages/src/views/password/Email.vue

@@ -0,0 +1,151 @@
+<!--
+  - Tencent is pleased to support the open source community by making Bk-User 蓝鲸用户管理 available.
+  - Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+  - BK-LOG 蓝鲸日志平台 is licensed under the MIT License.
+  -
+  - License for Bk-User 蓝鲸用户管理:
+  - -------------------------------------------------------------------
+  -
+  - Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+  - documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+  - the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+  - and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+  - The above copyright notice and this permission notice shall be included in all copies or substantial
+  - portions of the Software.
+  -
+  - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+  - LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+  - NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+  - WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+  - SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
+  -->
+<template>
+  <div class="login-content">
+    <div class="reset-pw">
+      <div class="reset-content" v-if="hasReset === false">
+        <h4 class="common-title">{{$t('重置密码')}}</h4>
+        <p :class="['text', { 'show-error-info': isError }]">{{$t('请输入账户绑定的邮箱，我们将为您发送密码重置邮件')}}</p>
+        <p class="error-text" v-if="isError">
+          <i class="icon icon-user-exclamation-circle-shape"></i>
+          <span class="text">{{$t('邮箱格式错误，请重新输入')}}</span>
+        </p>
+        <input
+          type="text"
+          :class="['select-text', { 'input-error': isError }]"
+          :placeholder="$t('请输入邮箱')"
+          v-model="resetEmail"
+          @focus="hiddenError" />
+        <bk-button
+          theme="primary"
+          class="submit"
+          :disabled="!resetEmail"
+          @click="submitEmailPw">
+          {{$t('发送密码重置邮件')}}
+        </bk-button>
+      </div>
+    </div>
+    <div class="reset-content" v-if="hasReset === true">
+      <h4 class="common-title">{{$t('已发送密码重置邮件')}}</h4>
+      <p class="text" style="margin: 0 0 18px 0">{{$t('已发送至您的邮箱')}}：{{resetEmail}}<br />{{$t('请查看邮件并根据提示进行操作')}}</p>
+      <bk-button theme="primary" class="submit" @click="goEmail">{{$t('前往邮箱')}}</bk-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ResetEmail',
+  data() {
+    return {
+      isError: false,
+      resetEmail: '',
+      hasReset: false,
+    };
+  },
+  methods: {
+    hiddenError() {
+      this.isError = false;
+    },
+    async submitEmailPw() {
+      try {
+        // eslint-disable-next-line no-useless-escape
+        const reEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+        if (!reEmail.test(this.resetEmail)) {
+          this.isError = true;
+          return;
+        }
+        // 调用接口
+        const emailParams = { email: this.resetEmail };
+        await this.$store.dispatch('password/reset', emailParams);
+        this.hasReset = true;
+        this.$emit('has-reset', true);
+      } catch (e) {
+        console.warn(e);
+      }
+    },
+    goEmail() {
+      const emailUrl = this.resetEmail.split('@')[1];
+      window.open(`https://mail.${emailUrl}`);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.login-content {
+  padding: 0 24px;
+  font-size: 14px;
+}
+
+.common-title {
+  margin: 20px 0 15px 0;
+  font-size: 20px;
+  font-weight: 400;
+  color: rgba(49, 50, 56, 1);
+  line-height: 28px;
+}
+
+.select-text {
+  padding-left: 12px;
+
+  &::input-placeholder {
+    color: rgba(195, 205, 215, 1);
+  }
+}
+
+.submit {
+  width: 100%;
+}
+// 重置密码
+.reset-content {
+  .text {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(99, 101, 110, 1);
+    line-height: 20px;
+    margin: 10px 0 20px;
+
+    &.show-error-info {
+      margin-bottom: 10px;
+    }
+  }
+
+  .select-text {
+    margin-bottom: 20px;
+  }
+}
+// 错误提示
+.error-text {
+  margin-bottom: 10px;
+  color: #ea3636;
+  font-size: 14px;
+
+  .text {
+    color: #ea3636;
+  }
+
+  .icon {
+    color: #ea3636;
+  }
+}
+</style>