From 0ae166ed5130159f3db94c1f7d65ac08db49b11c Mon Sep 17 00:00:00 2001
From: sachin <sachinsom507@gmail.com>
Date: Wed, 24 Feb 2021 15:05:27 -0800
Subject: [PATCH 1/3] Done frontend of signUP page

---
 React-frontend/src/App.js                    |   2 +
 React-frontend/src/components/SignUpForm.js  | 158 +++++++++++++++++++
 React-frontend/src/components/core/Navbar.js |   5 +
 React-frontend/src/pages/SignUpPage.js       |  36 +++++
 4 files changed, 201 insertions(+)
 create mode 100644 React-frontend/src/components/SignUpForm.js
 create mode 100644 React-frontend/src/pages/SignUpPage.js

diff --git a/React-frontend/src/App.js b/React-frontend/src/App.js
index c058b90d..1ca29f59 100644
--- a/React-frontend/src/App.js
+++ b/React-frontend/src/App.js
@@ -9,6 +9,7 @@ import ContactPage from './pages/ContactPage'
 import Alert from './components/core/Alert'
 
 import store from './store/store';
+import SignUpPage from './pages/SignUpPage';
 
 function App() {
   return (
@@ -16,6 +17,7 @@ function App() {
       <div className="containerBI">
         <Alert />
         <Switch>
+          <Route path='/signup' exact component={SignUpPage} />
           <Route path="/login" exact component={LoginPage} />
           <Route path='/' exact component={HomePage} />
           <Route path='/about' exact component={AboutPage} />
diff --git a/React-frontend/src/components/SignUpForm.js b/React-frontend/src/components/SignUpForm.js
new file mode 100644
index 00000000..e75c4848
--- /dev/null
+++ b/React-frontend/src/components/SignUpForm.js
@@ -0,0 +1,158 @@
+import React, { useReducer, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom'; 
+import { MDBContainer, MDBInput, MDBBtn, MDBCard, MDBCardBody } from 'mdbreact';
+import axios from 'axios';
+import { setAlert } from '../store/actions/alerts';
+
+import formReducer from '../utils/formReducer';
+
+const FormPage = () => {
+  const dispatch = useDispatch();
+  const initialFormData = {
+    name: '',
+    email: '',
+    password: '',
+    role: 'admin'
+  };
+  const { isLoading } = useSelector(state => state.auth);
+  const [sending, setSending] = useState(false);
+  const [formData, setFormData] = useReducer(formReducer, initialFormData);
+  const [passwordShown, setPasswordShown] = useState(false);
+
+  // password  toggle handler
+  const togglePasswordVisibilty = () => {
+    setPasswordShown(passwordShown ? false : true)
+  } 
+
+  const signUpHandler = async e => {
+    setSending(true)
+    e.preventDefault();
+    e.target.className += " was-validated"
+    if (formData.name && formData.email && formData.password){
+        try{
+            await axios.post('/create', formData, {
+              headers: {
+                'Content-Type': 'application/json',
+              }
+            });
+            setSending(false)
+          } catch(error) {
+            dispatch(setAlert('Something went wrong', 'danger'))
+            setSending(false)
+        } 
+    }
+    setSending(false)
+  };
+
+  return (
+    <MDBContainer>
+      <br />
+      <MDBCard>
+        <MDBCardBody className='align-center'>
+          <form 
+            className='needs-validation'  
+            onSubmit={signUpHandler}
+            noValidate
+          >
+            <p className='h4 text-center py-4'>For Admins</p>
+            <p className='h7 text-center'>
+              {isLoading
+                ? 'Authenticating'
+                : 'Create Account and organize your workspace'}
+            </p>{' '}
+            <div className='grey-text'>
+                <MDBInput
+                    disabled={isLoading}
+                    label='Your name'
+                    icon='user'
+                    group
+                    value={formData.name}
+                    type='text'
+                    error='wrong'
+                    required
+                    success='right'
+                    name='name'
+                    onChange={event => setFormData(event.target)}
+                >
+                    <div className='invalid-feedback'>
+                        Please provide a name.
+                    </div>
+                    <div className='valid-feedback'>Looks good!</div>
+                </MDBInput>
+
+              <MDBInput
+                disabled={isLoading}
+                label='Your email'
+                icon='envelope'
+                group
+                value={formData.email}
+                type='email'
+                error='wrong'
+                required 
+                success='right'
+                name='email'
+                onChange={event => setFormData(event.target)}
+              >
+                <div className='invalid-feedback'>
+                  Please provide a valid email.
+                </div>
+                <div className='valid-feedback'>Looks good!</div>
+              </MDBInput>
+              <MDBInput
+                disabled={isLoading}
+                label='Your password'
+                icon='lock'
+                group
+                required
+                value={formData.password}
+                type={passwordShown ? 'text': 'password'}
+                name='password'
+                onChange={event => setFormData(event.target)}
+              >
+                <div className="invalid-feedback mb-4">
+                  Please provide a password.
+                </div>
+                <div className="valid-feedback">Looks good!</div>
+              </MDBInput>
+              <div class='form-check m-0'>
+                  <input
+                    class='form-check-input'
+                    type='checkbox'
+                    name='remember'
+                    value={passwordShown}
+                    onChange={togglePasswordVisibilty}
+                  />
+                  <label class='form-check-label' htmlFor='flexCheckDefault'>
+                    Show Password
+                  </label>
+                </div>
+              <div className='d-flex justify-content-center'>
+              </div>
+            </div>
+            <p className='mt-3  font-small blue-text d-flex justify-content-center pb-3'>
+              <Link to='/login' className='blue-text ml-1'>
+                Already have an accont ? Login.
+              </Link>
+            </p>
+            <div className='text-center py-4'>
+              <MDBBtn
+                disabled={isLoading || sending}
+                type='submit'
+                color='elegant'
+                size='md'>
+                {
+                    (sending) ?
+                    'wait...'
+                    : 'register'
+                }
+              </MDBBtn>
+            </div>
+          </form>
+        </MDBCardBody>
+      </MDBCard>
+    </MDBContainer>
+  );
+};
+
+export default FormPage;
diff --git a/React-frontend/src/components/core/Navbar.js b/React-frontend/src/components/core/Navbar.js
index b6853237..0ef15fa8 100644
--- a/React-frontend/src/components/core/Navbar.js
+++ b/React-frontend/src/components/core/Navbar.js
@@ -32,6 +32,11 @@ function Nvb() {
               Login
             </MDBBtn>
           </Link>
+          <Link to="/signup">
+            <MDBBtn outline color="primary">
+              SignUp
+            </MDBBtn>
+          </Link>
           <MDBDropdown>
             <MDBDropdownToggle caret color="dark">
               {
diff --git a/React-frontend/src/pages/SignUpPage.js b/React-frontend/src/pages/SignUpPage.js
new file mode 100644
index 00000000..08d43f00
--- /dev/null
+++ b/React-frontend/src/pages/SignUpPage.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import Hl from '../components/core/HomeLogo';
+import Sf from '../components/SignUpForm';
+import { useSelector } from 'react-redux';
+
+
+import { MDBRow, MDBCol } from 'mdbreact';
+import Layout from '../components/core/Layout';
+import { Redirect } from 'react-router-dom';
+
+const SignUpPage = () => {
+  const { isLoading, isAuthenticated } = useSelector(state => state.auth);
+
+  if (!isLoading && isAuthenticated) {
+    return <Redirect to='/' />;
+  }
+
+  return (
+    <Layout sidebarBool={false}>
+      <MDBRow>
+        <MDBCol md='5'>
+          <Hl />
+        </MDBCol>
+        <MDBCol md='2'></MDBCol>
+        <MDBCol md='5'>
+          <Sf />
+        </MDBCol>
+      </MDBRow>
+
+      <br />
+      <br />
+    </Layout>
+  );
+};
+
+export default SignUpPage;

From 57f42df35d18e05b5fdb6189a5057e4d12b94a30 Mon Sep 17 00:00:00 2001
From: sachin <sachinsom507@gmail.com>
Date: Wed, 24 Feb 2021 17:51:11 -0800
Subject: [PATCH 2/3] register data posted to backend

---
 React-frontend/src/components/SignUpForm.js  | 10 +++++++---
 React-frontend/src/components/core/Navbar.js |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/React-frontend/src/components/SignUpForm.js b/React-frontend/src/components/SignUpForm.js
index e75c4848..106a1b2d 100644
--- a/React-frontend/src/components/SignUpForm.js
+++ b/React-frontend/src/components/SignUpForm.js
@@ -1,6 +1,6 @@
 import React, { useReducer, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Link } from 'react-router-dom'; 
+import { Link, useHistory } from 'react-router-dom'; 
 import { MDBContainer, MDBInput, MDBBtn, MDBCard, MDBCardBody } from 'mdbreact';
 import axios from 'axios';
 import { setAlert } from '../store/actions/alerts';
@@ -8,6 +8,7 @@ import { setAlert } from '../store/actions/alerts';
 import formReducer from '../utils/formReducer';
 
 const FormPage = () => {
+  const history = useHistory()
   const dispatch = useDispatch();
   const initialFormData = {
     name: '',
@@ -31,14 +32,17 @@ const FormPage = () => {
     e.target.className += " was-validated"
     if (formData.name && formData.email && formData.password){
         try{
-            await axios.post('/create', formData, {
+            await axios.post('/user/create', formData, {
               headers: {
                 'Content-Type': 'application/json',
               }
             });
+            dispatch(setAlert('Success! You have registered', 'success'))
             setSending(false)
+            history.push('/login')
           } catch(error) {
-            dispatch(setAlert('Something went wrong', 'danger'))
+            const errorMsg = error.response.data
+            dispatch(setAlert(errorMsg, 'danger'))
             setSending(false)
         } 
     }
diff --git a/React-frontend/src/components/core/Navbar.js b/React-frontend/src/components/core/Navbar.js
index 0ef15fa8..951b20a3 100644
--- a/React-frontend/src/components/core/Navbar.js
+++ b/React-frontend/src/components/core/Navbar.js
@@ -34,7 +34,7 @@ function Nvb() {
           </Link>
           <Link to="/signup">
             <MDBBtn outline color="primary">
-              SignUp
+              register
             </MDBBtn>
           </Link>
           <MDBDropdown>

From 3e4cf38af41943bd4cfe3bde1f70fd35d441afb0 Mon Sep 17 00:00:00 2001
From: sachin <sachinsom507@gmail.com>
Date: Wed, 24 Feb 2021 18:00:54 -0800
Subject: [PATCH 3/3] updated know more btn homeLogo

---
 React-frontend/src/components/core/HomeLogo.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/React-frontend/src/components/core/HomeLogo.js b/React-frontend/src/components/core/HomeLogo.js
index b24a2033..ace8d6ea 100644
--- a/React-frontend/src/components/core/HomeLogo.js
+++ b/React-frontend/src/components/core/HomeLogo.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Logo from '../../images/HomeLogo.png';
-import { MDBContainer } from 'mdbreact';
+import { MDBBtn, MDBContainer } from 'mdbreact';
 
 function Hl() {
     return (
@@ -16,7 +16,13 @@ function Hl() {
                 <br />
                 <p className="h5 text-center mb-4">Open Source forensic tool for Android smartphones</p>
                 <div className="text-center">
-                <button color="elegant" href="https://github.com/scorelab/OpenMF//wiki">Know More</button>
+                  <MDBBtn color="elegant">
+                    <a 
+                      style={{color: 'white'}}
+                      href="https://github.com/scorelab/OpenMF//wiki" 
+                      target="_blank" 
+                      rel="noopener noreferrer">Know More</a>
+                  </MDBBtn>
                 </div>
             </form>
             </div>