API & Client: Profile update

mpwo_client/src/actions/index.js

@@ -19,6 +19,14 @@ function ProfileError(message) {
   return { type: 'PROFILE_ERROR', message }
 }
 
+function PwdError(message) {
+  return { type: 'PWD_ERROR', message }
+}
+
+function initProfileFormData(user) {
+  return { type: 'INIT_PROFILE_FORM', user }
+}
+
 export const handleFormChange = (target, value) => ({
   type: 'UPDATE_USER_FORMDATA',
   target,
@@ -31,10 +39,6 @@ export const updateProfileFormData = (target, value) => ({
   value,
 })
 
-function initProfileFormData(user) {
-  return { type: 'INIT_PROFILE_FORM', user }
-}
-
 export function getProfile(dispatch) {
   return mpwoApi
     .getProfile()
@@ -147,7 +151,11 @@ export function handleProfileFormSubmit(event) {
   event.preventDefault()
   return (dispatch, getState) => {
     const state = getState()
-    return mpwoApi
+    if (state.formProfile.formProfile.password !==
+        state.formProfile.formProfile.passwordConf) {
+      dispatch(PwdError('Password and password confirmation don\'t match.'))
+    } else {
+      return mpwoApi
       .updateProfile(state.formProfile.formProfile)
       .then(ret => {
         if (ret.status === 'success') {
@@ -160,5 +168,7 @@ export function handleProfileFormSubmit(event) {
       .catch(error => {
         throw error
       })
+    }
+
   }
 }

mpwo_client/src/components/User/ProfileEdit.jsx

@@ -17,6 +17,7 @@ class ProfileEdit extends React.Component {
     const { formProfile,
             onHandleFormChange,
             onHandleProfileFormSubmit,
+            message,
             user
     } = this.props
     return (
@@ -24,6 +25,9 @@ class ProfileEdit extends React.Component {
         <Helmet>
           <title>mpwo - {user.username} - Edit Profile</title>
         </Helmet>
+        { message !== '' && (
+            <code>{message}</code>
+          )}
         <div className="container">
           <h1 className="page-title">Profile Edition</h1>
           <div className="row">
@@ -62,6 +66,29 @@ class ProfileEdit extends React.Component {
                           />
                         </label>
                       </div>
+                      <div className="form-group">
+                        <label>
+                          Password:
+                          <input
+                            name="password"
+                            className="form-control input-lg"
+                            type="password"
+                            onChange={onHandleFormChange}
+                          />
+                        </label>
+                      </div>
+                        <div className="form-group">
+                        <label>
+                          Password Confirmation:
+                          <input
+                            name="passwordConf"
+                            className="form-control input-lg"
+                            type="password"
+                            onChange={onHandleFormChange}
+                          />
+                        </label>
+                      </div>
+                      <hr />
                       <div className="form-group">
                         <label>
                           First Name:
@@ -146,6 +173,7 @@ class ProfileEdit extends React.Component {
 export default connect(
   state => ({
     formProfile: state.formProfile.formProfile,
+    message: state.message,
     user: state.user,
   }),
   dispatch => ({

mpwo_client/src/mpwoApi.js

@@ -58,7 +58,9 @@ export default class MpwoApi {
         last_name: form.lastName,
         bio: form.bio,
         location: form.location,
-        birth_date: form.birthdate,
+        birth_date: form.birthDate,
+        password: form.password,
+        password_conf: form.passwordConf,
       }),
     })
     return fetch(request)

mpwo_client/src/reducers/index.js

@@ -49,6 +49,7 @@ const message = (state = initial.message, action) => {
   switch (action.type) {
     case 'AUTH_ERROR':
     case 'PROFILE_ERROR':
+    case 'PWD_ERROR':
       return action.message
     case 'LOGOUT':
     case 'PROFILE_SUCCESS':

mpwo_client/src/reducers/initial.js

@@ -28,7 +28,9 @@ export default {
       lastName: '',
       bio: '',
       location: '',
-      birthDate: ''
+      birthDate: '',
+      password: '',
+      passwordConf: ''
     }
   },
 }