add login page to frontend

coderj001 · coderj001 · commit 84b1de08e0ec · 2021-04-15T21:40:08.000+05:30
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -3,6 +3,7 @@ import { Container } from "react-bootstrap";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import HomePage from "./Pages/HomePage";
 import ProductPage from "./Pages/ProductPage";
+import LoginPage from "./Pages/LoginPage";
 import CartPage from "./Pages/CartPage";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
@@ -17,6 +18,7 @@ function App() {
             <Route path="/" component={HomePage} exact />
             <Route path="/product/:id" component={ProductPage} />
             <Route path="/cart/:id?" component={CartPage} />
+            <Route path="/login" component={LoginPage} />
           </Switch>
         </Container>
       </main>
diff --git a/frontend/src/Pages/LoginPage.jsx b/frontend/src/Pages/LoginPage.jsx
@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import { Form, Button, Row, Col } from "react-bootstrap";
+import Loader from "../components/Loader";
+import Message from "../components/Message";
+import FormContainer from "../components/FormContainer";
+import { login } from "../actions/userActions";
+
+function LoginPage({ location, history }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const dispatch = useDispatch();
+  const redirect = location.search ? location.search.split("=")[1] : "/";
+
+  const { loading, userInfo, error } = useSelector((state) => state.userLogin);
+
+  useEffect(() => {
+    if (userInfo) {
+      history.push(redirect);
+    }
+  }, [history, userInfo, redirect]);
+
+  const submitHandler = (e) => {
+    e.preventDefault();
+    dispatch(login(email, password));
+  };
+
+  return (
+    <FormContainer>
+      <h1>Sign In</h1>
+      {error && <Message variant="danger">{error}</Message>}
+      {loading && <Loader />}
+      <Form onSubmit={submitHandler}>
+        <Form.Group controlId="email">
+          <Form.Label>Enter Email</Form.Label>
+          <Form.Control
+            type="email"
+            placeholder="Enter Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          ></Form.Control>
+        </Form.Group>
+        <Form.Group controlId="password">
+          <Form.Label>Enter Password</Form.Label>
+          <Form.Control
+            type="password"
+            placeholder="Enter Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          ></Form.Control>
+        </Form.Group>
+        <Button type="submit" variant="primary">
+          Sign In
+        </Button>
+      </Form>
+      <Row className="py-3">
+        <Col>
+          New Customer?{" "}
+          <Link to={redirect ? `/register?redirect=${redirect}` : "/register"}>
+            Register
+          </Link>
+        </Col>
+      </Row>
+    </FormContainer>
+  );
+}
+
+export default LoginPage;
diff --git a/frontend/src/actions/productActions.jsx b/frontend/src/actions/productActions.jsx
@@ -18,8 +18,8 @@ export const listProducts = () => async (dispatch) => {
     dispatch({
       type: PRODUCT_LIST_FAIL,
       payload:
-        err.response && err.response.data.message
-          ? err.response.data.message
+        err.response && err.response.data.detail
+          ? err.response.data.detail
           : err.message,
     });
   }
@@ -34,8 +34,8 @@ export const listProductDetails = (id) => async (dispatch) => {
     dispatch({
       type: PRODUCT_DETAILS_FAIL,
       payload:
-        err.response && err.response.data.message
-          ? err.response.data.message
+        err.response && err.response.data.detail
+          ? err.response.data.detail
           : err.message,
     });
   }
diff --git a/frontend/src/actions/userActions.jsx b/frontend/src/actions/userActions.jsx
@@ -0,0 +1,35 @@
+import {
+  USER_LOGIN_REQUEST,
+  USER_LOGIN_SUCCESS,
+  USER_LOGIN_FAIL,
+  USER_LOGOUT,
+} from "../constants/userConstants.jsx";
+
+import axios from "axios";
+
+export const login = (email, password) => async (dispatch) => {
+  try {
+    dispatch({ type: USER_LOGIN_REQUEST });
+    const config = {
+      "Content-type": "application/json",
+    };
+    const { data } = await axios.post(
+      "/api/users/login/",
+      {
+        username: email,
+        password: password,
+      },
+      config
+    );
+    dispatch({ type: USER_LOGIN_SUCCESS, payload: data });
+    localStorage.setItem("userInfo", JSON.stringify(data));
+  } catch (err) {
+    dispatch({
+      type: USER_LOGIN_FAIL,
+      payload:
+        err.response && err.response.data.detail
+          ? err.response.data.detail
+          : err.message,
+    });
+  }
+};
diff --git a/frontend/src/components/FormContainer.jsx b/frontend/src/components/FormContainer.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Container, Row, Col } from "react-bootstrap";
+
+function FormContainer({ children }) {
+  return (
+    <Container>
+      <Row className="justify-content-md-center">
+        <Col xs={12} md={6}>
+          {children}
+        </Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default FormContainer;
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -23,7 +23,8 @@ function Navigaton() {
               </LinkContainer>
               <LinkContainer to="/login">
                 <Nav.Link>
-                  <FontAwesomeIcon icon={faSignInAlt} /> Login
+                  <FontAwesomeIcon icon={faSignInAlt} />
+                  Login
                 </Nav.Link>
               </LinkContainer>
             </Nav>
diff --git a/frontend/src/constants/userConstants.jsx b/frontend/src/constants/userConstants.jsx
@@ -0,0 +1,4 @@
+export const USER_LOGIN_REQUEST = "USER_LOGIN_REQUEST";
+export const USER_LOGIN_SUCCESS = "USER_LOGIN_SUCCESS";
+export const USER_LOGIN_FAIL = "USER_LOGIN_FAIL";
+export const USER_LOGOUT = "USER_LOGOUT";
diff --git a/frontend/src/reducers/userReducer.jsx b/frontend/src/reducers/userReducer.jsx
@@ -0,0 +1,21 @@
+import {
+  USER_LOGIN_REQUEST,
+  USER_LOGIN_SUCCESS,
+  USER_LOGIN_FAIL,
+  USER_LOGOUT,
+} from "../constants/userConstants.jsx";
+
+export const userReducer = (state = {}, action) => {
+  switch (action.type) {
+    case USER_LOGIN_REQUEST:
+      return { loading: true };
+    case USER_LOGIN_SUCCESS:
+      return { loading: false, userInfo: action.payload };
+    case USER_LOGIN_FAIL:
+      return { loading: false, error: action.payload };
+    case USER_LOGOUT:
+      return {};
+    default:
+      return state;
+  }
+};
diff --git a/frontend/src/store.jsx b/frontend/src/store.jsx
@@ -6,19 +6,26 @@ import {
   productListReducer,
 } from "./reducers/productReducer";
 import { cartReducer } from "./reducers/cartReducer";
+import { userReducer } from "./reducers/userReducer";
 
 const reducer = combineReducers({
   productList: productListReducer,
   productDetails: productDetailsReducer,
   cart: cartReducer,
+  userLogin: userReducer,
 });
 
 const cartItemsFromStorage = localStorage.getItem("cartItems")
   ? JSON.parse(localStorage.getItem("cartItems"))
   : [];
 
+const userInfoFromStorage = localStorage.getItem("userInfo")
+  ? JSON.parse(localStorage.getItem("userInfo"))
+  : null;
+
 const initialState = {
   cart: { cartItems: cartItemsFromStorage },
+  userLogin: { userInfo: userInfoFromStorage },
 };
 
 const middleware = [thunk];
