diff --git a/monkey/common/utils/exceptions.py b/monkey/common/utils/exceptions.py
index 5103b297e..4b27cd04d 100644
--- a/monkey/common/utils/exceptions.py
+++ b/monkey/common/utils/exceptions.py
@@ -24,3 +24,7 @@ class AlreadyRegisteredError(RegistrationNotNeededError):
class RulePathCreatorNotFound(Exception):
""" Raise to indicate that ScoutSuite rule doesn't have a path creator"""
+
+
+class InvalidAWSKeys(Exception):
+ """ Raise to indicate that AWS API keys are invalid"""
diff --git a/monkey/monkey_island/cc/app.py b/monkey/monkey_island/cc/app.py
index 8ed7189f3..38ce7f23b 100644
--- a/monkey/monkey_island/cc/app.py
+++ b/monkey/monkey_island/cc/app.py
@@ -47,6 +47,8 @@ from monkey_island.cc.resources.test.monkey_test import MonkeyTest
from monkey_island.cc.resources.version_update import VersionUpdate
from monkey_island.cc.resources.zero_trust.finding_event import \
ZeroTrustFindingEvent
+from monkey_island.cc.resources.zero_trust.scoutsuite_auth.aws_keys import AWSKeys
+from monkey_island.cc.resources.zero_trust.scoutsuite_auth.scoutsuite_auth import ScoutSuiteAuth
from monkey_island.cc.services.database import Database
from monkey_island.cc.services.remote_run_aws import RemoteRunAwsService
from monkey_island.cc.services.representations import output_json
@@ -146,6 +148,8 @@ def init_api_resources(api):
api.add_resource(VersionUpdate, '/api/version-update', '/api/version-update/')
api.add_resource(RemotePortCheck, '/api/monkey_control/check_remote_port/<string:port>')
api.add_resource(StartedOnIsland, '/api/monkey_control/started_on_island')
+ api.add_resource(ScoutSuiteAuth, '/api/scoutsuite_auth/<string:provider>')
+ api.add_resource(AWSKeys, '/api/aws_keys')
api.add_resource(MonkeyTest, '/api/test/monkey')
api.add_resource(ClearCaches, '/api/test/clear_caches')
diff --git a/monkey/monkey_island/cc/resources/zero_trust/scoutsuite_auth/aws_keys.py b/monkey/monkey_island/cc/resources/zero_trust/scoutsuite_auth/aws_keys.py
new file mode 100644
index 000000000..53e757f11
--- /dev/null
+++ b/monkey/monkey_island/cc/resources/zero_trust/scoutsuite_auth/aws_keys.py
@@ -0,0 +1,11 @@
+import flask_restful
+
+from monkey_island.cc.resources.auth.auth import jwt_required
+from monkey_island.cc.services.zero_trust.scoutsuite.scoutsuite_auth_service import get_aws_keys
+
+
+class AWSKeys(flask_restful.Resource):
+
+ @jwt_required
+ def get(self):
+ return get_aws_keys()
diff --git a/monkey/monkey_island/cc/resources/zero_trust/scoutsuite_auth/scoutsuite_auth.py b/monkey/monkey_island/cc/resources/zero_trust/scoutsuite_auth/scoutsuite_auth.py
new file mode 100644
index 000000000..9a07d436a
--- /dev/null
+++ b/monkey/monkey_island/cc/resources/zero_trust/scoutsuite_auth/scoutsuite_auth.py
@@ -0,0 +1,34 @@
+import json
+
+import flask_restful
+from flask import request
+
+from common.cloud.scoutsuite_consts import PROVIDERS
+from common.utils.exceptions import InvalidAWSKeys
+from monkey_island.cc.resources.auth.auth import jwt_required
+from monkey_island.cc.services.zero_trust.scoutsuite.scoutsuite_auth_service import is_cloud_authentication_setup, \
+ set_aws_keys
+
+
+class ScoutSuiteAuth(flask_restful.Resource):
+
+ @jwt_required
+ def get(self, provider: PROVIDERS):
+ if provider == PROVIDERS.AWS.value:
+ is_setup, message = is_cloud_authentication_setup(provider)
+ return {'is_setup': is_setup, 'message': message}
+ else:
+ return {'is_setup': False, 'message': ''}
+
+ @jwt_required
+ def post(self, provider: PROVIDERS):
+ key_info = json.loads(request.data)
+ error_msg = ''
+ if provider == PROVIDERS.AWS.value:
+ try:
+ set_aws_keys(access_key_id=key_info['accessKeyId'],
+ secret_access_key=key_info['secretAccessKey'],
+ session_token=key_info['sessionToken'])
+ except InvalidAWSKeys as e:
+ error_msg = str(e)
+ return {'error_msg': error_msg}
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js b/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js
index cbe3867ee..961c1899c 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js
@@ -69,7 +69,7 @@ class LoginPageComponent extends React.Component {
<Form className={'auth-form'} onSubmit={this.login}>
<Form.Control onChange={evt => this.updateUsername(evt)} type='text' placeholder='Username'/>
<Form.Control onChange={evt => this.updatePassword(evt)} type='password' placeholder='Password'/>
- <Button id={'auth-button'} type={'submit'}>
+ <Button className={'monkey-submit-button'} type={'submit'}>
Login
</Button>
{
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js b/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js
index 3b8188221..093dba950 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js
@@ -92,7 +92,7 @@ class RegisterPageComponent extends React.Component {
<Form className={'auth-form'} onSubmit={this.register} >
<Form.Control onChange={evt => this.updateUsername(evt)} type='text' placeholder='Username'/>
<Form.Control onChange={evt => this.updatePassword(evt)} type='password' placeholder='Password'/>
- <Button id={'auth-button'} type={'submit'} >
+ <Button className={'monkey-submit-button'} type={'submit'} >
Let's go!
</Button>
<Row>
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RunOptions.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RunOptions.js
index fa724d6f6..ddf7ef6cc 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RunOptions.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RunOptions.js
@@ -7,7 +7,6 @@ import InlineSelection from '../../ui-components/inline-selection/InlineSelectio
import {cloneDeep} from 'lodash';
import {faCloud, faExpandArrowsAlt} from '@fortawesome/free-solid-svg-icons';
import RunOnIslandButton from './RunOnIslandButton';
-import AWSSetup from './scoutsuite-setup/AWSSetup';
import CloudOptions from './scoutsuite-setup/CloudOptions';
function RunOptions(props) {
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSSetup.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSConfiguration/AWSCLISetup.js
similarity index 71%
rename from monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSSetup.js
rename to monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSConfiguration/AWSCLISetup.js
index 6fe85936e..69ab4903f 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSSetup.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSConfiguration/AWSCLISetup.js
@@ -1,16 +1,17 @@
import {Button} from 'react-bootstrap';
import React from 'react';
-import InlineSelection from '../../../ui-components/inline-selection/InlineSelection';
-import CloudOptions from './CloudOptions';
-import {COLUMN_SIZES} from '../../../ui-components/inline-selection/utils';
-import '../../../../styles/components/scoutsuite/AWSSetup.scss';
+import InlineSelection from '../../../../ui-components/inline-selection/InlineSelection';
+import {COLUMN_SIZES} from '../../../../ui-components/inline-selection/utils';
+import '../../../../../styles/components/scoutsuite/AWSSetup.scss';
+import AWSSetupOptions from './AWSSetupOptions';
-export default function AWSSetup(props) {
+
+export default function AWSCLISetup(props) {
return InlineSelection(getContents, {
...props,
collumnSize: COLUMN_SIZES.LARGE,
onBackButtonClick: () => {
- props.setComponent(CloudOptions, props)
+ props.setComponent(AWSSetupOptions, props);
}
})
}
@@ -33,9 +34,11 @@ const getContents = (props) => {
<li>
2. Run <code>aws configure</code>. It's important to configure credentials, which
allows ScoutSuite to get information about your cloud configuration. The most trivial way to do so is to
- provide <Button
- href={'https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html#cli-configure-quickstart-creds'}
- variant={'link'}>
+ provide
+ <Button
+ href={'https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html#cli-configure-quickstart-creds'}
+ variant={'link'}
+ target={'_blank'}>
Access key ID and secret access key
</Button>.
</li>
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSConfiguration/AWSKeySetup.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSConfiguration/AWSKeySetup.js
new file mode 100644
index 000000000..3643ba89c
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSConfiguration/AWSKeySetup.js
@@ -0,0 +1,176 @@
+import React, {useEffect, useState} from 'react';
+import InlineSelection from '../../../../ui-components/inline-selection/InlineSelection';
+import {COLUMN_SIZES} from '../../../../ui-components/inline-selection/utils';
+import AWSSetupOptions from './AWSSetupOptions';
+import {Button, Col, Form, Row} from 'react-bootstrap';
+import AuthComponent from '../../../../AuthComponent';
+import '../../../../../styles/components/scoutsuite/AWSSetup.scss';
+import {PROVIDERS} from '../ProvidersEnum';
+import classNames from 'classnames';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faChevronDown} from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import {faChevronUp} from '@fortawesome/free-solid-svg-icons/faChevronUp';
+import {faQuestion} from '@fortawesome/free-solid-svg-icons';
+import Collapse from '@kunukn/react-collapse/dist/Collapse.umd';
+import keySetupForAnyUserImage from '../../../../../images/aws_keys_tutorial-any-user.png';
+import keySetupForCurrentUserImage from '../../../../../images/aws_keys_tutorial-current-user.png';
+import ImageModal from '../../../../ui-components/ImageModal';
+
+
+export default function AWSCLISetup(props) {
+ return InlineSelection(getContents, {
+ ...props,
+ collumnSize: COLUMN_SIZES.LARGE,
+ onBackButtonClick: () => {
+ props.setComponent(AWSSetupOptions, props);
+ }
+ })
+}
+
+const authComponent = new AuthComponent({})
+
+const getContents = (props) => {
+
+ const [accessKeyId, setAccessKeyId] = useState('');
+ const [secretAccessKey, setSecretAccessKey] = useState('');
+ const [sessionToken, setSessionToken] = useState('');
+ const [errorMessage, setErrorMessage] = useState('');
+ const [successMessage, setSuccessMessage] = useState('');
+ const [docCollapseOpen, setDocCollapseOpen] = useState(false);
+
+ function submitKeys(event) {
+ event.preventDefault();
+ setSuccessMessage('');
+ setErrorMessage('');
+ authComponent.authFetch(
+ '/api/scoutsuite_auth/' + PROVIDERS.AWS,
+ {
+ 'method': 'POST',
+ 'body': JSON.stringify({
+ 'accessKeyId': accessKeyId,
+ 'secretAccessKey': secretAccessKey,
+ 'sessionToken': sessionToken
+ })
+ })
+ .then(res => res.json())
+ .then(res => {
+ if (res['error_msg'] === '') {
+ setSuccessMessage('AWS keys saved!');
+ } else {
+ setErrorMessage(res['error_msg']);
+ }
+ });
+ }
+
+ useEffect(() => {
+ authComponent.authFetch('/api/aws_keys')
+ .then(res => res.json())
+ .then(res => {
+ setAccessKeyId(res['access_key_id']);
+ setSecretAccessKey(res['secret_access_key']);
+ setSessionToken(res['session_token']);
+ });
+ }, [props]);
+
+
+ // TODO separate into standalone component
+ function getKeyCreationDocsContent() {
+ return (
+ <div className={'key-creation-tutorial'}>
+ <h5>Tips</h5>
+ <p>Consider creating a new user account just for this activity. Assign only <b>ReadOnlyAccess</b> and
+ <b>SecurityAudit</b> policies.</p>
+
+ <h5>Keys for custom user</h5>
+ <p>1. Open the IAM console at <a href={'https://console.aws.amazon.com/iam/'}
+ target={'_blank'}>https://console.aws.amazon.com/iam/</a> .</p>
+ <p>2. In the navigation pane, choose Users.</p>
+ <p>3. Choose the name of the user whose access keys you want to create, and then choose the Security credentials
+ tab.</p>
+ <p>4. In the Access keys section, choose Create access key.</p>
+ <p>To view the new access key pair, choose Show. Your credentials will look something like this:</p>
+ <p>Access key ID: AKIAIOSFODNN7EXAMPLE</p>
+ <p>Secret access key: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY</p>
+ <Row>
+ <Col lg={3} md={3} sm={5} xs={12}>
+ <ImageModal image={keySetupForAnyUserImage}/>
+ </Col>
+ </Row>
+
+ <h5>Keys for current user</h5>
+ <p>1. Click on your username in the upper right corner.</p>
+ <p>2. Click on "My security credentials".</p>
+ <p>3. In the Access keys section, choose Create access key.</p>
+ <p>To view the new access key pair, choose Show. Your credentials will look something like this:</p>
+ <p>Access key ID: AKIAIOSFODNN7EXAMPLE</p>
+ <p>Secret access key: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY</p>
+ <Row>
+ <Col lg={3} md={3} sm={5} xs={12}>
+ <ImageModal image={keySetupForCurrentUserImage}/>
+ </Col>
+ </Row>
+ </div>);
+ }
+
+ function getKeyCreationDocs() {
+ return (
+ <div className={classNames('collapse-item', {'item--active': docCollapseOpen})}>
+ <button className={'btn-collapse'}
+ onClick={() => setDocCollapseOpen(!docCollapseOpen)}>
+ <span>
+ <FontAwesomeIcon icon={faQuestion} className={'question-icon'}/>
+ <p>How to generate keys</p>
+ </span>
+ <span>
+ <FontAwesomeIcon icon={docCollapseOpen ? faChevronDown : faChevronUp}/>
+ </span>
+ </button>
+ <Collapse
+ className='collapse-comp'
+ isOpen={docCollapseOpen}
+ render={getKeyCreationDocsContent}/>
+ </div>);
+ }
+
+ return (
+ <div className={'aws-scoutsuite-key-configuration'}>
+ {getKeyCreationDocs()}
+ <Form className={'auth-form'} onSubmit={submitKeys}>
+ <Form.Control onChange={evt => setAccessKeyId(evt.target.value)}
+ type='text'
+ placeholder='Access key ID'
+ value={accessKeyId}/>
+ <Form.Control onChange={evt => setSecretAccessKey(evt.target.value)}
+ type='password'
+ placeholder='Secret access key'
+ value={secretAccessKey}/>
+ <Form.Control onChange={evt => setSessionToken(evt.target.value)}
+ type='text'
+ placeholder='Session token (optional, only for temp. keys)'
+ value={sessionToken}/>
+ {
+ errorMessage ?
+ <div className="alert alert-danger" role="alert">{errorMessage}</div>
+ :
+ ''
+ }
+ {
+ successMessage ?
+ <div className="alert alert-success" role="alert">{successMessage}
+ Go back and
+ <Button variant={'link'} onClick={() => props.setComponent()} className={'link-in-success-message'}>
+ run Monkey from the Island server </Button> to start AWS scan!</div>
+ :
+ ''
+ }
+ <Row className={'justify-content-center'}>
+ <Col lg={4} md={6} sm={8} xs={12}>
+ <Button className={'monkey-submit-button'} type={'submit'}>
+ Submit
+ </Button>
+ </Col>
+ </Row>
+ </Form>
+ </div>
+ );
+}
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSConfiguration/AWSSetupOptions.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSConfiguration/AWSSetupOptions.js
new file mode 100644
index 000000000..a66a893d8
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/AWSConfiguration/AWSSetupOptions.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import InlineSelection from '../../../../ui-components/inline-selection/InlineSelection';
+import NextSelectionButton from '../../../../ui-components/inline-selection/NextSelectionButton';
+import {faKey, faTerminal} from '@fortawesome/free-solid-svg-icons';
+import AWSCLISetup from './AWSCLISetup';
+import CloudOptions from '../CloudOptions';
+import AWSKeySetup from './AWSKeySetup';
+
+
+const AWSSetupOptions = (props) => {
+ return InlineSelection(getContents, {
+ ...props,
+ onBackButtonClick: () => {
+ props.setComponent(CloudOptions, props);
+ }
+ })
+}
+
+const getContents = (props) => {
+ return (
+ <>
+ <NextSelectionButton title={'Security keys'}
+ description={'Provide security keys for monkey to authenticate.'}
+ icon={faKey}
+ onButtonClick={() => {
+ props.setComponent(AWSKeySetup,
+ {setComponent: props.setComponent})
+ }}/>
+ <NextSelectionButton title={'AWS CLI'}
+ description={'Manually configure AWS CLI yourself.'}
+ icon={faTerminal}
+ onButtonClick={() => {
+ props.setComponent(AWSCLISetup,
+ {setComponent: props.setComponent})
+ }}/>
+ </>
+ )
+}
+
+export default AWSSetupOptions;
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/CloudOptions.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/CloudOptions.js
index 1605a0eaa..aa4dedd2e 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/CloudOptions.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/scoutsuite-setup/CloudOptions.js
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
import InlineSelection from '../../../ui-components/inline-selection/InlineSelection';
import NextSelectionButton from '../../../ui-components/inline-selection/NextSelectionButton';
-import {faCloud} from '@fortawesome/free-solid-svg-icons';
-import AWSSetup from './AWSSetup';
+import {faCheck, faCloud, faSync} from '@fortawesome/free-solid-svg-icons';
+import AWSSetupOptions from './AWSConfiguration/AWSSetupOptions';
+import {PROVIDERS} from './ProvidersEnum';
+import AuthComponent from '../../../AuthComponent';
const CloudOptions = (props) => {
@@ -14,14 +16,38 @@ const CloudOptions = (props) => {
})
}
+const authComponent = new AuthComponent({})
+
const getContents = (props) => {
+
+ const [description, setDescription] = useState("Loading...");
+ const [iconType, setIconType] = useState('spinning-icon');
+ const [icon, setIcon] = useState(faSync);
+
+ useEffect(() => {
+ authComponent.authFetch('/api/scoutsuite_auth/' + PROVIDERS.AWS)
+ .then(res => res.json())
+ .then(res => {
+ if(res.is_setup){
+ setDescription(res.message + 'Click next to change the configuration.');
+ setIconType('icon-success');
+ setIcon(faCheck);
+ } else {
+ setDescription('Setup Amazon Web Services infrastructure scan.');
+ setIconType('')
+ setIcon(faCloud);
+ }
+ });
+ }, [props]);
+
return (
<>
<NextSelectionButton title={'AWS'}
- description={'Setup Amazon Web Services infrastructure scan.'}
- icon={faCloud}
+ description={description}
+ icon={icon}
+ iconType={iconType}
onButtonClick={() => {
- props.setComponent(AWSSetup,
+ props.setComponent(AWSSetupOptions,
{setComponent: props.setComponent})
}}/>
</>
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/ImageModal.js b/monkey/monkey_island/cc/ui/src/components/ui-components/ImageModal.js
new file mode 100644
index 000000000..12632e811
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/ImageModal.js
@@ -0,0 +1,33 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {Button, Image, Modal} from 'react-bootstrap';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faSearchPlus} from '@fortawesome/free-solid-svg-icons';
+
+
+const ImageModal = (props) => {
+
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ return (
+ <div className={'image-modal'}>
+ <Button className={'image-modal-thumbnail'} onClick={() => setIsModalOpen(true)}>
+ <FontAwesomeIcon icon={faSearchPlus} className={'image-modal-thumbnail-icon'}/>
+ <Image src={props.image} thumbnail fluid/>
+ </Button>
+ <Modal show={isModalOpen}
+ className={'image-modal-screen'}
+ onHide={() => setIsModalOpen(false)}>
+ <Modal.Body>
+ <Image src={props.image} fluid />
+ </Modal.Body>
+ </Modal>
+ </div>
+ );
+}
+
+export default ImageModal;
+
+ImageModal.propTypes = {
+ image: PropTypes.element
+}
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js
index 51bf341bd..502fbf6b1 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js
@@ -18,8 +18,8 @@ export default function InlineSelection(WrappedComponent, props) {
)
}
-function renderBackButton(props){
- if(props.onBackButtonClick !== undefined){
+function renderBackButton(props) {
+ if (props.onBackButtonClick !== undefined) {
return (<BackButton onClick={props.onBackButtonClick}/>);
}
}
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js
index 7a7c47087..174dce254 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js
@@ -6,7 +6,8 @@ import {faAngleRight} from '@fortawesome/free-solid-svg-icons';
export default function nextSelectionButton(props) {
let description = props.description !== undefined ? (<p>{props.description}</p>) : ''
- let icon = props.icon !== undefined ? (<FontAwesomeIcon icon={props.icon}/>) : ''
+ let iconType = props.iconType !== undefined ? props.iconType : ''
+ let icon = props.icon !== undefined ? (<FontAwesomeIcon className={iconType} icon={props.icon}/>) : ''
return (
<Row>
<Col>
@@ -24,6 +25,7 @@ export default function nextSelectionButton(props) {
nextSelectionButton.propTypes = {
title: PropTypes.string,
+ iconType: PropTypes.string,
icon: FontAwesomeIcon,
description: PropTypes.string,
onButtonClick: PropTypes.func
diff --git a/monkey/monkey_island/cc/ui/src/images/aws_keys_tutorial-any-user.png b/monkey/monkey_island/cc/ui/src/images/aws_keys_tutorial-any-user.png
new file mode 100644
index 000000000..c0dfb4111
Binary files /dev/null and b/monkey/monkey_island/cc/ui/src/images/aws_keys_tutorial-any-user.png differ
diff --git a/monkey/monkey_island/cc/ui/src/images/aws_keys_tutorial-current-user.png b/monkey/monkey_island/cc/ui/src/images/aws_keys_tutorial-current-user.png
new file mode 100644
index 000000000..b1b3a997f
Binary files /dev/null and b/monkey/monkey_island/cc/ui/src/images/aws_keys_tutorial-current-user.png differ
diff --git a/monkey/monkey_island/cc/ui/src/styles/Main.scss b/monkey/monkey_island/cc/ui/src/styles/Main.scss
index 602c62b3d..400af4054 100644
--- a/monkey/monkey_island/cc/ui/src/styles/Main.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/Main.scss
@@ -3,6 +3,7 @@
@import '../../node_modules/bootstrap/scss/bootstrap';
// Imports that require variables
+@import 'components/Buttons';
@import 'pages/report/ReportPage.scss';
@import 'pages/report/AttackReport.scss';
@import 'pages/ConfigurationPage';
@@ -13,11 +14,12 @@
@import 'components/AdvancedMultiSelect';
@import 'components/particle-component/ParticleBackground';
@import 'components/scoutsuite/ResourceDropdown';
+@import 'components/ImageModal';
+@import 'components/Icons';
@import 'components/inline-selection/InlineSelection';
@import 'components/inline-selection/NextSelectionButton';
@import 'components/inline-selection/BackButton';
@import 'components/inline-selection/CommandDisplay';
-@import 'components/Icons';
// Define custom elements after bootstrap import
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/Icons.scss b/monkey/monkey_island/cc/ui/src/styles/components/Icons.scss
index ed75d8a9d..36c9082b8 100644
--- a/monkey/monkey_island/cc/ui/src/styles/components/Icons.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/components/Icons.scss
@@ -3,6 +3,14 @@
display: inline-block;
}
+.icon-success {
+ color: $success
+}
+
+.icon-failed {
+ color: $danger;
+}
+
@keyframes spin-animation {
0% {
transform: rotate(0deg);
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/ImageModal.scss b/monkey/monkey_island/cc/ui/src/styles/components/ImageModal.scss
new file mode 100644
index 000000000..bfe630b5f
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/components/ImageModal.scss
@@ -0,0 +1,49 @@
+.image-modal .image-modal-thumbnail {
+ position: relative;
+ padding: 7px;
+}
+
+.image-modal .image-modal-thumbnail:focus {
+ background-color: white;
+ border-color: white;
+ box-shadow: 0 2px 6px #ccc;
+}
+
+.image-modal .image-modal-thumbnail:hover {
+ background-color: white;
+ border-color: white;
+ box-shadow: 0 2px 6px #ccc;
+}
+
+.image-modal .image-modal-thumbnail-icon {
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ position: absolute;
+ min-width: 40px;
+ min-height: 40px;
+}
+
+.image-modal:hover .image-modal-thumbnail-icon {
+ color: $monkey-yellow;
+}
+
+.image-modal-screen {
+ padding: 0;
+}
+
+.image-modal-screen .modal-dialog {
+ margin: 0;
+ top: 0;
+ width: 100%;
+ padding: 30px;
+ max-width: none;
+ max-height: none;
+}
+
+.image-modal-screen .modal-dialog .modal-content {
+ width: fit-content;
+ margin: auto;
+}
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/scoutsuite/AWSSetup.scss b/monkey/monkey_island/cc/ui/src/styles/components/scoutsuite/AWSSetup.scss
index c1546ac81..9d8b793aa 100644
--- a/monkey/monkey_island/cc/ui/src/styles/components/scoutsuite/AWSSetup.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/components/scoutsuite/AWSSetup.scss
@@ -1,17 +1,74 @@
-.aws-scoutsuite-configuration a{
+.aws-scoutsuite-configuration a {
display: inline-block;
padding: 0 0 3px 0;
}
-.aws-scoutsuite-configuration ol{
+.aws-scoutsuite-configuration ol {
padding-left: 15px;
margin-bottom: 30px;
}
-.aws-scoutsuite-configuration ol.nested-ol{
+.aws-scoutsuite-configuration ol.nested-ol {
margin-bottom: 0;
}
-.aws-scoutsuite-configuration li{
+.aws-scoutsuite-configuration li {
margin-bottom: 5px;
}
+
+.monkey-submit-button {
+ margin-bottom: 15px;
+}
+
+.aws-scoutsuite-key-configuration .collapse-item {
+ padding: 0;
+ margin-bottom: 15px;
+}
+
+.aws-scoutsuite-key-configuration .collapse-item .btn-collapse .question-icon {
+ display: inline-block;
+ margin-right: 7px;
+ margin-bottom: 1px;
+}
+
+.aws-scoutsuite-key-configuration .collapse-item .btn-collapse p {
+ display: inline-block;
+ margin-bottom: 0;
+ font-size: 1.2em;
+ margin-left: 5px
+}
+
+.aws-scoutsuite-key-configuration .key-creation-tutorial {
+ padding-bottom: 10px;
+}
+
+.aws-scoutsuite-key-configuration .key-creation-tutorial p {
+ margin-bottom: 2px;
+ font-weight: 400;
+}
+
+.aws-scoutsuite-key-configuration .key-creation-tutorial h5 {
+ margin-top: 15px;
+ font-weight: 600;
+}
+
+.aws-scoutsuite-key-configuration .key-creation-tutorial p:first-child {
+ margin-top: 15px;
+}
+
+.aws-scoutsuite-key-configuration .image-modal {
+ margin-top: 5px;
+}
+
+.aws-scoutsuite-key-configuration .key-creation-tutorial img {
+ max-width: 100%;
+ max-height: 100%;
+ border: 1px solid black;
+}
+
+.link-in-success-message {
+ padding: 0 !important;
+ vertical-align: initial !important;
+}
+
+
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss b/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss
index 8b1b10502..e3ecbd0e6 100644
--- a/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/AuthPage.scss
@@ -15,23 +15,6 @@
margin-top: 20px;
}
-#auth-button {
- border-color: #3f3f3f;
- font-size: 1.3em;
- width: 100%;
- background-color: #3f3f3f;
- color: $monkey-yellow;
-}
-
-#auth-button:hover {
- border-color: $monkey-yellow;
- font-size: 1.3em;
- font-weight: bold;
- width: 100%;
- background-color: $monkey-yellow;
- color: #000000;
-}
-
.monkey-detective {
max-height: 500px;
}