@@ -46,7 +48,7 @@ export class Header extends Component {
-
@@ -135,3 +123,18 @@ export class Login extends Component {
}
}
+
+
+const mapStateToProps = (state) => {
+ return {
+ user: state.user
+ }
+}
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ loginUser: (userData) => dispatch(login(userData))
+ }
+}
+
+export const Login = connect(mapStateToProps, mapDispatchToProps)(LoginCompoent);
diff --git a/frontend/src/pages/Registration/Registration.jsx b/frontend/src/pages/Registration/Registration.jsx
index a94a2325..078d6f04 100644
--- a/frontend/src/pages/Registration/Registration.jsx
+++ b/frontend/src/pages/Registration/Registration.jsx
@@ -5,30 +5,33 @@ import { Link } from 'react-router-dom';
import style from './registration.module.scss'
+// redux
+import { connect } from "react-redux";
+import { signup } from "../../redux/action/userAction";
const womenImg = require('../../images/women.png').default;
-export class Registration extends Component {
+class RegistrationComponent extends Component {
state = {
name: '',
email: '',
phone: '',
password: '',
- cpassword: '',
+ passwordConfirm: '',
errors: {
name: '',
email: '',
phone: '',
password: '',
- cpassword: ''
+ passwordConfirm: ''
}
};
registerHandler = (e) => {
e.preventDefault();
- this.setState(prevState => ({ ...prevState, errors: { email: '', password: '', cpassword: '' } }))
+ this.setState(prevState => ({ ...prevState, errors: { email: '', password: '', passwordConfirm: '' } }))
// validation
- const { name, email, phone, password, cpassword } = this.state;
+ const { name, email, phone, password, passwordConfirm } = this.state;
//name
if (!name) {
this.setState(prevState => ({ ...prevState, errors: { ...prevState.errors, name: 'Name cannot be empty' } }));
@@ -40,7 +43,7 @@ export class Registration extends Component {
this.setState(prevState => ({ ...prevState, errors: { ...prevState.errors, email: 'Email is not valid.' } }));
return;
}
- if(!phone || phone.length !== 10) {
+ if (!phone || phone.length !== 10) {
this.setState(prevState => ({ ...prevState, errors: { ...prevState.errors, phone: 'Mobile No. cannot be empty or less than 10 digits.' } }));
return;
}
@@ -53,8 +56,8 @@ export class Registration extends Component {
this.setState(prevState => ({ ...prevState, errors: { ...prevState.errors, password: 'Password length must be atleast 6 characters.' } }));
return;
}
- if (password !== cpassword) {
- this.setState(prevState => ({ ...prevState, errors: { ...prevState.errors, cpassword: 'Passwords do not match.' } }));
+ if (password !== passwordConfirm) {
+ this.setState(prevState => ({ ...prevState, errors: { ...prevState.errors, passwordConfirm: 'Passwords do not match.' } }));
return;
}
// registeration logic
@@ -67,24 +70,11 @@ export class Registration extends Component {
}
registerUser = async (user) => {
- // add user to backend
- try {
- // const { name, email, phone, password, cpassword: passwordConfirm} = this.state;
- // const res = await Axios({
- // url: "/api/auth/signup",
- // method: "POST",
- // data: {
- // name,
- // email,
- // phone,
- // password,
- // passwordConfirm
- // }
- // });
- alert("Registered...")
- } catch (error) {
- alert(`Something went wrong! \n ${error.response.data.msg}`)
- }
+ const { name, email, phone, password, passwordConfirm } = this.state
+
+ // dispatch register action
+ this.props.register({ name, email, phone, password, passwordConfirm })
+
}
@@ -92,65 +82,78 @@ export class Registration extends Component {
const { errors } = this.state;
return (
<>
-
- 
+
+
+
-
-
-
-
-
- Register
- - Already have an account? Login here. -
-
-
+
)
}
}
+
+
+const mapStateToProps = state => {
+ return {
+
+ }
+}
+const mapDispatchToProps = dispatch => {
+ return {
+ register: (userData) => dispatch(signup(userData))
+ }
+}
+export const Registration = connect(mapStateToProps, mapDispatchToProps)(RegistrationComponent);
\ No newline at end of file
diff --git a/frontend/src/redux/action/type.js b/frontend/src/redux/action/type.js
new file mode 100644
index 00000000..7a1a6ff0
--- /dev/null
+++ b/frontend/src/redux/action/type.js
@@ -0,0 +1,5 @@
+// USER ACTIONS
+export const LOGIN_USER = "LOGIN_USER";
+export const SIGNUP_USER = "SIGNUP_USER";
+export const LOGOUT_USER = "LOGOUT_USER";
+export const IS_LOGGEDIN = "IS_LOGGEDIN";
\ No newline at end of file
diff --git a/frontend/src/redux/action/userAction.js b/frontend/src/redux/action/userAction.js
new file mode 100644
index 00000000..5520c74b
--- /dev/null
+++ b/frontend/src/redux/action/userAction.js
@@ -0,0 +1,57 @@
+import axios from "../../utils/axios";
+import { IS_LOGGEDIN, LOGOUT_USER } from "./type";
+import Cookies from "js-cookie";
+import jwt_decode from "jwt-decode";
+export const login = userData => async dispatch => {
+ try {
+ const res = await axios.post('/auth/signin', userData);
+
+ // set cookie in browser
+ Cookies.set("token", res.data.data.token);
+
+ window.location.href = "/";
+ } catch (e) {
+ // we will handling this error in future with UI
+ console.log(e);
+ }
+}
+
+export const signup = userData => async dispatch => {
+ try {
+ await axios.post('/auth/signup', userData);
+ window.location.href = "/";
+ } catch (e) {
+ // we will handling this error in future with UI
+ console.log(e);
+ }
+}
+
+export const isLoggedIn = () => async dispatch => {
+
+ try {
+ if (Cookies.get('token')) {
+ const tokenData = jwt_decode(Cookies.get('token').split(' ')[1]);
+ const currentTime = Date.now();
+ const tokenExpireTime = new Date(0).setUTCSeconds(tokenData.exp);
+
+ // to check wheather token is valid or load
+ if (currentTime < tokenExpireTime)
+ dispatch({ type: IS_LOGGEDIN })
+ else
+ dispatch({ type: LOGOUT_USER })
+ } else {
+ dispatch({ type: LOGOUT_USER })
+ }
+
+
+ } catch (e) {
+ // we will handling this error in future with UI
+ console.log(e);
+ }
+}
+
+export const logout = () => dispatch => {
+ // Simply remove the cookie
+ Cookies.remove("token");
+ dispatch({ type: LOGOUT_USER })
+}
\ No newline at end of file
diff --git a/frontend/src/redux/reducer/userReducer.js b/frontend/src/redux/reducer/userReducer.js
new file mode 100644
index 00000000..d4934be7
--- /dev/null
+++ b/frontend/src/redux/reducer/userReducer.js
@@ -0,0 +1,31 @@
+
+import { IS_LOGGEDIN, LOGOUT_USER } from "../action/type";
+
+const initialState = {
+ isAuth: false,
+ isLoading: false,
+ // email:null,
+ // username:null,
+}
+
+const userReducer = (state = initialState, action) => {
+ // we can create LOGIN_ACTION for getting user email and name
+ const { type } = action;
+ switch (type) {
+ case IS_LOGGEDIN: {
+ return {
+ ...state,
+ isAuth: true,
+ }
+ }
+ case LOGOUT_USER: {
+ return {
+ ...state,
+ isAuth: false
+ }
+ }
+ default:
+ return state;
+ }
+}
+export default userReducer;
\ No newline at end of file
diff --git a/frontend/src/redux/store.js b/frontend/src/redux/store.js
new file mode 100644
index 00000000..ce0a94fd
--- /dev/null
+++ b/frontend/src/redux/store.js
@@ -0,0 +1,7 @@
+import { combineReducers, createStore, applyMiddleware } from "redux";
+import userReducer from "./reducer/userReducer";
+import thunk from "redux-thunk";
+export default createStore(
+ combineReducers({ user: userReducer }),
+ applyMiddleware(thunk)
+);
\ No newline at end of file
diff --git a/frontend/src/utils/axios.js b/frontend/src/utils/axios.js
new file mode 100644
index 00000000..db6ba187
--- /dev/null
+++ b/frontend/src/utils/axios.js
@@ -0,0 +1,4 @@
+import axios from "axios";
+axios.defaults.baseURL = "http://localhost:8080/api";
+axios.defaults.withCredentials = true;
+export default axios;
\ No newline at end of file
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
new file mode 100644
index 00000000..7e20d094
--- /dev/null
+++ b/node_modules/.yarn-integrity
@@ -0,0 +1,12 @@
+{
+ "systemParams": "win32-x64-83",
+ "modulesFolders": [
+ "node_modules"
+ ],
+ "flags": [],
+ "linkedModules": [],
+ "topLevelPatterns": [],
+ "lockfileEntries": {},
+ "files": [],
+ "artifacts": {}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..bdf11c9a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,11 @@
+{
+ "requires": true,
+ "lockfileVersion": 1,
+ "dependencies": {
+ "jwt-decode": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+ "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+ }
+ }
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 00000000..fb57ccd1
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+
-
+
+
+
+ Register
+ + Already have an account? Login here. +
+
+
+