Implement password strength requirements

4 files changed, 33 insertions, 27 deletions

diff --git a/frontend/src/Login.js b/frontend/src/Login.js
index 70fff91..a251216 100644
--- a/frontend/src/Login.js
+++ b/frontend/src/Login.js
@@ -28,7 +28,7 @@ const Login = () => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <h1 class="title">Log in</h1>
+      <h1 className="title">Log in</h1>
       <label className="label">
         Username <input className="input" name="username" type="text" ref={register} required />
       </label>
@@ -42,7 +42,6 @@ const Login = () => {
       <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
index 6ba1537..6b04816 100644
--- a/frontend/src/Register.js
+++ b/frontend/src/Register.js
@@ -7,12 +7,11 @@ import userState from './UserState';
 
 const Register = () => {
   const { register, handleSubmit } = useForm();
-  const [ loginError, setLoginError ] = useState(null);
+  const [ data, setData ] = useState({});
 
   const onSubmit = async data => {
     if (data.password !== data.confirm_password) {
-      setLoginError('Passwords do not match.');
-      return;
+      return setData({ errors: [ 'Passwords do not match.' ] });
     }
     try {
       const resp = await axios.post('/register', data);
@@ -22,10 +21,12 @@ const Register = () => {
       navigate('/');
     } catch (err) {
       if (err.response && err.response.data) {
-        setLoginError(err.response.data.error);
+        setData({
+          errors: [ err.response.data.error, ...(err.response.data.errors || []) ],
+        });
       } else {
         console.error(err);
-        setLoginError('Unknown error occurred. See console for details.');
+        setData({ errors: [ 'Unknown error occurred. See console for details.' ] });
       }
     }
   };
@@ -45,7 +46,7 @@ const Register = () => {
       <button className="button" type="submit">
         Register
       </button>
-      <div className="error">{loginError}</div>
+      <ul className="error">{data.errors ? data.errors.map(e => <li>{e}</li>) : null}</ul>
       {/* <div className="error">{errors}</div> */}
     </form>
   );
diff --git a/frontend/src/UserList.js b/frontend/src/UserList.js
index dd17ace..59c6425 100644
--- a/frontend/src/UserList.js
+++ b/frontend/src/UserList.js
@@ -1,6 +1,29 @@
 import React, { useEffect, useState } from 'react';
 import axios from './axios';
 
+const Table = ({ users }) => {
+  const userRows = !!users
+    ? users.map(user => (
+        <tr key={user.id}>
+          <td>{user.id}</td>
+          <td>{user.username}</td>
+        </tr>
+      ))
+    : null;
+
+  return (
+    <table className="table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>{userRows}</tbody>
+    </table>
+  );
+};
+
 const UserList = () => {
   const [ data, setData ] = useState({});
   useEffect(() => {
@@ -22,16 +45,6 @@ const UserList = () => {
     })();
   }, []);
 
-  const users = data.users;
-  const userRows = !!users
-    ? users.map(user => (
-        <tr key={user.id}>
-          <td>{user.id}</td>
-          <td>{user.username}</td>
-        </tr>
-      ))
-    : null;
-
   return (
     <div>
       <h2 className="subtitle">User list</h2>
@@ -39,15 +52,7 @@ const UserList = () => {
         <div className="error" key="error">
           {data.error}
         </div>
-        <table className="table">
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Username</th>
-            </tr>
-          </thead>
-          <tbody>{userRows}</tbody>
-        </table>
+        {!data.error && <Table users={data.users} />}
       </div>
     </div>
   );
diff --git a/frontend/src/axios.js b/frontend/src/axios.js
index f55b37f..2676326 100644
--- a/frontend/src/axios.js
+++ b/frontend/src/axios.js
@@ -3,6 +3,7 @@ import { navigate } from '@reach/router';
 
 axios.defaults.baseURL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:4000';
 axios.defaults.withCredentials = true;
+axios.defaults.timeout = 2000;
 
 axios.interceptors.response.use(
   response => {