修改登录密码

src/locales/en-US.ts

@@ -132,6 +132,14 @@ export default {
   'fundpwd.originPrompt': '请输入原始资金密码',
   'fundpwd.success': '资金密码修改成功',
 
+  'lgpwd.title': '修改登录密码',
+  'lgpwd.origin': '验证原登录密码',
+  'lgpwd.new': '设置新的登录密码',
+  'lgpwd.confirm': '确认新的登录密码',
+  'lgpwd.btn': '设置',
+  'lgpwd.originPrompt': '请输入原始登录密码',
+  'lgpwd.success': '登录密码修改成功',
+
   'profile.account': 'Account Settings',
   'profile.system': 'System Settings',
   'profile.identity': '实名认证',

src/locales/zh-CN.ts

@@ -132,6 +132,14 @@ export default {
   'fundpwd.originPrompt': '请输入原始资金密码',
   'fundpwd.success': '资金密码修改成功',
 
+  'lgpwd.title': '修改登录密码',
+  'lgpwd.origin': '验证原登录密码',
+  'lgpwd.new': '设置新的登录密码',
+  'lgpwd.confirm': '确认新的登录密码',
+  'lgpwd.btn': '设置',
+  'lgpwd.originPrompt': '请输入原始登录密码',
+  'lgpwd.success': '登录密码修改成功',
+
   'profile.account': '账户管理',
   'profile.system': '系统设置',
   'profile.identity': '实名认证',

src/pages/account/index.tsx

@@ -77,6 +77,7 @@ const AccountPage: React.FC<DispatchProp & UserModelState & AccountModelState> =
         <AccountItem
           className="group"
           title="account.loginPwd"
+          onClick={() => dispatch(routerRedux.push('/lgpwd'))}
         />
         <AccountItem
           className="group"

src/pages/lgpwd/index.tsx

@@ -0,0 +1,78 @@
+/**
+ * Title: 邀请新人
+ * Routes:
+ *   - ./src/pages/routes
+ */
+import React, { useEffect } from 'react';
+import { connect, DispatchProp } from 'dva';
+import { Button, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-locale';
+import { LgpwdModelState } from './model';
+import Header from '@/components/Header';
+
+import styles from './style.less';
+import { UserModelState } from '@/models/user';
+
+const LgpwdPage: React.FC<DispatchProp & LgpwdModelState & UserModelState> = ({
+  dispatch,
+  origin,
+  newPwd,
+  confirm,
+  submitting,
+}) => {
+  useEffect(() => {
+    dispatch({ type: 'lgpwd/load' });
+  }, []);
+  let body = (
+    <>
+      <Input
+        className={styles.input}
+        value={origin}
+        onChange={e => dispatch({ type: 'lgpwd/onUpdateState', origin: e.target.value })}
+        placeholder={formatMessage({ id: 'lgpwd.origin' })}
+        type="password"
+        size="large"
+      />
+      <Input
+        className={styles.input}
+        value={newPwd}
+        onChange={e => dispatch({ type: 'lgpwd/onUpdateState', newPwd: e.target.value })}
+        placeholder={formatMessage({ id: 'lgpwd.new' })}
+        type="password"
+        size="large"
+      />
+      <Input
+        className={styles.input}
+        value={confirm}
+        onChange={e => dispatch({ type: 'lgpwd/onUpdateState', confirm: e.target.value })}
+        placeholder={formatMessage({ id: 'lgpwd.confirm' })}
+        type="password"
+        size="large"
+      />
+      <Button
+        className={styles.input}
+        type="primary"
+        size="large"
+        loading={submitting}
+        onClick={() => dispatch({ type: 'lgpwd/submit' })}
+      >{formatMessage({ id: 'lgpwd.btn' })}</Button>
+    </>
+  );
+
+  return (
+    <div className={styles.container}>
+      <Header
+        className="header"
+        title={formatMessage({ id: 'lgpwd.title' })}
+      />
+
+      <div className={styles.body}>
+        {body}
+      </div>
+    </div>
+  );
+};
+
+export default connect(
+  ({ lgpwd }: any) => ({ ...lgpwd }),
+)(LgpwdPage);

src/pages/lgpwd/model.ts

@@ -0,0 +1,72 @@
+import { Model, routerRedux } from "dva";
+import _ from 'lodash';
+import { PageState } from '@/types/common';
+import { message } from 'antd';
+import { formatMessage } from 'umi-plugin-locale';
+import { validPwd } from '@/utils/validate';
+import { changeLgpwd } from './service';
+
+export interface LgpwdModelState {
+  origin: string;
+  newPwd: string;
+  confirm: string;
+  submitting: boolean;
+}
+
+const initState: LgpwdModelState = {
+  origin: '',
+  newPwd: '',
+  confirm: '',
+  submitting: false,
+};
+
+const model: Model = {
+  namespace: 'lgpwd',
+
+  state: initState,
+
+  effects: {
+    *load(_, { put, call }) {
+      yield put({
+        type: 'onUpdateState',
+        origin: '',
+        newPwd: '',
+        confirm: '',
+        submitting: false,
+      });
+    },
+
+    *submit(_, { put, call, select }) {
+      const {
+        origin,
+        newPwd,
+        confirm,
+        submitting,
+      } = (yield select((state: any) => state.lgpwd)) as LgpwdModelState;
+      if (submitting) return;
+      if (!validPwd(newPwd)) return message.warn(formatMessage({ id: 'check.msgPwd' }));
+      if (confirm !== newPwd) return message.warn(formatMessage({ id: 'check.msgConfirm' }));
+      yield put({ type: 'onUpdateState', submitting: true });
+      try {
+        yield call(changeLgpwd, newPwd, origin);
+        yield put(routerRedux.goBack());
+        message.success(formatMessage({ id: 'lgpwd.success' }));
+      } catch (e) {
+        message.error(e.message);
+      } finally {
+        yield put({ type: 'onUpdateState', submitting: false })
+      }
+    },
+  },
+
+  reducers: {
+    onUpdateState(state, payload) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};
+
+export default model;

src/pages/lgpwd/service.ts

@@ -0,0 +1,10 @@
+import http from '@/utils/http';
+
+export async function changeLgpwd(newPassword: string, password?: string) {
+  const { ok, msg } = await http.post('/user/chpasswd', {
+    password,
+    newPassword,
+  });
+  if (ok) return;
+  throw Error(msg);
+}

src/pages/lgpwd/style.less

@@ -0,0 +1,30 @@
+
+@import '../../global.less';
+
+.container {
+  height: 100%;
+  background: white;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.body {
+  flex-grow: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.none {
+  text-align: center;
+  width: 100%;
+  padding-top: 40%;
+}
+
+.input {
+  margin: 10px 20px;
+  width: auto;
+}