change(ui) - checking for license, added tenantKey

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 (
       <React.Fragment>
         <div className="flex items-center">
@@ -43,20 +49,33 @@ export default class ProfileSettings extends React.PureComponent {
 
         <div className="flex items-center">
           <div className={ styles.left }>
-            <h4 className="text-lg mb-4">{ 'Data Collection' }</h4>
-            <div className={ styles.info }>{ 'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.' }</div>
+            <h4 className="text-lg mb-4">{ 'Tenant Key' }</h4>
+            <div className={ styles.info }>{ 'For SSO (SAML) authentication.' }</div>
           </div>
-          <div><OptOut /></div>
+          <div><TenantKey /></div>
         </div>
 
         <div className="divider" />
 
         <div className="flex items-center">
           <div className={ styles.left }>
-            <h4 className="text-lg mb-4">{ 'License' }</h4>
+            <h4 className="text-lg mb-4">{ 'Data Collection' }</h4>
+            <div className={ styles.info }>{ 'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.' }</div>
           </div>
-          <div><Licenses /></div>
+          <div><OptOut /></div>
         </div>
+        { account.license && (
+          <>
+            <div className="divider" />
+
+            <div className="flex items-center">
+              <div className={ styles.left }>
+                <h4 className="text-lg mb-4">{ 'License' }</h4>
+              </div>
+              <div><Licenses /></div>
+            </div>
+          </>
+        )}
       </React.Fragment>
     );
   }

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 (
+      <form onSubmit={ this.handleSubmit } className={ styles.form }>
+        <div className={ styles.formGroup }>
+          <label htmlFor="key">{ 'Tenant Key' }</label>
+          <div className="ui action input">
+            <input
+              name="key"
+              id="key"
+              type="text"
+              readOnly={ true }
+              value={ key }
+            />
+            <div
+              className="ui button copy-button"
+              role="button"
+              onClick={ this.copyHandler }
+            >
+              { copied ? 'copied' : 'copy' }
+            </div>
+          </div>
+        </div>
+      </form>
+    );
+  }
+}