From fbbf74a559a59b61ab2a75573611fb456d66f86f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Thu, 17 Nov 2016 01:16:45 +0100
Subject: [PATCH] Add user edit and user signup

---
 src/public/js/actions/actionCreators.js  | 21 ++++++++
 src/public/js/app.js                     |  4 ++
 src/public/js/components/navbar.jsx      |  5 ++
 src/public/js/components/users/edit.js   | 63 ++++++++++++++++++++++++
 src/public/js/components/users/signup.js | 48 ++++++++++++++++++
 src/public/js/reducers/users.js          |  7 +++
 6 files changed, 148 insertions(+)
 create mode 100644 src/public/js/components/users/edit.js
 create mode 100644 src/public/js/components/users/signup.js

diff --git a/src/public/js/actions/actionCreators.js b/src/public/js/actions/actionCreators.js
index 06fa96c..3defc6f 100644
--- a/src/public/js/actions/actionCreators.js
+++ b/src/public/js/actions/actionCreators.js
@@ -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',
diff --git a/src/public/js/app.js b/src/public/js/app.js
index cde690d..e913bd0 100644
--- a/src/public/js/app.js
+++ b/src/public/js/app.js
@@ -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>
diff --git a/src/public/js/components/navbar.jsx b/src/public/js/components/navbar.jsx
index bc56983..594b4a2 100644
--- a/src/public/js/components/navbar.jsx
+++ b/src/public/js/components/navbar.jsx
@@ -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>
diff --git a/src/public/js/components/users/edit.js b/src/public/js/components/users/edit.js
new file mode 100644
index 0000000..ca34331
--- /dev/null
+++ b/src/public/js/components/users/edit.js
@@ -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>
+    );
+  }
+}
diff --git a/src/public/js/components/users/signup.js b/src/public/js/components/users/signup.js
new file mode 100644
index 0000000..9a781a2
--- /dev/null
+++ b/src/public/js/components/users/signup.js
@@ -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>
+    );
+  }
+}
diff --git a/src/public/js/reducers/users.js b/src/public/js/reducers/users.js
index 471ffdc..f909267 100644
--- a/src/public/js/reducers/users.js
+++ b/src/public/js/reducers/users.js
@@ -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;
   }