110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
import React from 'react';
|
||
import withPageTitle from 'HOCs/withPageTitle';
|
||
import { PageTitle } from 'UI';
|
||
import { observer } from 'mobx-react-lite';
|
||
import { useStore } from 'App/mstore';
|
||
import LanguageSwitcher from "App/components/LanguageSwitcher";
|
||
import Settings from './Settings';
|
||
import ChangePassword from './ChangePassword';
|
||
import styles from './profileSettings.module.css';
|
||
import Api from './Api';
|
||
import TenantKey from './TenantKey';
|
||
import OptOut from './OptOut';
|
||
import Licenses from './Licenses';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
function ProfileSettings() {
|
||
const { t } = useTranslation();
|
||
const { userStore } = useStore();
|
||
const { account } = userStore;
|
||
const { isEnterprise } = userStore;
|
||
return (
|
||
<div className="bg-white rounded-lg border shadow-sm p-5">
|
||
<PageTitle title={<div>{t('Account')}</div>} />
|
||
<Section
|
||
title={t('Profile')}
|
||
description={t('Your email address is your identity on OpenReplay and is used to login.')}
|
||
children={<Settings />}
|
||
/>
|
||
|
||
<div className="border-b my-10" />
|
||
|
||
{account.hasPassword && (
|
||
<>
|
||
<Section
|
||
title={t('Change Password')}
|
||
description={t('Updating your password from time to time enhaces your account’s security')}
|
||
children={<ChangePassword />}
|
||
/>
|
||
|
||
<div className="border-b my-10" />
|
||
</>
|
||
)}
|
||
|
||
<Section
|
||
title={t('Interface Language')}
|
||
description={t('Select the language in which OpenReplay will appear.')}
|
||
children={<LanguageSwitcher />}
|
||
/>
|
||
|
||
<Section
|
||
title={t('Organization API Key')}
|
||
description={t('Your API key gives you access to an extra set of services.')}
|
||
children={<Api />}
|
||
/>
|
||
|
||
{isEnterprise && (account.admin || account.superAdmin) && (
|
||
<>
|
||
<div className="border-b my-10" />
|
||
<Section
|
||
title={t('Tenant Key')}
|
||
description={t('For SSO (SAML) authentication.')}
|
||
children={<TenantKey />}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
{!isEnterprise && (
|
||
<>
|
||
<div className="border-b my-10" />
|
||
<Section
|
||
title={t('Data Collection')}
|
||
description={t('Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.')}
|
||
children={<OptOut />}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
{account.license && (
|
||
<>
|
||
<div className="border-b my-10" />
|
||
<Section title={t('License')} description={t('License key and expiration date.')} children={<Licenses />} />
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Section({ title, description, children }: {
|
||
title: string;
|
||
description: string;
|
||
children: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<div className="flex items-center">
|
||
<div className={styles.left}>
|
||
<h4 className="text-lg mb-4">{title}</h4>
|
||
<div className={styles.info}>
|
||
{description}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default withPageTitle('Account - OpenReplay Preferences')(
|
||
observer(ProfileSettings),
|
||
);
|