Интеграция бека с формой смены пароля

src/components/auth/actions.js

@@ -1,6 +1,6 @@
 import { routeActions } from 'react-router-redux';
 
-import { updateUser, logout as logoutUser, authenticate } from 'components/user/actions';
+import { updateUser, logout as logoutUser, changePassword as changeUserPassword, authenticate } from 'components/user/actions';
 import request from 'services/request';
 
 export function login({login = '', password = '', rememberMe = false}) {
@@ -32,7 +32,7 @@ export function login({login = '', password = '', rememberMe = false}) {
                     username: login,
                     email: login
                 }));
-            } else {
+            } else if (resp.errors) {
                 if (resp.errors.login === LOGIN_REQUIRED && password) {
                     dispatch(logout());
                 }
@@ -46,6 +46,25 @@ export function login({login = '', password = '', rememberMe = false}) {
         ;
 }
 
+export function changePassword({
+    password = '',
+    newPassword = '',
+    newRePassword = ''
+}) {
+    return (dispatch) =>
+        dispatch(changeUserPassword({password, newPassword, newRePassword}))
+            .catch((resp) => {
+                if (resp.errors) {
+                    const errorMessage = resp.errors[Object.keys(resp.errors)[0]];
+                    dispatch(setError(errorMessage));
+                    throw new Error(errorMessage);
+                }
+
+                // TODO: log unexpected errors
+            })
+            ;
+}
+
 export function register({
     email = '',
     username = '',
@@ -67,9 +86,11 @@ export function register({
             dispatch(routeActions.push('/activation'));
         })
         .catch((resp) => {
-            const errorMessage = resp.errors[Object.keys(resp.errors)[0]];
-            dispatch(setError(errorMessage));
-            throw new Error(errorMessage);
+            if (resp.errors) {
+                const errorMessage = resp.errors[Object.keys(resp.errors)[0]];
+                dispatch(setError(errorMessage));
+                throw new Error(errorMessage);
+            }
 
             // TODO: log unexpected errors
         })

src/components/auth/authError/AuthError.jsx

@@ -71,6 +71,10 @@ export default class AuthError extends Component {
         'error.you_must_accept_rules': () => this.errorsMap['error.rulesAgreement_required'](),
         'error.key_required': () => <Message {...messages.keyRequired} />,
         'error.key_is_required': () => this.errorsMap['error.key_required'](),
-        'error.key_not_exists': () => <Message {...messages.keyNotExists} />
+        'error.key_not_exists': () => <Message {...messages.keyNotExists} />,
+
+        'error.newPassword_required': () => <Message {...messages.newPasswordRequired} />,
+        'error.newRePassword_required': () => <Message {...messages.newRePasswordRequired} />,
+        'error.newRePassword_does_not_match': () => <Message {...messages.passwordsDoesNotMatch} />
     };
 }

src/components/auth/authError/AuthError.messages.js

@@ -31,6 +31,16 @@ export default defineMessages({
         defaultMessage: 'Please enter password'
     },
 
+    newPasswordRequired: {
+        id: 'newPasswordRequired',
+        defaultMessage: 'Please enter new password'
+    },
+
+    newRePasswordRequired: {
+        id: 'newRePasswordRequired',
+        defaultMessage: 'Please repeat new password'
+    },
+
     usernameRequired: {
         id: 'usernameRequired',
         defaultMessage: 'Username is required'

src/components/auth/changePassword/ChangePassword.jsx

@@ -30,6 +30,7 @@ class Body extends BaseAuthBody {
                 <Input {...this.bindField('password')}
                     icon="key"
                     color="darkBlue"
+                    type="password"
                     autoFocus
                     onFocus={this.fixAutoFocus}
                     required
@@ -39,6 +40,7 @@ class Body extends BaseAuthBody {
                 <Input {...this.bindField('newPassword')}
                     icon="key"
                     color="darkBlue"
+                    type="password"
                     required
                     placeholder={messages.newPassword}
                 />
@@ -46,6 +48,7 @@ class Body extends BaseAuthBody {
                 <Input {...this.bindField('newRePassword')}
                     icon="key"
                     color="darkBlue"
+                    type="password"
                     required
                     placeholder={messages.newRePassword}
                 />

src/components/user/actions.js

@@ -24,7 +24,6 @@ export function logout() {
     return setUser({isGuest: true});
 }
 
-
 export function fetchUserData() {
     return (dispatch) =>
         request.get('/api/accounts/current')
@@ -45,6 +44,26 @@ export function fetchUserData() {
         });
 }
 
+export function changePassword({
+    password = '',
+    newPassword = '',
+    newRePassword = ''
+}) {
+    return (dispatch) =>
+        request.post(
+            '/api/accounts/change-password',
+            {password, newPassword, newRePassword}
+        )
+        .then((resp) => {
+            dispatch(updateUser({
+                shouldChangePassword: false
+            }));
+
+            return resp;
+        })
+        ;
+}
+
 
 export function authenticate(token) {
     if (!token || token.split('.').length !== 3) {

src/services/authFlow/ChangePasswordState.js

@@ -6,6 +6,11 @@ export default class ChangePasswordState extends AbstractState {
         context.navigate('/change-password');
     }
 
+    resolve(context, payload) {
+        context.run('changePassword', payload)
+            .then(() => context.setState(new CompleteState()));
+    }
+
     reject(context) {
         context.run('updateUser', {
             shouldChangePassword: false