├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── assets │ └── bg_img.jpg ├── container │ ├── types.js │ ├── store.js │ ├── reducers.js │ └── actions.js ├── setupTests.js ├── App.test.js ├── components │ ├── imports │ │ ├── ErrorAlter.jsx │ │ ├── Logout.jsx │ │ ├── BaseLogin.jsx │ │ ├── Header.jsx │ │ ├── LoginForm.jsx │ │ └── RegisterForm.jsx │ ├── pages │ │ ├── Home.js │ │ ├── Login.js │ │ └── Register.js │ └── services │ │ └── auth.service.js ├── sass │ ├── _extends.scss │ └── _login.scss ├── App.scss ├── index.css ├── reportWebVitals.js ├── App.js ├── index.js └── logo.svg ├── server ├── router │ └── router.js ├── model │ └── schema.js ├── server.js ├── middleware │ └── auth.js ├── database │ └── connection.js └── controller │ └── controller.js ├── .gitignore ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashyap2013/React_Login_System/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashyap2013/React_Login_System/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashyap2013/React_Login_System/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/assets/bg_img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashyap2013/React_Login_System/HEAD/src/assets/bg_img.jpg -------------------------------------------------------------------------------- /src/container/types.js: -------------------------------------------------------------------------------- 1 | export const REGISTER_SUCCESS = "REGISTER_SUCCESS"; 2 | export const REGISTER_FAIL = "REGISTER_FAIL"; 3 | export const LOGIN_SUCCESS = "LOGIN_SUCCESS"; 4 | export const LOGIN_FAIL = "LOGIN_FAIL"; 5 | export const LOGOUT = "LOGOUT"; -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/container/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux'; 2 | import thunk from 'redux-thunk'; 3 | import rootReducer from "./reducers" 4 | 5 | // create new store 6 | const store = createStore(rootReducer, applyMiddleware(thunk)); 7 | 8 | export default store; -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/imports/ErrorAlter.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function ErrorAlter(props) { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /server/router/router.js: -------------------------------------------------------------------------------- 1 | const router = require('express').Router() 2 | const controller = require('../controller/controller'); 3 | const auth = require('../middleware/auth') 4 | 5 | router.post('/register', controller.registerUser); 6 | router.post('/login', controller.login); 7 | router.delete('/delete', auth, controller.delete); 8 | 9 | module.exports = router; -------------------------------------------------------------------------------- /src/sass/_extends.scss: -------------------------------------------------------------------------------- 1 | // extends class 2 | 3 | .position-relative{ 4 | position: relative; 5 | } 6 | 7 | .text-center{ 8 | text-align: center; 9 | } 10 | 11 | .width-100{ 12 | width: 100%; 13 | } 14 | 15 | .font-bold{ 16 | font-weight: bold; 17 | } 18 | 19 | .background{ 20 | background: #fff; 21 | } 22 | 23 | .font-awesome{ 24 | font-family: "Font Awesome 5 Free"; 25 | } -------------------------------------------------------------------------------- /src/components/imports/Logout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | export default function Logout(props) { 5 | return ( 6 |
7 | 8 | Logout 9 | 10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- 1 | // import fonts 2 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=PT+Sans&display=swap'); 3 | 4 | * { 5 | font-family: 'Open Sans', sans-serif; 6 | } 7 | 8 | .primary-gradient{ 9 | background: #FF512F; 10 | background: linear-gradient(to right, #DD2476, #FF512F ) 11 | } 12 | 13 | 14 | // import partial files 15 | @import './sass/extends'; 16 | @import './sass/login'; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | config.env 7 | .pnp.js 8 | 9 | 10 | # testing 11 | /coverage 12 | 13 | # production 14 | /build 15 | 16 | # misc 17 | .DS_Store 18 | .env 19 | .env.local 20 | .env.development.local 21 | .env.test.local 22 | .env.production.local 23 | 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | -------------------------------------------------------------------------------- /server/model/schema.js: -------------------------------------------------------------------------------- 1 | const mongose = require('mongoose'); 2 | 3 | const userSchema = new mongose.Schema({ 4 | email : { 5 | type: String, 6 | unique : true, 7 | required : true 8 | }, 9 | password : { 10 | type: String, 11 | required : true, 12 | minlength: 8 13 | }, 14 | username: { 15 | type: String 16 | } 17 | }) 18 | 19 | module.exports = User = mongose.model('user', userSchema) -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const connect = require('./database/connection') 3 | const cors = require('cors'); 4 | 5 | require('dotenv').config({ path: "./config.env"}); 6 | const PORT = process.env.PORT || 8080 ; 7 | 8 | // create express instance 9 | const app = express(); 10 | app.use(express.json()); 11 | app.use(cors()); 12 | 13 | // database connection 14 | connect(); 15 | 16 | // routes 17 | app.use('/api', require('./router/router')); 18 | 19 | app.listen(PORT, () => { 20 | console.log(`Server is running on http://localhost:4000`); 21 | }) 22 | -------------------------------------------------------------------------------- /server/middleware/auth.js: -------------------------------------------------------------------------------- 1 | const jwt = require('jsonwebtoken') 2 | 3 | // create a middleware 4 | const auth = (req, res, next) => { 5 | const token = req.header('x-access-token'); 6 | 7 | if (!token){ 8 | return res.status(406).json( { err : "No authentication token, authorization denied"}) 9 | } 10 | 11 | const verified = jwt.verify(token, process.env.JWT_SECRET) 12 | 13 | if(!verified) 14 | return res.status(406).json({ err: "Token verification failed, authorization denied"}); 15 | 16 | req.user_id = verified.id; 17 | next() 18 | } 19 | 20 | module.exports = auth -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /server/database/connection.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | const connect = async () => { 4 | try { 5 | // mongodb connection 6 | const con = await mongoose.connect(process.env.MONGO_URI, { 7 | useNewUrlParser : true, 8 | useUnifiedTopology: true, 9 | useFindAndModify: false, 10 | useCreateIndex: true 11 | }); 12 | 13 | console.log(`MongoDB connected : ${con.connection.host}`); 14 | } catch (err) { 15 | console.log(err) 16 | process.exit(1) 17 | } 18 | } 19 | 20 | module.exports = connect; 21 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | 2 | import './App.scss'; 3 | import Login from './components/pages/Login'; 4 | import Register from './components/pages/Register'; 5 | import Home from './components/pages/Home'; 6 | 7 | import { BrowserRouter, Switch, Route } from 'react-router-dom'; 8 | 9 | 10 | function App() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | } 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | import { Provider } from 'react-redux'; 8 | import store from './container/store'; 9 | 10 | import './assets/bg_img.jpg'; 11 | 12 | ReactDOM.render( 13 | 14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | 19 | console.log(store.getState()) 20 | 21 | // If you want to start measuring performance in your app, pass a function 22 | // to log results (for example: reportWebVitals(console.log)) 23 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 24 | reportWebVitals(); 25 | -------------------------------------------------------------------------------- /src/components/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | 3 | import Header from '../imports/Header'; 4 | import { useSelector } from 'react-redux'; 5 | import { useHistory } from 'react-router-dom'; 6 | 7 | export default function Home() { 8 | 9 | const user = useSelector(state => state.isLoggedIn); 10 | const history = useHistory() 11 | 12 | const route = () => { 13 | const token = localStorage.getItem('x-access-token') 14 | return token ? true : false 15 | } 16 | 17 | useEffect(() => { 18 | if (!route()){ 19 | history.push('/login') 20 | } 21 | }, [route, history]) 22 | 23 | 24 | return ( 25 | <> 26 |
27 |
28 |
29 |

