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

#277 Re-institute admin functionality for WebGoat 8

Browse Source 
- Report card functionality is back
This commit is contained in:
Nanne Baars
2016-12-31 18:27:20 +01:00
parent 490f542885
commit e2cb9ceae0
14 changed files with 457 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webgoat-container/src/main/resources/application.properties
View File

@ -16,7 +16,7 @@ spring.devtools.restart.enabled=false
spring.resources.cache-period=0
webgoat.tracker.overwrite=true
webgoat.tracker.overwrite=false
webgoat.user.directory=${user.home}/.webgoat/
webgoat.build.version=@project.version@
webgoat.build.number=@build.number@

7
webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js
View File

@ -55,9 +55,9 @@ define(['jquery',
this.lessonOverviewModel = new LessonOverviewModel();
this.lessonOverview = new LessonOverviewView(this.lessonOverviewModel);
this.lessonContentView = options.lessonContentView;
this.titleView = options.titleView;
this.developerControlsView = new DeveloperControlsView();
_.extend(Controller.prototype,Backbone.Events);
this.start = function() {
@ -67,12 +67,13 @@ define(['jquery',
};
this.loadLesson = function(name,pageNum) {
if (this.name === name) {
this.lessonContentView.navToPage(pageNum)
this.lessonContentView.navToPage(pageNum);
this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
return;
}
this.titleView = new TitleView();
this.helpsLoaded = {};
if (typeof(name) === 'undefined' || name === null) {
//TODO: implement lesson not found or return to welcome page?

15
webgoat-container/src/main/resources/static/js/goatApp/controller/MenuController.js
View File

@ -2,7 +2,7 @@ define(['jquery',
'underscore',
'backbone',
'goatApp/view/MenuView'
],
],
function($,
_,
Backbone,
@ -11,22 +11,9 @@ define(['jquery',
_.extend(Controller.prototype,Backbone.Events);
options = options || {};
this.menuView = options.menuView;
this.titleView = options.titleView;
// this.initMenu = function() {
// this.listenTo(this.menuView,'lesson:click',this.renderTitle);
// }
this.updateMenu = function(){
this.menuView.updateMenu();
},
//TODO: move title rendering into lessonContent/View pipeline once data can support it
this.renderTitle = function(title) {
this.titleView.render(title);
}
};
return Controller;

8
webgoat-container/src/main/resources/static/js/goatApp/model/ReportCardModel.js Normal file
View File

@ -0,0 +1,8 @@
define([
'backbone'],
function(
Backbone) {
return Backbone.Model.extend({
url: 'service/reportcard.mvc'
});
});

47
webgoat-container/src/main/resources/static/js/goatApp/templates/report_card.html Normal file
View File

@ -0,0 +1,47 @@
<div class="panel panel-default" style="margin-top:25px">
<div class="panel-heading alt"><b>Overview</b></div>
<table class="table">
<tbody>
<tr>
<td width="30%">Total number of lessons</td>
<td width="70%"><%= totalNumberOfLessons %></td>
</tr>
<tr>
<td width="30%">Total number of lessons solved</td>
<td width="70%"><%= numberOfLessonsSolved %></td>
</tr>
<tr>
<td width="30%">Total number of assignments</td>
<td width="70%"><%= totalNumberOfAssignments %></td>
</tr>
<tr>
<td width="30%">Total number of assignments solved</td>
<td width="70%"><%= numberOfAssignmentsSolved %></td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default" style="margin-top:25px">
<div class="panel-heading"><b>Lesson overview</b></div>
<table class="table">
<thead>
<tr>
<th>Lesson name</th>
<th>Solved</th>
<th>Number of attempts</th>
</tr>
</thead>
<tbody>
<% _(lessonStatistics).each(function(lesson) { %>
<%= lesson.solved ? '<tr class="success">' : '<tr>' %>
<td><%= lesson.name %></td>
<td><%= lesson.solved %></td>
<td><%= lesson.numberOfAttempts %></td>
</tr>
<% }) %>
</tbody>
</table>
</div>

100
webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js
View File

@ -5,37 +5,56 @@ define(['jquery',
'goatApp/controller/MenuController',
'goatApp/view/LessonContentView',
'goatApp/view/MenuView',
'goatApp/view/DeveloperControlsView'
], function ($,
_,
Backbone,
LessonController,
MenuController,
LessonContentView,
MenuView,
DeveloperControlsView) {
'goatApp/view/DeveloperControlsView',
'goatApp/view/TitleView'
], function ($,
_,
Backbone,
LessonController,
MenuController,
LessonContentView,
MenuView,
DeveloperControlsView,
TitleView) {
var lessonContentView = new LessonContentView();
var menuView = new MenuView();
var developerControlsView = new DeveloperControlsView();
var titleView = new TitleView();
function getContentElement() {
return $('#main-content');
};
function render(view) {
$('div.pages').hide();
//TODO this works for now because we only have one page we should rewrite this a bit
if (view != null) {
$('#report-card-page').show();
} else {
$('#lesson-title').show();
$('#lesson-page').show();
}
};
var GoatAppRouter = Backbone.Router.extend({
routes: {
'welcome':'welcomeRoute',
'lesson/:name':'lessonRoute',
'lesson/:name/:pageNum':'lessonPageRoute',
'test/:param':'testRoute'
'welcome': 'welcomeRoute',
'lesson/:name': 'lessonRoute',
'lesson/:name/:pageNum': 'lessonPageRoute',
'test/:param': 'testRoute',
'reportCard': 'reportCard'
},
lessonController: new LessonController({
lessonContentView: lessonContentView
lessonContentView: lessonContentView,
titleView: titleView
}),
menuController: new MenuController({
menuView: menuView
}),
setUpCustomJS: function () {
webgoat.customjs.jquery = $; //passing jquery into custom js scope ... still klunky, but works for now
@ -45,19 +64,19 @@ define(['jquery',
console.log(arguments.callee);
//
webgoat.customjs.jquery.ajax({
method:"POST",
url:"/WebGoat/CrossSiteScripting/dom-xss",
data:{param1:42,param2:24},
headers:{
"webgoat-requested-by":"dom-xss-vuln"
},
contentType:'application/x-www-form-urlencoded; charset=UTF-8'
method: "POST",
url: "/WebGoat/CrossSiteScripting/dom-xss",
data: {param1: 42, param2: 24},
headers: {
"webgoat-requested-by": "dom-xss-vuln"
},
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
});
}
},
init:function() {
goatRouter = new GoatAppRouter();
init: function () {
goatRouter = new GoatAppRouter();
this.lessonController.start();
// this.menuController.initMenu();
webgoat = {};
@ -65,39 +84,48 @@ define(['jquery',
this.setUpCustomJS();
goatRouter.on('route:lessonRoute', function(name) {
this.lessonController.loadLesson(name,0);
goatRouter.on('route:lessonRoute', function (name) {
render();
this.lessonController.loadLesson(name, 0);
//TODO - update menu code from below
this.menuController.updateMenu(name);
});
goatRouter.on('route:lessonPageRoute', function(name,pageNum) {
goatRouter.on('route:lessonPageRoute', function (name, pageNum) {
render();
pageNum = (_.isNumber(parseInt(pageNum))) ? parseInt(pageNum) : 0;
this.lessonController.loadLesson(name,pageNum);
this.lessonController.loadLesson(name, pageNum);
//TODO - update menu code from below
this.menuController.updateMenu(name);
});
goatRouter.on('route:welcomeRoute', function() {
goatRouter.on('route:welcomeRoute', function () {
render();
this.lessonController.loadWelcome();
});
goatRouter.on('route:testRoute', function(param) {
goatRouter.on('route:testRoute', function (param) {
render();
this.lessonController.testHandler(param);
});
goatRouter.on("route", function(route, params) {});
goatRouter.on("route", function (route, params) {
});
Backbone.history.start();
this.listenTo(this.lessonController, 'menu:reload',this.reloadMenu)
this.listenTo(this.lessonController, 'menu:reload', this.reloadMenu)
},
reloadMenu: function (curLesson) {
this.menuController.updateMenu();
}
},
reportCard : function () {
require(['goatApp/view/ReportCardView'], function (ReportCardView) {
titleView.render('Report card');
render(new ReportCardView());
});
},
});
return GoatAppRouter;

21
webgoat-container/src/main/resources/static/js/goatApp/view/ReportCardView.js Normal file
View File

@ -0,0 +1,21 @@
define(['jquery', 'backbone', 'underscore', 'goatApp/model/ReportCardModel', 'text!templates/report_card.html'],
function ($, Backbone, _, ReportCardModel, ReportCardTemplate) {
return Backbone.View.extend({
el: '#report-card-page',
template: ReportCardTemplate,
initialize: function () {
var _this = this;
this.model = new ReportCardModel();
this.model.fetch().then(function() {
_this.render();
});
},
render: function () {
var t = _.template(this.template);
this.$el.html(t(this.model.toJSON()));
return this;
}
});
});

6
webgoat-container/src/main/resources/static/js/main.js
View File

@ -16,9 +16,9 @@ require.config({
jquery: 'libs/jquery-1.10.2.min',
underscore: 'libs/underscore-min',
backbone: 'libs/backbone-min',
templates: 'goatApp/templates'
}
,
text: 'libs/text',
templates: 'goatApp/templates',
},
shim: {
underscore: {
exports: "_"

174
webgoat-container/src/main/resources/templates/main_new.html
View File

@ -90,6 +90,19 @@
</ul>
</div>
<div style="display:inline" id="settings">
<!--<button type="button" id="admin-button" class="btn btn-default right_nav_button" title="Administrator">-->
<!--<i class="fa fa-cog"></i>-->
<!--</button>-->
<button type="button" id="report-card-button" class="btn btn-default right_nav_button button-up"
title="Report card">
<a href="#reportCard"><i class="fa fa-bar-chart-o"></i></a>
</button>
<!--<button type="button" id="user-management" class="btn btn-default right_nav_button"-->
<!--title="User management">-->
<!--<i class="fa fa-users"></i>-->
<!--</button>-->
</div>
<button type="button" id="about-button" class="btn btn-default right_nav_button" title="About WebGoat"
data-toggle="modal" data-target="#about-modal">
<i class="fa fa-info"></i>
@ -112,98 +125,103 @@
<!--main content start-->
<section class="main-content-wrapper">
<section id="main-content"> <!--ng-controller="goatLesson"-->
<div class="row">
<div class="col-md-8">
<!--<div class="col-md-12" align="left">-->
<div id="lesson-page" class="pages">
<div class="row">
<div class="col-md-8">
<!--<div class="col-md-12" align="left">-->
<!---->
<!--&lt;!&ndash; hints moved into lesson template &ndash;&gt;-->
<!--</div>-->
<div class="col-md-12" align="left">
<div id="lesson-content-wrapper" class="panel">
<div class="" id="error-notification-container">
<div class="" id="error-notification">
<i class="fa fa-exclamation-circle" /> There was an unexpected error. Please try again.
</div>
</div>
<div class="" id="help-controls">
<button class="btn btn-primary btn-xs btn-danger help-button" id="show-source-button">
<i class="fa fa-code" />
</button>
<button class="btn btn-primary btn-xs btn-danger help-button" id="show-hints-button">Show Hints
</button>
<!--<button class="btn btn-primary btn-xs btn-danger help-button" id="show-attack-button">-->
<!--Attack It-->
<!--</button>-->
<button class="btn btn-primary btn-xs btn-danger help-button" id="show-lesson-overview-button">Lesson overview
</button>
<button class="btn btn-xs help-button" id="restart-lesson-button">
Reset Lesson
</button>
</div>
<div class="lesson-hint" id="lesson-hint-container">
<!--<h4>Hints</h4>-->
<div class="panel">
<div id="message" class="info" th:utext="${message}"></div>
<div class="panel-body" id="lesson-hint">
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-left"
id="show-prev-hint"></span>
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-right"
id="show-next-hint"></span>
<br/>
<span id="lesson-hint-content"></span>
<!--</div>-->
<div class="col-md-12" align="left">
<div id="lesson-content-wrapper" class="panel">
<div class="" id="error-notification-container">
<div class="" id="error-notification">
<i class="fa fa-exclamation-circle"/> There was an unexpected error. Please try
again.
</div>
</div>
</div>
<div class="" id="help-controls">
<button class="btn btn-primary btn-xs btn-danger help-button"
id="show-source-button">
<i class="fa fa-code"/>
</button>
<button class="btn btn-primary btn-xs btn-danger help-button"
id="show-hints-button">Show Hints
</button>
<!--<button class="btn btn-primary btn-xs btn-danger help-button" id="show-attack-button">-->
<!--Attack It-->
<!--</button>-->
<button class="btn btn-primary btn-xs btn-danger help-button"
id="show-lesson-overview-button">Lesson overview
</button>
<button class="btn btn-xs help-button" id="restart-lesson-button">
Reset Lesson
</button>
</div>
<div class="lesson-hint" id="lesson-hint-container">
<!--<h4>Hints</h4>-->
<div class="panel">
<div id="message" class="info" th:utext="${message}"></div>
<div class="panel-body" id="lesson-hint">
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-left"
id="show-prev-hint"></span>
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-right"
id="show-next-hint"></span>
<br/>
<span id="lesson-hint-content"></span>
</div>
</div>
</div>
<div class="lesson-hint" id="lesson-overview-container">
<div class="panel">
<div class="panel-body" id="lesson-overview"></div>
</div>
</div>
<div class="lesson-content">
<div class="lesson-hint" id="lesson-overview-container">
<div class="panel">
<div class="panel-body" id="lesson-overview"></div>
</div>
</div>
</div>
</div>
</div>
<div id="lesson-helps-wrapper" class="panel">
<div class="lesson-help" id="lesson-plan-row">
<div class="col-md-12">
<h4>Lesson Plan</h4>
<div class="lesson-content">
<div class="panel">
<div class="panel-body" id="lesson-plan-content">
<!-- allowing jQuery to handle this one -->
</div>
</div>
</div>
</div>
<div class="lesson-help" id="lesson-solution-row">
<div class="col-md-12">
<h4>Lesson Solution</h4>
<div class="panel">
<div class="panel-body" id="lesson-solution-content">
</div>
</div>
</div>
</div>
<div class="lesson-help" id="lesson-source-row">
<div class="col-md-12">
<h4>Lesson Source Code</h4>
<div class="panel">
<div class="panel-body" id="lesson-source-content">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="lesson-helps-wrapper" class="panel">
<div class="lesson-help" id="lesson-plan-row">
<div class="col-md-12">
<h4>Lesson Plan</h4>
<div class="panel">
<div class="panel-body" id="lesson-plan-content">
<!-- allowing jQuery to handle this one -->
</div>
</div>
</div>
</div>
<div class="lesson-help" id="lesson-solution-row">
<div class="col-md-12">
<h4>Lesson Solution</h4>
<div class="panel">
<div class="panel-body" id="lesson-solution-content">
</div>
</div>
</div>
</div>
<div class="lesson-help" id="lesson-source-row">
<div class="col-md-12">
<h4>Lesson Source Code</h4>
<div class="panel">
<div class="panel-body" id="lesson-source-content">
</div>
</div>
</div>
</div>
<div id="report-card-page" class="pages" style="display: none;">
</div>
</section>
</section>