1 files changed, 52 insertions, 0 deletions
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;