ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Add user edit and user signup

Browse Source
This commit is contained in:
Grégoire Delattre 2016-11-17 01:16:45 +01:00
parent b819f988f4
commit fbbf74a559
6 changed files with 148 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/public/js/actions/actionCreators.js
View File

@ -48,6 +48,27 @@ export function loginUser(username, password) {
)
}
export function updateUser(config) {
return request(
'USER_UPDATE',
configureAxios().post('/users/edit', config)
)
}
export function userSignUp(config) {
return request(
'USER_SIGNUP',
configureAxios().post('/users/signup', config)
)
}
export function getUserInfos() {
return request(
'GET_USER',
configureAxios().get('/users/details')
)
}
export function fetchMovies() {
return request(
'MOVIE_LIST_FETCH',

4
src/public/js/app.js
View File

@ -21,6 +21,8 @@ import NavBar from './components/navbar.jsx'
import MovieList from './components/movie-list.jsx'
import UserLoginForm from './components/user-login.jsx'
import Error from './components/errors.jsx'
import UserEdit from './components/users/edit'
import UserSignUp from './components/users/signup'
class Main extends React.Component {
componentWillMount() {
@ -70,6 +72,8 @@ ReactDOM.render((
<Route path="/" component={App}>
<IndexRedirect to="/users/login" />
<Route path="/users/login" component={UserLoginForm} />
<Route path="/users/signup" component={UserSignUp} />
<Route path="/users/edit" component={UserIsAuthenticated(UserEdit)} />
<Route path="/movies/popular" component={UserIsAuthenticated(MovieList)} />
</Route>
</Router>

5
src/public/js/components/navbar.jsx
View File

@ -26,6 +26,11 @@ export default class NavBar extends React.Component {
</LinkContainer>
</Nav>
<Nav pullRight>
{isLoggedIn ||
<LinkContainer to="/users/signup">
<NavItem>Sign up</NavItem>
</LinkContainer>
}
{isLoggedIn ||
<LinkContainer to="/users/login">
<NavItem>Login</NavItem>

63
src/public/js/components/users/edit.js Normal file
View File

@ -0,0 +1,63 @@
import React from 'react'
export default class UserEdit extends React.Component {
componentWillMount() {
this.props.getUserInfos();
}
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
this.props.updateUser({
'polochon_url': this.refs.polochonUrl.value,
'polochon_token': this.refs.polochonToken.value,
'password': this.refs.newPassword.value,
'password_confirm': this.refs.newPasswordConfirm.value,
});
}
render() {
// TODO make this fields editable
const polochonUrl = this.props.userStore.polochonUrl;
const polochonToken = this.props.userStore.polochonToken;
return (
<div className="container">
<div className="content-fluid">
<div className="col-md-6 col-md-offset-3 col-xs-12">
<h2>Edit user</h2>
<hr />
<form ref="userEditForm" className="form-horizontal" onSubmit={(e) => this.handleSubmit(e)}>
<div className="form-group">
<label className="control-label">Polochon URL</label>
<input autoFocus="autofocus" className="form-control" type="text" ref="polochonUrl" value={polochonUrl} />
</div>
<div className="form-group">
<label className="control-label">Polochon token</label>
<input className="form-control" ref="polochonToken" type="text" value={polochonToken} />
</div>
<hr />
<div className="form-group">
<label className="control-label">Password</label>
<input autoComplete="off" className="form-control" ref="newPassword" type="password"/>
</div>
<div className="form-group">
<label className="control-label">Confirm Password</label>
<input autoComplete="off" className="form-control" ref="newPasswordConfirm" type="password"/>
</div>
<div>
<input className="btn btn-primary pull-right" type="submit" value="Update"/>
</div>
</form>
</div>
</div>
</div>
);
}
}

48
src/public/js/components/users/signup.js Normal file
View File

@ -0,0 +1,48 @@
import React from 'react'
export default class UserSignUp extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
this.props.userSignUp({
'username': this.refs.username.value,
'password': this.refs.password.value,
'password_confirm': this.refs.passwordConfirm.value,
});
}
render() {
return (
<div className="container">
<div className="content-fluid">
<div className="col-md-6 col-md-offset-3 col-xs-12">
<h2>Sign up</h2>
<hr />
<form ref="userSignUpForm" className="form-horizontal" onSubmit={(e) => this.handleSubmit(e)}>
<div className="form-group">
<label className="control-label">Username</label>
<input autoFocus="autofocus" className="form-control" type="text" ref="username" />
</div>
<div className="form-group">
<label className="control-label">Password</label>
<input className="form-control" ref="password" type="password" />
</div>
<div className="form-group">
<label className="control-label">Password confirm</label>
<input className="form-control" ref="passwordConfirm" type="password" />
</div>
<div>
<input className="btn btn-primary pull-right" type="submit" value="Sign up"/>
</div>
</form>
</div>
</div>
</div>
);
}
}

7
src/public/js/reducers/users.js
View File

@ -5,6 +5,8 @@ const defaultState = {
username: "",
isAdmin: false,
isLogged: false,
polochonToken: "",
polochonUrl: "",
};
export default function userStore(state = defaultState, action) {
@ -26,6 +28,11 @@ export default function userStore(state = defaultState, action) {
return updateFromToken(state, localToken)
case 'USER_LOGOUT':
return logoutUser(state)
case 'GET_USER_FULFILLED':
return Object.assign({}, state, {
polochonToken: action.payload.data.token,
polochonUrl: action.payload.data.url,
})
default:
return state;
}