2nd crack at ajaxifying links and forms (made harder since some lessons produce a 2nd form and links based on earlier input
This commit is contained in:
Rick Lawson
parent
019a148c9d
commit
b5c40760a6
@ -35,8 +35,8 @@ import org.owasp.webgoat.lessons.AbstractLesson;
|
||||
*
|
||||
* Getting Source ==============
|
||||
*
|
||||
* Source for this application is maintained at https://github.com/WebGoat/WebGoat, a repository
|
||||
* for free software projects.
|
||||
* Source for this application is maintained at
|
||||
* https://github.com/WebGoat/WebGoat, a repository for free software projects.
|
||||
*
|
||||
* For details, please see http://webgoat.github.io
|
||||
*
|
||||
@ -202,12 +202,11 @@ public abstract class Screen {
|
||||
|
||||
}
|
||||
|
||||
// TODO we could hook all forms here with javascript call to ajax forms plugin
|
||||
// hook all the links
|
||||
public String getContent() {
|
||||
String makeFormsAjax = "<script> $(document).ready(function() { makeFormsAjax(); });</script>";
|
||||
// handle this on the page with js
|
||||
makeFormsAjax = "";
|
||||
return (content == null) ? "" : content.toString() + makeFormsAjax;
|
||||
String makeAllAjax = "<script>goat.utils.makeFormsAjax();goat.utils.ajaxifyAttackHref();</script>";
|
||||
// need to do this here as some of the lessons render forms after submission of an ajax form
|
||||
return (content == null) ? "" : content.toString() + makeAllAjax;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
<![endif]-->
|
||||
|
||||
<!--Global JS-->
|
||||
|
||||
|
||||
<script src="js/jquery_form/jquery.form.js"></script>
|
||||
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
|
||||
|
||||
@ -115,9 +115,9 @@
|
||||
<a ng-click="accordionMenu(item.id)" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a><!-- expanded = !expanded-->
|
||||
<ul class="slideDown lessonsAndStages {{item.displayClass}}" id="{{item.id}}" isOpen=0>
|
||||
<li ng-repeat="lesson in item.children" class="{{lesson.selectedClass}}">
|
||||
<a ng-click="renderLesson(lesson.id,lesson.link,{showSource:lesson.showSource,showHints:lesson.showHints})" id="{{lesson.id}}" class="{{lesson.selectedClass}}" title="link to {{lesson.name}}" href="">{{lesson.name}}</a><span class="{{lesson.completeClass}}"></span>
|
||||
<a ng-click="renderLesson(lesson.id, lesson.link, {showSource: lesson.showSource, showHints: lesson.showHints})" id="{{lesson.id}}" class="{{lesson.selectedClass}}" title="link to {{lesson.name}}" href="">{{lesson.name}}</a><span class="{{lesson.completeClass}}"></span>
|
||||
<span ng-repeat="stage in lesson.children">
|
||||
<a ng-click="renderLesson(stage.id,stage.link,{showSource:stage.showSource,showHints:stage.showHints})" class="selectedClass" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
|
||||
<a ng-click="renderLesson(stage.id, stage.link, {showSource: stage.showSource, showHints: stage.showHints})" class="selectedClass" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -177,19 +177,19 @@
|
||||
<div class="cookiesView">
|
||||
<h4>Cookies</h4>
|
||||
<div class="cookieContainer" ng-repeat="cookie in cookies">
|
||||
<table class="cookieTable table-striped table-nonfluid" >
|
||||
<thead>
|
||||
<tr><th class="col-sm-1"></th><th class="col-sm-1"></th></tr> <!-- Field / Value -->
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="(key, value) in cookie">
|
||||
<td>{{key}}</td>
|
||||
<td>{{value}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!--<li ng-repeat="(key, value) in cookie">{{key}} :: {{ value}} </td>-->
|
||||
<!--</ul>-->
|
||||
</table>
|
||||
<table class="cookieTable table-striped table-nonfluid" >
|
||||
<thead>
|
||||
<tr><th class="col-sm-1"></th><th class="col-sm-1"></th></tr> <!-- Field / Value -->
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="(key, value) in cookie">
|
||||
<td>{{key}}</td>
|
||||
<td>{{value}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!--<li ng-repeat="(key, value) in cookie">{{key}} :: {{ value}} </td>-->
|
||||
<!--</ul>-->
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="paramsView"> <!--class="paramsView"-->
|
||||
@ -296,7 +296,7 @@
|
||||
|
||||
$(document).ready(function() {
|
||||
//TODO merge appliction.js code into other js files
|
||||
app.init();
|
||||
app.init();
|
||||
});
|
||||
// make all forms ajax forms
|
||||
var options = {
|
||||
@ -354,7 +354,8 @@
|
||||
// make any embedded forms ajaxy
|
||||
goat.utils.showLessonCookiesAndParams();
|
||||
goat.utils.makeFormsAjax();
|
||||
goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
|
||||
// links are hooked with each lesson now (see Java class Screen.getContent())
|
||||
//goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
|
||||
//refresh menu
|
||||
angular.element($('#leftside-navigation')).scope().renderMenu();
|
||||
}
|
||||
|
||||
@ -8,170 +8,171 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
|
||||
$scope.cookies = [];
|
||||
$scope.params = [];
|
||||
$scope.renderMenu = function() {
|
||||
goat.data.loadMenu($http).then( //$http({method: 'GET', url: goatConstants.lessonService})
|
||||
function(menuData) {
|
||||
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
|
||||
//top-tier 'categories'
|
||||
for (var i=0;i<menuItems.length;i++) {
|
||||
menuItems[i].id = goat.utils.makeId(menuItems[i].name);//TODO move the replace routine into util function
|
||||
menuItems[i].displayClass= ($scope.openMenu === menuItems[i].id) ? goatConstants.keepOpenClass : '';
|
||||
if (menuItems[i].children) {
|
||||
for (var j=0;j<menuItems[i].children.length;j++){
|
||||
menuItems[i].children[j].id = goat.utils.makeId(menuItems[i].children[j].name);
|
||||
//handle selected Menu state
|
||||
if (menuItems[i].children[j].id === $scope.curMenuItemSelected) {
|
||||
menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
|
||||
menuItems[i].selectedClass = goatConstants.selectedMenuClass;
|
||||
}
|
||||
//handle complete state
|
||||
if (menuItems[i].children[j].complete) {
|
||||
menuItems[i].children[j].completeClass = goatConstants.lessonCompleteClass;
|
||||
} else {
|
||||
menuItems[i].children[j].completeClass ='';
|
||||
}
|
||||
if (menuItems[i].children[j].children) {
|
||||
for (var k=0;k < menuItems[i].children[j].children.length;k++) {
|
||||
//TODO make utility function for name >> id
|
||||
menuItems[i].children[j].children[k].id = goat.utils.makeId(menuItems[i].children[j].children[k].name);
|
||||
//menuItems[i].children[j].children[k].id = menuItems[i].children[j].children[k].name.replace(/\s|\(|\)/g,'');
|
||||
//handle selected Menu state
|
||||
if (menuItems[i].children[j].children[k].id === $scope.curMenuItemSelected) {
|
||||
menuItems[i].children[j].children[k].selectedClass = goatConstants.selectedMenuClass;
|
||||
menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
|
||||
}
|
||||
//handle complete state
|
||||
if (menuItems[i].children[j].children[k].complete) {
|
||||
menuItems[i].children[j].children[k].completeClass= goatConstants.lessonCompleteClass;
|
||||
} else {
|
||||
menuItems[i].children[j].children[k].completeClass= ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
$scope.menuTopics = menuItems;
|
||||
//
|
||||
if ($scope.openMenu) {
|
||||
$('ul'+$scope.openMenu).show();
|
||||
}
|
||||
|
||||
},
|
||||
function(error) {
|
||||
// TODO - handle this some way other than an alert
|
||||
console.error("Error rendering menu: " + error);
|
||||
}
|
||||
);
|
||||
goat.data.loadMenu($http).then(//$http({method: 'GET', url: goatConstants.lessonService})
|
||||
function(menuData) {
|
||||
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
|
||||
//top-tier 'categories'
|
||||
for (var i = 0; i < menuItems.length; i++) {
|
||||
menuItems[i].id = goat.utils.makeId(menuItems[i].name);//TODO move the replace routine into util function
|
||||
menuItems[i].displayClass = ($scope.openMenu === menuItems[i].id) ? goatConstants.keepOpenClass : '';
|
||||
if (menuItems[i].children) {
|
||||
for (var j = 0; j < menuItems[i].children.length; j++) {
|
||||
menuItems[i].children[j].id = goat.utils.makeId(menuItems[i].children[j].name);
|
||||
//handle selected Menu state
|
||||
if (menuItems[i].children[j].id === $scope.curMenuItemSelected) {
|
||||
menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
|
||||
menuItems[i].selectedClass = goatConstants.selectedMenuClass;
|
||||
}
|
||||
//handle complete state
|
||||
if (menuItems[i].children[j].complete) {
|
||||
menuItems[i].children[j].completeClass = goatConstants.lessonCompleteClass;
|
||||
} else {
|
||||
menuItems[i].children[j].completeClass = '';
|
||||
}
|
||||
if (menuItems[i].children[j].children) {
|
||||
for (var k = 0; k < menuItems[i].children[j].children.length; k++) {
|
||||
//TODO make utility function for name >> id
|
||||
menuItems[i].children[j].children[k].id = goat.utils.makeId(menuItems[i].children[j].children[k].name);
|
||||
//menuItems[i].children[j].children[k].id = menuItems[i].children[j].children[k].name.replace(/\s|\(|\)/g,'');
|
||||
//handle selected Menu state
|
||||
if (menuItems[i].children[j].children[k].id === $scope.curMenuItemSelected) {
|
||||
menuItems[i].children[j].children[k].selectedClass = goatConstants.selectedMenuClass;
|
||||
menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
|
||||
}
|
||||
//handle complete state
|
||||
if (menuItems[i].children[j].children[k].complete) {
|
||||
menuItems[i].children[j].children[k].completeClass = goatConstants.lessonCompleteClass;
|
||||
} else {
|
||||
menuItems[i].children[j].children[k].completeClass = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
$scope.menuTopics = menuItems;
|
||||
//
|
||||
if ($scope.openMenu) {
|
||||
$('ul' + $scope.openMenu).show();
|
||||
}
|
||||
|
||||
},
|
||||
function(error) {
|
||||
// TODO - handle this some way other than an alert
|
||||
console.error("Error rendering menu: " + error);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
$scope.renderLesson = function(id,url,showControls) {//TODO convert to single object parameter
|
||||
$scope.renderLesson = function(id, url, showControls) {//TODO convert to single object parameter
|
||||
$scope.hintIndex = 0;
|
||||
var curScope = $scope;
|
||||
$('.lessonHelp').hide();
|
||||
// clean up menus, mark selected
|
||||
$scope.curMenuItemSelected = id;
|
||||
goat.utils.highlightCurrentLessonMenu(id);
|
||||
$('.lessonHelp').hide();
|
||||
// clean up menus, mark selected
|
||||
$scope.curMenuItemSelected = id;
|
||||
goat.utils.highlightCurrentLessonMenu(id);
|
||||
curScope.parameters = goat.utils.scrapeParams(url);
|
||||
// lesson content
|
||||
goat.data.loadLessonContent($http,url).then(
|
||||
function(reply) {
|
||||
goat.data.loadLessonTitle($http).then(
|
||||
function(reply) {
|
||||
$("#lessonTitle").text(reply.data);
|
||||
}
|
||||
);
|
||||
//TODO encode html or get angular js portion working
|
||||
$("#lesson_content").html(reply.data);
|
||||
//hook forms
|
||||
goat.utils.makeFormsAjax();// inject form?
|
||||
goat.utils.ajaxifyAttackHref();
|
||||
$('#leftside-navigation').height($('#main-content').height()+15)//TODO: get ride of fixed value (15)here
|
||||
//notifies goatLesson Controller of the less change
|
||||
$scope.$emit('lessonUpdate',{params:curScope.parameters,'showControls':showControls});
|
||||
}
|
||||
)
|
||||
$scope.renderMenu();
|
||||
// lesson content
|
||||
goat.data.loadLessonContent($http, url).then(
|
||||
function(reply) {
|
||||
goat.data.loadLessonTitle($http).then(
|
||||
function(reply) {
|
||||
$("#lessonTitle").text(reply.data);
|
||||
}
|
||||
);
|
||||
//TODO encode html or get angular js portion working
|
||||
$("#lesson_content").html(reply.data);
|
||||
//hook forms
|
||||
goat.utils.makeFormsAjax();// inject form?
|
||||
// links are hooked with each lesson now (see Java class Screen.getContent())
|
||||
//goat.utils.ajaxifyAttackHref();
|
||||
$('#leftside-navigation').height($('#main-content').height() + 15)//TODO: get ride of fixed value (15)here
|
||||
//notifies goatLesson Controller of the less change
|
||||
$scope.$emit('lessonUpdate', {params: curScope.parameters, 'showControls': showControls});
|
||||
}
|
||||
)
|
||||
$scope.renderMenu();
|
||||
};
|
||||
$scope.accordionMenu = function(id) {
|
||||
if ($('ul#'+id).attr('isOpen') == 0) {
|
||||
$scope.expandMe = true;
|
||||
} else {
|
||||
$('ul#'+id).slideUp(300).attr('isOpen',0);
|
||||
return;
|
||||
}
|
||||
$scope.openMenu = id;
|
||||
$('.lessonsAndStages').not('ul#'+id).slideUp(300).attr('isOpen',0);
|
||||
if ($scope.expandMe) {
|
||||
$('ul#'+id).slideDown(300).attr('isOpen',1);
|
||||
}
|
||||
if ($('ul#' + id).attr('isOpen') == 0) {
|
||||
$scope.expandMe = true;
|
||||
} else {
|
||||
$('ul#' + id).slideUp(300).attr('isOpen', 0);
|
||||
return;
|
||||
}
|
||||
$scope.openMenu = id;
|
||||
$('.lessonsAndStages').not('ul#' + id).slideUp(300).attr('isOpen', 0);
|
||||
if ($scope.expandMe) {
|
||||
$('ul#' + id).slideDown(300).attr('isOpen', 1);
|
||||
}
|
||||
}
|
||||
$scope.renderMenu();
|
||||
// runs on first loadcan 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(null,url);
|
||||
angular.element($('#leftside-navigation')).scope().renderLesson(null, url);
|
||||
}
|
||||
|
||||
/* lesson controller */
|
||||
var goatLesson = function($scope,$http,$log) {
|
||||
var goatLesson = function($scope, $http, $log) {
|
||||
|
||||
$('#hintsView').hide();
|
||||
// adjust menu to lessonContent size if necssary
|
||||
//cookies
|
||||
|
||||
$scope.$on('lessonUpdate',function(params){
|
||||
$scope.parameters = arguments[1].params;
|
||||
$scope.showHints = (arguments[1].showControls && arguments[1].showControls.showHints);
|
||||
$scope.showSource = (arguments[1].showControls && arguments[1].showControls.showSource);
|
||||
curScope = $scope; //TODO .. update below, this curScope is probably not needed
|
||||
goat.data.loadCookies($http).then(
|
||||
function(resp) {
|
||||
curScope.cookies = resp.data;
|
||||
}
|
||||
);
|
||||
//hints
|
||||
curScope.hintIndex = 0;
|
||||
if ($scope.showHints) {
|
||||
goat.data.loadHints($http).then(
|
||||
function(resp) {
|
||||
curScope.hints = resp.data;
|
||||
if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
|
||||
goat.utils.displayButton('showHintsBtn', true);
|
||||
} else {
|
||||
goat.utils.displayButton('showHintsBtn', false);
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
$scope.hints = null;
|
||||
goat.utils.displayButton('showHintsBtn', false);
|
||||
}
|
||||
//source
|
||||
if ($scope.showSource) {
|
||||
goat.data.loadSource($http).then(
|
||||
function(resp) {
|
||||
curScope.source = resp.data;
|
||||
}
|
||||
);
|
||||
} else {
|
||||
$scope.source = goatConstants.noSourcePulled;
|
||||
}
|
||||
|
||||
//plan
|
||||
goat.data.loadPlan($http).then(
|
||||
function(resp) {
|
||||
curScope.plan = resp.data;
|
||||
}
|
||||
);
|
||||
//solution
|
||||
goat.data.loadSolution($http).then(
|
||||
function(resp) {
|
||||
curScope.solution = resp.data;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
//goat.utils.scrollToTop();
|
||||
// adjust menu to lessonContent size if necssary
|
||||
//cookies
|
||||
|
||||
$scope.$on('lessonUpdate', function(params) {
|
||||
$scope.parameters = arguments[1].params;
|
||||
$scope.showHints = (arguments[1].showControls && arguments[1].showControls.showHints);
|
||||
$scope.showSource = (arguments[1].showControls && arguments[1].showControls.showSource);
|
||||
curScope = $scope; //TODO .. update below, this curScope is probably not needed
|
||||
goat.data.loadCookies($http).then(
|
||||
function(resp) {
|
||||
curScope.cookies = resp.data;
|
||||
}
|
||||
);
|
||||
//hints
|
||||
curScope.hintIndex = 0;
|
||||
if ($scope.showHints) {
|
||||
goat.data.loadHints($http).then(
|
||||
function(resp) {
|
||||
curScope.hints = resp.data;
|
||||
if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
|
||||
goat.utils.displayButton('showHintsBtn', true);
|
||||
} else {
|
||||
goat.utils.displayButton('showHintsBtn', false);
|
||||
}
|
||||
}
|
||||
);
|
||||
} else {
|
||||
$scope.hints = null;
|
||||
goat.utils.displayButton('showHintsBtn', false);
|
||||
}
|
||||
//source
|
||||
if ($scope.showSource) {
|
||||
goat.data.loadSource($http).then(
|
||||
function(resp) {
|
||||
curScope.source = resp.data;
|
||||
}
|
||||
);
|
||||
} else {
|
||||
$scope.source = goatConstants.noSourcePulled;
|
||||
}
|
||||
|
||||
//plan
|
||||
goat.data.loadPlan($http).then(
|
||||
function(resp) {
|
||||
curScope.plan = resp.data;
|
||||
}
|
||||
);
|
||||
//solution
|
||||
goat.data.loadSolution($http).then(
|
||||
function(resp) {
|
||||
curScope.solution = resp.data;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
//goat.utils.scrollToTop();
|
||||
|
||||
|
||||
$scope.showLessonSource = function() {
|
||||
@ -216,42 +217,42 @@ var goatLesson = function($scope,$http,$log) {
|
||||
$('.lessonHelp').hide();
|
||||
$('#lesson_hint_row').show();
|
||||
//goat.utils.scrollToHelp();
|
||||
//TODO
|
||||
//TODO
|
||||
$scope.curHint = $scope.hints[$scope.hintIndex].hint;
|
||||
//$scope.curHint = $sce.trustAsHtml($scope.hints[$scope.hintIndex].hint);
|
||||
//TODO get html binding workin in the UI ... in the meantime ...
|
||||
//$scope.renderCurHint();
|
||||
//$scope.curHint = $sce.trustAsHtml($scope.hints[$scope.hintIndex].hint);
|
||||
//TODO get html binding workin in the UI ... in the meantime ...
|
||||
//$scope.renderCurHint();
|
||||
$scope.manageHintButtons();
|
||||
};
|
||||
|
||||
$scope.viewNextHint = function() {
|
||||
$scope.hintIndex++;
|
||||
$scope.curHint = $scope.hints[$scope.hintIndex].hint;
|
||||
$scope.renderCurHint();
|
||||
$scope.renderCurHint();
|
||||
$scope.manageHintButtons();
|
||||
};
|
||||
|
||||
$scope.viewPrevHint = function() {
|
||||
$scope.hintIndex--;
|
||||
$scope.curHint = $scope.hints[$scope.hintIndex].hint;
|
||||
$scope.renderCurHint();
|
||||
$scope.renderCurHint();
|
||||
$scope.manageHintButtons();
|
||||
};
|
||||
|
||||
|
||||
$scope.renderCurHint = function() {
|
||||
$('#curHintContainer').html($scope.curHint);
|
||||
$('#curHintContainer').html($scope.curHint);
|
||||
}
|
||||
|
||||
$scope.hideHints = function() {
|
||||
|
||||
};
|
||||
|
||||
$scope.restartLesson = function () {
|
||||
goat.data.loadRestart($http).then(
|
||||
function(resp) {
|
||||
angular.element($('#leftside-navigation')).scope().renderLesson(null,resp.data,{showSource:$scope.showSource,showHints:$scope.showHints});
|
||||
}
|
||||
)
|
||||
|
||||
$scope.restartLesson = function() {
|
||||
goat.data.loadRestart($http).then(
|
||||
function(resp) {
|
||||
angular.element($('#leftside-navigation')).scope().renderLesson(null, resp.data, {showSource: $scope.showSource, showHints: $scope.showHints});
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
$scope.showAbout = function() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user