#

luxiaotao1123

2024-02-28 d5c82c6aaff716a2ff3a4e0134a77d62a7be63c4

 zy-asrs-flow/src/pages/account/setting/components/security.jsx

@@ -1,59 +1,104 @@
import { List } from 'antd';
import { Card, Form, message } from 'antd';
import React from 'react';
import {
  ProForm,
  ProFormText
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import Http from '@/utils/http';


const passwordStrength = {
  strong: <span className="strong">强</span>,
  medium: <span className="medium">中</span>,
  weak: <span className="weak">弱 Weak</span>,
const resetPwd = async (val, form) => {
  const hide = message.loading('正在修改');
  try {
    const resp = await Http.doPost('api/user/reset/pwd', val);
    if (resp.code === 200) {
      message.success('修改成功');
      form.resetFields();
      return true;
    } else {
      message.error(resp.msg);
      return false;
    }
  } catch (error) {
    message.error('修改失败请重试！');
    return false;
  } finally {
    hide();
  }
};

const SecurityView = () => {
  const getData = () => [
    {
      title: '账户密码',
      description: (
        <>
          当前密码强度：
          {passwordStrength.strong}
        </>
      ),
      actions: [<a key="Modify">修改</a>],
    },
    {
      title: '密保手机',
      description: `已绑定手机：138****8293`,
      actions: [<a key="Modify">修改</a>],
    },
    {
      title: '密保问题',
      description: '未设置密保问题，密保问题可有效保护账户安全',
      actions: [<a key="Set">设置</a>],
    },
    {
      title: '备用邮箱',
      description: `已绑定邮箱：ant***sign.com`,
      actions: [<a key="Modify">修改</a>],
    },
    {
      title: 'MFA 设备',
      description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
      actions: [<a key="bind">绑定</a>],
    },
  ];
  const [form] = Form.useForm();
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const data = getData();
  const handleFinish = (values) => {
    resetPwd({...values, id: currentUser.id}, form);
  }

  return (
    <>
      <List
        itemLayout="horizontal"
        dataSource={data}
        renderItem={(item) => (
          <List.Item actions={item.actions}>
            <List.Item.Meta title={item.title} description={item.description} />
          </List.Item>
        )}
      />
      <Card>
        <ProForm
          form={form}
          layout="vertical"
          onFinish={handleFinish}
          submitter={{
            searchConfig: {
              submitText: '修改密码',
            },
            render: (_, dom) => dom[1],
          }}
        >
          <ProFormText.Password
            width="md"
            name="oldPwd"
            label="当前密码"
            rules={[
              {
                required: true,
                message: '请输入当前密码!',
              },
            ]}
          />
          <ProFormText.Password
            width="md"
            name="password"
            label="新密码"
            rules={[
              {
                required: true,
                message: '请输入新密码!',
              },
              {
                validator(_, value) {
                  if (value.length >= 4 && value.length <= 16) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('新密码必须是4到16个字符!'));
                },
              },
            ]}
          />
          <ProFormText.Password
            width="md"
            name="passwordRepeat"
            label="确认密码"
            rules={[
              {
                required: true,
                message: '请再次输入新密码!',
              },
              {
                validator(_, value) {
                  if (form.getFieldValue('password') === value) return Promise.resolve();
                  return Promise.reject(new Error('两次输入的密码不相符!'));
                }
              }
            ]}
          />
        </ProForm>
      </Card>
    </>
  );
};