UI: Change ExportConfigModal.tsx to encrypt config on UI

This commit is contained in:
vakarisz 2022-06-28 17:11:00 +03:00
parent 20c68ff25c
commit 6cef18b92f
1 changed files with 19 additions and 32 deletions

View File

@ -1,53 +1,40 @@
import {Button, Modal, Form} from 'react-bootstrap'; import {Button, Form, Modal} from 'react-bootstrap';
import React, {useState} from 'react'; import React, {useState} from 'react';
import FileSaver from 'file-saver'; import FileSaver from 'file-saver';
import AuthComponent from '../AuthComponent';
import '../../styles/components/configuration-components/ExportConfigModal.scss'; import '../../styles/components/configuration-components/ExportConfigModal.scss';
import {encryptText} from '../utils/PasswordBasedEncryptor';
type Props = { type Props = {
show: boolean, show: boolean,
configuration: object,
onHide: () => void onHide: () => void
} }
const ConfigExportModal = (props: Props) => { const ConfigExportModal = (props: Props) => {
// TODO: Change this endpoint to new agent-configuration endpoint
const configExportEndpoint = '/api/configuration/export';
const [pass, setPass] = useState(''); const [pass, setPass] = useState('');
const [radioValue, setRadioValue] = useState('password'); const [radioValue, setRadioValue] = useState('password');
const authComponent = new AuthComponent({});
function isExportBtnDisabled() { function isExportBtnDisabled() {
return pass === '' && radioValue === 'password'; return pass === '' && radioValue === 'password';
} }
function onSubmit() { function onSubmit() {
authComponent.authFetch(configExportEndpoint, let config_json = JSON.stringify(props.configuration, null, 2);
{ let config_export = null;
method: 'POST',
headers: {'Content-Type': 'application/json'}, if (radioValue === 'password') {
body: JSON.stringify({ config_export = encryptText(config_json, pass);
should_encrypt: (radioValue === 'password'), } else {
password: pass config_export = config_json;
}) }
} config_export = new Blob(
) [config_export],
.then(res => res.json()) {type: 'text/plain;charset=utf-8'}
.then(res => { );
let configToExport = res['config_export']; FileSaver.saveAs(config_export, 'monkey.conf');
if (res['encrypted']) { props.onHide();
configToExport = new Blob([configToExport]);
} else {
configToExport = new Blob(
[JSON.stringify(configToExport, null, 2)],
{type: 'text/plain;charset=utf-8'}
);
}
FileSaver.saveAs(configToExport, 'monkey.conf');
props.onHide();
})
} }
return ( return (
@ -95,8 +82,8 @@ const PasswordInput = (props: {
return ( return (
<div className={'config-export-password-input'}> <div className={'config-export-password-input'}>
<p>Encrypt with a password:</p> <p>Encrypt with a password:</p>
<Form.Control type='password' <Form.Control type="password"
placeholder='Password' placeholder="Password"
onChange={evt => (props.onChange(evt.target.value))}/> onChange={evt => (props.onChange(evt.target.value))}/>
</div> </div>
) )