diff --git a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js index 1e6a31c59..c6fbda5ec 100644 --- a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js +++ b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js @@ -3,12 +3,18 @@ import Settings from './Settings'; import ChangePassword from './ChangePassword'; import styles from './profileSettings.css'; import Api from './Api'; +import TenantKey from './TenantKey'; import OptOut from './OptOut'; import Licenses from './Licenses'; +import { connect } from 'react-redux'; @withPageTitle('Account - OpenReplay Preferences') +@connect(state => ({ + account: state.getIn([ 'user', 'account' ]), +})) export default class ProfileSettings extends React.PureComponent { - render() { + render() { + const { account } = this.props; return (
@@ -43,20 +49,33 @@ export default class ProfileSettings extends React.PureComponent {
-

{ 'Data Collection' }

-
{ 'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.' }
+

{ 'Tenant Key' }

+
{ 'For SSO (SAML) authentication.' }
-
+
-

{ 'License' }

+

{ 'Data Collection' }

+
{ 'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.' }
-
+
+ { account.license && ( + <> +
+ +
+
+

{ 'License' }

+
+
+
+ + )} ); } diff --git a/frontend/app/components/Client/ProfileSettings/TenantKey.js b/frontend/app/components/Client/ProfileSettings/TenantKey.js new file mode 100644 index 000000000..8e76bdb43 --- /dev/null +++ b/frontend/app/components/Client/ProfileSettings/TenantKey.js @@ -0,0 +1,51 @@ +// TODO this can be deleted +import copy from 'copy-to-clipboard'; +import { connect } from 'react-redux'; +import styles from './profileSettings.css'; + +@connect(state => ({ + key: state.getIn([ 'user', 'client', 'tenantKey' ]), + loading: state.getIn([ 'user', 'updateAccountRequest', 'loading' ]) || + state.getIn([ 'user', 'putClientRequest', 'loading' ]), +})) +export default class TenantKey extends React.PureComponent { + state = { copied: false } + + copyHandler = () => { + const { key } = this.props; + this.setState({ copied: true }); + copy(key); + setTimeout(() => { + this.setState({ copied: false }); + }, 1000); + }; + + render() { + const { key } = this.props; + const { copied } = this.state; + + return ( +
+
+ +
+ +
+ { copied ? 'copied' : 'copy' } +
+
+
+
+ ); + } +}