2021-02-04 19:15:23 +01:00
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { Switch, Route, matchPath } from 'react-router-dom';
|
|
|
|
import classnames from 'classnames';
|
|
|
|
import TabBar from '../../components/app/tab-bar';
|
2019-03-25 17:13:23 +01:00
|
|
|
import {
|
2020-05-08 21:45:52 +02:00
|
|
|
ALERTS_ROUTE,
|
2019-03-25 17:13:23 +01:00
|
|
|
ADVANCED_ROUTE,
|
|
|
|
SECURITY_ROUTE,
|
|
|
|
GENERAL_ROUTE,
|
|
|
|
ABOUT_US_ROUTE,
|
|
|
|
SETTINGS_ROUTE,
|
2019-05-09 19:27:14 +02:00
|
|
|
NETWORKS_ROUTE,
|
2019-07-31 21:56:44 +02:00
|
|
|
CONTACT_LIST_ROUTE,
|
|
|
|
CONTACT_ADD_ROUTE,
|
|
|
|
CONTACT_EDIT_ROUTE,
|
|
|
|
CONTACT_VIEW_ROUTE,
|
|
|
|
CONTACT_MY_ACCOUNTS_ROUTE,
|
|
|
|
CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
|
|
|
|
CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
|
2021-02-04 19:15:23 +01:00
|
|
|
} from '../../helpers/constants/routes';
|
|
|
|
import SettingsTab from './settings-tab';
|
|
|
|
import AlertsTab from './alerts-tab';
|
|
|
|
import NetworksTab from './networks-tab';
|
|
|
|
import AdvancedTab from './advanced-tab';
|
|
|
|
import InfoTab from './info-tab';
|
|
|
|
import SecurityTab from './security-tab';
|
|
|
|
import ContactListTab from './contact-list-tab';
|
2019-03-25 17:13:23 +01:00
|
|
|
|
2019-04-29 08:18:03 +02:00
|
|
|
class SettingsPage extends PureComponent {
|
2018-09-12 02:32:37 +02:00
|
|
|
static propTypes = {
|
2019-07-31 21:56:44 +02:00
|
|
|
addressName: PropTypes.string,
|
|
|
|
backRoute: PropTypes.string,
|
|
|
|
currentPath: PropTypes.string,
|
2018-09-12 02:32:37 +02:00
|
|
|
history: PropTypes.object,
|
2019-07-31 21:56:44 +02:00
|
|
|
isAddressEntryPage: PropTypes.bool,
|
2020-10-29 00:10:41 +01:00
|
|
|
isPopup: PropTypes.bool,
|
2019-07-31 21:56:44 +02:00
|
|
|
pathnameI18nKey: PropTypes.string,
|
|
|
|
initialBreadCrumbRoute: PropTypes.string,
|
|
|
|
breadCrumbTextKey: PropTypes.string,
|
|
|
|
initialBreadCrumbKey: PropTypes.string,
|
2020-06-01 19:54:32 +02:00
|
|
|
mostRecentOverviewPage: PropTypes.string.isRequired,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2018-09-12 02:32:37 +02:00
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
t: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2018-09-12 02:32:37 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
history,
|
|
|
|
backRoute,
|
|
|
|
currentPath,
|
|
|
|
mostRecentOverviewPage,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
2018-09-12 02:32:37 +02:00
|
|
|
return (
|
2019-03-25 17:13:23 +01:00
|
|
|
<div
|
2020-03-01 11:14:16 +01:00
|
|
|
className={classnames('main-container settings-page', {
|
2019-07-31 21:56:44 +02:00
|
|
|
'settings-page--selected': currentPath !== SETTINGS_ROUTE,
|
2019-03-25 17:13:23 +01:00
|
|
|
})}
|
|
|
|
>
|
2018-09-12 02:32:37 +02:00
|
|
|
<div className="settings-page__header">
|
2020-11-03 00:41:28 +01:00
|
|
|
{currentPath !== SETTINGS_ROUTE && (
|
|
|
|
<div
|
|
|
|
className="settings-page__back-button"
|
|
|
|
onClick={() => history.push(backRoute)}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{this.renderTitle()}
|
2018-09-12 02:32:37 +02:00
|
|
|
<div
|
|
|
|
className="settings-page__close-button"
|
2020-06-01 19:54:32 +02:00
|
|
|
onClick={() => history.push(mostRecentOverviewPage)}
|
2018-09-12 02:32:37 +02:00
|
|
|
/>
|
|
|
|
</div>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content">
|
|
|
|
<div className="settings-page__content__tabs">
|
2020-11-03 00:41:28 +01:00
|
|
|
{this.renderTabs()}
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
|
|
|
<div className="settings-page__content__modules">
|
2020-11-03 00:41:28 +01:00
|
|
|
{this.renderSubHeader()}
|
|
|
|
{this.renderContent()}
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2018-09-12 02:32:37 +02:00
|
|
|
}
|
2019-03-25 17:13:23 +01:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderTitle() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { isPopup, pathnameI18nKey, addressName } = this.props;
|
2019-07-31 21:56:44 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
let titleText;
|
2019-07-31 21:56:44 +02:00
|
|
|
|
2020-10-29 00:10:41 +01:00
|
|
|
if (isPopup && addressName) {
|
2021-02-04 19:15:23 +01:00
|
|
|
titleText = addressName;
|
2020-10-29 00:10:41 +01:00
|
|
|
} else if (pathnameI18nKey && isPopup) {
|
2021-02-04 19:15:23 +01:00
|
|
|
titleText = t(pathnameI18nKey);
|
2019-07-31 21:56:44 +02:00
|
|
|
} else {
|
2021-02-04 19:15:23 +01:00
|
|
|
titleText = t('settings');
|
2019-07-31 21:56:44 +02:00
|
|
|
}
|
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
return <div className="settings-page__header__title">{titleText}</div>;
|
2019-07-31 21:56:44 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderSubHeader() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2019-07-31 21:56:44 +02:00
|
|
|
const {
|
|
|
|
currentPath,
|
2020-10-29 00:10:41 +01:00
|
|
|
isPopup,
|
2019-07-31 21:56:44 +02:00
|
|
|
isAddressEntryPage,
|
|
|
|
pathnameI18nKey,
|
|
|
|
addressName,
|
|
|
|
initialBreadCrumbRoute,
|
|
|
|
breadCrumbTextKey,
|
|
|
|
history,
|
|
|
|
initialBreadCrumbKey,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.props;
|
2019-07-31 21:56:44 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
let subheaderText;
|
2019-04-29 08:18:03 +02:00
|
|
|
|
2020-10-29 00:10:41 +01:00
|
|
|
if (isPopup && isAddressEntryPage) {
|
2021-02-04 19:15:23 +01:00
|
|
|
subheaderText = t('settings');
|
2019-07-31 21:56:44 +02:00
|
|
|
} else if (initialBreadCrumbKey) {
|
2021-02-04 19:15:23 +01:00
|
|
|
subheaderText = t(initialBreadCrumbKey);
|
2019-07-31 21:56:44 +02:00
|
|
|
} else {
|
2021-02-04 19:15:23 +01:00
|
|
|
subheaderText = t(pathnameI18nKey || 'general');
|
2019-07-31 21:56:44 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
return (
|
|
|
|
!currentPath.startsWith(NETWORKS_ROUTE) && (
|
|
|
|
<div className="settings-page__subheader">
|
|
|
|
<div
|
|
|
|
className={classnames({
|
|
|
|
'settings-page__subheader--link': initialBreadCrumbRoute,
|
|
|
|
})}
|
|
|
|
onClick={() =>
|
|
|
|
initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{subheaderText}
|
2019-12-03 17:35:44 +01:00
|
|
|
</div>
|
2020-11-03 00:41:28 +01:00
|
|
|
{breadCrumbTextKey && (
|
|
|
|
<div className="settings-page__subheader--break">
|
|
|
|
<span>{' > '}</span>
|
|
|
|
{t(breadCrumbTextKey)}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{isAddressEntryPage && (
|
|
|
|
<div className="settings-page__subheader--break">
|
|
|
|
<span>{' > '}</span>
|
|
|
|
{addressName}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-04-29 08:18:03 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderTabs() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { history, currentPath } = this.props;
|
|
|
|
const { t } = this.context;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<TabBar
|
|
|
|
tabs={[
|
2020-11-03 00:41:28 +01:00
|
|
|
{
|
|
|
|
content: t('general'),
|
|
|
|
description: t('generalSettingsDescription'),
|
|
|
|
key: GENERAL_ROUTE,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: t('advanced'),
|
|
|
|
description: t('advancedSettingsDescription'),
|
|
|
|
key: ADVANCED_ROUTE,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: t('contacts'),
|
|
|
|
description: t('contactsSettingsDescription'),
|
|
|
|
key: CONTACT_LIST_ROUTE,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: t('securityAndPrivacy'),
|
|
|
|
description: t('securitySettingsDescription'),
|
|
|
|
key: SECURITY_ROUTE,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: t('alerts'),
|
|
|
|
description: t('alertsSettingsDescription'),
|
|
|
|
key: ALERTS_ROUTE,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: t('networks'),
|
|
|
|
description: t('networkSettingsDescription'),
|
|
|
|
key: NETWORKS_ROUTE,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
content: t('about'),
|
|
|
|
description: t('aboutSettingsDescription'),
|
|
|
|
key: ABOUT_US_ROUTE,
|
|
|
|
},
|
2019-03-25 17:13:23 +01:00
|
|
|
]}
|
2020-02-15 21:34:12 +01:00
|
|
|
isActive={(key) => {
|
2019-07-31 21:56:44 +02:00
|
|
|
if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return true;
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
return matchPath(currentPath, { path: key, exact: true });
|
2019-03-25 17:13:23 +01:00
|
|
|
}}
|
2020-02-15 21:34:12 +01:00
|
|
|
onSelect={(key) => history.push(key)}
|
2019-03-25 17:13:23 +01:00
|
|
|
/>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderContent() {
|
2019-03-25 17:13:23 +01:00
|
|
|
return (
|
|
|
|
<Switch>
|
2020-11-03 00:41:28 +01:00
|
|
|
<Route exact path={GENERAL_ROUTE} component={SettingsTab} />
|
|
|
|
<Route exact path={ABOUT_US_ROUTE} component={InfoTab} />
|
|
|
|
<Route exact path={ADVANCED_ROUTE} component={AdvancedTab} />
|
|
|
|
<Route exact path={ALERTS_ROUTE} component={AlertsTab} />
|
|
|
|
<Route path={NETWORKS_ROUTE} component={NetworksTab} />
|
|
|
|
<Route exact path={SECURITY_ROUTE} component={SecurityTab} />
|
|
|
|
<Route exact path={CONTACT_LIST_ROUTE} component={ContactListTab} />
|
|
|
|
<Route exact path={CONTACT_ADD_ROUTE} component={ContactListTab} />
|
2019-07-31 21:56:44 +02:00
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path={CONTACT_MY_ACCOUNTS_ROUTE}
|
|
|
|
component={ContactListTab}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path={`${CONTACT_EDIT_ROUTE}/:id`}
|
|
|
|
component={ContactListTab}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path={`${CONTACT_VIEW_ROUTE}/:id`}
|
|
|
|
component={ContactListTab}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path={`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/:id`}
|
|
|
|
component={ContactListTab}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path={`${CONTACT_MY_ACCOUNTS_EDIT_ROUTE}/:id`}
|
|
|
|
component={ContactListTab}
|
|
|
|
/>
|
2020-11-03 00:41:28 +01:00
|
|
|
<Route component={SettingsTab} />
|
2019-03-25 17:13:23 +01:00
|
|
|
</Switch>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
2018-09-12 02:32:37 +02:00
|
|
|
}
|
2019-04-29 08:18:03 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
export default SettingsPage;
|