diff --git a/package-lock.json b/package-lock.json index 8f6d99c..e974dd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@digicatapult/morello-ui", - "version": "0.5.3", + "version": "0.6.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@digicatapult/morello-ui", - "version": "0.5.3", + "version": "0.6.0", "license": "Apache-2.0", "dependencies": { "qs": "^6.11.0", diff --git a/package.json b/package.json index 8ecc2c1..d9740f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@digicatapult/morello-ui", - "version": "0.5.3", + "version": "0.6.0", "description": "User interface for interacting with morello-api", "main": "src/index.js", "scripts": { diff --git a/src/components/demos/read/Demo.js b/src/components/demos/read/Demo.js index c65d783..4596b5a 100644 --- a/src/components/demos/read/Demo.js +++ b/src/components/demos/read/Demo.js @@ -115,10 +115,10 @@ export default function ReadDemo(props) { )} {!readDemo.isPasswordSet && ( - <> + {isMorello && } @@ -129,7 +129,7 @@ export default function ReadDemo(props) { @@ -153,11 +153,11 @@ export default function ReadDemo(props) { - + )} {readDemo.isPasswordSet && isMorello && ( - + This application will store your password securely. @@ -165,11 +165,16 @@ export default function ReadDemo(props) { Please input a keyword of choice. - + Password has been submitted. Now you can attempt to hack - + )} {readDemo.isPasswordSet && !isMorello && ( diff --git a/src/components/demos/read/Modal.js b/src/components/demos/read/Modal.js index 90e723d..2858297 100644 --- a/src/components/demos/read/Modal.js +++ b/src/components/demos/read/Modal.js @@ -4,9 +4,12 @@ import styled from 'styled-components' import { Button, ButtonBasic } from '../../shared/Buttons' import { DemoText, Col, Row } from '../../shared/Common' import Title from '../../shared/Title' +import Console from '../../shared/Console' const Window = styled.div(({ styles }) => styles) -const Page = styled(Col)((props) => props) +const Page = styled(Col)` + ${(props) => props} +` const renderActions = ({ update, readDemo }) => { const handleNo = (e) => { @@ -75,24 +78,36 @@ const renderActions = ({ update, readDemo }) => { } export default function Modal({ update, readDemo, ProgressBar }) { - const { theme, showHackingProgress, renderModalActions } = readDemo + const { + theme, + showHackingProgress, + renderModalActions, + output, + binaryName, + password, + } = readDemo + + const executableAndArgs = `${binaryName}-${theme.arch} ${password} -32 ${ + -32 + password.length + }` return ( - <Row flex={'auto'}> + <Row> <Page {...theme.modal.page}> <DemoText {...readDemo.txt_col}>{readDemo.modalText}</DemoText> {renderModalActions && renderActions({ readDemo, update })} {showHackingProgress && ( - <Row height={'50px'} flex={'auto'} marginTop={'20px'}> - <ProgressBar readDemo={readDemo} update={update} /> - </Row> + <ProgressBar readDemo={readDemo} update={update} /> )} {readDemo?.switchToMorello && ( <Button onClick={readDemo.switchToMorello}>TRY</Button> )} + {output ? ( + <Console executable={executableAndArgs} output={output.output} /> + ) : null} </Page> </Row> </Window> diff --git a/src/components/demos/read/ProgressBar.js b/src/components/demos/read/ProgressBar.js index 52d9bc5..891f03f 100644 --- a/src/components/demos/read/ProgressBar.js +++ b/src/components/demos/read/ProgressBar.js @@ -63,11 +63,13 @@ export default function ProgressBar({ update, readDemo }) { </Wrapper> ) : ( <Row> - <DemoText wordWrap={'break-word'}> - {readDemo.output.status != 'success' - ? 'FAILURE. The password could not be revealed. - Display output?' - : `Your password is ${extractPassword(readDemo.output)}!`} - </DemoText> + {readDemo.output.status != 'success' ? ( + <DemoText>HACK FAILED. The password could not be revealed!?</DemoText> + ) : ( + <DemoText> + Your password is <b>{extractPassword(readDemo.output)}</b>! + </DemoText> + )} </Row> ) } diff --git a/src/components/shared/Common.js b/src/components/shared/Common.js index 2e4da3f..338cef9 100644 --- a/src/components/shared/Common.js +++ b/src/components/shared/Common.js @@ -29,15 +29,15 @@ export const H2 = styled.p({ lineHeight: '11.52px', }) -export const DemoText = styled.p((props) => ({ - fontFamily: 'Monaco', - fontSize: '18px', - color: '#FFFFFF', - fontWeight: '100', - margin: '0px', - padding: '10px', - ...props, -})) +export const DemoText = styled.p` + font-family: Monaco; + font-size: 18px; + color: #ffffff; + font-weight: 100; + margin: 0px; + padding-bottom: 25px; + ${(props) => props} +` export const P1 = styled.p((props) => ({ fontFamily: 'AktivGrotesk', diff --git a/src/components/shared/Console.js b/src/components/shared/Console.js new file mode 100644 index 0000000..7396d4f --- /dev/null +++ b/src/components/shared/Console.js @@ -0,0 +1,50 @@ +import React, { useState } from 'react' +import styled from 'styled-components' +import { DemoText } from './Common' + +const ConsoleWrapper = styled.div` + width: 100%; +` + +const ConsoleWindow = styled.div` + outline: 1px solid white; + background: black; + margin: 0px; + overflow: scroll; + min-height: ${({ showConsole }) => (showConsole ? '100px' : '2px')}; + max-height: ${({ showConsole }) => (showConsole ? '200px' : '2px')}; + padding: ${({ showConsole }) => (showConsole ? '10px' : '0px')}; + + > p { + font-family: Monaco; + color: limegreen; + font-size: 12px; + font-weight: 100; + margin: 0; + line-height: 1.5; + } +` + +const OutputTest = styled.p` + white-space: pre-line; +` + +export default function Console({ executable, output }) { + const [showConsole, setShowConsole] = useState(false) + + const toggleDetails = () => setShowConsole(!showConsole) + + const caret = showConsole ? 'v' : '>' + + return ( + <ConsoleWrapper> + <DemoText paddingBottom={'5px'} onClick={toggleDetails}> + Details {caret} + </DemoText> + <ConsoleWindow showConsole={showConsole}> + <p>demo@morello-box $ ./{executable}</p> + <OutputTest>{output}</OutputTest> + </ConsoleWindow> + </ConsoleWrapper> + ) +} diff --git a/src/fixtures/themes.js b/src/fixtures/themes.js index 42c3ace..f5c6246 100644 --- a/src/fixtures/themes.js +++ b/src/fixtures/themes.js @@ -18,21 +18,27 @@ export const Themes = (arch) => { arch: isCheri ? 'cheri' : 'aarch64', progressBar: { wrapper: { - height: isCheri ? '12px' : '22px', - width: '100%', - ...(isCheri ? { marginLeft: '3%' } : {}), - padding: '0px 10px', + display: 'flex', + flexDirection: 'column', + '> *:first-child': isCheri + ? { + alignSelf: 'center', + paddingBottom: '10px', + } + : {}, + width: isCheri ? '75%' : '100%', + ...(isCheri ? { marginLeft: 'auto', marginRight: 'auto' } : {}), }, background: { - height: '50%', + height: isCheri ? '6px' : '11px', width: '100%', background: isCheri ? '#000' : '#979797', padding: '0px', }, bar: { position: 'relative', - height: '50%', - top: '-50%', + top: isCheri ? '-6px' : '-11px', + height: isCheri ? '6px' : '11px', background: isCheri ? '#fff' : '#d9d9d9', }, }, @@ -147,8 +153,6 @@ export const Themes = (arch) => { top: '50%', left: '50%', width: '585px', - height: '258px', - maxHeight: '358px', borderRadius: '6px', border: '1px solid #818181', boxShadow: '0px 0px 4px #818181', @@ -161,7 +165,6 @@ export const Themes = (arch) => { top: '50%', left: '50%', width: '586px', - height: '258px', background: '#CE1C1C', }, page: isCheri @@ -170,10 +173,10 @@ export const Themes = (arch) => { background: '#717171', color: '#818181', outlineOffset: '-10px', - padding: '5px;', + padding: '30px 15px', } : { - padding: '10px', + padding: '20px', boxSizing: 'border-box', justifyContent: 'space-between', outline: '2px solid #ffffff', @@ -203,14 +206,14 @@ export const Themes = (arch) => { ? { justifyContent: 'center', width: '100%', - padding: '10px', + padding: '20px', color: '#fff', } : { boxSizing: 'border-box', height: '100%', width: '100%', - padding: '10px', + padding: '20px', outline: '2px solid #FFFFFF', outlineOffset: '-10px', },