added material-ui to app

Author: Sahil811

package-lock.json

@@ -15,6 +15,8 @@
   "author": "gaurav sharma",
   "license": "ISC",
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "axios": "^0.19.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",

package.json

@@ -10,7 +10,7 @@ import Dashboard from '../Dashboard';
 import Image from '../../components/Image';
 import logo from '../../assets/images/logo.png';
 import './index.scss';
-
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 
 const Account = (props) => {
 
@@ -60,8 +60,8 @@ const Account = (props) => {
 			<section className="navigationMenu">
 				<p className="navigationHeader">Account</p>
 				<button name='logout' className={`navigationItem ${active === navigationIndexer.constants ? 'activeItem' : ''}`} onClick={handleLogout}>
-					<FontAwesome id='logout' name="sign-out" onClick={handleSwitch} />&nbsp; Logout
-					</button>
+					<span className="content-center"><ExitToAppIcon fontSize="small" id='logout' name="sign-out" onClick={handleSwitch} />&nbsp; Logout</span>
+				</button>
 			</section>
 		</section>
 		<section className='dynamicContainer'>

src/client/app/routes/Account/index.js

@@ -2,19 +2,22 @@
  * @desc this is the admin component of the application.
  * @author gaurav sharma
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { connect } from 'react-redux';
 import { userLogin } from '../../redux/actions';
 import { toast, ToastContainer } from 'react-toastify';
-import FontAwesome from 'react-fontawesome';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 
 import LoadingOverlay from '../../components/LoadingOverlay';
 
 import './index.scss';
 
 
 const LandingPage = (props) => {
+	const [user, setUser] = useState("")
+	const [password, setPassword] = useState("")
+
 	useEffect(() => {
 		if (localStorage.getItem('data')) {
 			window.location = '/adminAccount';
@@ -44,8 +47,7 @@ const LandingPage = (props) => {
 	const onLogin = (e) => {
 		e.preventDefault();
 		const { triggerLoginUser } = props;
-
-		triggerLoginUser(userUname.value, userPass.value);
+		triggerLoginUser(user, password);
 	}
 
 	/**
@@ -66,6 +68,9 @@ const LandingPage = (props) => {
 		}
 	}
 
+	const onFormValid = () => {
+		return user && password
+	}
 
 	const { fetching, login } = props;
 	{ login && responseHandler() }
@@ -83,13 +88,15 @@ const LandingPage = (props) => {
 			<section className='user-login' id='user-login'>
 
 				<label htmlFor="username">Username</label><br />
-				<input ref={userUname => userUname = userUname} className='custom-field login-field' placeholder='Username for user' />
+				<input onChange={e => setUser(e.target.value)} className='custom-field login-field' placeholder='Username for user' />
 
 				<label htmlFor="username">Password</label><br />
-				<input ref={userPass => userPass = userPass} type='password' className='custom-field login-field' placeholder='Password for user' />
+				<input onChange={e => setPassword(e.target.value)} type='password' className='custom-field login-field' placeholder='Password for user' />
 
 				<p className='text-center'>
-					<button className="litnite-btn" onClick={onLogin}>LOGIN&nbsp;&nbsp;&nbsp;<FontAwesome name="chevron-right" /></button>
+					<button className="litnite-btn" onClick={onLogin} disabled={!onFormValid()}><span className="content-center">
+						LOGIN&nbsp;<ChevronRightIcon />
+					</span></button>
 				</p>
 
 				<br /><br /><br />

src/client/app/routes/LandingPage/index.js

@@ -55,4 +55,5 @@
 .form-container{ 
 	max-width: 616px;
 	margin: 0 auto;
-}
+}
+

src/client/app/routes/LandingPage/index.scss

@@ -146,3 +146,7 @@ $global_white_color: #fff;
 	min-height: 300px;
 }
 
+.content-center {
+	display: flex;
+	align-items: center;
+}