135 lines
4.2 KiB
JavaScript
135 lines
4.2 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import { Button, Select, Input, Icon } from 'UI';
|
|
import { editGDPR, saveGDPR } from 'Duck/site';
|
|
import { validateNumber } from 'App/validate';
|
|
import styles from './siteForm.css';
|
|
|
|
const inputModeOptions = [
|
|
{ text: 'Record all inputs', value: 'plain' },
|
|
{ text: 'Ignore all inputs', value: 'obscured' },
|
|
{ text: 'Obscure all inputs', value: 'hidden' },
|
|
];
|
|
|
|
@connect(state => ({
|
|
site: state.getIn([ 'site', 'instance' ]),
|
|
gdpr: state.getIn([ 'site', 'instance', 'gdpr' ]),
|
|
saving: state.getIn([ 'site', 'saveGDPR', 'loading' ]),
|
|
}), {
|
|
editGDPR,
|
|
saveGDPR,
|
|
})
|
|
export default class GDPRForm extends React.PureComponent {
|
|
onChange = ({ target: { name, value } }) => {
|
|
if (name === "sampleRate") {
|
|
if (!validateNumber(value, { min: 0, max: 100 })) return;
|
|
if (value.length > 1 && value[0] === "0") {
|
|
value = value.slice(1);
|
|
}
|
|
}
|
|
this.props.editGDPR({ [ name ]: value });
|
|
}
|
|
|
|
onSampleRateBlur = ({ target: { name, value } }) => { //TODO: editState hoc
|
|
if (value === ''){
|
|
this.props.editGDPR({ sampleRate: 100 });
|
|
}
|
|
}
|
|
|
|
onChangeSelect = (event, { name, value }) => {
|
|
this.props.editGDPR({ [ name ]: value });
|
|
};
|
|
|
|
onChangeOption = ({ target: { checked, name } }) => {
|
|
this.props.editGDPR({ [ name ]: checked });
|
|
}
|
|
|
|
onSubmit = (e) => {
|
|
e.preventDefault();
|
|
const { site, gdpr } = this.props;
|
|
this.props.saveGDPR(site.id, gdpr);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
site, onClose, saving, gdpr,
|
|
} = this.props;
|
|
|
|
return (
|
|
<form className={ styles.formWrapper } onSubmit={ this.onSubmit }>
|
|
<div className={ styles.content }>
|
|
<div className={ styles.formGroup }>
|
|
<label>{ 'Name' }</label>
|
|
<div>{ site.host }</div>
|
|
</div>
|
|
<div className={ styles.formGroup }>
|
|
<label>{ 'Session Capture Rate' }</label>
|
|
<Input
|
|
icon="percent"
|
|
name="sampleRate"
|
|
value={ gdpr.sampleRate }
|
|
onChange={ this.onChange }
|
|
onBlur={ this.onSampleRateBlur }
|
|
className={ styles.sampleRate }
|
|
/>
|
|
</div>
|
|
|
|
<div className={ styles.formGroup }>
|
|
<label htmlFor="defaultInputMode">{ 'Data Recording Options' }</label>
|
|
<Select
|
|
name="defaultInputMode"
|
|
options={ inputModeOptions }
|
|
onChange={ this.onChangeSelect }
|
|
placeholder="Default Input Mode"
|
|
value={ gdpr.defaultInputMode }
|
|
className={ styles.dropdown }
|
|
/>
|
|
</div>
|
|
|
|
<div className={ styles.formGroup }>
|
|
<label>
|
|
<input
|
|
name="maskNumbers"
|
|
type="checkbox"
|
|
checked={ gdpr.maskNumbers }
|
|
onChange={ this.onChangeOption }
|
|
/>
|
|
{ 'Do not record any numeric text' }
|
|
<div className={ styles.controlSubtext }>{ 'If enabled, OpenReplay will not record or store any numeric text for all sessions.' }</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className={ styles.formGroup }>
|
|
<label>
|
|
<input
|
|
name="maskEmails"
|
|
type="checkbox"
|
|
checked={ gdpr.maskEmails }
|
|
onChange={ this.onChangeOption }
|
|
/>
|
|
{ 'Do not record email addresses ' }
|
|
<div className={ styles.controlSubtext }>{ 'If enabled, OpenReplay will not record or store any email address for all sessions.' }</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className={ styles.blockIpWarapper }>
|
|
<div className={ styles.button } onClick={ this.props.toggleBlockedIp }>
|
|
{ 'Block IP' } <Icon name="next1" size="18" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={ styles.footer }>
|
|
<Button
|
|
outline
|
|
primary
|
|
//onClick={ this.saveGdpr }
|
|
marginRight
|
|
loading={ saving }
|
|
content="Update"
|
|
/>
|
|
<Button plain primary onClick={ onClose } content="Cancel" />
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|
|
}
|