Added helmet Dependency, Deprecated body-parser Dependency, and Optim…

…ized Files
stanleyowen · Mar 5, 2021 · 42f5ed1 · 42f5ed1
1 parent 01b284a
commit 42f5ed1
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 87 deletions.
diff --git a/client/src/components/edit.component.js b/client/src/components/edit.component.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { listLabel, validateLabel } from '../library/validation';
-import { setNotification, NOTIFICATION_TYPES } from '../library/setNotification';
+import { listLabel, validateLabel } from '../libraries/validation';
+import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
 import axios from 'axios';
 
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;

diff --git a/client/src/components/home.component.js b/client/src/components/home.component.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React, { useEffect, useState } from 'react';
-import { listLabel, validateLabel } from '../library/validation';
-import { setNotification, NOTIFICATION_TYPES } from '../library/setNotification';
+import { listLabel, validateLabel } from '../libraries/validation';
+import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
 import axios from 'axios';
 
 /* Icons */

diff --git a/client/src/components/login.component.js b/client/src/components/login.component.js
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
-import { setNotification, NOTIFICATION_TYPES } from '../library/setNotification';
+import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
 import axios from 'axios';
 
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
 const Login = () => {
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [honeypot, setHoneypot] = useState('');
+    const [email, setEmail] = useState();
+    const [password, setPassword] = useState();
+    const [honeypot, setHoneypot] = useState();
     const [visible, setVisible] = useState(false);
 
     const Submit = (e) => {
@@ -34,42 +34,38 @@ const Login = () => {
     }
 
     return (
-        <div>
-            <div id="form">
-                <div className="form__contact">
-                    <div className="get_in_touch">
-                        <h1>Login</h1>
-                    </div>
-                    <div className="form">
-                        <form className="contact__form" name="contact__form" onSubmit={Submit}>
-                            <div className="contact__formControl no-bot">
-                                <div className="contact__infoField">
-                                    <label htmlFor="email">Email</label>
-                                    <input title="Email" id="email" type="text" className="contact__inputField" onChange={(event) => setHoneypot(event.target.value)} value={honeypot} autoComplete="off"/>
-                                    <span className="contact__onFocus"></span>
-                                </div>
+        <div id="form">
+            <div className="form__contact">
+                <div className="get_in_touch"><h1>Login</h1></div>
+                <div className="form">
+                    <form className="contact__form" onSubmit={Submit}>
+                        <div className="contact__formControl no-bot">
+                            <div className="contact__infoField">
+                                <label htmlFor="bot-email">Email</label>
+                                <input title="Email" id="bot-email" type="text" className="contact__inputField" onChange={(event) => setHoneypot(event.target.value)} value={honeypot} autoComplete="off"/>
+                                <span className="contact__onFocus"></span>
                             </div>
-                            <div className="contact__formControl">
-                                <div className="contact__infoField">
-                                    <label htmlFor="userEmail">Email</label>
-                                    <input title="Email" id="userEmail" type="email" className="contact__inputField" onChange={(event) => setEmail(event.target.value)} value={email} required autoFocus spellCheck="false" autoCapitalize="none" autoComplete="username"/>
-                                    <span className="contact__onFocus"></span>
-                                </div>
+                        </div>
+                        <div className="contact__formControl">
+                            <div className="contact__infoField">
+                                <label htmlFor="userEmail">Email</label>
+                                <input title="Email" id="userEmail" type="email" className="contact__inputField" onChange={(event) => setEmail(event.target.value)} value={email} required autoFocus spellCheck="false" autoCapitalize="none" autoComplete="username"/>
+                                <span className="contact__onFocus"></span>
                             </div>
-                            <div className="contact__formControl">
-                                <div className="contact__infoField">
-                                    <label htmlFor="userPassword">Password</label>
-                                    <input title="Password" id="userPassword" type={ visible ? 'text':'password' } className="contact__inputField" onChange={(event) => setPassword(event.target.value)} value={password} required spellCheck="false" autoCapitalize="none" autoComplete="current-password"/>
-                                    <span className="contact__onFocus"></span>
-                                </div>
+                        </div>
+                        <div className="contact__formControl">
+                            <div className="contact__infoField">
+                                <label htmlFor="userPassword">Password</label>
+                                <input title="Password" id="userPassword" type={ visible ? 'text':'password' } className="contact__inputField" onChange={(event) => setPassword(event.target.value)} value={password} required spellCheck="false" autoCapitalize="none" autoComplete="current-password"/>
+                                <span className="contact__onFocus"></span>
                             </div>
-                            <div className="contact__formControl show-password">
-                                <input id="show-password" onClick={() => setVisible(!visible)} checked={visible} type="checkbox" /> <label for="show-password">Show Pasword</label>
-                            </div>
-                            <p style={{textAlign: 'center'}}>Haven't have an Account? <a className="animation__underline" href="/get-started">Get Started</a></p>
-                            <button type="submit" className="contact__sendBtn" id="login">Login</button>
-                        </form>
-                    </div>
+                        </div>
+                        <div className="contact__formControl show-password">
+                            <input id="show-password" onClick={() => setVisible(!visible)} type="checkbox" /> <label htmlFor="show-password">Show Pasword</label>
+                        </div>
+                        <p className="isCentered">Haven't have an Account? <a className="animation__underline" href="/get-started">Get Started</a></p>
+                        <button type="submit" className="contact__sendBtn" id="login">Login</button>
+                    </form>
                 </div>
             </div>
         </div>

diff --git a/client/src/components/navbar.component.js b/client/src/components/navbar.component.js
@@ -1,10 +1,10 @@
 /* eslint-disable */
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import getUserToken from '../library/getUserToken';
+import getUserToken from '../libraries/getUserToken';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAdjust, faPlus, faSignOutAlt, faKey, faHome, faSignInAlt, faUsers } from '@fortawesome/free-solid-svg-icons/';
-import { setNotification, NOTIFICATION_TYPES, setWarning } from '../library/setNotification';
+import { setNotification, NOTIFICATION_TYPES, setWarning } from '../libraries/setNotification';
 import axios from 'axios';
 
 /* Icons */

diff --git a/client/src/components/register.component.js b/client/src/components/register.component.js
@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
-import { setNotification, NOTIFICATION_TYPES } from '../library/setNotification';
+import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
 import axios from 'axios';
 
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
 const Register = () => {
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [honeypot, setHoneypot] = useState('');
-    const [confirmPsw, setConfirmPsw] = useState('');
+    const [email, setEmail] = useState();
+    const [password, setPassword] = useState();
+    const [confirmPsw, setConfirmPsw] = useState();
+    const [honeypot, setHoneypot] = useState();
     const [visible, setVisible] = useState(false);
 
     const Submit = (e) => {
@@ -41,51 +41,47 @@ const Register = () => {
     }
 
     return (
-        <div>
-            <div id="form">
-                <div className="form__contact">
-                    <div className="get_in_touch">
-                        <h1>Register</h1>
-                    </div>
-                    <div className="form">
-                        <form className="contact__form" name="contact__form" onSubmit={Submit}>
-                            <div className="contact__formControl no-bot">
+        <div id="form">
+            <div className="form__contact">
+                <div className="get_in_touch"><h1>Register</h1></div>
+                <div className="form">
+                    <form className="contact__form" name="contact__form" onSubmit={Submit}>
+                        <div className="contact__formControl no-bot">
+                            <div className="contact__infoField">
+                                <label htmlFor="bot-email">Email <span className="required">*</span></label>
+                                <input title="Email" id="bot-email" type="text" className="contact__inputField" onChange={(event) => setHoneypot(event.target.value)} value={honeypot} autoComplete="off"/>
+                                <span className="contact__onFocus"></span>
+                            </div>
+                        </div>
+                        <div className="contact__formControl">
+                            <div className="contact__infoField">
+                                <label htmlFor="email">Email <span className="required">*</span></label>
+                                <input title="Email" id="email" type="email" className="contact__inputField" onChange={(event) => setEmail(event.target.value)} value={email} autoFocus required autoComplete="username"/>
+                                <span className="contact__onFocus"></span>
+                            </div>
+                        </div>
+                        <div className="form__container">
+                            <div className="contact__formControl">
                                 <div className="contact__infoField">
-                                    <label htmlFor="email">Email <span className="required">*</span></label>
-                                    <input title="Email" id="email" type="text" className="contact__inputField" onChange={(event) => setHoneypot(event.target.value)} value={honeypot} autoComplete="off"/>
+                                    <label htmlFor="password">Password <span className="required">*</span></label>
+                                    <input title="Password" id="password" type={ visible ? 'text':'password' } className="contact__inputField" onChange={(event) => setPassword(event.target.value)} value={password} required spellCheck="false" autoCapitalize="none" autoComplete="new-password"/>
                                     <span className="contact__onFocus"></span>
                                 </div>
                             </div>
                             <div className="contact__formControl">
                                 <div className="contact__infoField">
-                                    <label htmlFor="email">Email <span className="required">*</span></label>
-                                    <input title="Email" id="email" type="email" className="contact__inputField" onChange={(event) => setEmail(event.target.value)} value={email} autoFocus required autoComplete="username"/>
+                                    <label htmlFor="confirm_psw">Confirm Password <span className="required">*</span></label>
+                                    <input title="Confirm Password" id="confirm_psw" type={ visible ? 'text':'password' } className="contact__inputField" onChange={(event) => setConfirmPsw(event.target.value)} value={confirmPsw} required spellCheck="false" autoCapitalize="none" autoComplete="new-password"/>
                                     <span className="contact__onFocus"></span>
                                 </div>
                             </div>
-                            <div className="form__container">
-                                <div className="contact__formControl">
-                                    <div className="contact__infoField">
-                                        <label htmlFor="password">Password <span className="required">*</span></label>
-                                        <input title="Password" id="password" type={ visible ? 'text':'password' } className="contact__inputField" onChange={(event) => setPassword(event.target.value)} value={password} required spellCheck="false" autoCapitalize="none" autoComplete="new-password"/>
-                                        <span className="contact__onFocus"></span>
-                                    </div>
-                                </div>
-                                <div className="contact__formControl">
-                                    <div className="contact__infoField">
-                                        <label htmlFor="confirm_psw">Confirm Password <span className="required">*</span></label>
-                                        <input title="Confirm Password" id="confirm_psw" type={ visible ? 'text':'password' } className="contact__inputField" onChange={(event) => setConfirmPsw(event.target.value)} value={confirmPsw} required spellCheck="false" autoCapitalize="none" autoComplete="new-password"/>
-                                        <span className="contact__onFocus"></span>
-                                    </div>
-                                </div>
-                                <div className="contact__formControl show-password">
-                                    <input id="show-password" onClick={() => setVisible(!visible)} checked={visible} type="checkbox" /> <label for="show-password">Show Pasword</label>
-                                </div>
+                            <div className="contact__formControl show-password">
+                                <input id="show-password" onClick={() => setVisible(!visible)} type="checkbox" /> <label htmlFor="show-password">Show Pasword</label>
                             </div>
-                            <p className="isCentered">Already have an Account? <a className="animation__underline" href="/login">Login</a></p>
-                            <button type="submit" className="contact__sendBtn" id="register">Register</button>
-                        </form>
-                    </div>
+                        </div>
+                        <p className="isCentered">Already have an Account? <a className="animation__underline" href="/login">Login</a></p>
+                        <button type="submit" className="contact__sendBtn" id="register">Register</button>
+                    </form>
                 </div>
             </div>
         </div>

diff --git a/client/src/components/welcome.component.js b/client/src/components/welcome.component.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { setNotification, NOTIFICATION_TYPES } from '../library/setNotification';
+import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification';
 import axios from 'axios';
 
 const GITHUB_API = "https://api.github.com/repos/stanleyowen/todo-application";

diff --git a/client/src/library/getUserToken.js → client/src/libraries/getUserToken.js b/client/src/library/getUserToken.js → client/src/libraries/getUserToken.js
diff --git a/client/src/library/setNotification.js → client/src/libraries/setNotification.js b/client/src/library/setNotification.js → client/src/libraries/setNotification.js
diff --git a/client/src/library/validation.js → client/src/libraries/validation.js b/client/src/library/validation.js → client/src/libraries/validation.js
diff --git a/server/index.js b/server/index.js
@@ -1,8 +1,8 @@
 const express = require('express');
 const cors = require('cors');
-const bodyParser = require('body-parser');
 const passport = require('passport');
 const mongoose = require('mongoose');
+const helmet = require('helmet');
 
 const app = express();
 const PORT = process.env.PORT || 5000;
@@ -11,8 +11,7 @@ require('dotenv').config();
 require('./config/passport');
 
 app.use(cors());
-app.use(bodyParser.urlencoded({ extended: true }));
-app.use(bodyParser.json());
+app.use(helmet());
 app.use(passport.initialize());
 
 const usersRouter = require('./routes/users.route');

diff --git a/server/package-lock.json b/server/package-lock.json
diff --git a/server/package.json b/server/package.json
@@ -16,6 +16,7 @@
     "crypto": "^1.0.1",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
+    "helmet": "^4.4.1",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^5.11.18",
     "mquery": "^3.2.4",