forked from p34709852/monkey
Merge pull request #1359 from guardicore/1349/landing-page-face-lift
Landing page face lift
This commit is contained in:
VakarisZ
GitHub
commit
73f06a5551
|
|
@ -221,6 +221,7 @@ class AppComponent extends AuthComponent {
|
|||
<Route path={Routes.RegisterPage} render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/>
|
||||
{this.renderRoute(Routes.LandingPage,
|
||||
<SidebarLayoutComponent component={LandingPage}
|
||||
sideNavShow={false}
|
||||
sideNavDisabled={true}
|
||||
completedSteps={new CompletedSteps()}
|
||||
onStatusChange={this.updateStatus}/>)}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,15 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|||
import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
|
||||
import {faUndo} from '@fortawesome/free-solid-svg-icons/faUndo';
|
||||
import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons';
|
||||
import VersionComponent from './side-menu/VersionComponent';
|
||||
import '../styles/components/SideNav.scss';
|
||||
import {CompletedSteps} from "./side-menu/CompletedSteps";
|
||||
import {isReportRoute, Routes} from "./Main";
|
||||
|
||||
|
||||
const guardicoreLogoImage = require('../images/guardicore-logo.png');
|
||||
const logoImage = require('../images/monkey-icon.svg');
|
||||
const infectionMonkeyImage = require('../images/infection-monkey.svg');
|
||||
|
||||
import Logo from "./logo/LogoComponent";
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean,
|
||||
|
|
@ -97,21 +96,7 @@ const SideNavComponent = ({disabled,
|
|||
</NavLink></li>
|
||||
</ul>
|
||||
|
||||
<hr/>
|
||||
<div className='guardicore-link text-center' style={{'marginBottom': '0.5em'}}>
|
||||
<span>Powered by</span>
|
||||
<a href='http://www.guardicore.com' rel='noopener noreferrer' target='_blank'>
|
||||
<img src={guardicoreLogoImage} alt='GuardiCore'/>
|
||||
</a>
|
||||
</div>
|
||||
<div className='license-link text-center'>
|
||||
<a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
|
||||
<FontAwesomeIcon icon={faExternalLinkAlt} /> Documentation
|
||||
</a>
|
||||
<br/>
|
||||
<NavLink to={Routes.LicensePage}>License</NavLink>
|
||||
</div>
|
||||
<VersionComponent/>
|
||||
<Logo/>
|
||||
</>);
|
||||
|
||||
function getNavLinkClass() {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import SideNavComponent from '../SideNavComponent.tsx';
|
|||
import {Col, Row} from 'react-bootstrap';
|
||||
|
||||
const SidebarLayoutComponent = ({component: Component,
|
||||
sideNavShow = true,
|
||||
sideNavDisabled = false,
|
||||
completedSteps = null,
|
||||
defaultReport = '',
|
||||
|
|
@ -13,12 +14,12 @@ const SidebarLayoutComponent = ({component: Component,
|
|||
<Route {...other} render={() => {
|
||||
return (
|
||||
<Row>
|
||||
<Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
|
||||
{sideNavShow &&<Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
|
||||
<SideNavComponent disabled={sideNavDisabled}
|
||||
completedSteps={completedSteps}
|
||||
defaultReport={defaultReport}
|
||||
header={sideNavHeader}/>
|
||||
</Col>
|
||||
</Col>}
|
||||
<Component {...other} />
|
||||
</Row>)
|
||||
}}/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons';
|
||||
import {Routes} from '../Main';
|
||||
import VersionComponent from './VersionComponent';
|
||||
|
||||
const guardicoreLogoImage = require('../../images/guardicore-logo.png');
|
||||
|
||||
function Logo() {
|
||||
return (
|
||||
<>
|
||||
<hr/>
|
||||
<div className='guardicore-link text-center' style={{'marginBottom': '0.5em'}}>
|
||||
<span>Powered by</span>
|
||||
<a href='http://www.guardicore.com' rel='noopener noreferrer' target='_blank'>
|
||||
<img src={guardicoreLogoImage} alt='GuardiCore'/>
|
||||
</a>
|
||||
</div>
|
||||
<div className='license-link text-center'>
|
||||
<a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
|
||||
<FontAwesomeIcon icon={faExternalLinkAlt} /> Documentation
|
||||
</a>
|
||||
<br/>
|
||||
<Link to={Routes.LicensePage}>License</Link>
|
||||
</div>
|
||||
<VersionComponent/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Logo;
|
||||
|
|
@ -1,31 +1,44 @@
|
|||
import React from 'react';
|
||||
import {Col, Row} from 'react-bootstrap';
|
||||
import {Container,Col, Row} from 'react-bootstrap';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faFileCode, faLightbulb} from '@fortawesome/free-solid-svg-icons';
|
||||
import '../../styles/pages/LandingPage.scss';
|
||||
import IslandHttpClient from "../IslandHttpClient";
|
||||
|
||||
import ParticleBackground from '../ui-components/ParticleBackground';
|
||||
import Logo from "../logo/LogoComponent";
|
||||
|
||||
const LandingPageComponent = (props) => {
|
||||
|
||||
return (
|
||||
<Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
|
||||
lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}}
|
||||
<>
|
||||
<ParticleBackground/>
|
||||
<Col sm={{offset: 1, span: 10}} md={{offset: 1, span: 10}}
|
||||
lg={{offset: 2, span: 8}} xl={{offset: 3, span: 6}}
|
||||
className={'landing-page'}>
|
||||
<h1 className="page-title">Welcome to the Monkey Island Server</h1>
|
||||
<div style={{'fontSize': '1.2em'}}>
|
||||
<ScenarioButtons/>
|
||||
<br/>
|
||||
</div>
|
||||
<h1 className="page-title">Breach & Attack Simulation</h1>
|
||||
<div style={{'fontSize': '1.2em'}}>
|
||||
<ScenarioButtons/>
|
||||
<br/>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<Col className={'guardicore-logo'}>
|
||||
<Logo/>
|
||||
</Col>
|
||||
</Col>
|
||||
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
function ScenarioButtons() {
|
||||
return (
|
||||
<section>
|
||||
<h2 className={'scenario-choice-title'}>Choose a scenario:</h2>
|
||||
<div className="container">
|
||||
<ScenarioInfo/>
|
||||
<Row className="justify-content-center">
|
||||
<div className="col-lg-6 col-sm-6">
|
||||
<Link to="/run-monkey"
|
||||
|
|
@ -74,4 +87,18 @@ function MonkeyInfo() {
|
|||
);
|
||||
}
|
||||
|
||||
function ScenarioInfo() {
|
||||
// TODO change link when scenarios are added to documentation
|
||||
return (
|
||||
<>
|
||||
<div className={'scenario-info'}>
|
||||
Check the Infection Monkey documentation hub for more information
|
||||
on <a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
|
||||
scenarios
|
||||
</a>.
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default LandingPageComponent;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.particle-background {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -100;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,12 @@
|
|||
.landing-page {
|
||||
background-color: rgba(255, 255, 255, 0.89);
|
||||
position: absolute !important;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.landing-page h1.page-title {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -7,6 +15,10 @@
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.landing-page .scenario-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.landing-page .monkey-description-title {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
@ -14,3 +26,17 @@
|
|||
.landing-page .d-block {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.landing-page .guardicore-logo {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.guardicore-logo .license-text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.guardicore-logo .version-text {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue