完成强制跳转登录页面、完成用户信息存储

src/login/login.js

@@ -1,4 +1,8 @@
 import { Component } from 'react';
+import { apis } from '../helper/apis';
+import { post } from '../helper/axios';
+import History from '../helper/history';
+import Spinner from '../components/Spinner/Spinner';
 import './login.css';
 
 export class LogInContainer extends Component {
@@ -7,6 +11,7 @@ export class LogInContainer extends Component {
     this.state = {
       username: '',
       password: '',
+      processing: false,
       error: false,
       errorMessage: '',
     };
@@ -20,40 +25,57 @@ export class LogInContainer extends Component {
   handleSubmit(e) {
     e.preventDefault();
     const { username, password } = this.state;
-    this.props.login(username, password);
+    if (!username)
+      return this.setState({ error: true, errorMessage: '学号不能为空' });
+    if (!password)
+      return this.setState({ error: true, errorMessage: '密码不能为空' });
+    if (!username.match(/^\d*$/))
+      return this.setState({ error: true, errorMessage: '学号必须为数字' });
+    this.setState({ processing: true });
+    post(apis.login, { username, password }).then(({ data, status, networkStatus }) => {
+      this.setState({ processing: false });
+      if (networkStatus !== 200) return;
+      if (!status) return this.setState({ error: true, errorMessage: data });
+      localStorage.setItem('jwt', data);
+      History.replace('/');
+    });
   }
 
   render() {
-    const { error, errorMessage } = this.state;
+    const { error, errorMessage, processing } = this.state;
     return (
       <div className="login">
-        <h1>Login</h1>
+        <h1>登录</h1>
         <form onSubmit={this.handleSubmit.bind(this)}>
           <div className="form-group">
-            <label htmlFor="username">Username</label>
             <input
               type="text"
               name="username"
               className="form-control"
-              placeholder="Username"
+              placeholder="学号"
               onChange={this.handleChange.bind(this)}
             />
           </div>
           <div className="form-group">
-            <label htmlFor="password">Password</label>
             <input
               type="password"
               name="password"
               className="form-control"
-              placeholder="Password"
+              placeholder="密码"
               onChange={this.handleChange.bind(this)}
             />
           </div>
-          <button type="submit" className="btn btn-primary">
-            Login
+          <button type="submit" className="btn btn-straight btn-sdu" disabled={processing || !this.state.username || !this.state.password}>
+            {
+              processing
+              ? (
+                <Spinner />
+              )
+              : "登录"
+            }
           </button>
           {error &&
-            <div className="alert alert-danger">
+            <div className={"alert"}>
               {errorMessage}
             </div>}
         </form>