#276 Automatic lesson summary page

- Basic overview of all the assignments needed to be solved in a lesson
 - Clicking on a link will jump to the correct page with the assignment
 - Lesson completed also updates lesson overview immediately
This commit is contained in:
Nanne Baars
2016-12-27 21:04:56 +01:00
parent de4e581ee4
commit 9c03b6f63b
34 changed files with 214 additions and 118 deletions

View File

@ -1,4 +1,4 @@
FROM frolvlad/alpine-oraclejdk8:slim
FROM openjdk:8-jre
VOLUME /tmp
RUN cd /root; mkdir -p .webgoat
ADD webgoat-container-8.0-SNAPSHOT.war webgoat.jar

View File

@ -44,6 +44,7 @@ import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter
import org.thymeleaf.extras.springsecurity4.dialect.SpringSecurityDialect;
import org.thymeleaf.spring4.SpringTemplateEngine;
import org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.templatemode.StandardTemplateModeHandlers;
import org.thymeleaf.templateresolver.TemplateResolver;
import java.io.File;
@ -71,6 +72,7 @@ public class MvcConfiguration extends WebMvcConfigurerAdapter {
resolver.setPrefix("classpath:/templates/");
resolver.setSuffix(".html");
resolver.setOrder(1);
resolver.setCacheable(false);
resolver.setApplicationContext(applicationContext);
return resolver;
}

View File

