Minor polishing

SasanLabs · Jul 4, 2021 · 709a958 · 709a958
1 parent ba1549d
commit 709a958
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 42 deletions.
diff --git a/facade-app/src/App.tsx b/facade-app/src/App.tsx
@@ -18,12 +18,7 @@ export default class App extends React.Component {
     isSuccessfullyLoaded: false,
     activateAboutUsPage: false,
     activateHomePage: true,
-  };
-
-  __initialState: GlobalState = {
-    isSuccessfullyLoaded: false,
-    activateAboutUsPage: false,
-    activateHomePage: false,
+    showHints: false,
   };
 
   _getResourcesInformationsForLevel(levelInformationRes: any) {
@@ -215,13 +210,16 @@ export default class App extends React.Component {
           setGlobalState={this.setGlobalState}
         ></Header>
         <RSuiteContainer className="show-container">
-          <RSuitesSidebar style={{ flex: "0 0 300px", minWidth: "20%" }}>
+          <RSuitesSidebar style={{ flex: "0 0 300px", minWidth: "25%" }}>
             <LeftNav
               globalState={this.state}
               setGlobalState={this.setGlobalState}
             />
           </RSuitesSidebar>
-          <Content {...this.state}></Content>
+          <Content
+            globalState={this.state}
+            setGlobalState={this.setGlobalState}
+          ></Content>
         </RSuiteContainer>
         <Footer globalState={this.state} setGlobalState={this.setGlobalState}>
           Footer

diff --git a/facade-app/src/Components/Content.tsx b/facade-app/src/Components/Content.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { GlobalState, LevelInformation } from "../interface/State";
+import { LevelInformation } from "../interface/State";
 import { Panel as RSuitePanel } from "rsuite";
 import {
   appendStaticResourcesToDocument,
@@ -9,25 +9,26 @@ import {
 import { VulnerabilityDefinitionResponse } from "../interface/GeneralContracts";
 import { HomePage } from "./HomePage";
 import { AboutUs } from "./AboutUs";
+import { Props } from "../interface/Props";
 
-export class Content extends React.Component<GlobalState> {
+export class Content extends React.Component<Props> {
   selectedLevel?: LevelInformation;
-  constructor(props: GlobalState) {
-    super(props);
-  }
 
-  componentDidUpdate(prevProps: GlobalState) {
+  componentDidUpdate(prevProps: Props) {
     if (
-      prevProps.activeLevel != this.props.activeLevel ||
-      prevProps.activeVulnerability != this.props.activeVulnerability ||
-      prevProps.activeApplication != this.props.activeApplication
+      prevProps.globalState.activeLevel !==
+        this.props.globalState.activeLevel ||
+      prevProps.globalState.activeVulnerability !==
+        this.props.globalState.activeVulnerability ||
+      prevProps.globalState.activeApplication !==
+        this.props.globalState.activeApplication
     ) {
       const {
         activeApplication,
         applicationData,
         activeVulnerability,
         activeLevel,
-      } = this.props;
+      } = this.props.globalState;
       const selectedApplicationState = applicationData?.find(
         (applicationState) =>
           applicationState.applicationName === activeApplication
@@ -72,8 +73,13 @@ export class Content extends React.Component<GlobalState> {
   }
 
   render() {
-    const { activeVulnerability, activateHomePage, activateAboutUsPage } =
-      this.props;
+    const {
+      activeVulnerability,
+      activateHomePage,
+      activateAboutUsPage,
+      showHints,
+    } = this.props.globalState;
+    const { setGlobalState } = this.props;
     return (
       <div>
         {activateHomePage ? (
@@ -106,13 +112,32 @@ export class Content extends React.Component<GlobalState> {
                     <div id="__content__" />
                   </div>
                 </RSuitePanel>
+                {this.selectedLevel &&
+                this.selectedLevel.hints &&
+                this.selectedLevel.hints.length > 0 ? (
+                  <RSuitePanel
+                    header="Hints"
+                    className="VulnerableApp-Facade-Content-Hint-Content"
+                    collapsible={true}
+                    defaultExpanded={false}
+                    expanded={showHints}
+                    onSelect={() => setGlobalState({ showHints: !showHints })}
+                  >
+                    <ol>
+                      {this.selectedLevel.hints.map((hint) => {
+                        return <li>{hint.description}</li>;
+                      })}
+                    </ol>
+                  </RSuitePanel>
+                ) : (
+                  <div />
+                )}
               </div>
             ) : (
               <div></div>
             )}
           </div>
         )}
-        ;
       </div>
     );
   }

diff --git a/facade-app/src/Components/Footer.tsx b/facade-app/src/Components/Footer.tsx
@@ -3,10 +3,6 @@ import { Footer as RSuiteFooter, Navbar as RSuiteNavBar } from "rsuite";
 import { Props } from "../interface/Props";
 
 export class Footer extends React.Component<Props> {
-  constructor(props: Props) {
-    super(props);
-  }
-
   render() {
     return (
       <RSuiteFooter>

diff --git a/facade-app/src/Components/Header.tsx b/facade-app/src/Components/Header.tsx
@@ -11,21 +11,24 @@ import {
 import { Props } from "../interface/Props";
 
 export class Header extends React.Component<Props> {
-  constructor(props: Props) {
-    super(props);
-  }
-
   render() {
     const { setGlobalState } = this.props;
     return (
       <RSuiteHeader>
         <RSuiteNavBar appearance="inverse">
           <RSuiteNavBar.Header>
-            <img src={VulnerableAppLogo} width="55" height="55" />
+            <img src={VulnerableAppLogo} width="55" height="55" alt="" />
           </RSuiteNavBar.Header>
           <RSuiteNavBar.Body>
             <RSuiteNav>
-              <RSuiteNav.Item>
+              <RSuiteNav.Item
+                onSelect={() =>
+                  setGlobalState({
+                    activateHomePage: true,
+                    activateAboutUsPage: false,
+                  })
+                }
+              >
                 <b>Owasp VulnerableApp-Facade</b>
               </RSuiteNav.Item>
             </RSuiteNav>

diff --git a/facade-app/src/Components/HomePage.tsx b/facade-app/src/Components/HomePage.tsx
@@ -22,7 +22,10 @@ export class HomePage extends React.Component {
           distributed farm of Vulnerable Applications such that they can be
           built agnostic to tech stacks.
           <p>Following is the design diagram of Owasp VulnerableApp-Facade:</p>
-          <img src="/images/VulnerableApp-facade.jpeg" />
+          <img
+            src="/images/VulnerableApp-facade.jpeg"
+            alt="Unable to lead the design diagram"
+          />
           <p>
             Here VulnerableApp-Facade is running as a gateway or a proxy which
             is routing calls to actual Vulnerable Applications based on a

diff --git a/facade-app/src/Components/LeftNav.tsx b/facade-app/src/Components/LeftNav.tsx
@@ -28,6 +28,7 @@ export class LeftNav extends React.Component<Props> {
       activeLevel: levelIdentifier,
       activateHomePage: false,
       activateAboutUsPage: false,
+      showHints: false,
     });
   }
 
@@ -41,6 +42,7 @@ export class LeftNav extends React.Component<Props> {
       activeLevel: undefined,
       activateHomePage: false,
       activateAboutUsPage: false,
+      showHints: false,
     });
   }
 
@@ -49,10 +51,15 @@ export class LeftNav extends React.Component<Props> {
     vulnerabilityName: string,
     levels: Array<LevelInformation>
   ) {
+    const { activeApplication, activeVulnerability, activeLevel } =
+      this.props.globalState;
     return (
       <RSuiteDropdown
         eventKey={applicationName + "." + vulnerabilityName}
         title={vulnerabilityName}
+        activeKey={
+          activeApplication + "." + activeVulnerability + "." + activeLevel
+        }
         onOpen={() =>
           this._handleVulnerabilityTypeSelect(
             applicationName,
@@ -94,7 +101,6 @@ export class LeftNav extends React.Component<Props> {
   _getApplicationVulnerabilities(
     applicationName: string,
     vulnerabilityDefinition: Array<VulnerabilityDefinition>,
-    isApplicationDropDownClosed: boolean,
     activeApplication?: string
   ) {
     return (
@@ -103,11 +109,7 @@ export class LeftNav extends React.Component<Props> {
       >
         <RSuiteSidenav.Body>
           <RSuiteNav>
-            <RSuiteDropdown
-              eventKey={applicationName}
-              title={applicationName}
-              open={!isApplicationDropDownClosed}
-            >
+            <RSuiteDropdown eventKey={applicationName} title={applicationName}>
               <RSuiteDropdown.Item divider />
               {vulnerabilityDefinition.map((vulnerabilityDefinition) =>
                 this._getApplicationVulnerabilityLevels(
@@ -126,7 +128,7 @@ export class LeftNav extends React.Component<Props> {
   render() {
     const { isSuccessfullyLoaded, applicationData, activeApplication } =
       this.props.globalState;
-    let index = 0;
+    //    let index = 0;
     if (isSuccessfullyLoaded && applicationData) {
       return (
         <div>
@@ -137,7 +139,7 @@ export class LeftNav extends React.Component<Props> {
             return this._getApplicationVulnerabilities(
               applicationName,
               vulnerabilityDefinitions,
-              index++ === 0,
+              // index++ === 0,
               activeApplication
             );
           })}

diff --git a/facade-app/src/index.css b/facade-app/src/index.css
@@ -1,3 +1,4 @@
+@import "~rsuite/dist/styles/rsuite-dark.css";
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -14,9 +15,11 @@ code {
 
 .VulnerableApp-Facade-HomePage-Content,
 .VulnerableApp-Facade-AboutUs-Content,
-.VulnerableApp-Facade-Content {
+.VulnerableApp-Facade-Content,
+.VulnerableApp-Facade-Content-Hint-Content {
   font-size: 16px;
   font-weight: normal;
+  color: #575757;
 }
 
 .VulnerableApp-Facade-AboutUs-Content-Header,
@@ -25,7 +28,9 @@ code {
 .VulnerableApp-Facade-HomePage-Content-Header .rs-panel-heading,
 .VulnerableApp-Facade-Content-Vulnerability-Description-Header
   .rs-panel-heading,
-.VulnerableApp-Facade-Content-Practice-Vulnerability-Header .rs-panel-heading {
+.VulnerableApp-Facade-Content-Practice-Vulnerability-Header .rs-panel-heading,
+.VulnerableApp-Facade-Content-Hint-Content .rs-panel-heading {
   font-size: 24px;
   font-weight: bold;
+  color: #575757;
 }
diff --git a/facade-app/src/interface/State.tsx b/facade-app/src/interface/State.tsx
@@ -118,4 +118,5 @@ export interface GlobalState {
   isSuccessfullyLoaded: boolean;
   activateHomePage: boolean;
   activateAboutUsPage: boolean;
+  showHints: boolean;
 }