5 files changed, 73 insertions, 3 deletions
diff --git a/frontend/src/App.js b/frontend/src/App.js
index af2f99d..19e3426 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Router } from '@reach/router';
 
 import Login from './Login';
+import Register from './Register';
 import Home from './Home';
 import userState from './UserState';
 import './App.css';
@@ -15,6 +16,7 @@ const App = () => {
         const { username } = resp.data;
         userState.username = username;
       } catch (err) {
+        userState.authError = err;
         console.error(err);
       }
     };
@@ -25,7 +27,8 @@ const App = () => {
     <div className="App">
       <Router>
         <Login path="/login" />
-        <Home path="/" />
+        <Register path="/register" />
+        <Home path="/" exact />
       </Router>
     </div>
   );
diff --git a/frontend/src/Home.js b/frontend/src/Home.js
index bf98bf1..cc37156 100644
--- a/frontend/src/Home.js
+++ b/frontend/src/Home.js
@@ -5,6 +5,12 @@ import LogoutBtn from './LogoutBtn';
 import userState from './UserState';
 
 const Home = observer(({ user }) => {
+  if (user.authError) {
+    const err = user.authError;
+    const text = (err.response && err.response.data.message) || String(err);
+    return <div className="error">{text}</div>;
+  }
+
   if (!user.username) {
     return 'Loading...';
   }
diff --git a/frontend/src/Login.js b/frontend/src/Login.js
index e30b496..1a1cb2b 100644
--- a/frontend/src/Login.js
+++ b/frontend/src/Login.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { navigate } from '@reach/router';
+import { navigate, Link } from '@reach/router';
 
 import axios from './axios';
 import userState from './UserState';
@@ -13,6 +13,7 @@ const Login = () => {
     try {
       const resp = await axios.post('/login', data);
       const { username } = resp.data;
+      userState.authError = null;
       userState.username = username;
       navigate('/');
     } catch (err) {
@@ -34,8 +35,14 @@ const Login = () => {
       <label>
         Password <input name="password" type="password" ref={register} required />
       </label>
+      <label>
+        Remember me <input name="remember" type="checkbox" ref={register} />
+      </label>
       <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>
   );
diff --git a/frontend/src/Register.js b/frontend/src/Register.js
new file mode 100644
index 0000000..e49b4ea
--- /dev/null
+++ b/frontend/src/Register.js
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { navigate } from '@reach/router';
+
+import axios from './axios';
+import userState from './UserState';
+
+const Register = () => {
+  const { register, handleSubmit, watch, errors } = useForm();
+  const [ loginError, setLoginError ] = useState(null);
+
+  const onSubmit = async data => {
+    if (data.password !== data.confirm_password) {
+      setLoginError('Passwords do not match.');
+      return;
+    }
+    try {
+      const resp = await axios.post('/register', 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>Register new account</h1>
+      <label>
+        Username <input name="username" type="text" ref={register} required />
+      </label>
+      <label>
+        Password <input name="password" type="password" ref={register} required />
+      </label>
+      <label>
+        Confirm password <input name="confirm_password" type="password" ref={register} required />
+      </label>
+      <button type="submit">Register</button>
+      <div className="error">{loginError}</div>
+      {/* <div className="error">{errors}</div> */}
+    </form>
+  );
+};
+
+export default Register;
diff --git a/frontend/src/UserState.js b/frontend/src/UserState.js
index 21c2587..d6dcb13 100644
--- a/frontend/src/UserState.js
+++ b/frontend/src/UserState.js
@@ -2,10 +2,12 @@ import { observable, decorate } from 'mobx';
 
 class UserState {
   username = null;
+  authError = false;
 }
 
 decorate(UserState, {
   username: observable,
+  authError: observable,
 });
 
 const userState = new UserState();