添加新页面

src/login/login.js

@@ -0,0 +1,63 @@
+import { Component } from 'react';
+import './login.css';
+
+export class LogInContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: '',
+      password: '',
+      error: false,
+      errorMessage: '',
+    };
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    const { username, password } = this.state;
+    this.props.login(username, password);
+  }
+
+  render() {
+    const { error, errorMessage } = this.state;
+    return (
+      <div className="login">
+        <h1>Login</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"
+              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"
+              onChange={this.handleChange.bind(this)}
+            />
+          </div>
+          <button type="submit" className="btn btn-primary">
+            Login
+          </button>
+          {error &&
+            <div className="alert alert-danger">
+              {errorMessage}
+            </div>}
+        </form>
+      </div>
+    );
+  }
+}