Welcome to Home Page

30 |
31 |
32 | 33 | ) 34 | } 35 | -------------------------------------------------------------------------------- /src/components/imports/BaseLogin.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useLocation, useHistory, Link } from 'react-router-dom'; 3 | 4 | export default function BaseLogin() { 5 | 6 | const location = useLocation(); 7 | const history = useHistory(); 8 | 9 | let defaultClass = "nav-link link-btn btn-primary default-bg"; 10 | let active = " active" 11 | 12 | const register = () => history.push("/register") 13 | const login = () => history.push("/login") 14 | 15 | 16 | return ( 17 |
18 |
19 |
20 | Logo 21 |
22 |
23 | 24 | 25 |
26 |
27 |
28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /src/container/reducers.js: -------------------------------------------------------------------------------- 1 | import * as actionType from './types'; 2 | 3 | const initialState = { isLoggedIn : false, user : null } 4 | 5 | // reducer 6 | export default function rootReducer(state = initialState, action){ 7 | const { type, payload } = action; 8 | switch(type){ 9 | case actionType.REGISTER_SUCCESS: 10 | return { 11 | ...state, 12 | isLoggedIn: false 13 | } 14 | case actionType.REGISTER_FAIL: 15 | return { 16 | ...state, 17 | isLoggedIn: false 18 | } 19 | case actionType.LOGIN_SUCCESS: 20 | return { 21 | ...state, 22 | isLoggedIn: true, 23 | user: payload.user 24 | } 25 | case actionType.LOGIN_FAIL: 26 | return { 27 | ...state, 28 | isLoggedIn : false, 29 | user : null 30 | } 31 | case actionType.LOGOUT: 32 | return { 33 | ...state, 34 | isLoggedIn: false, 35 | user : null 36 | } 37 | default: 38 | return state; 39 | } 40 | } -------------------------------------------------------------------------------- /src/components/services/auth.service.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const baseURL = "http://localhost:4000/api"; 4 | 5 | // register request 6 | const register = (newUser) => { 7 | // POST request on http://localhost:4000/api/register 8 | return axios.post(`${baseURL}/register`, newUser) 9 | .then(response => { 10 | if (response){ 11 | return Promise.resolve(response) 12 | } 13 | }) 14 | .catch(error => { 15 | return Promise.reject(error.response) 16 | }) 17 | } 18 | 19 | // login request 20 | const login = (userCredential) => { 21 | return axios.post(`${baseURL}/login`, userCredential) 22 | .then(response => { 23 | if (response.data.token){ 24 | localStorage.setItem("x-access-token", response.data.token) 25 | } 26 | return Promise.resolve(response.data) 27 | }) 28 | .catch(error => { 29 | return Promise.reject(error.response.data) 30 | }) 31 | } 32 | 33 | // logout service 34 | const logout = () => { 35 | localStorage.removeItem('x-access-token') 36 | return { msg : "Logout Successfully...!"} 37 | } 38 | 39 | export { 40 | register, 41 | login, 42 | logout 43 | } 44 | 45 | -------------------------------------------------------------------------------- /src/components/imports/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { Link } from 'react-router-dom'; 4 | import Logout from './Logout'; 5 | 6 | import { logoutAction } from '../../container/actions'; 7 | import { useDispatch } from 'react-redux'; 8 | 9 | export default function Header() { 10 | 11 | const dispatch = useDispatch() 12 | 13 | const logout = () => { 14 | dispatch(logoutAction()); 15 | } 16 | 17 | return ( 18 |
19 | 35 |
36 | ) 37 | } 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mern_app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.12.0", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "axios": "^0.21.1", 10 | "node-sass": "^6.0.0", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-redux": "^7.2.4", 14 | "react-router-dom": "^5.2.0", 15 | "react-scripts": "4.0.3", 16 | "redux": "^4.1.0", 17 | "redux-thunk": "^2.3.0", 18 | "web-vitals": "^1.1.2" 19 | }, 20 | "scripts": { 21 | "start": "npm-run-all --parallel server startReact", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject", 25 | "server": "nodemon server/server.js", 26 | "startReact": "react-scripts start" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | }, 46 | "devDependencies": { 47 | "bcrypt": "^5.0.1", 48 | "cors": "^2.8.5", 49 | "dotenv": "^10.0.0", 50 | "express": "^4.17.1", 51 | "jsonwebtoken": "^8.5.1", 52 | "mongoose": "^5.12.12", 53 | "nodemon": "^2.0.7", 54 | "npm-run-all": "^4.1.5" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/pages/Login.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import BaseLogin from '../imports/BaseLogin'; 3 | import LoginForm from '../imports/LoginForm'; 4 | 5 | import { useDispatch, useStore } from 'react-redux'; 6 | import { loginAction } from '../../container/actions' 7 | import { useHistory } from 'react-router-dom'; 8 | 9 | export default function Login() { 10 | 11 | const [email, setEmail] = useState("") 12 | const [password, setPassword] = useState("") 13 | const [errorMessage, setError] = useState("") 14 | 15 | const dispatch = useDispatch() 16 | const store = useStore() 17 | const history = useHistory() 18 | 19 | // handle Submit handler function 20 | const handleSubmit = (event) =>{ 21 | event.preventDefault(); 22 | 23 | const userCredential = { 24 | email, 25 | password 26 | } 27 | // const userdata = { email: "dmin@gmail.com", password : "admin123"} 28 | const login = dispatch(loginAction(userCredential)) 29 | login 30 | .then(data => history.push('/')) 31 | .catch(error => setError(error.err)) 32 | 33 | // console.log(store.getState()) 34 | // console.log(userCredential); 35 | } 36 | 37 | return ( 38 |
39 |
40 |
41 | 42 | 43 |
44 |
45 |
46 | ) 47 | } 48 | -------------------------------------------------------------------------------- /src/components/imports/LoginForm.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ErrorAlter from './ErrorAlter'; 3 | 4 | export default function LoginForm(props) { 5 | 6 | let { handleSubmit, setEmail, setPassword, errorMessage, setError } = props.loginState; 7 | 8 | return ( 9 |
10 |
11 |
12 |

Sign into your account

13 |
14 |
15 |
16 | 17 |
18 | setEmail(e.target.value)} className="input-text" placeholder="Email Address" /> 19 | 20 |
21 | 22 |
23 | setPassword(e.target.value)} className="input-text" placeholder="Password" /> 24 | 25 |
26 | 27 | { 28 | errorMessage && setError(undefined) }> 29 | } 30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |
38 |
39 | ) 40 | } 41 | -------------------------------------------------------------------------------- /src/container/actions.js: -------------------------------------------------------------------------------- 1 | import * as actionType from './types'; 2 | import * as AuthService from '../components/services/auth.service'; 3 | 4 | // register action 5 | export const registerAction = (payload) => (dispatch) => { 6 | return AuthService.register(payload) 7 | .then(response => { 8 | 9 | dispatch({ 10 | type: actionType.REGISTER_SUCCESS, 11 | payload : response.data 12 | }) 13 | 14 | return Promise.resolve(response.data) 15 | 16 | }) 17 | .catch(error => { 18 | 19 | dispatch({ 20 | type : actionType.REGISTER_FAIL, 21 | payload : { err : error.message || "Registration Failed"} 22 | }) 23 | 24 | return Promise.reject(error) 25 | 26 | }) 27 | } 28 | 29 | // login action 30 | 31 | export const loginAction = (userCredential) => (dispatch) =>{ 32 | return AuthService.login(userCredential) 33 | .then(data => { 34 | 35 | dispatch({ 36 | type : actionType.LOGIN_SUCCESS, 37 | payload : data 38 | }) 39 | return Promise.resolve(data) 40 | }) 41 | .catch(error => { 42 | 43 | dispatch({ 44 | type : actionType.REGISTER_FAIL, 45 | payload : { err : error.message || "Login Failed" } 46 | }) 47 | return Promise.reject(error) 48 | }) 49 | } 50 | 51 | // logout action 52 | export const logoutAction = () => (dispatch) => { 53 | const msg = AuthService.logout() 54 | 55 | dispatch({ 56 | type : actionType.LOGOUT, 57 | payload : { msg } 58 | }) 59 | 60 | return Promise.resolve(msg) 61 | 62 | } -------------------------------------------------------------------------------- /src/components/pages/Register.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { useDispatch } from 'react-redux'; 3 | import { registerAction } from '../../container/actions'; 4 | import BaseLogin from '../imports/BaseLogin'; 5 | import RegisterForm from '../imports/RegisterForm'; 6 | 7 | import { useHistory } from 'react-router-dom'; 8 | 9 | export default function Register() { 10 | 11 | const [username, setUsername] = useState(""); 12 | const [email, setEmail] = useState(""); 13 | const [password, setPassword] = useState("") 14 | const [passwordCheck, setPasswordCheck] = useState(""); 15 | 16 | const [errorMessage, setError] = useState("") 17 | 18 | const dispatch = useDispatch() 19 | const history = useHistory() 20 | 21 | // on form submit click handler 22 | const handleSubmit = (event) => { 23 | event.preventDefault(); 24 | const newUser = { 25 | username, 26 | email, 27 | password, 28 | passwordCheck 29 | } 30 | // const user = { username : "admin", email: "admin@gmail.com", 31 | // password: "admin123", passwordCheck: "admin123"} 32 | const validate = dispatch(registerAction(newUser)); 33 | validate 34 | .then(data => { 35 | // console.log(data) 36 | history.push('/login'); 37 | }) 38 | .catch(error => setError(error.data.err)) 39 | 40 | // console.log(newUser); 41 | } 42 | 43 | let registerData = { 44 | handleSubmit, 45 | setUsername, 46 | setEmail, 47 | setPassword, 48 | setPasswordCheck, 49 | errorMessage, 50 | setError 51 | } 52 | 53 | return ( 54 |
55 |
56 |
57 | 58 | 59 |
60 |
61 |
62 | ) 63 | } 64 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 24 | 25 | 34 | React App 35 | 36 | 37 | 38 |
39 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/components/imports/RegisterForm.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ErrorAlert from './ErrorAlter'; 3 | 4 | export default function RegisterForm(props) { 5 | 6 | let { 7 | handleSubmit, 8 | setUsername, 9 | setEmail, 10 | setPassword, 11 | setPasswordCheck, 12 | errorMessage, 13 | setError 14 | } = props.registerState; 15 | 16 | return ( 17 |
18 |
19 |
20 |

Create a new account

21 |
22 |
23 |
24 | 25 |
26 | setUsername(e.target.value)} className="input-text" placeholder="Username" /> 27 | 28 |
29 | 30 |
31 | setEmail(e.target.value)} className="input-text" placeholder="Email" /> 32 | 33 |
34 | 35 |
36 | setPassword(e.target.value)} className="input-text" placeholder="Password" /> 37 | 38 |
39 | 40 |
41 | setPasswordCheck(e.target.value)} className="input-text" placeholder="Verify Password" /> 42 | 43 |
44 | 45 | { 46 | errorMessage && setError(undefined)}> 47 | } 48 | 49 |
50 | 53 |
54 | 55 |
56 |
57 |
58 |
59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /server/controller/controller.js: -------------------------------------------------------------------------------- 1 | const bcrypt = require('bcrypt'); 2 | const User = require('../model/schema'); 3 | const jwt = require('jsonwebtoken'); 4 | 5 | // controller for register 6 | exports.registerUser = async (req, res) => { 7 | try { 8 | 9 | // validate request 10 | if (!req.body){ 11 | res.status(406).json({ err : "You have to fill the registration form"}); 12 | return 13 | } 14 | 15 | let { email, password, passwordCheck, username} = req.body 16 | 17 | if (!email || !password || !passwordCheck) 18 | return res.status(406).json( { err : "Not all fields have been entered"}) 19 | if(password.length < 8) 20 | return res.status(406).json({ err: "The Password need to be at least 8 characters long"}) 21 | if(password !== passwordCheck) 22 | res.status(406).json({ err : "Password must be same for varification"}); 23 | 24 | // hashing password 25 | const hash = await bcrypt.hashSync(password, 10) 26 | 27 | // using document structure 28 | const newUser = new User({ 29 | email, 30 | password: hash, 31 | username 32 | }) 33 | 34 | newUser 35 | .save(newUser) 36 | .then(register => { 37 | res.json(register) 38 | }) 39 | .catch(error => { 40 | res.status(406).json({ err : error.message || "Something went wrong while registration" }) 41 | }) 42 | } catch (error) { 43 | res.status(500).json({ err : error.message || "Error while registration"}) 44 | } 45 | } 46 | 47 | // controller for login 48 | exports.login = async (req, res) => { 49 | 50 | try { 51 | 52 | // validate request 53 | if( !req.body){ 54 | res.status(406).json({ err : "You have to fill the email and password"}) 55 | return; 56 | } 57 | 58 | // get user data 59 | const { email , password } = req.body 60 | 61 | // validation 62 | if (!email || !password) 63 | return res.status(406).json({ err : "Not all fields have been entered"}) 64 | 65 | const user = await User.findOne( { email }); 66 | if (!user) 67 | return res.status(406).json({ err : "No account with this email."}) 68 | 69 | // compare the password 70 | const isMatch = await bcrypt.compare(password, user.password); 71 | 72 | if (!isMatch) return res.status(406).json({ err : "Invalid Credentials"}); 73 | 74 | // create jwt token 75 | const token = jwt.sign({ id : user._id}, process.env.JWT_SECRET) 76 | 77 | res.json({ token, username : user.username , email: user.email }) 78 | 79 | } catch (error) { 80 | res.status(500).json({ err : error.message || "Error while Login"}) 81 | } 82 | }; 83 | 84 | 85 | // delete user controller 86 | exports.delete = async (req, res) => { 87 | try { 88 | await User.findByIdAndDelete(req.user_id) 89 | res.json({ msg: "User Deleted Successfully...!"}); 90 | } catch (error) { 91 | res.status(500).json({ err : error.message || "Error while deleting user"}) 92 | } 93 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ### Steps to setup project 6 | 1. Clone a project and install all the dependancy 7 | 2. Create .env file in the Root directory and specify PORT, MONGO_URI and JWT_TOKEN 8 | 3. Start the project with npm start command 9 | 10 | ## Available Scripts 11 | 12 | In the project directory, you can run: 13 | 14 | ### `npm start` 15 | 16 | Runs the app in the development mode.\ 17 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 18 | 19 | The page will reload if you make edits.\ 20 | You will also see any lint errors in the console. 21 | 22 | ### `npm test` 23 | 24 | Launches the test runner in the interactive watch mode.\ 25 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 26 | 27 | ### `npm run build` 28 | 29 | Builds the app for production to the `build` folder.\ 30 | It correctly bundles React in production mode and optimizes the build for the best performance. 31 | 32 | The build is minified and the filenames include the hashes.\ 33 | Your app is ready to be deployed! 34 | 35 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 36 | 37 | ### `npm run eject` 38 | 39 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 40 | 41 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 42 | 43 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 44 | 45 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 46 | 47 | ## Learn More 48 | 49 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 50 | 51 | To learn React, check out the [React documentation](https://reactjs.org/). 52 | 53 | ### Code Splitting 54 | 55 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 56 | 57 | ### Analyzing the Bundle Size 58 | 59 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 60 | 61 | ### Making a Progressive Web App 62 | 63 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 64 | 65 | ### Advanced Configuration 66 | 67 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 68 | 69 | ### Deployment 70 | 71 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 72 | 73 | ### `npm run build` fails to minify 74 | 75 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 76 | -------------------------------------------------------------------------------- /src/sass/_login.scss: -------------------------------------------------------------------------------- 1 | // Login Page Styling 2 | 3 | #login{ 4 | min-height: 100vh; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | @extend .position-relative; 9 | @extend .text-center; 10 | 11 | .default-bg{ 12 | @extend .background; 13 | color: #505050; 14 | } 15 | 16 | .login-box{ 17 | max-width: 960px; 18 | margin: 0 auto; 19 | box-shadow: 0 0 35px rgba(0, 0, 0, 0.1); 20 | border-radius: 10px; 21 | 22 | > .bg-img{ 23 | padding: 0; 24 | border-radius: 10px 0 0 10px; 25 | background: rgba(0, 0,0, 0.04) url(http://localhost:3000/static/media/bg_img.0b3c570c.jpg) top left repeat; 26 | background-size: cover; 27 | top:0; 28 | bottom: 0; 29 | opacity: 1; 30 | } 31 | 32 | .info{ 33 | height: 450px; 34 | position: relative; 35 | 36 | > .logo{ 37 | text-align: left; 38 | margin: 20px; 39 | 40 | > .nav-brand{ 41 | font-size: 22px; 42 | @extend .font-bold; 43 | color: #505050; 44 | } 45 | } 46 | 47 | > .btn-section{ 48 | position: absolute; 49 | top: 40%; 50 | right: 0; 51 | margin-bottom: 0; 52 | 53 | .link-btn{ 54 | font-size: 12px; 55 | @extend .font-bold; 56 | } 57 | 58 | .link-btn.active{ 59 | background-color: #ff214f; 60 | color: #fff; 61 | } 62 | 63 | > .btn-primary{ 64 | @extend .text-center; 65 | line-height: 30px; 66 | width: 100px; 67 | text-transform: uppercase; 68 | border-radius: 50px 0 0 50px; 69 | margin-bottom: 15px; 70 | border: none; 71 | &:focus{ 72 | outline: none; 73 | box-shadow: none; 74 | } 75 | } 76 | 77 | } 78 | 79 | } 80 | } 81 | 82 | /* login form styling */ 83 | .form-section{ 84 | @extend .text-center; 85 | max-width: 400px; 86 | margin: 0 auto; 87 | @extend .width-100; 88 | 89 | > .title{ 90 | margin: 10px 0 50px 0; 91 | 92 | > h3{ 93 | font-size: 25px; 94 | @extend .font-bold; 95 | color: #505050; 96 | } 97 | } 98 | 99 | .login-inner-form{ 100 | @extend .position-relative; 101 | color: #979797; 102 | 103 | .form-box{ 104 | float: right; 105 | @extend .width-100; 106 | @extend .position-relative; 107 | 108 | // importing icons 109 | .icon{ 110 | position: absolute; 111 | right: 25px; 112 | top: 10px; 113 | } 114 | .icon.email::before{ 115 | @extend .font-awesome; 116 | content: "\f0e0"; 117 | } 118 | .icon.lock::before{ 119 | @extend .font-awesome; 120 | @extend .font-bold; 121 | content: "\f023"; 122 | } 123 | 124 | .icon.user::before{ 125 | @extend .font-awesome; 126 | content: "\f007"; 127 | } 128 | 129 | // style input textbox 130 | > .input-text{ 131 | font-size: 14px; 132 | outline: none; 133 | color: #616161; 134 | border-radius: 50px; 135 | border: 1px solid transparent; 136 | @extend .background; 137 | box-shadow: 0 0 5px rgba(0,0,0, 0.2); 138 | padding: 11px 45px 11px 20px; 139 | @extend .width-100; 140 | margin-bottom: 10px; 141 | } 142 | 143 | } 144 | 145 | .primary-btn{ 146 | background: #ff214f; 147 | @extend .width-100; 148 | border: none; 149 | color: #fff; 150 | box-shadow: 0 0 5px rgba(0,0,0, 0.2); 151 | padding: 10px 30px 9px 30px; 152 | cursor: pointer; 153 | height: 45px; 154 | border-radius: 50px; 155 | margin-top: 20px; 156 | 157 | &:hover{ 158 | background: #d61d42; 159 | } 160 | } 161 | 162 | .error-log{ 163 | display: inline; 164 | padding: 2px 10px; 165 | background-color: #ff0033; 166 | border-radius: 40px; 167 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 168 | 169 | > button{ 170 | background: transparent; 171 | border: none; 172 | color: #fff; 173 | font-size: 13px; 174 | } 175 | 176 | .error::before { 177 | @extend .font-awesome; 178 | @extend .font-bold; 179 | content: "\f188"; 180 | } 181 | 182 | } 183 | 184 | } 185 | 186 | } 187 | 188 | 189 | } --------------------------------------------------------------------------------