| | |
|---|
| | | import { List } from 'antd'; |
|---|
| | | import React from 'react'; |
|---|
| | | |
|---|
| | | |
|---|
| | | const passwordStrength = { |
|---|
| | | strong: <span className="strong">强</span>, |
|---|
| | | medium: <span className="medium">中</span>, |
|---|
| | | weak: <span className="weak">弱 Weak</span>, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | 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 data = getData(); |
|---|
| | | return ( |
|---|
| | | <> |
|---|
| | | <List |
|---|
| | | itemLayout="horizontal" |
|---|
| | | dataSource={data} |
|---|
| | | renderItem={(item) => ( |
|---|
| | | <List.Item actions={item.actions}> |
|---|
| | | <List.Item.Meta title={item.title} description={item.description} /> |
|---|
| | | </List.Item> |
|---|
| | | )} |
|---|
| | | /> |
|---|
| | | </> |
|---|
| | | ); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | export default SecurityView; |
|---|
| | | import { Card, Form, message } from 'antd';
|
|---|
| | | import React from 'react';
|
|---|
| | | import {
|
|---|
| | | ProForm,
|
|---|
| | | ProFormText
|
|---|
| | | } from '@ant-design/pro-components';
|
|---|
| | | import { FormattedMessage, useIntl } from '@umijs/max';
|
|---|
| | | import { useModel } from '@umijs/max';
|
|---|
| | | import Http from '@/utils/http';
|
|---|
| | |
|
|---|
| | | const resetPwd = async (val, form, intl) => {
|
|---|
| | | const hide = message.loading(intl.formatMessage({ id: 'page.updating', defaultMessage: '正在修改' }));
|
|---|
| | | try {
|
|---|
| | | const resp = await Http.doPost('api/user/reset/pwd', val);
|
|---|
| | | if (resp.code === 200) {
|
|---|
| | | message.success(intl.formatMessage({ id: 'page.update.success', defaultMessage: '修改成功' }));
|
|---|
| | | form.resetFields();
|
|---|
| | | return true;
|
|---|
| | | } else {
|
|---|
| | | message.error(resp.msg);
|
|---|
| | | return false;
|
|---|
| | | }
|
|---|
| | | } catch (error) {
|
|---|
| | | message.error(intl.formatMessage({ id: 'page.update.fail', defaultMessage: '修改失败请重试！' }));
|
|---|
| | | return false;
|
|---|
| | | } finally {
|
|---|
| | | hide();
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const SecurityView = () => {
|
|---|
| | | const intl = useIntl();
|
|---|
| | | const [form] = Form.useForm();
|
|---|
| | | const { initialState } = useModel('@@initialState');
|
|---|
| | | const { currentUser } = initialState || {};
|
|---|
| | |
|
|---|
| | | const handleFinish = (values) => {
|
|---|
| | | resetPwd({ ...values, id: currentUser.id }, form, intl);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | return (
|
|---|
| | | <>
|
|---|
| | | <Card>
|
|---|
| | | <ProForm
|
|---|
| | | form={form}
|
|---|
| | | layout="vertical"
|
|---|
| | | onFinish={handleFinish}
|
|---|
| | | submitter={{
|
|---|
| | | searchConfig: {
|
|---|
| | | submitText: intl.formatMessage({ id: 'personal.security.button.name', defaultMessage: '修改密码' }),
|
|---|
| | | },
|
|---|
| | | render: (_, dom) => dom[1],
|
|---|
| | | }}
|
|---|
| | | >
|
|---|
| | | <ProFormText.Password
|
|---|
| | | width="md"
|
|---|
| | | name="oldPwd"
|
|---|
| | | label={intl.formatMessage({ id: 'personal.security.cur.pwd', defaultMessage: '当前密码' })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: true,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormText.Password
|
|---|
| | | width="md"
|
|---|
| | | name="password"
|
|---|
| | | label={intl.formatMessage({ id: 'personal.security.new.pwd', defaultMessage: '新密码' })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: true,
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | validator(_, value) {
|
|---|
| | | if (value.length >= 4 && value.length <= 16) {
|
|---|
| | | return Promise.resolve();
|
|---|
| | | }
|
|---|
| | | return Promise.reject(new Error(intl.formatMessage({ id: 'personal.security.new.pwd.rule.length', defaultMessage: '新密码必须是4到16个字符!' })));
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormText.Password
|
|---|
| | | width="md"
|
|---|
| | | name="passwordRepeat"
|
|---|
| | | label={intl.formatMessage({ id: 'personal.security.new.pwd.confirm', defaultMessage: '确认密码' })}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: true,
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | validator(_, value) {
|
|---|
| | | if (form.getFieldValue('password') === value) return Promise.resolve();
|
|---|
| | | return Promise.reject(new Error(intl.formatMessage({ id: 'personal.security.new.pwd.rule.check', defaultMessage: '两次输入的密码不相符!' })));
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | </ProForm>
|
|---|
| | | </Card>
|
|---|
| | | </>
|
|---|
| | | );
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | export default SecurityView;
|
|---|
