diff --git a/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx b/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
index 1f2dedba3..f0ac91d52 100644
--- a/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
@@ -1,53 +1,115 @@
import {Button, Modal, Form} from 'react-bootstrap';
-import React from 'react';
+import React, {useState} from 'react';
+
+import AuthComponent from '../AuthComponent';
+import '../../styles/components/configuration-components/ExportConfigModal.scss';
+
type Props = {
show: boolean,
onClick: () => void
}
-
-const PasswordInput = (props) => {
- return (
-
-
Encrypt with a password:
-
-
- )
-}
-
-
const ConfigExportModal = (props: Props) => {
+ // TODO implement the back end
+ const configExportEndpoint = '/api/configuration/export';
+
+ const [pass, setPass] = useState('');
+ const [radioValue, setRadioValue] = useState('password');
+ const authComponent = new AuthComponent({});
+
+ function isExportBtnDisabled() {
+ return pass === '' && radioValue === 'password';
+ }
+
+ function onSubmit() {
+ authComponent.authFetch(configExportEndpoint,
+ {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify({
+ should_encrypt: (radioValue === 'password'),
+ password: pass
+ })
+ }
+ )
+ }
+
return (
+ size={'lg'}
+ className={'config-export-modal'}>
Configuration export
-
-
}
- />
+
+
}
+ name={'export-choice'}
+ value={'password'}
+ onChange={evt => {
+ setRadioValue(evt.target.value)
+ }}
+ checked={radioValue === 'password'}
+ />
+
+
-
-
-
)
}
+const PasswordInput = (props: {
+ onChange: (passValue) => void
+}) => {
+ return (
+
+
Encrypt with a password:
+
(props.onChange(evt.target.value))}/>
+
+ )
+}
+
+const ExportPlaintextChoiceField = (props: {
+ radioValue: string,
+ onChange: (radioValue) => void
+}) => {
+ return (
+
+
{
+ props.onChange(evt.target.value);
+ }}
+ />
+
+ Configuration might contain stolen credentials or sensitive data.
+ It is advised to use password encryption option.
+
+
+ )
+}
+
+
export default ConfigExportModal;
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/configuration-components/ExportConfigModal.scss b/monkey/monkey_island/cc/ui/src/styles/components/configuration-components/ExportConfigModal.scss
new file mode 100644
index 000000000..78add3bb3
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/components/configuration-components/ExportConfigModal.scss
@@ -0,0 +1,30 @@
+.config-export-modal .config-export-password-input p {
+ display: inline-block;
+ width: auto;
+ margin-top: 0;
+ margin-bottom: 0;
+ margin-right: 10px;
+}
+
+.config-export-modal .export-type-radio-buttons
+.password-radio-button .config-export-password-input input {
+ display: inline-block;
+ width: auto;
+ top: 0;
+ transform: none;
+}
+
+.config-export-modal .export-type-radio-buttons .password-radio-button input{
+ margin-top: 0;
+ top: 50%;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+
+.config-export-modal div.config-export-plaintext p.export-warning {
+ margin-left: 20px;
+}
+
+.config-export-modal div.config-export-plaintext {
+ margin-top: 15px;
+}