From 7e54ab35e591114ac64c42b79a15e21d2d092d95 Mon Sep 17 00:00:00 2001
From: mohammedsalah7 <mohmsal96@gmail.com>
Date: Mon, 8 Nov 2021 12:57:35 +0200
Subject: [PATCH 1/2]   create login component #64

---
 client/package.json                   |   3 +-
 client/src/App.js                     |   2 +-
 client/src/components/Navbar/index.js |  45 +++++++-
 client/src/components/login/index.jsx | 150 ++++++++++++++++++++++++++
 client/src/components/login/style.css |   0
 5 files changed, 194 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/login/index.jsx
 create mode 100644 client/src/components/login/style.css

diff --git a/client/package.json b/client/package.json
index 1a91585..1395023 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,7 +16,8 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3"
+    "react-scripts": "4.0.3",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/client/src/App.js b/client/src/App.js
index b3e97a5..8709b66 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,7 +1,7 @@
 import { BrowserRouter as Router } from 'react-router-dom';
-import PropertyCard from './components/PropertyCard';
 import NavBar from './components/Navbar';
 import { Footer } from './components';
+// import Login from './components/login';
 
 function App() {
   return (
diff --git a/client/src/components/Navbar/index.js b/client/src/components/Navbar/index.js
index 4d2c5ca..6a65b19 100644
--- a/client/src/components/Navbar/index.js
+++ b/client/src/components/Navbar/index.js
@@ -6,11 +6,30 @@ import {
 } from '@mui/material';
 import './style.css';
 
+import Backdrop from '@mui/material/Backdrop';
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import Fade from '@mui/material/Fade';
+import Login from '../login';
 import Logo from '../../asstes/logo.png';
 import PresonImg from '../../asstes/avatar.png';
 
 function NavBar() {
-  const [logged, setLogged] = useState(true);
+  const [logged, setLogged] = useState(false);
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 800,
+    bgcolor: 'background.paper',
+    // border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+  };
   return (
     <Container maxWidth="xl">
       <nav className="container">
@@ -54,9 +73,10 @@ function NavBar() {
           }}
           >
             {' '}
-            <Link to="/login" className="btn-host">
-              <ListItemText primary="Host my House" style={{ color: '#fff' }} />
-            </Link>
+            {/* <Link to="/login" className="btn-host"> */}
+            {/* <ListItemText primary="Host my House" style={{ color: '#fff' }} /> */}
+            <Button onClick={handleOpen}>Open modal</Button>
+            {/* </Link> */}
           </Button>
           {logged ? (
             <Link to="/">
@@ -68,6 +88,23 @@ function NavBar() {
         </div>
 
       </nav>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <Login setLogged={setLogged} handleClose={handleClose} />
+          </Box>
+        </Fade>
+      </Modal>
     </Container>
 
   );
diff --git a/client/src/components/login/index.jsx b/client/src/components/login/index.jsx
new file mode 100644
index 0000000..0ba8c97
--- /dev/null
+++ b/client/src/components/login/index.jsx
@@ -0,0 +1,150 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-console */
+import { useState } from 'react';
+import {
+  Grid, Paper, Avatar, TextField, Button, Typography,
+} from '@mui/material';
+import { useHistory, Link } from 'react-router-dom';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+const Login = ({ handleClose, setLogged }) => {
+  // console.log(handleClose);
+  const history = useHistory();
+  const [data, setData] = useState({ email: '', password: '' });
+  const [error, setError] = useState({ email: false, password: false });
+  const [LoginError, setLoginError] = useState('');
+  const [LoginSuccessful, setLoginSuccessful] = useState('');
+
+  const { email, password } = data;
+
+  const marginBtm = { marginBottom: 10 };
+  const avatarStyle = { backgroundColor: '#1bbd7e' };
+  const btnstyle = {
+    margin: '8px 0',
+    backgroundColor: '#CBA41B',
+  };
+  const btnTopstyle = {
+    margin: '8px ',
+    backgroundColor: '#2E72DB',
+  };
+  const box = {
+    border: '1px solid red',
+    width: '50%',
+    display: 'flex',
+    flexDirection: 'column',
+
+  };
+
+  const handleError = (callback) => {
+    if (email === '' && password === '') {
+      setError({ email: true, password: true });
+    } else if (email === '') {
+      setError({ email: true, password: false });
+    } else if (password === '') {
+      setError({ email: false, password: true });
+    } else {
+      setError({ email: false, password: false });
+      callback();
+    }
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setData({ ...data, [name]: value });
+  };
+
+  const handleSubmit = (e) => {
+    // console.log('yes');
+    e.preventDefault();
+    handleError(() => {
+      axios.post('/api/v1/user/login', {
+        email,
+        password,
+      }).then((res) => {
+        setLoginSuccessful(res);
+        handleClose();
+        setLogged(true);
+        history.push('/');
+      })
+        .catch((err) => {
+          setLoginError(err.response.data.message);
+        });
+    });
+  };
+  return (
+    <Grid>
+      <Paper>
+        <Grid align="center">
+          <h2>Welcome Back</h2>
+        </Grid>
+        <Grid display="flex" justifyContent="space-between">
+          <Button type="submit" color="primary" variant="contained" style={btnTopstyle} fullWidth>
+            Sign in with Google
+            {' '}
+
+          </Button>
+          <Button type="submit" color="primary" variant="contained" style={btnTopstyle} fullWidth>
+            Sign in with Facebook
+
+          </Button>
+
+        </Grid>
+        <Grid align="center" style={box}>
+
+          <TextField
+            label="email"
+            placeholder="Enter email"
+            fullWidth
+            required
+            name="email"
+            error={!!error.email}
+            value={email}
+            onChange={handleChange}
+            helperText={error.email ? 'This Field is required' : null}
+            style={marginBtm}
+          />
+          <TextField
+            label="Password"
+            placeholder="Enter password"
+            type="password"
+            name="password"
+            fullWidth
+            required
+            error={!!error.password}
+            onChange={handleChange}
+            helperText={error.password ? 'This Field is required' : null}
+          />
+
+          <Typography style={{ color: 'red' }}>
+            {LoginError}
+          </Typography>
+          {/* <Link to="/"> */}
+          <Button type="submit" color="primary" variant="contained" style={btnstyle} onClick={handleSubmit} fullWidth>Sign in</Button>
+          {/* </Link> */}
+          <Typography>
+            <Link to="/">
+              Forgot password ?
+            </Link>
+          </Typography>
+          <Typography>
+            Do you have an account ?
+            <Link to="/singup">
+              Sign Up
+            </Link>
+          </Typography>
+        </Grid>
+      </Paper>
+
+    </Grid>
+  );
+};
+
+Login.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+  setLogged: PropTypes.func.isRequired,
+
+};
+export default Login;
diff --git a/client/src/components/login/style.css b/client/src/components/login/style.css
new file mode 100644
index 0000000..e69de29

From 539594cf7038b5ac4323e58339a90160e46a02e5 Mon Sep 17 00:00:00 2001
From: mohammedsalah7 <mohmsal96@gmail.com>
Date: Mon, 8 Nov 2021 16:27:47 +0200
Subject: [PATCH 2/2] edit style login component #64

---
 client/src/assets/Iconfacebook.png    | Bin 0 -> 2827 bytes
 client/src/assets/Icongoogle.png      | Bin 0 -> 3010 bytes
 client/src/components/Navbar/index.js |  12 ++---
 client/src/components/login/index.jsx |  73 ++++++++++++++++----------
 4 files changed, 51 insertions(+), 34 deletions(-)
 create mode 100644 client/src/assets/Iconfacebook.png
 create mode 100644 client/src/assets/Icongoogle.png

diff --git a/client/src/assets/Iconfacebook.png b/client/src/assets/Iconfacebook.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa21d3a28effc2afb02971a77c2f3909069255f3
GIT binary patch
literal 2827
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

literal 0
HcmV?d00001

diff --git a/client/src/assets/Icongoogle.png b/client/src/assets/Icongoogle.png
new file mode 100644
index 0000000000000000000000000000000000000000..79ee307f949027be75dac0edc093e1da7fba20c9
GIT binary patch
literal 3010
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
Ef-k0+ivR!s

literal 0
HcmV?d00001

diff --git a/client/src/components/Navbar/index.js b/client/src/components/Navbar/index.js
index 6a65b19..7c17076 100644
--- a/client/src/components/Navbar/index.js
+++ b/client/src/components/Navbar/index.js
@@ -24,9 +24,9 @@ function NavBar() {
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    width: 800,
+    width: 650,
     bgcolor: 'background.paper',
-    // border: '2px solid #000',
+    borderRadius: 3,
     boxShadow: 24,
     p: 4,
   };
@@ -72,11 +72,9 @@ function NavBar() {
             marginRight: '30px', alignSelf: 'center', backgroundColor: '#3781CB', color: '#FFFFFF', textTransform: 'none',
           }}
           >
-            {' '}
-            {/* <Link to="/login" className="btn-host"> */}
-            {/* <ListItemText primary="Host my House" style={{ color: '#fff' }} /> */}
-            <Button onClick={handleOpen}>Open modal</Button>
-            {/* </Link> */}
+
+            <Button onClick={handleOpen} style={{ color: '#fff', textTransform: 'none' }}>Login</Button>
+
           </Button>
           {logged ? (
             <Link to="/">
diff --git a/client/src/components/login/index.jsx b/client/src/components/login/index.jsx
index 0ba8c97..9c38b30 100644
--- a/client/src/components/login/index.jsx
+++ b/client/src/components/login/index.jsx
@@ -1,17 +1,15 @@
 /* eslint-disable no-unused-vars */
-/* eslint-disable no-console */
 import { useState } from 'react';
 import {
   Grid, Paper, Avatar, TextField, Button, Typography,
 } from '@mui/material';
 import { useHistory, Link } from 'react-router-dom';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
 import PropTypes from 'prop-types';
 import axios from 'axios';
+import Facebook from '../../assets/Iconfacebook.png';
+import Google from '../../assets/Icongoogle.png';
 
 const Login = ({ handleClose, setLogged }) => {
-  // console.log(handleClose);
   const history = useHistory();
   const [data, setData] = useState({ email: '', password: '' });
   const [error, setError] = useState({ email: false, password: false });
@@ -21,21 +19,42 @@ const Login = ({ handleClose, setLogged }) => {
   const { email, password } = data;
 
   const marginBtm = { marginBottom: 10 };
-  const avatarStyle = { backgroundColor: '#1bbd7e' };
   const btnstyle = {
     margin: '8px 0',
     backgroundColor: '#CBA41B',
   };
-  const btnTopstyle = {
+  const loginWithSocialMedia = {
     margin: '8px ',
     backgroundColor: '#2E72DB',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    textTransform: 'none',
   };
-  const box = {
-    border: '1px solid red',
+  const loginWithEmail = {
     width: '50%',
     display: 'flex',
     flexDirection: 'column',
 
+  };
+  const Container = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    boxShadow: 'none',
+
+  };
+  const containerBtn = {
+    width: '90%',
+    display: 'flex',
+    alignItems: 'center',
+
+  };
+  const avatar = {
+    borderRadius: 0,
+    width: '30px',
+    height: '30px',
+
   };
 
   const handleError = (callback) => {
@@ -57,7 +76,6 @@ const Login = ({ handleClose, setLogged }) => {
   };
 
   const handleSubmit = (e) => {
-    // console.log('yes');
     e.preventDefault();
     handleError(() => {
       axios.post('/api/v1/user/login', {
@@ -76,24 +94,28 @@ const Login = ({ handleClose, setLogged }) => {
   };
   return (
     <Grid>
-      <Paper>
+      <Paper style={Container}>
         <Grid align="center">
           <h2>Welcome Back</h2>
         </Grid>
-        <Grid display="flex" justifyContent="space-between">
-          <Button type="submit" color="primary" variant="contained" style={btnTopstyle} fullWidth>
-            Sign in with Google
-            {' '}
+        <Grid style={containerBtn} display="flex" justifyContent="space-between">
+          <Button type="submit" color="primary" variant="contained" style={loginWithSocialMedia} fullWidth>
+            <Avatar alt="Remy Sharp" style={avatar} src={Google} />
 
+            Sign in with Google
           </Button>
-          <Button type="submit" color="primary" variant="contained" style={btnTopstyle} fullWidth>
+          <Button type="submit" color="primary" variant="contained" style={loginWithSocialMedia} fullWidth>
+            <Avatar alt="Remy Sharp" style={avatar} src={Facebook} />
             Sign in with Facebook
-
           </Button>
 
         </Grid>
-        <Grid align="center" style={box}>
-
+        <Grid align="center">
+          <Typography style={{ color: '#696969' }}>
+            OR
+          </Typography>
+        </Grid>
+        <Grid style={loginWithEmail}>
           <TextField
             label="email"
             placeholder="Enter email"
@@ -111,7 +133,6 @@ const Login = ({ handleClose, setLogged }) => {
             placeholder="Enter password"
             type="password"
             name="password"
-            fullWidth
             required
             error={!!error.password}
             onChange={handleChange}
@@ -121,17 +142,15 @@ const Login = ({ handleClose, setLogged }) => {
           <Typography style={{ color: 'red' }}>
             {LoginError}
           </Typography>
-          {/* <Link to="/"> */}
           <Button type="submit" color="primary" variant="contained" style={btnstyle} onClick={handleSubmit} fullWidth>Sign in</Button>
-          {/* </Link> */}
-          <Typography>
-            <Link to="/">
-              Forgot password ?
-            </Link>
-          </Typography>
+          {/* <Typography> */}
+          <Link to="/" style={{ color: '#696969', textDecoration: 'none' }}>
+            Forgot password ?
+          </Link>
+          {/* </Typography> */}
           <Typography>
             Do you have an account ?
-            <Link to="/singup">
+            <Link to="/singup" style={{ textDecoration: 'none' }}>
               Sign Up
             </Link>
           </Typography>