display error messages for sign-up errors

frontend/src/components/Signup.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { Box, Button, Form, Text, TextInput } from "grommet";
 import { getBaseURL } from "./utils.js";
 
 const Signup = () => {
@@ -7,6 +8,7 @@ const Signup = () => {
   const [password2, setPassword2] = useState("");
   const [errors, setErrors] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [errorMessages, setErrorMessages] = useState([]);
 
   useEffect(() => {
     if (localStorage.getItem("token") !== null) {
@@ -45,26 +47,48 @@ const Signup = () => {
           setPassword2("");
           localStorage.clear();
           setErrors(true);
+          if (data.email) setErrorMessages([...errorMessages, ...data.email]);
+          if (data.password1)
+            setErrorMessages([...errorMessages, ...data.password1]);
+          if (data.password2)
+            setErrorMessages([...errorMessages, ...data.password2]);
+          if (data.non_field_errors)
+            setErrorMessages([...errorMessages, ...data.non_field_errors]);
+          console.log("Errors are", errorMessages);
         }
       });
   };
 
+  function displayErrors() {
+    if (errorMessages.length === 0) return null;
+    else
+      return (
+        <Box pad="small" width="medium">
+          <Text color="red">{errorMessages}</Text>
+        </Box>
+      );
+  }
+
   return (
-    <div>
-      {loading === false && <h1>Signup</h1>}
+    <Box width="medium" pad="small">
+      {loading === false && <h1>Sign up</h1>}
       {errors === true && <h2>Cannot signup with provided credentials</h2>}
-      <form onSubmit={onSubmit}>
+      <Form onSubmit={onSubmit}>
         <label htmlFor="email">Email address:</label> <br />
-        <input
+        <TextInput
           name="email"
           type="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           required
         />{" "}
         <br />
-        <label htmlFor="password1">Password:</label> <br />
-        <input
+        <label htmlFor="password1">
+          Password (at least 8 characters, at least 2 types (uppercase,
+          lowercase, numeric, symbol)):
+        </label>{" "}
+        <br />
+        <TextInput
           name="password1"
           type="password"
           value={password1}
@@ -73,17 +97,18 @@ const Signup = () => {
         />{" "}
         <br />
         <label htmlFor="password2">Confirm password:</label> <br />
-        <input
+        <TextInput
           name="password2"
           type="password"
           value={password2}
           onChange={(e) => setPassword2(e.target.value)}
           required
         />{" "}
         <br />
-        <input type="submit" value="Signup" />
-      </form>
-    </div>
+        {displayErrors()}
+        <Button type="submit" label="Signup" primary={true} />
+      </Form>
+    </Box>
   );
 };