完成了用户注册登录重置密码的功能

package.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.16.13",
+    "axios": "^0.21.4",
     "craco-less": "^1.20.0",
     "qs": "^6.10.1",
     "react": "^17.0.2",

src/API/API.js

@@ -33,7 +33,7 @@ export function apiLogout() {
 
 export function apiCheck(params) {
     return fetch({
-        url: '/account/register/',
+        url: '/account/check/',
         method: 'post',
         data: Qs.stringify(params),
     })
@@ -41,7 +41,7 @@ export function apiCheck(params) {
 
 export function apiConfirm(params) {
     return fetch({
-        url: '/account/register/',
+        url: '/account/confirm/',
         method: 'post',
         data: Qs.stringify(params),
     })
@@ -49,7 +49,7 @@ export function apiConfirm(params) {
 
 export function apiReset(params) {
     return fetch({
-        url: '/account/register/',
+        url: '/account/reset/',
         method: 'post',
         data: Qs.stringify(params),
     })

src/API/Axios.js

@@ -5,7 +5,7 @@ let fetch = axios.create({
     baseURL: "http://127.0.0.1:8000/", // 这里是本地express启动的服务地址
     timeout: 5000 // request timeout
 })
-fetch.defaults.withCredentials = true
+fetch.defaults.withCredentials = true;
 fetch.interceptors.request.use(config => {
     config.headers['X-Requested-With'] = 'XMLHttpRequest'
     let regex = /.*csrftoken=([^;.]*).*$/

src/Components/UserForm/ForgetPasswordForm/ForgetPasswordForm.js

@@ -11,62 +11,84 @@ class ForgetPasswordForm extends Component {
         forgetStatus: 'check',
         currentStep: 0,
         stepProcessStatus: 'process',
-        token: '',
+        code: '',
+        loading: false,
     }
 
     handleSubmitCheck = values => {
+        this.setState({
+            loading: true
+        })
         let params = {
             ...values
         }
         console.log('Received values of form: ', params);
         apiCheck(params).then(res => {
-            if (res.data.code === 200) {
-                message.success('验证成功');
+            this.setState({
+                loading: false
+            })
+            if (res.data.code === '402') {
+                message.success(res.data.message);
                 this.handleCheckSuccessfully()
-            } else if (res.data.code === 303) {
-                message.error('用户不存在')
-            } else if (res.data.code === 301) {
-                message.error('邮箱错误')
-            } else if (res.data.code === 500) {
-                message.error('验证码发送失败')
+            } else if (res.data.code === '401') {
+                message.error(res.data.message)
+            } else if (res.data.code === '403') {
+                message.error(res.data.message)
             } else {
-                message.error('发生错误')
+                message.error('Error')
             }
         })
     }
 
     handleSubmitConfirm = values => {
+        this.setState({
+            loading: true
+        })
         let params = {
             ...values
         }
         console.log('Received values of form: ', params);
         apiConfirm(params).then(res => {
-            if (res.data.code === 200) {
-                message.success('确认成功');
+            this.setState({
+                loading: false
+            })
+            if (res.data.code === '402') {
+                message.success(res.data.message);
                 this.handleConfirmSuccessfully()
                 this.setState({
-                    token: values.token,
+                    code: values.code,
                 })
-            } else if (res.data.code === 302) {
-                message.error('用户不存在')
-            } else if (res.data.code === 303) {
-                message.error('验证码无效')
+            } else if (res.data.code === '401') {
+                message.error(res.data.message)
+            } else if (res.data.code === '403') {
+                message.error(res.data.message)
             } else {
-                message.error('发生错误')
+                message.error('Error')
             }
         })
     }
 
     handleSubmitReset = values => {
+        this.setState({
+            loading: true
+        })
         let params = {
             password: values.password,
+            code: this.state.code,
         }
         apiReset(params).then(res => {
-            if (res.data.code === 200) {
-                message.success('重置成功');
+            this.setState({
+                loading: false
+            })
+            if (res.data.code === '402') {
+                message.success(res.data.message);
                 window.location.href = "";
+            } else if (res.data.code === '401') {
+                message.error(res.data.message)
+            } else if (res.data.code === '403') {
+                message.error(res.data.message)
             } else {
-                message.error('发生错误')
+                message.error('Error')
             }
         })
     }
@@ -133,7 +155,7 @@ class ForgetPasswordForm extends Component {
                                 </Form.Item>
                                 <Form.Item style={{marginBottom: '10px'}}>
                                     <Button size="large" type="primary" htmlType="submit" className="login-form-button"
-                                            style={{width: '100%'}}>
+                                            style={{width: '100%'}} loading={this.state.loading}>
                                         RESET YOUR PASSWORD
                                     </Button>
                                 </Form.Item>
@@ -148,7 +170,7 @@ class ForgetPasswordForm extends Component {
                                 <Form onFinish={this.handleSubmitConfirm} className="forget-password-form"
                                       initialValues={{remember: true}}>
                                     <Form.Item
-                                        name="token"
+                                        name="code"
                                         rules={[{required: true, message: 'Please input your Verification Code!'}]}
                                     >
                                         <Input

src/Components/UserForm/LoginForm/LoginForm.js

@@ -11,12 +11,12 @@ class LoginForm extends Component {
             ...values
         }
         apiLogin(params).then(res => {
-            if (res.data.code === 402) {
+            if (res.data.code === '402') {
                 message.success('登陆成功');
                 this.props.handleLogged()
-            } else if (res.data.code === 401) {
+            } else if (res.data.code === '401') {
                 message.error(res.data.message)
-            } else if (res.data.code === 403) {
+            } else if (res.data.code === '403') {
                 message.error(res.data.message)
             } else {
                 message.error('错误')

src/Components/UserForm/LogoutForm/LogoutForm.js

@@ -8,7 +8,7 @@ import {Link} from "react-router-dom";
 class LogoutForm extends Component {
     handleSubmitLogout = () => {
         apiLogout().then(res => {
-            if (res.data.code === 402) {
+            if (res.data.code === '402') {
                 message.success('登出成功');
                 this.props.handleLogged()
             } else {

src/Components/UserForm/MainUserForm.js

@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import {Col, message, Tabs} from "antd";
-import './UserForm.less'
+import './MainUserForm.less'
 import {apiIsLogged} from "../../API/API";
 import LoginForm from "./LoginForm/LoginForm";
 import ForgetPasswordForm from "./ForgetPasswordForm/ForgetPasswordForm";
@@ -19,11 +19,12 @@ class UserMainForm extends Component {
 
     componentWillMount() {
         apiIsLogged().then(res => {
-            if (res.data.code === 402) {
+            console.log(document.cookie)
+            if (res.data.code === '402') {
                 this.setState({
                     loginStatus: 'logged',
                 })
-            } else if (res.data.code === 401) {
+            } else if (res.data.code === '401') {
                 message.error(res.data.message)
             } else {
                 message.error('错误')

src/Components/UserForm/MainUserForm.less

@@ -0,0 +1,8 @@
+.UserTab {
+  width: 100%;
+}
+.UserCard{
+  margin-top: 12vh;
+  background-color: #ffffff;
+  border-radius: 25px;
+}

src/Components/UserForm/RegisterForm/RegisterForm.js

@@ -13,12 +13,12 @@ class RegisterForm extends Component {
             password: values.password,
         }
         apiRegister(params).then(res => {
-            if (res.data.code === 402) {
+            if (res.data.code === '402') {
                 message.success('注册成功');
                 this.props.handleSelectKey()
-            } else if (res.data.code === 401) {
+            } else if (res.data.code === '401') {
                 message.error(res.data.message)
-            } else if (res.data.code === 403) {
+            } else if (res.data.code === '403') {
                 message.error(res.data.message)
             } else {
                 message.error('错误')