#48: add/remove accounts from account switcher. Allow authorized users to log in into another account

src/components/accounts/AccountSwitcher.jsx

@@ -10,20 +10,13 @@ import { Button } from 'components/ui/form';
 import styles from './accountSwitcher.scss';
 import messages from './AccountSwitcher.intl.json';
 
-const accounts = {
-    active: {id: 7, username: 'SleepWalker', email: 'danilenkos@auroraglobal.com'},
-    available: [
-        {id: 7, username: 'SleepWalker', email: 'danilenkos@auroraglobal.com'},
-        {id: 8, username: 'ErickSkrauch', email: 'erickskrauch@yandex.ru'},
-        {id: 9, username: 'Ely-en', email: 'ely-en@ely.by'},
-        {id: 10, username: 'Ely-by', email: 'ely-pt@ely.by'},
-    ]
-};
-
-export default class AccountSwitcher extends Component {
+export class AccountSwitcher extends Component {
     static displayName = 'AccountSwitcher';
 
     static propTypes = {
+        switchAccount: PropTypes.func.isRequired,
+        removeAccount: PropTypes.func.isRequired,
+        onAfterAction: PropTypes.func, // called after each action performed
         accounts: PropTypes.shape({ // TODO: accounts shape
             active: PropTypes.shape({
                 id: PropTypes.number
@@ -43,7 +36,7 @@ export default class AccountSwitcher extends Component {
         highlightActiveAccount: true,
         allowLogout: true,
         allowAdd: true,
-        accounts
+        onAfterAction() {}
     };
 
     render() {
@@ -66,7 +59,7 @@ export default class AccountSwitcher extends Component {
                             styles.accountIcon,
                             styles.activeAccountIcon,
                             styles.accountIcon1
-                        )}></div>
+                        )} />
                         <div className={styles.activeAccountInfo}>
                             <div className={styles.activeAccountUsername}>
                                 {accounts.active.username}
@@ -81,7 +74,7 @@ export default class AccountSwitcher extends Component {
                                     </a>
                                 </div>
                                 <div className={styles.link}>
-                                    <a href="" className={styles.link}>
+                                    <a className={styles.link} onClick={this.onRemove(accounts.active)} href="#">
                                         <Message {...messages.logout} />
                                     </a>
                                 </div>
@@ -90,16 +83,19 @@ export default class AccountSwitcher extends Component {
                     </div>
                 ) : null}
                 {available.map((account, id) => (
-                    <div className={classNames(styles.item, styles.accountSwitchItem)} key={account.id}>
+                    <div className={classNames(styles.item, styles.accountSwitchItem)}
+                        key={account.id}
+                        onClick={this.onSwitch(account)}
+                    >
                         <div className={classNames(
                             styles.accountIcon,
                             styles[`accountIcon${id % 7 + (highlightActiveAccount ? 2 : 1)}`]
-                        )}></div>
+                        )} />
 
                         {allowLogout ? (
-                            <div className={styles.logoutIcon}></div>
+                            <div className={styles.logoutIcon} onClick={this.onRemove(account)} />
                         ) : (
-                            <div className={styles.nextIcon}></div>
+                            <div className={styles.nextIcon} />
                         )}
 
                         <div className={styles.accountInfo}>
@@ -113,7 +109,7 @@ export default class AccountSwitcher extends Component {
                     </div>
                 ))}
                 {allowAdd ? (
-                    <Link to="/login">
+                    <Link to="/login" onClick={this.props.onAfterAction}>
                         <Button
                             color={COLOR_WHITE}
                             block
@@ -135,5 +131,29 @@ export default class AccountSwitcher extends Component {
             </div>
         );
     }
+
+    onSwitch = (account) => (event) => {
+        event.preventDefault();
+
+        this.props.switchAccount(account)
+            .then(() => this.props.onAfterAction());
+    };
+
+    onRemove = (account) => (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.props.removeAccount(account)
+            .then(() => this.props.onAfterAction());
+    };
 }
 
+import { connect } from 'react-redux';
+import { authenticate, revoke } from 'components/accounts/actions';
+
+export default connect(({accounts}) => ({
+    accounts
+}), {
+    switchAccount: authenticate,
+    removeAccount: revoke
+})(AccountSwitcher);

src/components/accounts/actions.js

@@ -55,10 +55,11 @@ export function authenticate({token, refreshToken}) {
  */
 export function revoke(account) {
     return (dispatch, getState) => {
-        dispatch(remove(account));
+        const accountToReplace = getState().accounts.available.find(({id}) => id !== account.id);
 
-        if (getState().accounts.length) {
-            return dispatch(authenticate(getState().accounts[0]));
+        if (accountToReplace) {
+            return dispatch(authenticate(accountToReplace))
+                .then(() => dispatch(remove(account)));
         }
 
         return dispatch(logout());

src/components/accounts/reducer.js

@@ -26,9 +26,9 @@ export default function accounts(
                 throw new Error('Invalid or empty payload passed for accounts.add');
             }
 
-            if (!state.available.some((account) => account.id === payload.id)) {
-                state.available = state.available.concat(payload);
-            }
+            state.available = state.available
+                .filter((account) => account.id !== payload.id)
+                .concat(payload);
 
             return state;
 

src/components/auth/PanelTransition.jsx

@@ -446,12 +446,28 @@ class PanelTransition extends Component {
     }
 }
 
-export default connect((state) => ({
-    user: state.user,
-    auth: state.auth,
-    resolve: authFlow.resolve.bind(authFlow),
-    reject: authFlow.reject.bind(authFlow)
-}), {
+export default connect((state) => {
+    const {login} = state.auth;
+    const user = {
+        ...state.user,
+        isGuest: true,
+        email: '',
+        username: ''
+    };
+
+    if (/[@.]/.test(login)) {
+        user.email = login;
+    } else {
+        user.username = login;
+    }
+
+    return {
+        user,
+        auth: state.auth,
+        resolve: authFlow.resolve.bind(authFlow),
+        reject: authFlow.reject.bind(authFlow)
+    };
+}, {
     clearErrors: actions.clearErrors,
     setErrors: actions.setErrors
 })(PanelTransition);

src/components/auth/actions.js

@@ -20,19 +20,7 @@ export function login({login = '', password = '', rememberMe = false}) {
         .catch((resp) => {
             if (resp.errors) {
                 if (resp.errors.password === PASSWORD_REQUIRED) {
-                    let username = '';
-                    let email = '';
-
-                    if (/[@.]/.test(login)) {
-                        email = login;
-                    } else {
-                        username = login;
-                    }
-
-                    return dispatch(updateUser({
-                        username,
-                        email
-                    }));
+                    return dispatch(setLogin(login));
                 } else if (resp.errors.login === ACTIVATION_REQUIRED) {
                     return dispatch(needActivation());
                 } else if (resp.errors.login === LOGIN_REQUIRED && password) {
@@ -126,7 +114,15 @@ export function resendActivation({email = '', captcha}) {
     );
 }
 
-export const ERROR = 'error';
+export const SET_LOGIN = 'auth:setLogin';
+export function setLogin(login) {
+    return {
+        type: SET_LOGIN,
+        payload: login
+    };
+}
+
+export const ERROR = 'auth:error';
 export function setErrors(errors) {
     return {
         type: ERROR,
@@ -309,7 +305,11 @@ function authHandler(dispatch) {
     return (resp) => dispatch(authenticate({
         token: resp.access_token,
         refreshToken: resp.refresh_token
-    }));
+    })).then((resp) => {
+        dispatch(setLogin(null));
+
+        return resp;
+    });
 }
 
 function validationErrorsHandler(dispatch, repeatUrl) {

src/components/auth/reducer.js

@@ -1,8 +1,18 @@
 import { combineReducers } from 'redux';
 
-import { ERROR, SET_CLIENT, SET_OAUTH, SET_OAUTH_RESULT, SET_SCOPES, SET_LOADING_STATE, REQUIRE_PERMISSIONS_ACCEPT } from './actions';
+import {
+    ERROR,
+    SET_CLIENT,
+    SET_OAUTH,
+    SET_OAUTH_RESULT,
+    SET_SCOPES,
+    SET_LOADING_STATE,
+    REQUIRE_PERMISSIONS_ACCEPT,
+    SET_LOGIN
+} from './actions';
 
 export default combineReducers({
+    login,
     error,
     isLoading,
     client,
@@ -19,6 +29,24 @@ function error(
             if (!error) {
                 throw new Error('Expected payload with error');
             }
+
+            return payload;
+
+        default:
+            return state;
+    }
+}
+
+function login(
+    state = null,
+    {type, payload = null}
+) {
+    switch (type) {
+        case SET_LOGIN:
+            if (payload !== null && typeof payload !== 'string') {
+                throw new Error('Expected payload with login string or null');
+            }
+
             return payload;
 
         default:

src/components/userbar/LoggedInPanel.jsx

@@ -44,18 +44,16 @@ export default class LoggedInPanel extends Component {
                     </button>
 
                     <div className={classNames(styles.accountSwitcherContainer)}>
-                        <AccountSwitcher skin="light" />
+                        <AccountSwitcher skin="light" onAfterAction={this.toggleAccountSwitcher} />
                     </div>
                 </div>
             </div>
         );
     }
 
-    toggleAccountSwitcher() {
-        this.setState({
-            isAccountSwitcherActive: !this.state.isAccountSwitcherActive
-        });
-    }
+    toggleAccountSwitcher = () => this.setState({
+        isAccountSwitcherActive: !this.state.isAccountSwitcherActive
+    });
 
     onExpandAccountSwitcher = (event) => {
         event.preventDefault();

src/services/authFlow/LoginState.js

@@ -3,11 +3,15 @@ import PasswordState from './PasswordState';
 
 export default class LoginState extends AbstractState {
     enter(context) {
-        const {user} = context.getState();
+        const {auth, user} = context.getState();
 
-        if (user.email || user.username) {
+        // TODO: it may not allow user to leave password state till he click back or enters password
+        if (auth.login) {
             context.setState(new PasswordState());
-        } else {
+        } else if (user.isGuest
+            // for the case, when user is logged in and wants to add a new aacount
+            || /login|password/.test(context.getRequest().path) // TODO: improve me
+        ) {
             context.navigate('/login');
         }
     }

src/services/authFlow/PasswordState.js

@@ -5,9 +5,9 @@ import LoginState from './LoginState';
 
 export default class PasswordState extends AbstractState {
     enter(context) {
-        const {user} = context.getState();
+        const {auth} = context.getState();
 
-        if (user.isGuest) {
+        if (auth.login) {
             context.navigate('/password');
         } else {
             context.setState(new CompleteState());
@@ -15,12 +15,12 @@ export default class PasswordState extends AbstractState {
     }
 
     resolve(context, {password, rememberMe}) {
-        const {user} = context.getState();
+        const {auth: {login}} = context.getState();
 
         context.run('login', {
             password,
             rememberMe,
-            login: user.email || user.username
+            login
         })
         .then(() => context.setState(new CompleteState()));
     }
@@ -30,7 +30,7 @@ export default class PasswordState extends AbstractState {
     }
 
     goBack(context) {
-        context.run('logout');
+        context.run('setLogin', null);
         context.setState(new LoginState());
     }
 }

tests/components/accounts/actions.test.js

@@ -22,7 +22,7 @@ const user = {
     lang: 'be'
 };
 
-describe('Accounts actions', () => {
+describe('components/accounts/actions', () => {
     let dispatch;
     let getState;
 
@@ -109,19 +109,15 @@ describe('Accounts actions', () => {
     });
 
     describe('#revoke()', () => {
-        it(`should dispatch ${REMOVE} action`, () => {
-            revoke(account)(dispatch, getState);
-
-            expect(dispatch, 'to have a call satisfying', [
-                remove(account)
-            ]);
-        });
-
         it('should switch next account if available', () => {
             const account2 = {...account, id: 2};
 
             getState.returns({
-                accounts: [account]
+                accounts: {
+                    active: account2,
+                    available: [account]
+                },
+                user
             });
 
             return revoke(account2)(dispatch, getState).then(() => {
@@ -143,10 +139,15 @@ describe('Accounts actions', () => {
         });
 
         it('should logout if no other accounts available', () => {
+            getState.returns({
+                accounts: {
+                    active: account,
+                    available: []
+                },
+                user
+            });
+
             revoke(account)(dispatch, getState).then(() => {
-                expect(dispatch, 'to have a call satisfying', [
-                    remove(account)
-                ]);
                 expect(dispatch, 'to have a call satisfying', [
                     {payload: {isGuest: true}}
                     // updateUser({isGuest: true})

tests/components/accounts/reducer.test.js

@@ -45,11 +45,23 @@ describe('Accounts reducer', () => {
             })
         );
 
-        it('should not add the same account twice', () =>
-            expect(accounts({...initial, available: [account]}, add(account)), 'to satisfy', {
-                available: [account]
-            })
-        );
+        it('should replace if account was added for the second time', () => {
+            const outdatedAccount = {
+                ...account,
+                someShit: true
+            };
+
+            const updatedAccount = {
+                ...account,
+                token: 'newToken'
+            };
+
+            return expect(
+                accounts({...initial, available: [outdatedAccount]}, add(updatedAccount)),
+                'to satisfy', {
+                    available: [updatedAccount]
+                });
+        });
 
         it('throws, when account is invalid', () => {
             expect(() => accounts(initial, add()),

tests/components/auth/actions.test.js

@@ -10,7 +10,9 @@ import {
     setOAuthRequest,
     setScopes,
     setOAuthCode,
-    requirePermissionsAccept
+    requirePermissionsAccept,
+    login,
+    setLogin
 } from 'components/auth/actions';
 
 const oauthData = {
@@ -22,8 +24,8 @@ const oauthData = {
 };
 
 describe('components/auth/actions', () => {
-    const dispatch = sinon.stub().named('dispatch');
-    const getState = sinon.stub().named('getState');
+    const dispatch = sinon.stub().named('store.dispatch');
+    const getState = sinon.stub().named('store.getState');
 
     function callThunk(fn, ...args) {
         const thunk = fn(...args);
@@ -67,21 +69,21 @@ describe('components/auth/actions', () => {
             request.get.returns(Promise.resolve(resp));
         });
 
-        it('should send get request to an api', () => {
-            return callThunk(oAuthValidate, oauthData).then(() => {
+        it('should send get request to an api', () =>
+            callThunk(oAuthValidate, oauthData).then(() => {
                 expect(request.get, 'to have a call satisfying', ['/api/oauth2/v1/validate', {}]);
-            });
-        });
+            })
+        );
 
-        it('should dispatch setClient, setOAuthRequest and setScopes', () => {
-            return callThunk(oAuthValidate, oauthData).then(() => {
+        it('should dispatch setClient, setOAuthRequest and setScopes', () =>
+            callThunk(oAuthValidate, oauthData).then(() => {
                 expectDispatchCalls([
                     [setClient(resp.client)],
                     [setOAuthRequest(resp.oAuth)],
                     [setScopes(resp.session.scopes)]
                 ]);
-            });
-        });
+            })
+        );
     });
 
     describe('#oAuthComplete()', () => {
@@ -160,4 +162,24 @@ describe('components/auth/actions', () => {
             });
         });
     });
+
+    describe('#login()', () => {
+        describe('when correct login was entered', () => {
+            beforeEach(() => {
+                request.post.returns(Promise.reject({
+                    errors: {
+                        password: 'error.password_required'
+                    }
+                }));
+            });
+
+            it('should set login', () =>
+                callThunk(login, {login: 'foo'}).then(() => {
+                    expectDispatchCalls([
+                        [setLogin('foo')]
+                    ]);
+                })
+            );
+        });
+    });
 });

tests/components/auth/reducer.test.js

@@ -0,0 +1,16 @@
+import expect from 'unexpected';
+
+import auth from 'components/auth/reducer';
+import { setLogin, SET_LOGIN } from 'components/auth/actions';
+
+describe('auth reducer', () => {
+    describe(SET_LOGIN, () => {
+        it('should set login', () => {
+            const expectedLogin = 'foo';
+
+            expect(auth(undefined, setLogin(expectedLogin)), 'to satisfy', {
+                login: expectedLogin
+            });
+        });
+    });
+});

tests/components/user/middlewares/refreshTokenMiddleware.test.js

@@ -68,7 +68,7 @@ describe('refreshTokenMiddleware', () => {
             });
 
             it('should not apply to refresh-token request', () => {
-                const data = {url: '/refresh-token'};
+                const data = {url: '/refresh-token', options: {}};
                 const resp = middleware.before(data);
 
                 expect(resp, 'to satisfy', data);

tests/services/authFlow/AuthFlow.functional.test.js

@@ -47,6 +47,9 @@ describe('AuthFlow.functional', () => {
             state.user = {
                 isGuest: true
             };
+            state.auth = {
+                login: null
+            };
         });
 
         it('should redirect guest / -> /login', () => {

tests/services/authFlow/LoginState.test.js

@@ -1,6 +1,5 @@
 import LoginState from 'services/authFlow/LoginState';
 import PasswordState from 'services/authFlow/PasswordState';
-import ForgotPasswordState from 'services/authFlow/ForgotPasswordState';
 
 import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
 
@@ -24,7 +23,8 @@ describe('LoginState', () => {
     describe('#enter', () => {
         it('should navigate to /login', () => {
             context.getState.returns({
-                user: {isGuest: true}
+                user: {isGuest: true},
+                auth: {login: null}
             });
 
             expectNavigate(mock, '/login');
@@ -32,22 +32,15 @@ describe('LoginState', () => {
             state.enter(context);
         });
 
-        const testTransitionToPassword = (user) => {
+        it('should transition to password if login was set', () => {
             context.getState.returns({
-                user: user
+                user: {isGuest: true},
+                auth: {login: 'foo'}
             });
 
             expectState(mock, PasswordState);
 
             state.enter(context);
-        };
-
-        it('should transition to password if has email', () => {
-            testTransitionToPassword({email: 'foo'});
-        });
-
-        it('should transition to password if has username', () => {
-            testTransitionToPassword({username: 'foo'});
         });
     });
 

tests/services/authFlow/PasswordState.test.js

@@ -25,7 +25,8 @@ describe('PasswordState', () => {
     describe('#enter', () => {
         it('should navigate to /password', () => {
             context.getState.returns({
-                user: {isGuest: true}
+                user: {isGuest: true},
+                auth: {login: 'foo'}
             });
 
             expectNavigate(mock, '/password');
@@ -35,7 +36,8 @@ describe('PasswordState', () => {
 
         it('should transition to complete if not guest', () => {
             context.getState.returns({
-                user: {isGuest: false}
+                user: {isGuest: false},
+                auth: {login: null}
             });
 
             expectState(mock, CompleteState);
@@ -45,42 +47,29 @@ describe('PasswordState', () => {
     });
 
     describe('#resolve', () => {
-        (function() {
-            const expectedLogin = 'login';
-            const expectedPassword = 'password';
+        it('should call login with login and password', () => {
+            const expectedLogin = 'foo';
+            const expectedPassword = 'bar';
             const expectedRememberMe = true;
 
-            const testWith = (user) => {
-                it(`should call login with email or username and password. User: ${JSON.stringify(user)}`, () => {
-                    context.getState.returns({user});
-
-                    expectRun(
-                        mock,
-                        'login',
-                        sinon.match({
-                            login: expectedLogin,
-                            password: expectedPassword,
-                            rememberMe: expectedRememberMe,
-                        })
-                    ).returns({then() {}});
-
-                    state.resolve(context, {password: expectedPassword, rememberMe: expectedRememberMe});
-                });
-            };
-
-            testWith({
-                email: expectedLogin
+            context.getState.returns({
+                auth: {
+                    login: expectedLogin
+                }
             });
 
-            testWith({
-                username: expectedLogin
-            });
+            expectRun(
+                mock,
+                'login',
+                sinon.match({
+                    login: expectedLogin,
+                    password: expectedPassword,
+                    rememberMe: expectedRememberMe,
+                })
+            ).returns({then() {}});
 
-            testWith({
-                email: expectedLogin,
-                username: expectedLogin
-            });
-        }());
+            state.resolve(context, {password: expectedPassword, rememberMe: expectedRememberMe});
+        });
 
         it('should transition to complete state on successfull login', () => {
             const promise = Promise.resolve();
@@ -88,8 +77,8 @@ describe('PasswordState', () => {
             const expectedPassword = 'password';
 
             context.getState.returns({
-                user: {
-                    email: expectedLogin
+                auth: {
+                    login: expectedLogin
                 }
             });
 
@@ -111,8 +100,8 @@ describe('PasswordState', () => {
     });
 
     describe('#goBack', () => {
-        it('should transition to forgot password state', () => {
-            expectRun(mock, 'logout');
+        it('should transition to login state', () => {
+            expectRun(mock, 'setLogin', null);
             expectState(mock, LoginState);
 
             state.goBack(context);