Add console output for read demo (#38)

* Add console output for read demo * "Fix" styling on read demo b
digicatapult · Sep 16, 2022 · 647fb06 · 647fb06
1 parent 9d07e4f
commit 647fb06
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -115,10 +115,10 @@ export default function ReadDemo(props) {
         )}
         <Box {...readDemo}>
           {!readDemo.isPasswordSet && (
-            <>
+            <Col size={10}>
               <Row
                 justifyContent={isMorello ? 'center' : 'flex-start'}
-                marginTop={isMorello ? '70px' : '0px'}
+                marginTop={isMorello ? '120px' : '0px'}
               >
                 {isMorello && <img src={KeychainIcon} />}
                 <DemoText {...theme.font}>
@@ -129,7 +129,7 @@ export default function ReadDemo(props) {
               </Row>
               <Container
                 styles={{
-                  paddingTop: '100px',
+                  marginTop: '100px',
                 }}
                 size={10}
               >
@@ -153,23 +153,28 @@ export default function ReadDemo(props) {
                   </Container>
                 </form>
               </Container>
-            </>
+            </Col>
           )}
           {readDemo.isPasswordSet && isMorello && (
             <Col size={10}>
-              <Row justifyContent={'center'} marginTop={'49px'}>
+              <Row justifyContent={'center'} marginTop={'120px'}>
                 <img src={KeychainIcon} />
                 <DemoText {...theme.font}>
                   This application will store your password securely.
                   <br />
                   Please input a keyword of choice.
                 </DemoText>
               </Row>
-              <Row justifyContent={'center'}>
+              <Container
+                styles={{
+                  marginTop: '100px',
+                }}
+                size={10}
+              >
                 <DemoText {...theme.font}>
                   Password has been submitted. Now you can attempt to hack
                 </DemoText>
-              </Row>
+              </Container>
             </Col>
           )}
           {readDemo.isPasswordSet && !isMorello && (

diff --git 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 (
     <Window data-cy={'hacker-app-modal'} styles={theme.modal.window}>
       <Title title={readDemo.modalTitle} arch={theme.name} />
-      <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
@@ -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
@@ -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
@@ -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
@@ -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',
           },