[React] Created a frontend to create register admins

React-frontend/src/App.js

@@ -10,13 +10,15 @@ import AdminPage from './pages/admin/AdminPage';
 import Alert from './components/core/Alert';
 
 import store from './store/store';
+import SignUpPage from './pages/SignUpPage';
 
 function App() {
   return (
     <Provider store={store}>
       <div className='containerBI'>
         <Alert />
-        <Switch>
+        <Switch >
+          <Route path='/signup' exact component={SignUpPage} />
           <Route path='/login' exact component={LoginPage} />
           <Route path='/' exact component={HomePage} />
           <Route path='/about' exact component={AboutPage} />

React-frontend/src/components/SignUpForm.js

@@ -0,0 +1,162 @@
+import React, { useReducer, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+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';
+
+import formReducer from '../utils/formReducer';
+
+const FormPage = () => {
+  const history = useHistory()
+  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('/user/create', formData, {
+              headers: {
+                'Content-Type': 'application/json',
+              }
+            });
+            dispatch(setAlert('Success! You have registered', 'success'))
+            setSending(false)
+            history.push('/login')
+          } catch(error) {
+            const errorMsg = error.response.data
+            dispatch(setAlert(errorMsg, '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;

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>

React-frontend/src/components/core/Navbar.js

@@ -32,6 +32,11 @@ function Nvb() {
               Login
             </MDBBtn>
           </Link>
+          <Link to="/signup">
+            <MDBBtn outline color="primary">
+              register
+            </MDBBtn>
+          </Link>
           <MDBDropdown>
             <MDBDropdownToggle caret color="dark">
               {

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;