UI: Add a countdown timer for OTP expiration

Author: cakekoa

monkey/monkey_island/cc/ui/package-lock.json

@@ -100,6 +100,7 @@
     "react-router-dom": "6.8.2",
     "react-spinners": "0.13.8",
     "react-table": "^6.11.5",
+    "react-timer-hook": "^3.0.5",
     "react-tsparticles": "^1.43.1",
     "remark-breaks": "3.0.2",
     "request": "^2.88.2",

monkey/monkey_island/cc/ui/package.json

@@ -8,6 +8,8 @@ import GenerateLocalLinuxCurl from '../commands/local_linux_curl';
 import CommandDisplay from '../utils/CommandDisplay';
 import {Button, Form} from 'react-bootstrap';
 import IslandHttpClient, { APIEndpoint } from '../../../IslandHttpClient';
+import { useTimer } from 'react-timer-hook';
+import { CommandExpirationTimer } from '../utils/CommandExpirationTimer';
 
 
 const LocalManualRunOptions = (props) => {
@@ -24,6 +26,12 @@ const getContents = (props) => {
     [OS_TYPES.LINUX_64]: 'Linux 64bit'
   }
 
+  const {
+    seconds,
+    minutes,
+    restart
+  } = useTimer({ expiryTimestamp: new Date() });
+
   const [otp, setOtp] = useState('');
   const [osType, setOsType] = useState(OS_TYPES.WINDOWS_64);
   const [selectedIp, setSelectedIp] = useState(props.ips[0]);
@@ -52,8 +60,9 @@ const getContents = (props) => {
   }
 
   function getOtp() {
-    IslandHttpClient.get(APIEndpoint.agent_otp).then(res =>{
+    IslandHttpClient.get(APIEndpoint.agent_otp).then(res => {
       setOtp(res.body.otp);
+      restart(newExpirationTime());
     });
   }
 
@@ -66,6 +75,13 @@ const getContents = (props) => {
     }
   }
 
+  function newExpirationTime() {
+    const time = new Date();
+    time.setSeconds(time.getSeconds() + 120);
+    console.log('timeout is now: ' + time);
+    return time;
+  }
+
   return (
     <>
       <DropdownSelect defaultKey={OS_TYPES.WINDOWS_64} options={osTypes} onClick={setOsType} variant={'outline-monkey'}/>
@@ -84,7 +100,14 @@ const getContents = (props) => {
         </div>
       </div>
       <CommandDisplay commands={commands} onCopy={getOtp} />
-      <Button style={{'float': 'right'}} title="Copy to Clipboard" onClick={getOtp}>Re-generate</Button>
+      <div style={{marginTop: '-0.5em', marginBottom: '0.5em'}}>
+        <CommandExpirationTimer minutes={minutes} seconds={seconds}/>
+      </div>
+      <div style={{textAlign: 'right'}}>
+        <span>
+          <Button title="Copy to Clipboard" onClick={getOtp}>Re-generate</Button>
+        </span>
+      </div>
     </>
   )
 }

monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RunManually/LocalManualRunOptions.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export function CommandExpirationTimer({ minutes, seconds }) {
+
+    function formatDigits(number) {
+      return number.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false})
+    }
+
+    function generateText() {
+      if (minutes === 0 && seconds === 0) {
+        return 'Command expired';
+      } else {
+        return 'Command expires in: ' + formatDigits(minutes) + ':' + formatDigits(seconds);
+      }
+    }
+
+    return (
+      <div style={{textAlign: 'right'}}>
+        {generateText()}
+      </div>
+    );
+}