Skip to content

Commit

Permalink
Merge pull request #118 from SasanLabs/UI_Handling
Browse files Browse the repository at this point in the history 
Fixing UI little
  • Loading branch information
@preetkaran20
preetkaran20 authored Apr 22, 2020
2 parents f44dd24 + 117a056 commit 8bcc269
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 81 deletions.
120 changes: 61 additions & 59 deletions src/main/resources/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<body onload="doGetAjaxCall(generateMasterDetail, 'allEndPointJson', true);">
<!-- Special thanks to Amazing Tutorial on FlexBox: https://www.youtube.com/watch?v=k32voqQhODc-->
<div class="navbar" style="background-color: #e4e5e6;">
<div class="navbar" style="background-color: blanchedalmond;">
<div class="navbar-item navbar-brand">
<svg width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
Expand All @@ -35,74 +35,76 @@
</div>
</div>
</div>
<!-- Special thanks to video on Master Detail: https://www.youtube.com/watch?v=cZ6HB6pv23M -->
<div id="homeContainer" class="homeContainer">
<div id="chooseMode" class="chooseMode">
<h2>
Welcome Security enthusiast
</h2>
Are you looking to ?
<div>
<button id="learnAndPracticeBtn" class="mode-item">Learn Security</button>
<button id="testScannerBtn" class="mode-item">Test Scanner</button>
<div id="pageContainer">
<!-- Special thanks to video on Master Detail: https://www.youtube.com/watch?v=cZ6HB6pv23M -->
<div id="homeContainer" class="homeContainer">
<div id="chooseMode" class="chooseMode">
<h2>
Welcome Security enthusiast
</h2>
Are you looking to ?
<div>
<button id="learnAndPracticeBtn" class="mode-item">Learn Security</button>
<button id="testScannerBtn" class="mode-item">Test Scanner</button>
</div>
</div>
</div>
<div class="description">
<!-- TODO need to write it. -->
</div>
<div id="learnAndPractice" class="hide-component">
<div class="chooseVulnerability">
<h2>Please choose the vulnerability which you are looking to learn.</h2>
<div class="description">
<!-- TODO need to write it. -->
</div>
<div class="col-3 master"></div>
<div>
<div id="vulnerabilityDescription"></div>
<button id="vulnPracticeBtn" class="mode-item">Practice Vulnerability</button>
<div id="vulnPractice" class="hide-component">
<div class="col-2 inner-master master"></div>
<div class="col-6 detail">
<!-- <div id="vulnerabilityDescription"></div> -->
<div id="vulnerabilityLevelDescription"></div>
<button id="backBtn" onclick="back()" class="hidden-md">
< Back</button>
<h1 class="detail-title text-center"></h1>
<div>
<button id="showHelp">Show Help</button>
<button id="hideHelp" disabled=true>Hide Help</button>
<div id="helpText"></div>
</div>
<div id="learnAndPractice" class="hide-component">
<div class="chooseVulnerability">
<h2>Please choose the vulnerability which you are looking to learn.</h2>
</div>
<div class="col-3 master"></div>
<div>
<div id="vulnerabilityDescription"></div>
<button id="vulnPracticeBtn" class="mode-item">Practice Vulnerability</button>
<div id="vulnPractice" class="hide-component">
<div class="col-2 inner-master master"></div>
<div class="col-6 detail">
<!-- <div id="vulnerabilityDescription"></div> -->
<div id="vulnerabilityLevelDescription"></div>
<button id="backBtn" onclick="back()" class="hidden-md">
< Back</button>
<h1 class="detail-title text-center"></h1>
<div>
<button id="showHelp">Show Help</button>
<button id="hideHelp" disabled=true>Hide Help</button>
<div id="helpText"></div>
</div>
</div>
</div>
<button id="vulnLearnBtn" class="mode-item hide-component">Learn Vulnerability</button>
<div id="dynamicScripts">
</div>
</div>
<button id="vulnLearnBtn" class="mode-item hide-component">Learn Vulnerability</button>
<div id="dynamicScripts">
<div id="testScanner" class="hide-component">
Search
</div>
</div>
<div id="testScanner" class="hide-component">
Search
<script src="vulnerableApp.js"></script>
</div>
<div id="contribution">
<h4>Want to contribute to VulnerableApp ?</h4>
</div>
<div id="aboutContainer" class="aboutContainer">
<div>
As Web Applications are becoming very popular these days, there comes the needs to
secure them and there are many security vulnerability finding tools but while
developing those tools developers need to test them but there are no or
very less such extensible vulnerable apps for testing those tools.
There are deliberately vulnerable applications exists in the market but they
are not written with such an intent and hence lags extensibility e.g. adding new vulnerablities is quite
difficult.
</div>
<div>
<h4>Want to contribute to VulnerableApp ?</h4>
So generally developer write there own vulnerable applications but that cause productivity loss and
also many times rework is done. This Project VulnerableApp is build keeping these factors in mind so
this
project
is scalable, extensible, easiers to integrate and easier to learn.
</div>
</div>
<script src="vulnerableApp.js"></script>
</div>

