(feat): userLogin

- user should login

package.json

@@ -27,8 +27,17 @@
   "homepage": "https://github.com/Stackup-Rwanda/stackup2-barefoot-frontend#readme",
   "dependencies": {
     "@babel/core": "^7.9.6",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/polyfill": "^7.10.1",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
+    "@babel/runtime": "^7.10.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@material-ui/core": "^4.10.0",
+    "@material-ui/icons": "^4.9.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",

src/components/forms/UserLogin.js

@@ -0,0 +1,172 @@
+import React, { Component } from 'react';
+import { Redirect } from 'react-router-dom';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import Link from '@material-ui/core/Link';
+import { withStyles } from '@material-ui/core/styles';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGoogle } from '@fortawesome/free-brands-svg-icons';
+import login from '../../helpers/userLogin';
+
+const useStyles = () => ({
+  root: {
+    background: 'chocolate',
+    width: '22%',
+    margin: '5% 39%',
+    padding: '1% 2%',
+    boxSizing: 'border-box',
+    borderRadius: 15,
+  },
+  textField: {
+    marginBottom: '7%',
+    marginTop: '1%',
+    borderRadius: 15,
+    '& div': {
+      borderRadius: 18,
+    },
+  },
+  link: {
+    textAlign: 'center',
+  },
+  divider: {
+    marginTop: '7%',
+    color: 'white',
+  },
+});
+const element = <FontAwesomeIcon icon={faGoogle} />;
+class UserLogin extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      email: '',
+      password: '',
+      errors: '',
+      data: '',
+      success: false,
+    };
+  }
+
+
+handleLoginChange = (event) => {
+  const { name, value } = event.target;
+  this.setState({
+    [name]: value,
+  });
+}
+
+submitForm = async (event) => {
+  const { password, email } = this.state;
+  if (email.length === 0 || !(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email))) {
+    event.preventDefault();
+    this.setState({ errors: 'Invalid email' });
+    return;
+  }
+  const user = {
+    email,
+    password,
+  };
+  const result = await login(user);
+  const { error, message } = result;
+  const output = error
+    ? (this.setState({ errors: error }))
+    : (this.setState({ success: true, data: message }));
+}
+
+render() {
+  const { classes } = this.props;
+  const { success, errors } = this.state;
+  if (success === true) {
+    return <Redirect to="/" />;
+  }
+  return (
+    <div className={classes.root}>
+      <h1>LOGIN</h1>
+      <form>
+        <TextField
+          variant="outlined"
+          required
+          fullWidth
+          id="email"
+          label="Email"
+          name="email"
+          className={classes.textField}
+          borderRadius={16}
+          size="small"
+          autoFocus
+          onChange={this.handleLoginChange}
+        />
+        <TextField
+          variant="outlined"
+          required
+          fullWidth
+          className={classes.textField}
+          name="password"
+          label="Password"
+          type="password"
+          id="password"
+          size="small"
+          onChange={this.handleLoginChange}
+        />
+        <Button
+          onClick={this.submitForm}
+          variant="contained"
+          color="secondary"
+          className={classes.textField}
+          fullWidth
+        >
+          Login
+        </Button>
+        <span>
+          {errors}
+        </span>
+        <div className={classes.link}>
+          <Link href="#" variant="body2">
+            Forgot password?
+          </Link>
+        </div>
+        <div className={classes.link}>
+          <Link href="#" variant="body2">
+            Don't have an account? Sign Up
+          </Link>
+
+        </div>
+        <Grid container>
+          <Grid item xs={5}>
+            <Divider variant="middle" className={classes.divider} />
+          </Grid>
+          <Grid item>
+            OR
+          </Grid>
+          <Grid item xs={5}>
+            <Divider variant="middle" className={classes.divider} />
+          </Grid>
+        </Grid>
+        <Button
+          variant="contained"
+          color="primary"
+          className={classes.textField}
+          startIcon={<FacebookIcon />}
+          type="button"
+          fullWidth
+        >
+          Login With Facebook
+        </Button>
+        <Button
+          variant="contained"
+          className={classes.textField}
+          startIcon={element}
+          type="button"
+          fullWidth
+        >
+          Login With Google
+        </Button>
+      </form>
+    </div>
+
+  );
+}
+}
+export default withStyles(useStyles)(UserLogin);

src/entry/App.js

@@ -4,7 +4,7 @@ import {
 } from 'react-router-dom';
 import './app.css';
 import HelloComponent from '../components/HelloComponent';
-import FrontPage from '../views/frontPage';
+import UserLogin from '../components/forms/UserLogin';
 
 const App = () => (
   <div>
@@ -14,7 +14,7 @@ const App = () => (
       </ul>
       <Switch>
         <Route path="/" component={HelloComponent} exact />
-        <Route path="/login" component={FrontPage} />
+        <Route path="/login" component={UserLogin} />
       </Switch>
     </Router>
   </div>

src/helpers/userLogin.js

@@ -0,0 +1,17 @@
+
+const login = async (user) => {
+  let result = '';
+  const url = 'https://bft-nmd-stag.herokuapp.com/api/auth/login';
+  result = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(user),
+  })
+    .then((response) => response.json())
+    .then((data) => data)
+    .catch((error) => error);
+  return result;
+};
+export default login;

src/reducers/reducer.js

@@ -2,6 +2,10 @@ import firstMessage from '../actions/actions';
 
 const initialState = {
   message: 'Welcome',
+  login: {
+    email: '',
+    password: '',
+  },
 };
 const reducer = (state = initialState, action) => {
   switch (action.type) {

src/styles/css/index.css

@@ -1,5 +1,6 @@
 h1 {
   font-family: Arial, Helvetica, sans-serif;
   text-align: center;
-  padding: 20px;
+  font-size: larger;
 }
+

webpack.config.js

@@ -23,7 +23,16 @@ module.exports = (env) => ({
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: ['babel-loader'],
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            '@babel/preset-env',
+            '@babel/preset-react',
+          ],
+          plugins: [
+            '@babel/transform-runtime',
+          ],
+        },
       },
       {
         test: /\.(scss|css)$/,