Fix Login and Register also Discover Page Implemented

controllers/AuthController.js

@@ -21,7 +21,6 @@ const signToken = id => {
 // Logging Process.
 const login = catchAsync(async (req, res, next) => {
     const { email, password } = req.body;
-
     // 1) Check if email and password exist.
     if (!email || !password) {
         return next(new AppError('Please provide email and password!', 400));
@@ -35,7 +34,6 @@ const login = catchAsync(async (req, res, next) => {
     ) {
         return next(new AppError('Incorrect email or password', 401));
     }
-
     // 3) If everything is ok, send token to client
     const token = loginUser._id;
     res.status(200).json({

models/User.js

@@ -89,6 +89,8 @@ const User = new mongoose.model('User', userSchema);
 // Get one user.
 // eslint-disable-next-line no-unused-vars
 const getUser = (email, password) => {
+    console.log('email :', email);
+    console.log('password :', password);
     return User.findOne({ email }).select('+password');
 };
 

view/src/App.js

@@ -7,13 +7,14 @@ import Details from './Layouts/Details';
 import MovieShowItem from './components/MovieShowItem'
 import ActorItem from './components/ActorItem';
 import Profile from './Layouts/Profile';
+import Discover from './Layouts/Discover'
 class App extends Component {
     // App State.
     state = {};
 
     // Rendering
     render() {
-        return <Profile></Profile>
+        return <Discover></Discover>
     }
 }
 

view/src/Assets/CSS/Discover.css

@@ -0,0 +1,15 @@
+.discover-container{
+    display: flex;
+    flex-direction: column;
+
+}
+
+.discover-list-header{
+    flex-grow: 1;
+    margin-top: 8%;
+}
+
+.movies-show-container{
+    padding-left:2%;
+
+}

view/src/Assets/CSS/Nav.css

@@ -10,33 +10,34 @@
 }
 
 .nav-bar-fixed-top.scrolled {
-  background-color: #000 !important;
-  transition: background-color 200ms linear;
+    background-color: #000 !important;
+    transition: background-color 200ms linear;
 }
 
-.form{
-    display:flex;
-    width:20%;
+.form {
+    display: flex;
+    width: 20%;
     height: 50%;
     align-self: center;
     justify-content: space-between;
 }
 
 .search-field {
     background-color: white;
-    border: 1.5px solid #ED1C24;
+    border: 1.5px solid #ed1c24;
     border-radius: 8px;
     width: 90%;
     height: 100%;
-    padding: 10px;
+    padding: 15px;
     align-self: center;
+
 }
 
 .search-btn {
     border: 0;
-    width:10%;
+    width: 10%;
     background-color: rgba(255, 0, 0, 0);
-    color: #ED1C24;
+    color: #ed1c24;
 }
 
 .btns-logo {
@@ -77,4 +78,11 @@
     border: none;
 }
 
+.icon {
+    margin-right: 10px;
+    position:absolute;
+    left:15.5%;
+    top:33%;
+    min-width:22px;
+}
 

view/src/Layouts/Discover.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import NavBar from '../components/NavBar';
+import '../Assets/CSS/Discover.css';
+import MovieShowItem from '../components/MovieShowItem';
+class Discover extends Component {
+    render() {
+        return (
+            <div className="discover-container">
+                <NavBar></NavBar>
+                <div className="discover-list-header">
+                    <hr className="line" />
+                    <div className="header-tabs">
+                        <button className="header-btns">Trending</button>
+                        <div className="ver-line"></div>
+                        <button className="header-btns">Popular</button>
+                    </div>
+                    <hr className="line" />
+                </div>
+                <div className="movies-show-container">
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                    <MovieShowItem></MovieShowItem>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Discover;

view/src/Layouts/Login.js

@@ -5,7 +5,8 @@ import axios from 'axios';
 class Login extends Component {
     state = {
         email: '',
-        password: ''
+        password: '',
+        loggedUserToken: ''
     };
 
     handleChange = event => {
@@ -16,16 +17,13 @@ class Login extends Component {
         });
     };
 
-    handleSubmit = event => {
+    handleSubmit = async event => {
         event.preventDefault();
-        axios
-            .post('/login', this.state)
-            .then(response => {
-                console.log(response.date);
-            })
-            .catch(error => {
-                console.log(error);
-            });
+        const user = await axios.post('/login', this.state);
+        console.log('user :', user);
+        const { token } = user.data;
+        console.log('token :', token);
+        this.setState({ loggedUserToken: token });
     };
 
     render() {

view/src/Layouts/Profile.js

@@ -7,7 +7,7 @@ class Profile extends Component {
         return (
             <div>
                 <NavBar></NavBar>
-                <div className="user-info">
+                <div className="container-fluid user-info ">
                     <img
                         className="profile-cover"
                         src={require('../Assets/Images/Profile-cover.svg')}

view/src/Layouts/Register.js

@@ -2,16 +2,24 @@ import React, { Component } from 'react';
 import NavBar from '../components/NavBar';
 import '../Assets/CSS/Register.css';
 import axios from 'axios';
+import { Redirect } from 'react-router-dom';
 class Register extends Component {
     state = {
         newUser: {
             name: '',
             email: '',
             password: '',
             country: ''
-        }
+        },
+        userToken: '',
+        user: {}
     };
 
+    componentDidUpdate(prevProps, prevState) {
+        console.log('user :', this.state.user);
+    }
+
+
     handleChange = event => {
         console.log(event.target.value);
         this.setState({
@@ -23,16 +31,12 @@ class Register extends Component {
         });
     };
 
-    handleSubmit = event => {
+    handleSubmit = async event => {
         event.preventDefault();
-        axios
-            .post('/signup', this.state.newUser)
-            .then(response => {
-                console.log(response.date);
-            })
-            .catch(error => {
-                console.log(error);
-            });
+        const createdUser = await axios.post('/signup', this.state.newUser);
+        this.setState({ userToken: createdUser.data.token });
+        this.setState({ user: createdUser.data.data.user });
+        // Redirect('/profile')
     };
     render() {
         return (

view/src/components/SearchField.js

@@ -37,12 +37,13 @@ class SearchField extends Component {
                     value={query}
                     name="query"
                 ></input>
+                <img className="icon" src={require('../Assets/Icons/SearchIcon.svg')} />
                 <button
                     className="search-btn"
                     name="search"
                     value="search"
                     onClick={this.handleSubmit}
-                    hidden = 'true'
+                    hidden="true"
                 >
                     Search
                 </button>