<div id="aboutContainer" class="aboutContainer">
<div>
As Web Applications are becoming very popular these days, there comes the needs to
secure them and there are many security vulnerability finding tools but while
developing those tools developers need to test them but there are no or
very less such extensible vulnerable apps for testing those tools.
There are deliberately vulnerable applications exists in the market but they
are not written with such an intent and hence lags extensibility e.g. adding new vulnerablities is quite
difficult.
</div>
<div>
So generally developer write there own vulnerable applications but that cause productivity loss and
also many times rework is done. This Project VulnerableApp is build keeping these factors in mind so this
project
is scalable, extensible, easiers to integrate and easier to learn.
</div>
</div>
</body>

Expand Down
18 changes: 18 additions & 0 deletions src/main/resources/static/templates/JWTVulnerability/LEVEL_1/JWT_Level1.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,22 @@
#description {
font-size: 15px;
visibility: hidden;
display: flex;
}

#jwtToken {
flex: 1;
word-wrap: break-word;
}

#fetchTokenButton {
background: blueviolet;
display: inline-block;
padding: 8px 8px;
margin: 2px;
border: 2px solid transparent;
border-radius: 3px;
transition: 0.2s opacity;
color: #FFF;
font-size: 12px;
}
19 changes: 19 additions & 0 deletions src/main/resources/static/templates/JWTVulnerability/LEVEL_2/JWT_Level2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,28 @@
#description {
font-size: 15px;
visibility: hidden;
margin: 5px;
}

#Note, #verificationResponse {
font-size: 15px;
margin: 5px;
}

#jwtToken {
font-weight: normal;
word-wrap: break-word;
margin: 5px;
}

#fetchTokenButton {
background: blueviolet;
display: inline-block;
padding: 8px 8px;
margin: 2px;
border: 2px solid transparent;
border-radius: 3px;
transition: 0.2s opacity;
color: #FFF;
font-size: 12px;
}
24 changes: 12 additions & 12 deletions src/main/resources/static/templates/JWTVulnerability/LEVEL_2/JWT_Level2.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<div id="jwt_level_2">
<div>
<div id="fetchToken">
<button id="fetchTokenButton">Click here to fetch the JWT
token</button>
</div>
<div id="description">
JWTToken: <div id="jwtToken"></div>
<button id="verifyToken">Verify</button>
<div id="verificationResponse"></div>
<div>
Note: Please clear the cookies from browser.
</div>
<div id="fetchToken">
<button id="fetchTokenButton">
Click here to fetch the JWT token
</button>
</div>
<div id="description">
JWTToken: <div id="jwtToken"></div>
</div>
<button id="verifyToken">Verify</button>
<div id="verificationResponse"></div>
<div id="Note">
Note: Please clear the cookies from browser.
</div>
</div>
40 changes: 30 additions & 10 deletions src/main/resources/static/vulnerableApp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ body, html {
flex: 1;
font-size: 20px;
align-items: center;
color: darkgrey;
color: burlywood;
align-content: center;
}

Expand All @@ -46,7 +46,7 @@ div.navbar-item-menu a {
}

.homeContainer, .aboutContainer {
background: darkgray;
background: burlywood;
display: flex;
flex-direction: column;
text-align: center;
Expand Down Expand Up @@ -132,24 +132,24 @@ div.navbar-item-menu a {
*/
.master-item {
font-size: 24px;
border-bottom: 2px solid darkgray;
border-bottom: 2px solid burlywood;
padding: 10px;
}

.master-item:hover, .master-item.active-item{
background: darkgray;
background: burlywood;
color: white;
cursor: pointer;
}

.inner-master-item {
font-size: 18px;
border-bottom: 2px solid darkgray;
border-bottom: 2px solid burlywood;
padding: 10px;
}

.inner-master-item:hover, .inner-master-item.active-item{
background: darkgray;
background: burlywood;
color: white;
cursor: pointer;
}
Expand All @@ -167,7 +167,6 @@ div.navbar-item-menu a {
z-index: 11;
color: black;
height: 100%;
background: darkgray;
}

#vulnerabilityDescription {
Expand All @@ -186,7 +185,7 @@ div.navbar-item-menu a {

#backBtn {
color: black;
border: 1px solid darkgray;
border: 1px solid;
background: white;
border-radius: 5px;
padding: 5px 10px;
Expand All @@ -197,14 +196,35 @@ div.navbar-item-menu a {
#backBtn:hover {
cursor: pointer;
color: white;
background: darkgray;
}

#helpText {
text-align: left;
overflow-wrap: normal;
}

#showHelp, #hideHelp {
background: blueviolet;
display: inline-block;
padding: 4px 4px;
margin: 1px;
border: 1px solid transparent;
border-radius: 2px;
transition: 0.2s opacity;
color: #FFF;
font-size: 10px;
}

#pageContainer {
background: burlywood;
overflow-y: auto;
height: 100%;
}

#contribution {
font-size: 15px;
}

@media only screen and (min-width: 786px) {
.col-2 {
width: 15%;
Expand All @@ -227,7 +247,7 @@ div.navbar-item-menu a {
}

.master {
border-right: 3px solid darkgray;
border-right: 3px solid burlywood;
}

}

0 comments on commit 8bcc269

Please sign in to comment.