From 999f8846942eacd1647e79c60ce462dbf02d6682 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Tue, 5 Apr 2022 19:51:13 -0500
Subject: [PATCH] Login now displays an error message on a failed login.

---
 sports-matcher/client/src/pages/Login.js      | 27 ++++++++++++++++---
 .../client/src/utils/httpClients.js           |  8 +++---
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/sports-matcher/client/src/pages/Login.js b/sports-matcher/client/src/pages/Login.js
index a7f5793..526852e 100644
--- a/sports-matcher/client/src/pages/Login.js
+++ b/sports-matcher/client/src/pages/Login.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Card, Container, Form } from "react-bootstrap";
+import { Alert, Button, Card, Container, Form } from "react-bootstrap";
 import { globalContext } from "../context";
 import { apiClient } from "../utils/httpClients";
 import { guard } from "../utils/routing";
@@ -9,7 +9,8 @@ export default class Login extends React.Component {
         super(props);
         this.state = {
             email: "",
-            password: ""
+            password: "",
+            errorDisplayed: false,
         };
 
         this.attemptLogin = this.attemptLogin.bind(this);
@@ -33,18 +34,36 @@ export default class Login extends React.Component {
         const loginResponse = await apiClient.post("/user/login", {
             email: this.state.email,
             password: this.state.password,
+        }, {
+            validateStatus: function (status) {
+                return status === 200 || status === 401 || status === 400;
+            }
         });
-
         if (loginResponse.status === 200) {
             this.context.navigate("/dashboard", { replace: true });
+        } else if (loginResponse.status === 401) {
+            this.setState({ errorDisplayed: true });
         }
     }
 
     render() {
+        let errorMsg = (
+            <div></div>
+        );
+        if (this.state.errorDisplayed) {
+            errorMsg = (
+                < Alert variant="danger" onClose={() => this.setState({ errorDisplayed: false })} dismissible >
+                    <Alert.Heading>Incorrect credentials</Alert.Heading>
+                    <p>Double check your provided e-mail and password!</p>
+                </Alert >
+            );
+        }
+
         return (
             <div className="d-flex justify-content-center align-items-center
             page-root">
-                <Container style={{ maxWidth: "30rem" }}>
+                {errorMsg}
+                <Container style={{ maxWidth: "35rem" }}>
                     <Card>
                         <Card.Body>
                             <Card.Title>Login</Card.Title>
diff --git a/sports-matcher/client/src/utils/httpClients.js b/sports-matcher/client/src/utils/httpClients.js
index 1e8231e..95af7d7 100644
--- a/sports-matcher/client/src/utils/httpClients.js
+++ b/sports-matcher/client/src/utils/httpClients.js
@@ -1,9 +1,7 @@
 import axios from "axios";
 
-const apiClientConf = {
+export const apiClient = axios.create({
     baseURL: process.env.REACT_APP_API_HOST + "/api/",
     timeout: 5000,
-    withCredentials: process.env.NODE_ENV === "development"
-};
-console.log(apiClientConf);
-export const apiClient = axios.create(apiClientConf);
\ No newline at end of file
+    withCredentials: process.env.NODE_ENV === "development",
+});
\ No newline at end of file