dubey/WebGoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cookies and params modification. Hints update as well

Browse Source
This commit is contained in:
Jason White 2014-09-07 01:35:42 -04:00
parent 8ae120404f
commit b06a0a2c7c
6 changed files with 185 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/main/webapp/WEB-INF/pages/main_new.jsp
View File

@ -60,7 +60,7 @@
</head> </head>
<body class="animated fadeIn" ng-app="goatApp"> <body class="animated fadeIn" ng-app="goatApp">
<section id="container"> <section id="container" ng-controller="goatLesson">
<header id="header"> <header id="header">
<!--logo start--> <!--logo start-->
<div class="brand"> <div class="brand">
@ -72,8 +72,8 @@
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
</button> </button>
</div><!--toggle navigation end--> </div><!--toggle navigation end-->
<div class="lessonTitle"> <div class="lessonTitle" >
<h1>Lesson Title in here</h1> <h1 id="lessonTitle">Lesson Title in here</h1>
</div><!--lesson title end--> </div><!--lesson title end-->
<div class="user-nav pull-right"> <div class="user-nav pull-right">
<button type="button" class="btn btn-default"> <button type="button" class="btn btn-default">
@ -90,7 +90,7 @@
<!--sidebar left start--> <!--sidebar left start-->
<aside class="sidebar"> <aside class="sidebar">
<div id="leftside-navigation" class="nano" ng-controller="goatLessonMenu"> <div id="leftside-navigation" class="nano">
<ul class="nano-content"> <ul class="nano-content">
<li class="sub-menu" ng-repeat="item in menuTopics"> <li class="sub-menu" ng-repeat="item in menuTopics">
<a ng-click="expanded = !expanded" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a> <a ng-click="expanded = !expanded" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a>
@ -112,27 +112,21 @@
<!--main content start--> <!--main content start-->
<section class="main-content-wrapper"> <section class="main-content-wrapper">
<section id="main-content" ng-controller="lessonHelpController"> <section id="main-content" > <!-- ng-controller="lessonController" -->
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<div class="col-md-12" align="left"> <div class="col-md-12" align="left">
<div class="panel"> <div class="panel">
<div class="panel-body"> <div class="panel-body">
<button type="button" id="showSourceBtn" class="btn btn-primary btn-xs">Java [Source]</button> <button type="button" id="showSourceBtn" class="btn btn-primary btn-xs" ng-click="showLessonSource()">Java [Source]</button>
<button type="button" id="showSolutionBtn" class="btn btn-primary btn-xs">Solution</button> <button type="button" id="showSolutionBtn" class="btn btn-primary btn-xs" ng-click="showLessonSolution()">Solution</button>
<button type="button" id="showPlanBtn" class="btn btn-primary btn-xs">Lesson Plan</button> <button type="button" id="showPlanBtn" class="btn btn-primary btn-xs" ng-click="showLessonPlan()">Lesson Plan</button>
<button type="button" id="showHintsBtn" class="btn btn-primary btn-xs" ng-click="viewHints()">Hints</button>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<!--<div class="panel" id="buttonPanel">-->
<!--<button type="button" id="showParamsCookiesBtn" class="btn btn-primary btn-xs">Params/Cookies</button>-->
<!--<button type="button" id="showHintsBtn" class="btn btn-primary btn-xs lessonHelpBtn">Hints</button>-->
<!--<button type="button" id="showPlanBtn" class="btn btn-primary btn-xs lessonHelpBtn">Lesson Plan</button>-->
<!--<button type="button" id="showSourceBtn" class="btn btn-primary btn-xs lessonHelpBtn">Java [Source]</button> <!-- ng-click="showSource('lg') -->
<!--<button type="button" id="showSolutionBtn" class="btn btn-primary btn-xs lessonHelpBtn">Solution</button>-->
<!-- ng-click="showSolution('lg') -->
<!--</div> -->
<div class="panel" > <div class="panel" >
<div class="panel-body" id="lesson_content"> <div class="panel-body" id="lesson_content">
<b>This should default to the "How to Work with Webgoat" lesson</b> <b>This should default to the "How to Work with Webgoat" lesson</b>
@ -146,15 +140,9 @@
<div class="panel"> <div class="panel">
<div class="panel-body"> <div class="panel-body">
<div align="left"> <div align="left">
<button id="tshowParamsCookiesBtn" type="button" class="btn btn-xs" ng-click="viewCookiesAndParams()">Params / Cookies</button> <h3>Cookies / Parameters</h3>
<button id="showHintsBtn" type="button" class="btn btn-xs">Hints</button>
</div> </div>
<hr /> <hr />
<div id="hintsView">
<h3>Hints</h3>
<p>{{scope.hints}}</p>
</div>
<div id="cookiesAndParamsView"> <div id="cookiesAndParamsView">
<div class="cookiesView"> <div class="cookiesView">
<h4>Cookies</h4> <h4>Cookies</h4>
@ -179,7 +167,7 @@
<tr><th>Param</th><th>Value</th></tr> <tr><th>Param</th><th>Value</th></tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="param in params"> <tr ng-repeat="param in parameters">
<td>{{param.name}}</td> <td>{{param.name}}</td>
<td>{{param.value}}</td> <td>{{param.value}}</td>
</tr> </tr>
@ -194,6 +182,19 @@
</div><!--col-md-4 end--> </div><!--col-md-4 end-->
</div> </div>
<div id="lessonHelpsWrapper"> <div id="lessonHelpsWrapper">
<div class="row lessonHelp" id="lesson_hint_row">
<div class="col-md-12">
<h4>Hints</h4>
<div class="panel" >
<div class="panel-body" id="lesson_hint">
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="showPrevHintBtn" ng-click="viewPrevHint()"></span>
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="showNextHintBtn" ng-click="viewNextHint()"></span>
<br/>
{{curHint}}
</div>
</div>
</div>
</div>
<div class="row lessonHelp" id="lesson_cookies_row"> <div class="row lessonHelp" id="lesson_cookies_row">
<div class="col-md-12"> <div class="col-md-12">
<h4>Lesson Parameters and Cookies</h4> <h4>Lesson Parameters and Cookies</h4>
@ -219,7 +220,7 @@
<h4>Lesson Plan</h4> <h4>Lesson Plan</h4>
<div class="panel" > <div class="panel" >
<div class="panel-body" id="lesson_plan"> <div class="panel-body" id="lesson_plan">
<!-- allowing jQuery to handle this one -->
</div> </div>
</div> </div>
</div> </div>
@ -227,7 +228,7 @@
<div class="row lessonHelp" id="lesson_solution_row"> <div class="row lessonHelp" id="lesson_solution_row">
<div class="col-md-12"> <div class="col-md-12">
<h4>Lesson Solution</h4> <h4>Lesson Solution</h4>
<div class="panel" > <div class="panel">
<div class="panel-body" id="lesson_solution"> <div class="panel-body" id="lesson_solution">
</div> </div>
</div> </div>
@ -236,8 +237,9 @@
<div class="row lessonHelp" id="lesson_source_row"> <div class="row lessonHelp" id="lesson_source_row">
<div class="col-md-12"> <div class="col-md-12">
<h4>Lesson Source Code</h4> <h4>Lesson Source Code</h4>
<div class="panel" > <div class="panel">
<div class="panel-body" id="lesson_source"> <div class="panel-body" id="lesson_source">
<pre>{{source}}</pre>
</div> </div>
</div> </div>
</div> </div>
@ -260,17 +262,10 @@
var DEBUG_FORM_SUBMISSION = false; var DEBUG_FORM_SUBMISSION = false;
$(document).ready(function() { $(document).ready(function() {
// bind to click events on menu links
/*$('.menu-link').bind('click', function(event) {
event.preventDefault();
$.get(this.href, {}, function(reply) {
$("#lesson_content").html(reply);
goat.utils.showLessonSource();
}, "html");
});*/
app.init(); app.init();
//can be augmented later to 'resume' for a given user ... currently kluged to start at fixed lesson
var url = 'attack?Screen=32&menu=5';
angular.element($('#leftside-navigation')).scope().renderLesson(url);
}); });
// make all forms ajax forms // make all forms ajax forms
var options = { var options = {

11
src/main/webapp/css/main.css
View File

@ -250,7 +250,7 @@ img {
} }
.main-content-wrapper #main-content { .main-content-wrapper #main-content {
background: url('img/webBg.png') no-repeat top left; /*background: url('img/webBg.png') no-repeat top left;*/
border-top: solid thin #e7e8ec; border-top: solid thin #e7e8ec;
display: inline-block; display: inline-block;
padding: 15px 15px 0 15px; padding: 15px 15px 0 15px;
@ -782,10 +782,6 @@ fieldset[disabled] .btn-warning.active {
display: none; display: none;
} }
#hintsView, #cookiesAndParamsView {
display:none;
}
.table-nonfluid { .table-nonfluid {
width:auto; width:auto;
} }
@ -796,6 +792,11 @@ fieldset[disabled] .btn-warning.active {
font-size: x-small; font-size: x-small;
} }
/* HINTS */
#hintsViewTop{
display: none;
background-color: #eee;
}
.info { .info {
color:#e84c3d; color:#e84c3d;
font-weight: bold; font-weight: bold;

4
src/main/webapp/js/goatConstants.js
View File

@ -20,7 +20,9 @@ var goatConstants = {
lessonPlanService:'service/lessonplan.mvc', lessonPlanService:'service/lessonplan.mvc',
menuService: 'service/lessonmenu.mvc', menuService: 'service/lessonmenu.mvc',
// literals // literals
notFound: 'Could not find' notFound: 'Could not find',
noHints: 'There are no hints defined.'
}; };

209
src/main/webapp/js/goatControllers.js
View File

@ -3,42 +3,152 @@
/* ### GOAT CONTROLLERS ### */ /* ### GOAT CONTROLLERS ### */
/** Menu Controller /** Lesson Controller (includes menu stuff)
* prepares and updates menu topic items for the view * prepares and updates menu topic items for the view
*/ */
goat.controller('goatLessonMenu', function($scope, $http, $modal, $log, $templateCache) { goat.controller('goatLesson', function($scope, $http, $modal, $log, $templateCache) {
$scope.cookies= [];
$scope.params=[];
//TODO: implement via separate promise and use config for menu (goat.data.loadMenuData()) //TODO: implement via separate promise and use config for menu (goat.data.loadMenuData())
$http({method: 'GET', url: goatConstants.lessonService}).then( $http({method: 'GET', url: goatConstants.lessonService}).then(
function(menuData) { function(menuData) {
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data)); var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
$scope.menuTopics = menuItems; $scope.menuTopics = menuItems;
}, },
function(error) { function(error) {
// TODO - handle this some way other than an alert // TODO - handle this some way other than an alert
console.error("Error rendering menu: " + error); console.error("Error rendering menu: " + error);
} }
); );
$scope.renderLesson = function(url) { $scope.renderLesson = function(url) {
//console.log(url + ' was passed in'); //console.log(url + ' was passed in');
// use jquery to render lesson content to div // use jquery to render lesson content to div
$scope.hintIndex = 0;
var curScope = $scope;
curScope.parameters = goat.utils.scrapeParams(url);
goat.data.loadLessonContent(url).then( goat.data.loadLessonContent(url).then(
function(reply) { function(reply) {
$("#lesson_content").html(reply); $("#lesson_content").html(reply);
// hook forms //hook forms
goat.utils.makeFormsAjax(); goat.utils.makeFormsAjax();
$('#hintsView').hide();
//render lesson title //render lesson title
$('#lessonTitle').text(goat.utils.extractLessonTitle($(reply))); $('#lessonTitle').text(goat.utils.extractLessonTitle($(reply)));
// adjust menu to lessonContent size if necssary //@KLUGE to remove h1 after extracting and moving it to top
$('#lesson_content h1').remove()
// adjust menu to lessonContent size if necssary
//@TODO: this is still clunky ... needs some TLC //@TODO: this is still clunky ... needs some TLC
if ($('div.panel-body').height() > 400) { if ($('div.panel-body').height() > 400) {
$('#leftside-navigation').height($(window).height()); $('#leftside-navigation').height($(window).height());
} }
goat.lesson.lessonInfo = new goat.lesson.CurLesson(url); //cookies
goat.lesson.lessonInfo.loadInfo(); //uses pseudo and actual service calls goat.data.loadCookies().then(
// @TODO: convert to real services (and more angularjs, likely ... in phase 2) function(resp) {
} curScope.cookies = resp;
}
);
//hints
curScope.hintIndex=0;
goat.data.loadHints().then(
function (resp) {
curScope.hints = resp;
if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
goat.utils.displayButton('showHintsBtn',true);
} else {
goat.utils.displayButton('showHintsBtn',false);
}
}
);
//source
goat.data.loadSource().then(
function(resp) {
curScope.source = resp;
}
);
//plan
goat.data.loadPlan().then(
function(resp) {
curScope.plan = resp;
}
);
//solution
goat.data.loadSolution().then(
function(resp) {
curScope.solution = resp;
}
);
goat.utils.scrollToTop();
}
); );
}; };
$scope.showLessonSource = function () {
$('.lessonHelp').hide();
$('#lesson_source_row').show();
goat.utils.scrollToHelp();
}
$scope.showLessonPlan = function () {
$('.lessonHelp').hide();
$("#lesson_plan").html($scope.plan);
$('#lesson_plan_row').show();
goat.utils.scrollToHelp();
}
$scope.showLessonSolution = function () {
$('.lessonHelp').hide();
$("#lesson_solution").html($scope.solution);
$('#lesson_solution_row').show();
goat.utils.scrollToHelp();
}
$scope.manageHintButtons = function () {
if ($scope.hintIndex === $scope.hints.length -1) {
$('#showNextHintBtn').css('visibility','hidden');
} else if ($scope.hintIndex < $scope.hints.length - 1) {
$('#showNextHintBtn').css('visibility','visible');
}
//
if ($scope.hintIndex === 0) {
$('#showPrevHintBtn').css('visibility','hidden');
} else if ($scope.hintIndex > 0) {
$('#showPrevHintBtn').css('visibility','visible');
}
};
$scope.viewHints = function() {
if (!$scope.hints) {
return;
}
$('.lessonHelp').hide();
$('#lesson_hint_row').show();
goat.utils.scrollToHelp();
$scope.curHint = $scope.hints[$scope.hintIndex].hint;
$scope.manageHintButtons();
};
$scope.viewNextHint = function() {
$scope.hintIndex++;
$scope.curHint = $scope.hints[$scope.hintIndex].hint;
$scope.manageHintButtons();
};
$scope.viewPrevHint = function () {
$scope.hintIndex--;
$scope.curHint = $scope.hints[$scope.hintIndex].hint;
$scope.manageHintButtons();
};
$scope.hideHints = function () {
};
}).animation('.slideDown', function() { }).animation('.slideDown', function() {
var NgHideClassName = 'ng-hide'; var NgHideClassName = 'ng-hide';
return { return {
@ -53,53 +163,6 @@ goat.controller('goatLessonMenu', function($scope, $http, $modal, $log, $templat
} }
} }
}; };
}); });
goat.controller('lessonHelpController', function($scope) {
$scope.cookies=[];
$scope.params=[];
$scope.viewCookiesAndParams = function() {
$('#hintsView').hide();
if (goat.lesson.lessonInfo.cookies && goat.lesson.lessonInfo.cookies.length > 0) {
$scope.cookies=goat.lesson.lessonInfo.cookies;
console.log($scope.cookies);
$scope.params=goat.lesson.lessonInfo.params;
}
$('#cookiesAndParamsView').show();
//@TODO: issue callback to track view
};
//$scope.watch()
});
/*
*DEPRECATED
//Controllers for modal instances
var showSourceController = function($scope, $modalInstance, lessonSource) {
$scope.lessonSource = lessonSource;
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
var showSolutionController = function($scope, $modalInstance, lessonSolutionUrl) {
$scope.lessonSolutionUrl = lessonSolutionUrl;
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
*/

