added 'Don't have an account?' button

compforge/src/Components/Login.react.jsx

 import React, { useState } from "react";
 import { connect } from "react-redux";
-import { Redirect } from "react-router-dom";
+import { Link, Redirect } from "react-router-dom";
 import { loginUser, passwordReset } from "../actions";
 import { withStyles } from "@material-ui/styles";
 
@@ -91,8 +91,8 @@ const Login = (props) => {
     return <Redirect to="/" />;
   }
 
-  return (<Container component="main" style={{marginBottom: 100, paddingLeft: 0, paddingRight: 0}} maxWidth="xs">
-    <Paper className={ ` ${classes.paper} paper-mui` }>
+  return (<Container component="main" style={{ marginBottom: 100, paddingLeft: 0, paddingRight: 0 }} maxWidth="xs">
+    <Paper className={` ${classes.paper} paper-mui`}>
       <Avatar className={classes.avatar}>
         <VpnKeyOutlinedIcon />
       </Avatar>
@@ -125,8 +125,8 @@ const Login = (props) => {
       )}
 
       <Typography component="p" className={classes.password}>
-        <span style={{ marginRight: 6 }}>Request password reset </span>
-        <Button variant="outlined" size='small' style={{ fontSize: 10 }} color="primary" onClick={() => { setShowModal(true); }} > here </Button>
+        <span style={{ marginRight: 6 }}>Don't have an account? </span>
+        <Button variant="outlined" size='small' style={{ fontSize: 10 }} color="primary" > <Link to={'/signup'}>Sign up</Link> </Button>
       </Typography>
 
       <Button
@@ -139,6 +139,12 @@ const Login = (props) => {
       >
         Sign In
     </Button>
+
+      <Typography component="p" className={classes.password}>
+        <span style={{ marginRight: 6 }}>Request password reset </span>
+        <Button variant="outlined" size='small' style={{ fontSize: 10 }} color="primary" onClick={() => { setShowModal(true); }} > here </Button>
+      </Typography>
+
       <Drawer anchor={'top'} open={Boolean(showModal)} onClose={() => setShowModal('false')}>
 
         <Container component="main" maxWidth="md">
@@ -148,7 +154,7 @@ const Login = (props) => {
             </Typography>
             <Button variant="outlined" size='small' style={{ margin: 16, height: 40 }} onClick={() => { setShowModal(false); }} > Done </Button>
           </div>}
-          
+
           {!showSuccess && <div className='reset__password__wrapper'>
             <Typography component="p" style={{ paddingTop: 16, marginRight: 16, marginTop: 8 }} >
               <MailOutlineIcon style={{ position: 'relative', top: 5, color: '#4BB543' }} /> Please use a valid email address to reset your password.
@@ -159,13 +165,13 @@ const Login = (props) => {
               id="email"
               error={emailNotValid}
               helperText={emailNotValid ? 'Email format is not valid' : ''}
-              style={{marginTop: 26 }}
+              style={{ marginTop: 26 }}
               label="Email address"
               name="email"
               onChange={(evt) => { setResetEmail(evt.target.value) }}
             />
-            <Button variant="outlined" size='large'  color="primary" onClick={() => submitReset()} > Submit </Button>
-            <Button variant="outlined" size='large'  onClick={() => { setShowModal(false); }} > Cancel </Button>
+            <Button variant="outlined" size='large' color="primary" onClick={() => submitReset()} > Submit </Button>
+            <Button variant="outlined" size='large' onClick={() => { setShowModal(false); }} > Cancel </Button>
           </div>}
         </Container>
       </Drawer>

compforge/src/Components/Signup.react.jsx

@@ -5,7 +5,7 @@ import { createUser } from "../actions";
 import { withStyles } from "@material-ui/styles";
 
 import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined';
-import {Typography, Paper, Container, TextField, Button, Avatar} from "@material-ui/core";
+import { Typography, Paper, Container, TextField, Button, Avatar } from "@material-ui/core";
 
 
 const styles = () => ({
@@ -35,7 +35,7 @@ const styles = () => ({
 });
 
 const Signup = (props) => {
-  const { classes, loginError, isAuthenticated ,createError } = props;
+  const { classes, loginError, isAuthenticated, createError } = props;
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
   const [password, setPassword] = useState('');
@@ -46,7 +46,7 @@ const Signup = (props) => {
     setCapval(value);
   }
 
-  const handleChange = ({target}, type) => {
+  const handleChange = ({ target }, type) => {
 
     switch (type) {
       case 'displayName':
@@ -60,8 +60,8 @@ const Signup = (props) => {
         break;
       default:
         break;
-    } 
-      
+    }
+
   }
 
   const handleSubmit = () => {
@@ -71,14 +71,14 @@ const Signup = (props) => {
     }
     setDnerror(false);
     const { dispatch } = props;
-    dispatch(createUser( email, password, name));
+    dispatch(createUser(email, password, name));
   }
 
   if (isAuthenticated) {
     return <Redirect to="/userhome" />;
   }
 
-  return (<Container component="main" style={{marginBottom: 100, marginTop: 100, paddingLeft: 0, paddingRight: 0}} maxWidth="xs">
+  return (<Container component="main" style={{ marginBottom: 100, marginTop: 100, paddingLeft: 0, paddingRight: 0 }} maxWidth="xs">
     <Paper className={classes.paper}>
       <Avatar className={classes.avatar}>
         <AccountCircleOutlinedIcon />
@@ -93,7 +93,7 @@ const Signup = (props) => {
         id="username"
         label="Display Name"
         name="Display Name"
-        onChange={(ev)=>{handleChange(ev,'displayName')}}
+        onChange={(ev) => { handleChange(ev, 'displayName') }}
       />
       <TextField
         variant="outlined"
@@ -102,7 +102,7 @@ const Signup = (props) => {
         id="email"
         label="Email Address"
         name="email"
-        onChange={(ev)=>{handleChange(ev,'email')}}
+        onChange={(ev) => { handleChange(ev, 'email') }}
       />
       <TextField
         variant="outlined"
@@ -112,7 +112,7 @@ const Signup = (props) => {
         label="Password"
         type="password"
         id="password"
-        onChange={(ev)=>{handleChange(ev,'password')}}
+        onChange={(ev) => { handleChange(ev, 'password') }}
       />
 
       {loginError && (
@@ -122,18 +122,19 @@ const Signup = (props) => {
       )}
 
       <Typography component="p" className={classes.password}>
-        <Link variant="outlined" size='small' style={{ fontSize: 10 }} color="primary" to={'/login'} > Already have an account? </Link>
+        <span style={{ marginRight: 6 }}>Already have an account? </span>
+        <Button variant="outlined" size='small' style={{ fontSize: 10 }} color="primary" > <Link to={'/login'}>Login</Link> </Button>
       </Typography>
 
       {createError?.isError && (
         <Typography component="p" className={classes.errorText}>
-        {`${createError?.message ? createError.message : 'Error'}`}
-      </Typography>
+          {`${createError?.message ? createError.message : 'Error'}`}
+        </Typography>
       )}
       {dnerror && (
         <Typography component="p" className={classes.errorText}>
-        Please set display name. Minimum characters 4.
-      </Typography>
+          Please set display name. Minimum characters 4.
+        </Typography>
       )}
       <Button
         disabled={false}