"lodash.mergewith": "4.6.2",
"lodash.template": "4.5.0",
"mem": "4.0.0",
+ "parse-duration": "0.4.4",
"prop-types": "15.7.2",
"query-string": "6.9.0",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-dropzone": "5.1.1",
"react-highlight-words": "0.14.0",
+ "react-idle-timer": "4.3.6",
"react-redux": "5.0.7",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
SSHHelpPageHTML: string;
SSHHelpHostSuffix: string;
SiteName: string;
+ IdleTimeout: string;
};
Login: {
LoginCluster: string;
SSHHelpPageHTML: "",
SSHHelpHostSuffix: "",
SiteName: "",
+ IdleTimeout: "0s",
},
Login: {
LoginCluster: "",
constructor(
protected apiClient: AxiosInstance,
protected baseUrl: string,
- protected actions: ApiActions) { }
+ protected actions: ApiActions,
+ protected useSessionStorage: boolean = false) { }
+
+ private getStorage() {
+ if (this.useSessionStorage) {
+ return sessionStorage;
+ }
+ return localStorage;
+ }
public saveApiToken(token: string) {
- localStorage.setItem(API_TOKEN_KEY, token);
+ this.getStorage().setItem(API_TOKEN_KEY, token);
const sp = token.split('/');
if (sp.length === 3) {
- localStorage.setItem(HOME_CLUSTER, sp[1].substr(0, 5));
+ this.getStorage().setItem(HOME_CLUSTER, sp[1].substr(0, 5));
}
}
public removeApiToken() {
- localStorage.removeItem(API_TOKEN_KEY);
+ this.getStorage().removeItem(API_TOKEN_KEY);
}
public getApiToken() {
- return localStorage.getItem(API_TOKEN_KEY) || undefined;
+ return this.getStorage().getItem(API_TOKEN_KEY) || undefined;
}
public getHomeCluster() {
- return localStorage.getItem(HOME_CLUSTER) || undefined;
+ return this.getStorage().getItem(HOME_CLUSTER) || undefined;
}
public removeUser() {
- localStorage.removeItem(USER_EMAIL_KEY);
- localStorage.removeItem(USER_FIRST_NAME_KEY);
- localStorage.removeItem(USER_LAST_NAME_KEY);
- localStorage.removeItem(USER_UUID_KEY);
- localStorage.removeItem(USER_OWNER_UUID_KEY);
- localStorage.removeItem(USER_IS_ADMIN);
- localStorage.removeItem(USER_IS_ACTIVE);
- localStorage.removeItem(USER_USERNAME);
- localStorage.removeItem(USER_PREFS);
+ this.getStorage().removeItem(USER_EMAIL_KEY);
+ this.getStorage().removeItem(USER_FIRST_NAME_KEY);
+ this.getStorage().removeItem(USER_LAST_NAME_KEY);
+ this.getStorage().removeItem(USER_UUID_KEY);
+ this.getStorage().removeItem(USER_OWNER_UUID_KEY);
+ this.getStorage().removeItem(USER_IS_ADMIN);
+ this.getStorage().removeItem(USER_IS_ACTIVE);
+ this.getStorage().removeItem(USER_USERNAME);
+ this.getStorage().removeItem(USER_PREFS);
}
public login(uuidPrefix: string, homeCluster: string, loginCluster: string, remoteHosts: { [key: string]: string }) {
public getSessions(): Session[] {
try {
- const sessions = JSON.parse(localStorage.getItem("sessions") || '');
+ const sessions = JSON.parse(this.getStorage().getItem("sessions") || '');
return sessions;
} catch {
return [];
}
public saveSessions(sessions: Session[]) {
- localStorage.setItem("sessions", JSON.stringify(sessions));
+ this.getStorage().setItem("sessions", JSON.stringify(sessions));
+ }
+
+ public removeSessions() {
+ this.getStorage().removeItem("sessions");
}
public buildSessions(cfg: Config, user?: User) {
import { NodeService } from '~/services/node-service/node-service';
import { FileViewersConfigService } from '~/services/file-viewers-config-service/file-viewers-config-service';
import { LinkAccountService } from "./link-account-service/link-account-service";
+import parse from "parse-duration";
export type ServiceRepository = ReturnType<typeof createServices>;
const linkAccountService = new LinkAccountService(apiClient, actions);
const ancestorsService = new AncestorService(groupsService, userService);
- const authService = new AuthService(apiClient, config.rootUrl, actions);
+
+ const idleTimeout = config && config.clusterConfig && config.clusterConfig.Workbench.IdleTimeout || '0s';
+ const authService = new AuthService(apiClient, config.rootUrl, actions,
+ (parse(idleTimeout, 's') || 0) > 0);
+
const collectionService = new CollectionService(apiClient, webdavClient, authService, actions);
const favoriteService = new FavoriteService(linkService, groupsService);
const tagService = new TagService(linkService);
dispatch(authActions.LOGIN());
};
-export const logout = (deleteLinkData: boolean = false) => (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
- dispatch(authActions.LOGOUT({ deleteLinkData }));
-};
+export const logout = (deleteLinkData: boolean = false) =>
+ (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) =>
+ dispatch(authActions.LOGOUT({ deleteLinkData }));
export type AuthAction = UnionOf<typeof authActions>;
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import 'jest-localstorage-mock';
+import Axios, { AxiosInstance } from "axios";
+import { createBrowserHistory } from "history";
+
+import { authMiddleware } from "./auth-middleware";
+import { RootStore, configureStore } from "../store";
+import { ServiceRepository, createServices } from "~/services/services";
+import { ApiActions } from "~/services/api/api-actions";
+import { mockConfig } from "~/common/config";
+import { authActions } from "./auth-action";
+import { API_TOKEN_KEY } from '~/services/auth-service/auth-service';
+
+describe("AuthMiddleware", () => {
+ let store: RootStore;
+ let services: ServiceRepository;
+ let axiosInst: AxiosInstance;
+ const actions: ApiActions = {
+ progressFn: (id: string, working: boolean) => { },
+ errorFn: (id: string, message: string) => { }
+ };
+
+ beforeEach(() => {
+ axiosInst = Axios.create({ headers: {} });
+ services = createServices(mockConfig({}), actions, axiosInst);
+ store = configureStore(createBrowserHistory(), services);
+ localStorage.clear();
+ });
+
+ it("handles LOGOUT action", () => {
+ localStorage.setItem(API_TOKEN_KEY, 'someToken');
+ window.location.assign = jest.fn();
+ const next = jest.fn();
+ const middleware = authMiddleware(services)(store)(next);
+ middleware(authActions.LOGOUT({deleteLinkData: false}));
+ expect(window.location.assign).toBeCalledWith(
+ `/logout?return_to=${location.protocol}//${location.host}`
+ );
+ expect(localStorage.getItem(API_TOKEN_KEY)).toBeFalsy();
+ });
+});
\ No newline at end of file
setAuthorizationHeader(services, state.auth.apiToken);
} else {
services.authService.removeApiToken();
+ services.authService.removeSessions();
removeAuthorizationHeader(services);
}
services.linkAccountService.removeAccountToLink();
}
services.authService.removeApiToken();
+ services.authService.removeSessions();
services.authService.removeUser();
removeAuthorizationHeader(services);
services.authService.logout();
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { configure, mount } from "enzyme";
+import * as Adapter from 'enzyme-adapter-react-16';
+import { AutoLogoutComponent, AutoLogoutProps } from './auto-logout';
+
+configure({ adapter: new Adapter() });
+
+describe('<AutoLogoutComponent />', () => {
+ let props: AutoLogoutProps;
+ const sessionIdleTimeout = 300;
+ const lastWarningDuration = 60;
+ jest.useFakeTimers();
+
+ beforeEach(() => {
+ props = {
+ sessionIdleTimeout: sessionIdleTimeout,
+ lastWarningDuration: lastWarningDuration,
+ doLogout: jest.fn(),
+ doWarn: jest.fn(),
+ doCloseWarn: jest.fn(),
+ };
+ mount(<div><AutoLogoutComponent {...props} /></div>);
+ });
+
+ it('should logout after idle timeout', () => {
+ jest.runTimersToTime((sessionIdleTimeout-1)*1000);
+ expect(props.doLogout).not.toBeCalled();
+ jest.runTimersToTime(1*1000);
+ expect(props.doLogout).toBeCalled();
+ });
+
+ it('should warn the user previous to close the session', () => {
+ jest.runTimersToTime((sessionIdleTimeout-lastWarningDuration-1)*1000);
+ expect(props.doWarn).not.toBeCalled();
+ jest.runTimersToTime(1*1000);
+ expect(props.doWarn).toBeCalled();
+ });
+});
\ No newline at end of file
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from "react-redux";
+import { useIdleTimer } from "react-idle-timer";
+import { Dispatch } from "redux";
+
+import { RootState } from "~/store/store";
+import { SnackbarKind, snackbarActions } from "~/store/snackbar/snackbar-actions";
+import { logout } from "~/store/auth/auth-action";
+import parse from "parse-duration";
+import * as React from "react";
+import { min } from "lodash";
+
+interface AutoLogoutDataProps {
+ sessionIdleTimeout: number;
+ lastWarningDuration: number;
+}
+
+interface AutoLogoutActionProps {
+ doLogout: () => void;
+ doWarn: (message: string, duration: number) => void;
+ doCloseWarn: () => void;
+}
+
+const mapStateToProps = (state: RootState, ownProps: any): AutoLogoutDataProps => {
+ return {
+ sessionIdleTimeout: parse(state.auth.config.clusterConfig.Workbench.IdleTimeout, 's') || 0,
+ lastWarningDuration: ownProps.lastWarningDuration || 60,
+ };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch): AutoLogoutActionProps => ({
+ doLogout: () => dispatch<any>(logout(true)),
+ doWarn: (message: string, duration: number) =>
+ dispatch(snackbarActions.OPEN_SNACKBAR({
+ message, hideDuration: duration, kind: SnackbarKind.WARNING })),
+ doCloseWarn: () => dispatch(snackbarActions.CLOSE_SNACKBAR()),
+});
+
+export type AutoLogoutProps = AutoLogoutDataProps & AutoLogoutActionProps;
+
+export const AutoLogoutComponent = (props: AutoLogoutProps) => {
+ let logoutTimer: NodeJS.Timer;
+ const lastWarningDuration = min([props.lastWarningDuration, props.sessionIdleTimeout])! * 1000 ;
+
+ const handleOnIdle = () => {
+ logoutTimer = setTimeout(
+ () => props.doLogout(), lastWarningDuration);
+ props.doWarn(
+ "Your session is about to be closed due to inactivity",
+ lastWarningDuration);
+ };
+
+ const handleOnActive = () => {
+ clearTimeout(logoutTimer);
+ props.doCloseWarn();
+ };
+
+ useIdleTimer({
+ timeout: (props.lastWarningDuration < props.sessionIdleTimeout)
+ ? 1000 * (props.sessionIdleTimeout - props.lastWarningDuration)
+ : 1,
+ onIdle: handleOnIdle,
+ onActive: handleOnActive,
+ debounce: 500
+ });
+
+ return <span />;
+};
+
+export const AutoLogout = connect(mapStateToProps, mapDispatchToProps)(AutoLogoutComponent);
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import * as Adapter from 'enzyme-adapter-react-16';
+import {configure, shallow } from 'enzyme';
+
+import { AccountMenuComponent } from './account-menu';
+
+configure({ adapter: new Adapter() });
+
+describe('<AccountMenu />', () => {
+ let props;
+ let wrapper;
+
+ beforeEach(() => {
+ props = {
+ classes: {},
+ user: {
+ email: 'email@example.com',
+ firstName: 'User',
+ lastName: 'Test',
+ uuid: 'zzzzz-tpzed-testuseruuid',
+ ownerUuid: '',
+ username: 'testuser',
+ prefs: {},
+ isAdmin: false,
+ isActive: true
+ },
+ currentRoute: '',
+ workbenchURL: '',
+ localCluser: 'zzzzz',
+ dispatch: jest.fn(),
+ };
+ });
+
+ describe('Logout Menu Item', () => {
+ beforeEach(() => {
+ wrapper = shallow(<AccountMenuComponent {...props} />).dive();
+ });
+
+ it('should dispatch a logout action when clicked', () => {
+ wrapper.find('[data-cy="logout-menuitem"]').simulate('click');
+ expect(props.dispatch).toHaveBeenCalledWith({
+ payload: {deleteLinkData: true},
+ type: 'LOGOUT',
+ });
+ });
+ });
+});
import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
import { UserPanelIcon } from "~/components/icon/icon";
import { DispatchProp, connect } from 'react-redux';
-import { logout } from '~/store/auth/auth-action';
+import { authActions } from '~/store/auth/auth-action';
import { RootState } from "~/store/store";
import { openCurrentTokenDialog } from '~/store/current-token-dialog/current-token-dialog-actions';
import { openRepositoriesPanel } from "~/store/repositories/repositories-actions";
}
});
-export const AccountMenu = withStyles(styles)(
- connect(mapStateToProps)(
- ({ user, dispatch, currentRoute, workbenchURL, apiToken, localCluster, classes }: AccountMenuProps & DispatchProp<any> & WithStyles<CssRules>) =>
- user
- ? <DropdownMenu
- icon={<UserPanelIcon />}
- id="account-menu"
- title="Account Management"
- key={currentRoute}>
- <MenuItem disabled>
- {getUserDisplayName(user)} {user.uuid.substr(0, 5) !== localCluster && `(${user.uuid.substr(0, 5)})`}
- </MenuItem>
- {user.isActive ? <>
- <MenuItem onClick={() => dispatch(openUserVirtualMachines())}>Virtual Machines</MenuItem>
- {!user.isAdmin && <MenuItem onClick={() => dispatch(openRepositoriesPanel())}>Repositories</MenuItem>}
- <MenuItem onClick={() => dispatch(openCurrentTokenDialog)}>Current token</MenuItem>
- <MenuItem onClick={() => dispatch(navigateToSshKeysUser)}>Ssh Keys</MenuItem>
- <MenuItem onClick={() => dispatch(navigateToSiteManager)}>Site Manager</MenuItem>
- <MenuItem onClick={() => dispatch(navigateToMyAccount)}>My account</MenuItem>
- <MenuItem onClick={() => dispatch(navigateToLinkAccount)}>Link account</MenuItem>
- </> : null}
- <MenuItem>
- <a href={`${workbenchURL.replace(/\/$/, "")}/${wb1URL(currentRoute)}?api_token=${apiToken}`}
- className={classes.link}>
- Switch to Workbench v1</a></MenuItem>
- <Divider />
- <MenuItem onClick={() => dispatch(logout(true))}>Logout</MenuItem>
- </DropdownMenu>
- : null));
+export const AccountMenuComponent =
+ ({ user, dispatch, currentRoute, workbenchURL, apiToken, localCluster, classes }: AccountMenuProps & DispatchProp<any> & WithStyles<CssRules>) =>
+ user
+ ? <DropdownMenu
+ icon={<UserPanelIcon />}
+ id="account-menu"
+ title="Account Management"
+ key={currentRoute}>
+ <MenuItem disabled>
+ {getUserDisplayName(user)} {user.uuid.substr(0, 5) !== localCluster && `(${user.uuid.substr(0, 5)})`}
+ </MenuItem>
+ {user.isActive ? <>
+ <MenuItem onClick={() => dispatch(openUserVirtualMachines())}>Virtual Machines</MenuItem>
+ {!user.isAdmin && <MenuItem onClick={() => dispatch(openRepositoriesPanel())}>Repositories</MenuItem>}
+ <MenuItem onClick={() => dispatch(openCurrentTokenDialog)}>Current token</MenuItem>
+ <MenuItem onClick={() => dispatch(navigateToSshKeysUser)}>Ssh Keys</MenuItem>
+ <MenuItem onClick={() => dispatch(navigateToSiteManager)}>Site Manager</MenuItem>
+ <MenuItem onClick={() => dispatch(navigateToMyAccount)}>My account</MenuItem>
+ <MenuItem onClick={() => dispatch(navigateToLinkAccount)}>Link account</MenuItem>
+ </> : null}
+ <MenuItem>
+ <a href={`${workbenchURL.replace(/\/$/, "")}/${wb1URL(currentRoute)}?api_token=${apiToken}`}
+ className={classes.link}>
+ Switch to Workbench v1</a></MenuItem>
+ <Divider />
+ <MenuItem data-cy="logout-menuitem"
+ onClick={() => dispatch(authActions.LOGOUT({deleteLinkData: true}))}>
+ Logout
+ </MenuItem>
+ </DropdownMenu>
+ : null;
+
+export const AccountMenu = withStyles(styles)( connect(mapStateToProps)(AccountMenuComponent) );
isNotLinking: boolean;
isLinkingPath: boolean;
siteBanner: string;
+ sessionIdleTimeout: number;
}
type MainPanelRootProps = MainPanelRootDataProps & WithStyles<CssRules>;
export const MainPanelRoot = withStyles(styles)(
({ classes, loading, working, user, buildInfo, uuidPrefix,
- isNotLinking, isLinkingPath, siteBanner }: MainPanelRootProps) =>
+ isNotLinking, isLinkingPath, siteBanner, sessionIdleTimeout }: MainPanelRootProps) =>
loading
? <WorkbenchLoadingScreen />
: <>
<Grid container direction="column" className={classes.root}>
{user
? (user.isActive || (!user.isActive && isLinkingPath)
- ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} />
+ ? <WorkbenchPanel isNotLinking={isNotLinking} isUserActive={user.isActive} sessionIdleTimeout={sessionIdleTimeout} />
: <InactivePanel />)
: <LoginPanel />}
</Grid>
import { RootState } from '~/store/store';
import { connect } from 'react-redux';
+import parse from 'parse-duration';
import { MainPanelRoot, MainPanelRootDataProps } from '~/views/main-panel/main-panel-root';
import { isSystemWorking } from '~/store/progress-indicator/progress-indicator-reducer';
import { isWorkbenchLoading } from '~/store/workbench/workbench-actions';
uuidPrefix: state.auth.localCluster,
isNotLinking: state.linkAccountPanel.status === LinkAccountPanelStatus.NONE || state.linkAccountPanel.status === LinkAccountPanelStatus.INITIAL,
isLinkingPath: state.router.location ? matchLinkAccountRoute(state.router.location.pathname) !== null : false,
- siteBanner: state.auth.config.clusterConfig.Workbench.SiteName
+ siteBanner: state.auth.config.clusterConfig.Workbench.SiteName,
+ sessionIdleTimeout: parse(state.auth.config.clusterConfig.Workbench.IdleTimeout, 's') || 0
};
};
import { CollectionsContentAddressPanel } from '~/views/collection-content-address-panel/collection-content-address-panel';
import { AllProcessesPanel } from '../all-processes-panel/all-processes-panel';
import { NotFoundPanel } from '../not-found-panel/not-found-panel';
+import { AutoLogout } from '~/views-components/auto-logout/auto-logout';
type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content';
interface WorkbenchDataProps {
isUserActive: boolean;
isNotLinking: boolean;
+ sessionIdleTimeout: number;
}
type WorkbenchPanelProps = WithStyles<CssRules> & WorkbenchDataProps;
export const WorkbenchPanel =
withStyles(styles)((props: WorkbenchPanelProps) =>
<Grid container item xs className={props.classes.root}>
+ { props.sessionIdleTimeout > 0 && <AutoLogout />}
<Grid container item xs className={props.classes.container}>
<SplitterLayout customClassName={props.classes.splitter} percentage={true}
primaryIndex={0} primaryMinSize={10}
pbkdf2 "^3.0.3"
safe-buffer "^5.1.1"
+parse-duration@0.4.4:
+ version "0.4.4"
+ resolved "https://registry.yarnpkg.com/parse-duration/-/parse-duration-0.4.4.tgz#11c0f51a689e97d06c57bd772f7fda7dc013243c"
+ integrity sha512-KbAJuYGUhZkB9gotDiKLnZ7Z3VTacK3fgwmDdB6ZVDtJbMBT6MfLga0WJaYpPDu0mzqT0NgHtHDt5PY4l0nidg==
+
parse-glob@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
memoize-one "^4.0.0"
prop-types "^15.5.8"
+react-idle-timer@4.3.6:
+ version "4.3.6"
+ resolved "https://registry.yarnpkg.com/react-idle-timer/-/react-idle-timer-4.3.6.tgz#bdf56cee6ccc8c144ece18d152b3e304e13f3fa2"
+ integrity sha512-sJS4w123E4HkuM/l3j8FTVl0St6ghGA22Ich/Nz/luJSM4MEA6PvSwEBaAXLx3uCLB1fK7CACjvB4ozW3uWuCA==
+
react-is@^16.4.2, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
version "16.11.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"
projects / arvados-workbench2.git / commitdiff