Skip to content

Commit f6d6252

Browse files
foyzulkarimfoyzulkarim
committed
Register done
1 parent 3f7d0d9 commit f6d6252

File tree

7 files changed

+110
-89
lines changed

7 files changed

+110
-89
lines changed

‎client/src/App.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { BrowserRouter as Router, Switch, Route, Link, Redirect, useRouteMatch,
44
import { useForm } from 'react-hook-form';
55
import { useSelector, useDispatch } from 'react-redux';
66
import { PostDetail, PostCreate, PostEdit, PostDelete, Posts, Home } from "./components/Posts";
7-
import { Login } from "./components/Login2";
7+
import { Login } from "./components/Login";
8+
import { Register } from "./components/Register";
89
import { Constants } from "./constants";
910

1011
export const PrivateRoute = ({ component: Component, ...rest }) => {
@@ -39,11 +40,20 @@ export const Navigation = () => {
3940
history.push('/login');
4041
}
4142

43+
let register = () => {
44+
history.push('/register');
45+
}
46+
4247
return (
4348
<>
4449
<h3>hello {userContext.user.username}</h3>
4550
{userContext.isAuthenticated && <button onClick={logOut}>Log Out</button>}
46-
{!userContext.isAuthenticated && <button onClick={login}>Login</button>}
51+
{!userContext.isAuthenticated &&
52+
<>
53+
<button onClick={login}>Login</button> <br />
54+
<button onClick={register}>Register</button>
55+
</>
56+
}
4757
</>
4858
);
4959

@@ -86,6 +96,7 @@ const App = () => {
8696
<PrivateRoute path="/post-delete/:id" component={PostDelete}></PrivateRoute>
8797
<PrivateRoute path="/posts" component={Posts}></PrivateRoute>
8898
<Route path="/login" component={Login}></Route>
99+
<Route path="/register" component={Register}></Route>
89100
<Route path="/"><Home /></Route>
90101
</Switch>
91102
</div>

‎client/src/components/Login.js

+34-73
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,48 @@
1-
import React, { Component } from 'react';
2-
import { useForm } from "react-hook-form";
3-
import { useHistory } from "react-router-dom";
4-
import { Constants } from '../constants';
5-
import { connect } from 'react-redux';
6-
7-
class Login extends Component {
8-
9-
constructor(props) {
10-
super(props);
11-
this.state = {
12-
username: '',
13-
password: '',
14-
submitted: false,
15-
}
16-
17-
this.handleChange = this.handleChange.bind(this);
18-
this.handleSubmit = this.handleSubmit.bind(this);
1+
import React, { useState, useEffect } from 'react';
2+
import { BrowserRouter as Router, Switch, Route, Link, Redirect, useRouteMatch, useParams, useHistory } from "react-router-dom";
3+
import { useForm } from 'react-hook-form';
4+
import { useSelector, useDispatch } from 'react-redux';
5+
import { Constants } from "../constants";
6+
7+
export const Login = () => {
8+
let history = useHistory();
9+
let dispatch = useDispatch();
10+
const { register, handleSubmit, watch, errors } = useForm();
11+
12+
let submitData = (data) => {
13+
dispatch({
14+
type: Constants.LOGIN_REQUEST, payload: data
15+
})
16+
history.push('/');
1917
}
2018

21-
handlechange = (e) => {
22-
const { name, value } = e.target;
23-
this.setState({ [name]: value });
24-
}
25-
26-
handleSubmit(e) {
27-
e.preventDefault();
28-
this.setState({ submitted: true });
29-
const { history } = this.props;
30-
const { username, password } = this.state;
31-
const { dispatch } = this.props;
32-
if (username && password) {
33-
dispatch({
34-
type: Constants.LOGIN_REQUEST, payload: { username, password }
35-
});
19+
const onSubmit = data => {
20+
submitData(data);
21+
};
3622

37-
history.push('/');
38-
}
39-
}
23+
const userContext = useSelector(state => {
24+
return state.userContext;
25+
});
4026

41-
render() {
42-
const { loggingIn } = this.props;
43-
const { username, password, submitted } = this.state;
44-
return (
27+
return (userContext.isAuthenticated) ? <Redirect to={{ pathname: '/' }} /> :
28+
<>
4529
<div className="col-md-6 col-md-offset-3">
46-
<div className="alert alert-info">
47-
Username: test<br />
48-
Password: test
49-
</div>
5030
<h2>Login</h2>
51-
<form name="form" onSubmit={this.handleSubmit}>
52-
<div className={'form-group' + (submitted && !username ? ' has-error' : '')}>
31+
<form name="form" onSubmit={handleSubmit(onSubmit)}>
32+
<div className="form-group">
5333
<label htmlFor="username">Username</label>
54-
<input type="text" className="form-control" name="username" value={username} onChange={this.handleChange} />
55-
{submitted && !username &&
56-
<div className="help-block">Username is required</div>
57-
}
34+
<input type="text" className="form-control" name="username" ref={register({ required: true })} />
35+
<span>{errors.username && 'Username is required'}</span>
5836
</div>
59-
<div className={'form-group' + (submitted && !password ? ' has-error' : '')}>
37+
<div className='form-group'>
6038
<label htmlFor="password">Password</label>
61-
<input type="password" className="form-control" name="password" value={password} onChange={this.handleChange} />
62-
{submitted && !password &&
63-
<div className="help-block">Password is required</div>
64-
}
39+
<input type="password" className="form-control" name="password" ref={register({ required: true })} />
40+
<span>{errors.password && 'Password is required'}</span>
6541
</div>
6642
<div className="form-group">
67-
<button className="btn btn-primary">Login</button>
68-
{loggingIn &&
69-
<img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
70-
}
43+
<input type="submit" className="btn btn-primary" />
7144
</div>
7245
</form>
7346
</div>
74-
);
75-
}
76-
77-
}
78-
79-
function mapStateToProps(state) {
80-
const { loggingIn } = state.authentication;
81-
return {
82-
loggingIn
83-
};
84-
}
85-
86-
const connectedLoginPage = connect(mapStateToProps)(Login);
87-
export { connectedLoginPage as LoginObs };
47+
</>;
48+
};

‎client/src/components/Login2.js renamed to ‎client/src/components/Register.js

+23-9
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,27 @@
11
import React, { useState, useEffect } from 'react';
2-
//import './App.css';
32
import { BrowserRouter as Router, Switch, Route, Link, Redirect, useRouteMatch, useParams, useHistory } from "react-router-dom";
43
import { useForm } from 'react-hook-form';
54
import { useSelector, useDispatch } from 'react-redux';
65
import { Constants } from "../constants";
76

8-
export const Login = () => {
7+
export const Register = () => {
98
let history = useHistory();
109
let dispatch = useDispatch();
11-
const { register, handleSubmit, watch, errors } = useForm();
10+
const { register, handleSubmit, watch, errors, setError } = useForm();
1211

1312
let submitData = (data) => {
1413
dispatch({
15-
type: Constants.LOGIN_REQUEST, payload: data
16-
})
14+
type: Constants.REGISTER_REQUEST, payload: data
15+
});
1716
history.push('/');
1817
}
1918

2019
const onSubmit = data => {
20+
if (data.password!=data.confirmpassword) {
21+
setError("password", "notMatch", "Password and Confirm Password are mismatched");
22+
return;
23+
}
24+
2125
submitData(data);
2226
};
2327

@@ -31,14 +35,24 @@ export const Login = () => {
3135
<h2>Login</h2>
3236
<form name="form" onSubmit={handleSubmit(onSubmit)}>
3337
<div className="form-group">
34-
<label htmlFor="username">Username</label>
35-
<input type="text" className="form-control" name="username" ref={register({ required: true })} />
36-
<span>{errors.username && 'Username is required'}</span>
38+
<label htmlFor="email">Email</label>
39+
<input type="text" className="form-control" name="email" ref={register({ required: true })} />
40+
<span>{errors.email && 'Email is required'}</span>
41+
</div>
42+
<div className="form-group">
43+
<label htmlFor="phone">Phone</label>
44+
<input type="text" className="form-control" name="phone" ref={register({ required: true })} />
45+
<span>{errors.phone && 'Phone is required'}</span>
3746
</div>
3847
<div className='form-group'>
3948
<label htmlFor="password">Password</label>
4049
<input type="password" className="form-control" name="password" ref={register({ required: true })} />
41-
<span>{errors.password && 'Password is required'}</span>
50+
<span>{errors.password && <p>{errors.password.message}</p>}</span>
51+
</div>
52+
<div className='form-group'>
53+
<label htmlFor="confirmpassword">Confirm password</label>
54+
<input type="password" className="form-control" name="confirmpassword" ref={register({ required: true })} />
55+
<span>{errors.confirmpassword && 'Confirm password is required'}</span>
4256
</div>
4357
<div className="form-group">
4458
<input type="submit" className="btn btn-primary" />

‎client/src/constants/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,8 @@ export const Constants = {
33
LOGIN_SUCCESS: 'LOGIN_REQUEST_SUCCESS',
44
LOGIN_FAILURE: 'LOGIN_REQUEST_FAILURE',
55
LOGOUT_REQUEST: 'LOGOUT_REQUEST',
6+
7+
REGISTER_REQUEST: 'REGISTER_REQUEST',
8+
REGISTER_SUCCESS: 'REGISTER_REQUEST_SUCCESS',
9+
REGISTER_FAILURE: 'REGISTER_REQUEST_FAILURE',
610
};

‎client/src/reducers/userReducer.js

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export default (state = initialState, action) => {
2424
user: initialState.user,
2525
token: initialState.token,
2626
};
27+
case Constants.REGISTER_SUCCESS:
28+
return state;
2729
default:
2830
let localStorageData = localStorage.getItem('data');
2931
if (localStorageData) {

‎client/src/sagas/api.js

+5
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,9 @@ export const getComments = (postId) => {
6767
export const login = (data) => {
6868
console.log("login api call ->", data);
6969
return axios.post(`${AuthUrl}/api/token`, data);
70+
}
71+
72+
export const register = (data) => {
73+
console.log("register api call ->", data);
74+
return axios.post(`${AuthUrl}/api/user/register`, data);
7075
}

‎client/src/sagas/sagas.js

+29-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { call, put, takeEvery, all } from "redux-saga/effects";
22
import * as api from './api';
3+
import { Constants } from "../constants";
34

45
export function* addPost({ payload }) {
56
try {
@@ -92,24 +93,47 @@ export function* fetchComments({ payload }) {
9293
}
9394
}
9495

95-
function* watchFetchComments() {
96+
function* watchFetchComments() {
9697
yield takeEvery('FETCH_COMMENTS', fetchComments);
9798
}
9899

99100
export function* login({ payload }) {
100101
try {
101102
let output = yield call(api.login, payload);
102-
yield put({ type: 'LOGIN_REQUEST_SUCCESS', payload: output });
103+
yield put({ type: 'LOGIN_REQUEST_SUCCESS', payload: output });
103104
} catch (error) {
104-
console.log('fetch posts error', error);
105+
console.log('login error', error);
105106
}
106107
}
107108

108109
function* watchLogin() {
109110
yield takeEvery('LOGIN_REQUEST', login);
110111
}
111112

113+
export function* register({ payload }) {
114+
try {
115+
let output = yield call(api.register, payload);
116+
yield put({ type: Constants.REGISTER_SUCCESS, payload: output });
117+
} catch (error) {
118+
console.log('register error', error);
119+
}
120+
}
121+
122+
function* watchRegister() {
123+
yield takeEvery(Constants.REGISTER_REQUEST, register);
124+
}
125+
112126

113-
export default function* rootSaga() {
114-
yield all([watchAddPost(), watchEditPost(), watchDeletePost(), watchFetchPosts(), watchFetchPostDetail(), watchAddComment(), watchFetchComments(), watchLogin()]);
127+
export default function* rootSaga() {
128+
yield all([
129+
watchAddPost(),
130+
watchEditPost(),
131+
watchDeletePost(),
132+
watchFetchPosts(),
133+
watchFetchPostDetail(),
134+
watchAddComment(),
135+
watchFetchComments(),
136+
watchLogin(),
137+
watchRegister()
138+
]);
115139
};

0 commit comments

Comments
 (0)