4
src/main/webapp/js/goatLesson.js
View File

@ -31,7 +31,7 @@ goat.lesson = {
goat.data.loadHints().then( goat.data.loadHints().then(
function(resp) { function(resp) {
scope.hints = resp; scope.hints = resp;
if (scope.hints.length > 0) { if (scope.hints.length > 0 && scope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
goat.utils.displayButton('showHintsBtn',true); goat.utils.displayButton('showHintsBtn',true);
} else { } else {
goat.utils.displayButton('showHintsBtn',false); goat.utils.displayButton('showHintsBtn',false);
@ -103,7 +103,7 @@ goat.lesson = {
); );
}, },
getParams: function() { getParams: function() {
this.params = goat.utils.scrapeParams(this.lessonUrl) this.params = goat.utils.scrapeParams(this.lessonUrl);
} }
} }
} }

4
src/main/webapp/js/goatUtil.js
View File

@ -21,6 +21,7 @@ goat.utils = {
*/ */
extractLessonTitle: function(el) { extractLessonTitle: function(el) {
var title = $('h1', el).text(); var title = $('h1', el).text();
// remove title
return title; return title;
}, },
displayButton: function(id,show) { displayButton: function(id,show) {
@ -44,7 +45,7 @@ goat.utils = {
}, },
showLessonSource: function(source) { showLessonSource: function(source) {
$('.lessonHelp').hide(); $('.lessonHelp').hide();
$('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>"); //$('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>");
$('#lesson_source_row').show(); $('#lesson_source_row').show();
goat.utils.scrollToHelp(); goat.utils.scrollToHelp();
}, },
@ -65,6 +66,7 @@ goat.utils = {
goat.utils.scrollEasy(target); goat.utils.scrollEasy(target);
}, },
scrollToTop: function() { scrollToTop: function() {
$('.lessonHelp').hide();
var target= $('#container'); var target= $('#container');
goat.utils.scrollEasy(target); goat.utils.scrollEasy(target);
}, },