首次登陆验证 以及修改密码

src/layouts/BasicLayout.tsx

@@ -100,18 +100,18 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
    * constructor
    */
 
-  useEffect(() => {
-    if (dispatch) {
-      console.log("Maple")
-      dispatch({
-        type: 'user/fetchCurrent',
-        playload: {
-          userName: "admin",
-          password: "admin",
-        }
-      });
-    }
-  }, []);
+  // useEffect(() => {
+  //   if (dispatch) {
+  //     console.log("Maple")
+  //     dispatch({
+  //       type: 'user/fetchCurrent',
+  //       playload: {
+  //         userName: "admin",
+  //         password: "admin",
+  //       }
+  //     });
+  //   }
+  // }, []);
   /**
    * init variables
    */
@@ -135,8 +135,28 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       logo={logo}
       formatMessage={formatMessage}
       menuHeaderRender={(logoDom, titleDom) => (
-        <div style={{ marginLeft: -25, width: 260, height: 64, backgroundColor: "#ffffff",paddingLeft:16,paddingTop:10}}>
-          <img src={tsIcon} style={{width:50,height:50}}/><span style={{fontSize:18,fontFamily:"Source Han Sans CN",fontWeight:"bold",color:"rgba(51,51,51,1)"}}> TOS Management</span>
+        <div
+          style={{
+            marginLeft: -25,
+            width: 260,
+            height: 64,
+            backgroundColor: '#ffffff',
+            paddingLeft: 16,
+            paddingTop: 10,
+          }}
+        >
+          <img src={tsIcon} style={{ width: 50, height: 50 }} />
+          <span
+            style={{
+              fontSize: 18,
+              fontFamily: 'Source Han Sans CN',
+              fontWeight: 'bold',
+              color: 'rgba(51,51,51,1)',
+            }}
+          >
+            {' '}
+            TOS Management
+          </span>
         </div>
         // <Link to="/">
         //   {/* {logoDom} */}

src/layouts/SecurityLayout.tsx

@@ -29,16 +29,16 @@ class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayout
       isReady: true,
     });
     const { dispatch, login } = this.props;
-    // console.log("安全登录中")
-    // console.log(login)
-    if (dispatch) {
-      // dispatch({
-      //   type: 'user/fetchCurrent',
-      //   playload: {
-      //     userName: login.userName,
-      //     password: login.password
-      //   }
-      // });
+    console.log('安全登录中');
+    console.log(login);
+    if (dispatch && !!login?.userName && !!login?.password) {
+      dispatch({
+        type: 'user/fetchCurrent',
+        playload: {
+          userName: login.userName,
+          password: login.password,
+        },
+      });
     }
   }
 

src/models/login.ts

 import { stringify } from 'querystring';
 import { history, Reducer, Effect } from 'umi';
 
-import { AccountLogin, AccountCheckLogin, AccountOut } from '@/services/login';
+import { AccountLogin, AccountCheckLogin, resetPassword } from '@/services/login';
 import { setAuthority } from '@/utils/authority';
 import { getPageQuery } from '@/utils/utils';
 