@ -30,6 +30,8 @@ import org.owasp.webgoat.session.UserTracker;
import org.owasp.webgoat.session.WebSession;
import org.springframework.beans.factory.annotation.Autowired;
import javax.ws.rs.Path;
/**
* Each lesson can define an endpoint which can support the lesson. So for example if you create a lesson which uses JavaScript and
* needs to call out to the server to fetch data you can define an endpoint in that lesson. WebGoat will pick up this endpoint and
@ -61,5 +63,8 @@ public abstract class AssignmentEndpoint extends Endpoint {
return webSession;
}
@Override
public final String getPath() {
return this.getClass().getAnnotationsByType(Path.class)[0].value();
}
}

View File

@ -39,6 +39,6 @@ import java.io.Serializable;
public class Assignment implements Serializable {
private final String name;
private final String path;
}

View File

@ -114,7 +114,11 @@ public class Plugin {
private List<Assignment> createAssignment(List<Class<AssignmentEndpoint>> endpoints) {
return endpoints.stream().map(e -> new Assignment(e.getSimpleName())).collect(toList());
return endpoints.stream().map(e -> new Assignment(e.getSimpleName(), getPath(e))).collect(toList());
}
private String getPath(Class<AssignmentEndpoint> e) {
return e.getAnnotationsByType(javax.ws.rs.Path.class)[0].value();
}

View File

@ -64,8 +64,12 @@ public class LessonProgressService {
@ResponseBody
public List<LessonOverview> lessonOverview() {
AbstractLesson currentLesson = webSession.getCurrentLesson();
LessonTracker lessonTracker = userTracker.getLessonTracker(currentLesson);
return toJson(lessonTracker.getLessonOverview());
List<LessonOverview> result = Lists.newArrayList();
if ( currentLesson != null ) {
LessonTracker lessonTracker = userTracker.getLessonTracker(currentLesson);
result = toJson(lessonTracker.getLessonOverview());
}
return result;
}
private List<LessonOverview> toJson(Map<Assignment, Boolean> map) {

View File

@ -10,11 +10,10 @@ logging.level.org.springframework.boot.devtools=WARN
logging.level.org.owasp=DEBUG
logging.level.org.owasp.webgoat=TRACE
spring.thymeleaf.cache=false
spring.thymeleaf.content-type=text/html
security.enable-csrf=false
spring.devtools.restart.enabled=false
spring.resources.cache-period=0
webgoat.tracker.overwrite=true

View File

@ -18,8 +18,10 @@ define(['jquery',
'goatApp/model/LessonInfoModel',
'goatApp/view/TitleView',
'goatApp/model/LessonProgressModel',
'goatApp/view/LessonProgressView'
],
'goatApp/view/LessonProgressView',
'goatApp/view/LessonOverviewView',
'goatApp/model/LessonOverviewModel'
],
function($,
_,
Backbone,
@ -40,19 +42,22 @@ define(['jquery',
LessonInfoModel,
TitleView,
LessonProgressModel,
LessonProgressView
LessonProgressView,
LessonOverviewView,
LessonOverviewModel
) {
'use strict'
var Controller = function(options) {
this.lessonContent = new LessonContentModel();
this.lessonProgressModel = new LessonProgressModel();
this.lessonProgressView = new LessonProgressView(this.lessonProgressModel);
this.lessonOverviewModel = new LessonOverviewModel();
this.lessonOverview = new LessonOverviewView(this.lessonOverviewModel);
this.lessonContentView = options.lessonContentView;
this.developerControlsView = new DeveloperControlsView();
_.extend(Controller.prototype,Backbone.Events);
this.start = function() {
@ -92,16 +97,18 @@ define(['jquery',
});
this.listenTo(this.helpControlsView,'hints:show',this.showHints);
this.listenTo(this.helpControlsView,'lessonOverview:show',this.showLessonOverview)
this.listenTo(this.helpControlsView,'attack:show',this.hideShowAttack);
this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
this.listenTo(this.developerControlsView, 'dev:labels', this.restartLesson);
this.listenTo(this.lessonContentView, 'lesson:complete', this.updateMenu)
this.listenTo(this.lessonContentView, 'lesson:complete', this.updateLessonOverview)
this.listenTo(this,'hints:show',this.onShowHints);
this.helpControlsView.render();
this.lessonOverviewModel.fetch();
this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
};
@ -110,6 +117,10 @@ define(['jquery',
this.trigger('menu:reload')
};
this.updateLessonOverview = function() {
this.lessonOverviewModel.fetch();
}
this.onContentLoaded = function(loadHelps) {
this.lessonInfoModel = new LessonInfoModel();
this.listenTo(this.lessonInfoModel,'info:loaded',this.onInfoLoaded);
@ -177,6 +188,10 @@ define(['jquery',
//this.lessonHintView.
};
this.showLessonOverview = function() {
this.lessonOverview.render();
};
this.hideShowAttack = function (options) { // will likely expand this to encompass
if (options.show) {
$('#attack-container').show();

View File

@ -0,0 +1,8 @@
define([
'backbone'],
function(
Backbone) {
return Backbone.Model.extend({
});
});

View File

@ -0,0 +1,10 @@
define([
'backbone'],
function(
Backbone) {
return Backbone.Collection.extend({
tagName: 'ul',
url: 'service/lessonoverview.mvc'
});
});

View File

@ -0,0 +1,24 @@
define([
'backbone'],
function(
Backbone) {
return Backbone.View.extend({
tagName: 'li',
template: _.template($('#assignmentTemplate').html() ),
events: {
"click a": "clicked"
},
clicked: function(e){
e.preventDefault();
var id = $(e.currentTarget).data("id");
Backbone.trigger('assignment:navTo',{'assignment': id});
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
});

View File

@ -36,7 +36,7 @@ function($,_,Backbone) {
this.$el.find('#show-attack-button').unbind().on('click',_.bind(this.showAttack,this)).show();
}
this.$el.find('#show-lesson-overview-button').unbind().on('click', _.bind(this.showLessonOverview, this)).show();
this.$el.find('#restart-lesson-button').unbind().on('click',_.bind(this.restartLesson,this)).show();
//this.$el.append(this.helpButtons.restartLesson);
},
@ -59,6 +59,9 @@ function($,_,Backbone) {
restartLesson: function() {
this.trigger('lesson:restart');
},
showLessonOverview: function() {
this.trigger('lessonOverview:show');
}
});
});

View File

@ -16,6 +16,25 @@ define(['jquery',
initialize: function(options) {
options = options || {};
new ErrorNotificationView();
var self = this;
Backbone.on('assignment:navTo', function(assignment){
var page = self.findPage(assignment);
if (page != -1) {
self.navToPage(page);
}
});
},
findPage: function(assignment) {
for (var i = 0; i < this.$contentPages.length; i++) {
var contentPage = this.$contentPages[i];
var form = $('form.attack-form', contentPage);
var action = form.attr('action')
if (action !== undefined && action.includes(assignment.assignment)) {
return i;
}
}
return -1;
},
/* initial renering */
@ -76,7 +95,7 @@ define(['jquery',
var submitData = (typeof webgoat.customjs[prepareDataFunctionName] === 'function') ? webgoat.customjs[prepareDataFunctionName]() : this.$form.serialize();
// var submitData = this.$form.serialize();
this.$curFeedback = $(curForm).closest('.attack-container').find('.attack-feedback');
this.$curOutput = $(curForm).closest('.atatck-container').find('.attack-output');
this.$curOutput = $(curForm).closest('.attack-container').find('.attack-output');
var formUrl = $(curForm).attr('action');
var formMethod = $(curForm).attr('method');
var contentType = ($(curForm).attr('contentType')) ? $(curForm).attr('contentType') : 'application/x-www-form-urlencoded; charset=UTF-8';

View File

@ -0,0 +1,48 @@
define(['jquery',
'underscore',
'backbone',
'goatApp/model/LessonOverviewModel',
'goatApp/view/AssignmentOverview'],
function($,
_,
Backbone,
LessonOverviewModel,
AssignmentOverview) {
return Backbone.View.extend({
el:'#lesson-overview',
initialize: function (lessonOverviewModel) {
this.model = lessonOverviewModel;
this.listenTo(this.model, 'change add remove update', this.render);
this.hideLessonOverview();
},
showAssignments: function() {
this.$el.html('');
this.model.each(function(assignment) {
var assignmentView = new AssignmentOverview({ model: assignment });
this.$el.append(assignmentView.render().el);
}, this);
},
render: function() {
if (this.isVisible()) {
this.$el.hide();
} else {
this.$el.show();
}
this.showAssignments();
return this;
},
isVisible: function() {
return this.$el.is(':visible');
},
hideLessonOverview: function() {
if (this.$el.is(':visible')) {
this.$el.hide();
}
}
});
});

View File

@ -39,6 +39,14 @@
<title>WebGoat</title>
</head>
<body>
<script id="assignmentTemplate" type="text/template">
<![CDATA[
<!-- CDATA is necessary otherwise we get into trouble with the strict HTML5 validation (Thymeleaf) -->
<strong><a href="#" data-id=<%= assignment.path %>><%= assignment.name %></a></strong> (<%= solved %>)
<!-- ]]> -->
</script>
<section id="container">
<header id="header">
<!--logo start-->
@ -126,6 +134,8 @@
<!--<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>
@ -145,6 +155,13 @@
</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>