-
Notifications
You must be signed in to change notification settings - Fork 792
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1189 from guardicore/config_export_popup
Config export modal
- Loading branch information
Showing
3 changed files
with
160 additions
and
2 deletions.
There are no files selected for viewing
115 changes: 115 additions & 0 deletions
115
monkey/monkey_island/cc/ui/src/components/configuration-components/ExportConfigModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import {Button, Modal, Form} from 'react-bootstrap'; | ||
| import React, {useState} from 'react'; | ||
|
|
||
| import AuthComponent from '../AuthComponent'; | ||
| import '../../styles/components/configuration-components/ExportConfigModal.scss'; | ||
|
|
||
|
|
||
| type Props = { | ||
| show: boolean, | ||
| onClick: () => void | ||
| } | ||
|
|
||
| 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 ( | ||
| <Modal show={props.show} | ||
| onHide={props.onClick} | ||
| size={'lg'} | ||
| className={'config-export-modal'}> | ||
| <Modal.Header closeButton> | ||
| <Modal.Title>Configuration export</Modal.Title> | ||
| </Modal.Header> | ||
| <Modal.Body> | ||
| <div key={'config-export-option'} | ||
| className={`mb-3 export-type-radio-buttons`}> | ||
| <Form> | ||
| <Form.Check | ||
| type={'radio'} | ||
| className={'password-radio-button'} | ||
| label={<PasswordInput onChange={setPass}/>} | ||
| name={'export-choice'} | ||
| value={'password'} | ||
| onChange={evt => { | ||
| setRadioValue(evt.target.value) | ||
| }} | ||
| checked={radioValue === 'password'} | ||
| /> | ||
| <ExportPlaintextChoiceField onChange={setRadioValue} | ||
| radioValue={radioValue}/> | ||
| </Form> | ||
|
|
||
| </div> | ||
| </Modal.Body> | ||
| <Modal.Footer> | ||
| <Button variant={'info'} | ||
| onClick={onSubmit} | ||
| disabled={isExportBtnDisabled()}> | ||
| Export | ||
| </Button> | ||
| </Modal.Footer> | ||
| </Modal>) | ||
| } | ||
|
|
||
| const PasswordInput = (props: { | ||
| onChange: (passValue) => void | ||
| }) => { | ||
| return ( | ||
| <div className={'config-export-password-input'}> | ||
| <p>Encrypt with a password:</p> | ||
| <Form.Control type='password' | ||
| placeholder='Password' | ||
| onChange={evt => (props.onChange(evt.target.value))}/> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const ExportPlaintextChoiceField = (props: { | ||
| radioValue: string, | ||
| onChange: (radioValue) => void | ||
| }) => { | ||
| return ( | ||
| <div className={'config-export-plaintext'}> | ||
| <Form.Check | ||
| type={'radio'} | ||
| label={'Skip encryption (export as plaintext)'} | ||
| name={'export-choice'} | ||
| value={'plaintext'} | ||
| checked={props.radioValue === 'plaintext'} | ||
| onChange={evt => { | ||
| props.onChange(evt.target.value); | ||
| }} | ||
| /> | ||
| <p className={`export-warning text-secondary`}> | ||
| Configuration may contain stolen credentials or sensitive data.<br/> | ||
| It is advised to use password encryption. | ||
| </p> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
| export default ConfigExportModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
...monkey_island/cc/ui/src/styles/components/configuration-components/ExportConfigModal.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |