Implement password strength requirements

1 files changed, 7 insertions, 6 deletions

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>
   );