frontend/src/Login.js


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

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { navigate, Link } from '@reach/router';

import axios from './axios';
import userState from './UserState';

const Login = () => {
  const { register, handleSubmit } = useForm();
  const [ loginError, setLoginError ] = useState(null);

  const onSubmit = async data => {
    try {
      const resp = await axios.post('/login', data);
      const { username } = resp.data;
      userState.authError = null;
      userState.username = username;
      navigate('/');
    } catch (err) {
      if (err.response && err.response.data) {
        setLoginError(err.response.data.error);
      } else {
        console.error(err);
        setLoginError('Unknown error occurred. See console for details.');
      }
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1 class="title">Log in</h1>
      <label className="label">
        Username <input className="input" name="username" type="text" ref={register} required />
      </label>
      <label className="label">
        Password <input className="input" name="password" type="password" ref={register} required />
      </label>
      <button className="button" type="submit">
        Log in
      </button>
      <div className="error">{loginError}</div>
      <div>
        No account? Register <Link to="/register">here</Link>.
      </div>
      {/* <div className="error">{errors}</div> */}
    </form>
  );
};

export default Login;