#11 Add alert messages

src/pages/auth/LoginForm.js

@@ -13,32 +13,36 @@ import { Link } from "react-router-dom";
 import styles from "../../styles/SignInUpForm.module.css";
 import btnStyles from "../../styles/Button.module.css";
 import appStyles from "../../App.module.css";
+import alertStyles from "../../styles/AlertMessages.module.css";
 
 import axios from "axios";
 import { useHistory } from "react-router-dom/";
 
 function LogInForm() {
-  const [signInData, setSignInData] = useState({
+  const [logInData, setLogInData] = useState({
     username: "",
     password: "",
   });
 
-  const { username, password } = signInData;
+  const { username, password } = logInData;
   const history = useHistory();
+  const [errors, setErrors] = useState({});
 
   const handleChange = (event) => {
-    setSignInData({
-      ...signInData,
+    setLogInData({
+      ...logInData,
       [event.target.name]: event.target.value,
     });
   };
 
   const handleSubmit = async (event) => {
     event.preventDefault();
     try {
-      await axios.post("/dj-rest-auth/login/", signInData);
+      await axios.post("/dj-rest-auth/login/", logInData);
       history.push("/");
-    } catch (err) {}
+    } catch (err) {
+      setErrors(err.response?.data);
+    }
   };
 
   return (
@@ -70,6 +74,15 @@ function LogInForm() {
                 onChange={handleChange}
               />
             </Form.Group>
+            {errors.username?.map((message, idx) => (
+              <Alert
+                variant="warning"
+                key={idx}
+                className={alertStyles["alert-warning-custom"]}
+              >
+                {message}
+              </Alert>
+            ))}
 
             <Form.Group controlId="password" className="mb-3">
               <Form.Label className="d-none">Password</Form.Label>
@@ -82,13 +95,33 @@ function LogInForm() {
                 onChange={handleChange}
               />
             </Form.Group>
+            {errors.password?.map((message, idx) => (
+              <Alert
+                variant="warning"
+                className={alertStyles["alert-warning-custom"]}
+                key={idx}
+              >
+                {message}
+              </Alert>
+            ))}
 
             <Button
               className={`${btnStyles.Button} ${btnStyles.Wide} ${btnStyles.Bright}`}
               type="submit"
             >
               Login
             </Button>
+
+            {errors.non_field_errors?.map((message, idx) => (
+              <Alert
+                variant="warning"
+                key={idx}
+                className={alertStyles["alert-warning-custom"]}
+              >
+                {message}
+              </Alert>
+            ))}
+
           </Form>
         </Container>
         <Container className={`mt-3 ${appStyles.Content}`}>

src/styles/AlertMessages.module.css

@@ -3,4 +3,5 @@
     color: var(--clr-primary-light);
     border: 1px solid var(--clr-accent-pink);
     padding: 8px;
+    margin-top: 2px;
 }