@@ -14,6 +14,7 @@ export interface StateType {
   token?: string;
   userName?: string;
   password?: string;
+  result?: boolean;
 }
 
 export interface LoginModelType {
@@ -22,9 +23,13 @@ export interface LoginModelType {
   effects: {
     login: Effect;
     logout: Effect;
+    reset: Effect;
+    goResetPwd: Effect;
   };
   reducers: {
     changeLoginStatus: Reducer<StateType>;
+    saveToken: Reducer<StateType>;
+    resetPwd: Reducer<StateType>;
   };
 }
 
@@ -36,6 +41,7 @@ const Model: LoginModelType = {
     token: '',
     userName: '',
     password: '',
+    result: false,
   },
 
   reducers: {
@@ -47,18 +53,30 @@ const Model: LoginModelType = {
         type: payload.type,
       };
     },
-    saveToken(state, { token, userName, password }) {
-      return { ...state, token, userName, password };
+
+    saveToken(state, { token, userName, password, result }) {
+      return { ...state, token, userName, password, result };
+    },
+
+    resetPwd(state, { result, userName }) {
+      console.log(result, userName);
+      return { ...state, result, userName };
     },
   },
 
   effects: {
     *login({ payload }, { call, put }) {
       const response = yield call(AccountLogin, payload);
-
+      console.log(response);
       if (response.status === 'resetPwd') {
-        // if () {
-        // }
+        console.log('跳转到修改密码页面');
+        yield put({
+          type: 'resetPwd',
+          result: true,
+          userName: response.userName,
+        });
+        message.success('Reset your password for your first login!', 3);
+        history.push('/user/login2');
       } else if (response.status === 'ok' && response.token != null) {
         yield put({
           type: 'changeLoginStatus',
@@ -67,6 +85,7 @@ const Model: LoginModelType = {
         // Login successfully response.status === 'ok'
         console.log('用户名密码登录成功');
         console.log(response);
+        message.success('Login Successfully!', 3);
         const userMessage = yield call(AccountCheckLogin, payload); //请求时间网络
         console.log(userMessage);
         console.log(userMessage.token);
@@ -81,6 +100,7 @@ const Model: LoginModelType = {
           token: userMessage.token,
           userName: payload.userName,
           password: payload.password,
+          result: false,
         });
         const urlParams = new URL(window.location.href);
         const params = getPageQuery();
@@ -108,6 +128,12 @@ const Model: LoginModelType = {
       // Note: There may be security issues, please note
       // const response = yield call(AccountOut, payload);
       if (window.location.pathname !== '/user/login' && !redirect) {
+        // 清楚用户信息
+        localStorage.removeItem('permission');
+        setCookie('token', '');
+        setCookie('id', '');
+        setCookie('name', '');
+        setCookie('phone', '');
         history.replace({
           pathname: '/user/login',
           search: stringify({
@@ -116,6 +142,28 @@ const Model: LoginModelType = {
         });
       }
     },
+
+    *reset({ payload }, { call, put }) {
+      const res = yield call(resetPassword, payload);
+      console.log(res);
+      if (res.error_code === '0000') {
+        message.success('Modified successfully, please log in again!', 3);
+        history.push('/');
+      } else {
+        message.error('Change password failed,Please try again!');
+      }
+    },
+
+    *goResetPwd({ payload }, { call, put }) {
+      console.log('跳转到修改密码页面');
+      console.log(payload);
+      yield put({
+        type: 'resetPwd',
+        result: false,
+        userName: payload,
+      });
+      history.push('login2');
+    },
   },
 };
 

src/pages/user/login/index.tsx

 import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Alert, Checkbox, Input, message, Form, Button } from 'antd';
+import { message, Form, Button } from 'antd';
 import React, { useState, useEffect, useCallback } from 'react';
-import { Link, connect, Dispatch, history, Redirect } from 'umi';
+import { connect, Dispatch, history } from 'umi';
 import { StateType } from '@/models/login';
-import { LoginParamsType, getFakeCaptcha, getCaptcha, ValidateCaptcha } from '@/services/login';
+import { LoginParamsType, getCaptcha, ValidateCaptcha } from '@/services/login';
 import { ConnectState } from '@/models/connect';
 import styles from './style.less';
 
@@ -35,9 +35,12 @@ const Login: React.FC<LoginProps> = (props) => {
 
       if (res.error_code === '0000') {
         console.log('通过跳转到修改密码页面');
-        history.push('login2');
+        dispatch({
+          type: 'login/goResetPwd',
+          payload: userName,
+        });
       } else {
-        message.error('membercode!');
+        message.error('MemberCode!');
       }
     } else {
       if (values.userName && values.password) {

src/pages/user/login/login2.tsx

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { message, Form, Input, Button } from 'antd';
 import styles from './style.less';
+import { connect } from 'umi';
 
 interface Password {
   password: string;
 }
 
-const Login2 = (props: { history: { push: (location: string) => void } }) => {
-  const { history } = props;
+const Login2 = (props: {
+  history: { push: (location: string) => void };
+  result: React.SetStateAction<boolean>;
+  dispatch: any;
+  userName: string;
+}) => {
+  const { history, result, dispatch, userName } = props;
+  console.log(userName);
+
+  const [resetPwd, setResetPwd] = useState(false);
+
+  useEffect(() => {
+    setResetPwd(result);
+  }, [result]);
+
+  useEffect(() => {
+    if (!userName) {
+      history.push('/user/login');
+    }
+  }, []);
+
   // 修改密码
   const onFinish = (values: Password) => {
     console.log('修改密码');
-    message.success('modify successfully!', 3);
-    history.push('/user/login');
+    dispatch({
+      type: 'login/reset',
+      payload: {
+        tosUserName: userName,
+        tosUserPwd: values.password,
+      },
+    });
   };
 
   return (
@@ -58,7 +83,7 @@ const Login2 = (props: { history: { push: (location: string) => void } }) => {
         </Form.Item>
         <Form.Item className={styles.passBtn}>
           <Button size="large" type="primary" shape="round" htmlType={'submit'}>
-            Accomplish
+            {resetPwd ? 'Submit' : 'Accomplish'}
           </Button>
         </Form.Item>
       </Form>
@@ -66,4 +91,9 @@ const Login2 = (props: { history: { push: (location: string) => void } }) => {
   );
 };
 
-export default Login2;
+function map(state: { login: { result: boolean; userName: string } }) {
+  const { result, userName } = state.login;
+  return { result, userName };
+}
+
+export default connect(map)(Login2);

src/services/login.ts

@@ -16,6 +16,10 @@ export interface CodeType {
 //   });
 // }
 
+export interface PwdType {
+  password: string;
+}
+
 export async function AccountLogin(params: LoginParamsType) {
   console.log('登录请求');
   console.log(params);
@@ -51,3 +55,8 @@ export async function ValidateCaptcha(params: CodeType) {
   console.log(params);
   return request('/tos/validate/code', { method: 'POST', data: params });
 }
+
+export async function resetPassword(params: PwdType) {
+  console.log('重置密码');
+  return request('/tos/user/resetPwd', { method: 'POST', data: params });
+}