1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, { useState } from "react";import { useHistory } from "react-router-dom";
export default () => {  const history = useHistory();
  const [username, setUsername] = useState("");  const [password, setPassword] = useState("");
  function login() {    fetch("/user/login", {      method: "POST",      headers: {        "content-type": "application/json",      },      body: JSON.stringify({ username, password }),    }).then((resp) => resp.json()).then((data) => {      if (data.username === username) {        history.push({ pathname: "/list", state: { username } });      } else {        throw new Error();      }    }).catch(() => {      alert("failed");    });  }
  function signup() {    fetch("/user/signup", {      method: "POST",      headers: {        "content-type": "application/json",      },      body: JSON.stringify({ username, password }),    }).then((resp) => resp.json()).then((data) => {      if (data.username === username) {        alert("success");      } else {        throw new Error();      }    }).catch(() => {      alert("failed");    });  }
  return (    <>      <label htmlFor="username">Username:</label>      <input        id="username"        type="text"        onChange={(e) => setUsername(e.target.value)}        autoComplete="off"      />      <br />      <label htmlFor="password">Password:</label>      <input        id="password"        type="password"        onChange={(e) => setPassword(e.target.value)}      />      <br />      <button onClick={login}>Login</button>      <button onClick={signup}>Sign up</button>    </>  );};