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

incremental UI changes

Browse Source
This commit is contained in:
Jason White 2016-07-05 08:16:32 -04:00
parent c350e86772
commit d27712affa
8 changed files with 121 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
webgoat-container/src/main/resources/static/css/main.css
View File

@ -663,6 +663,11 @@ fieldset[disabled] .btn-warning.active {
#about-modal {
opacity: 95%;
}
.modal-header {
border-bottom:none !important
}
/* ==========================================================================
Media Queries
========================================================================== */
@ -904,6 +909,14 @@ cookie-container {
#lesson-hint-container {
display: none;
}
#lesson-hint {
background-color: #ccc;
border-radius: 4px;
border-color: #999;
margin-top:4px;
}
#hintsViewTop{
display: none;
background-color: #eee;
@ -929,6 +942,6 @@ cookie-container {
/* ATTACK DISPLAY */
div.attack-container {
#attack-container {
display:none;
}

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

@ -61,36 +61,24 @@ define(['jquery',
this.menuButtonView = new MenuButtonView();
};
this.loadLesson = function(scr,menu,stage,num) {
this.loadLesson = function(name) {
this.titleView = new TitleView();
this.helpsLoaded = {};
if (typeof(scr) == "undefined") {
scr = null;
}
if (typeof(menu) == "undefined") {
menu = null;
}
if (typeof(stage) == "undefined") {
stage = null;
}
if (typeof(num) == "undefined") {
num = null;
if (typeof(name) === 'undefined' || name === null) {
//TODO: implement lesson not found or return to welcome page?
}
this.lessonContent.loadData({
'scr': scr,
'menu': menu,
'stage': stage,
'num': num,
'name':name
// 'scr': scr,
// 'menu': menu,
// 'stage': stage,
// 'num': num,
});
this.planView = {};
this.solutionView = {};
this.sourceView = {};
this.lessonHintView = {};
this.scr = scr;
this.menu = menu;
this.stage = stage;
this.num = num;
console.log("Lesson loading initiated")
this.name = name;
};
this.onInfoLoaded = function() {
@ -103,12 +91,13 @@ define(['jquery',
});
this.listenTo(this.helpControlsView,'attack:show',this.hideShowAttack);
this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'hints:show',this.onShowHints)
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,'hints:show',this.onShowHints);
this.helpControlsView.render();
this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
@ -176,18 +165,21 @@ define(['jquery',
}
};
this.onShowHints = function() {
this.showHints = function() {
this.lessonHintView.render();
this.lessonHintView.
};
this.hideShowAttack = function (options) { // will likely expand this to encompass
if (options.show) {
$('div#attack-container').show();
$('div#attack-container div.modal-header button.close, #about-modal div.modal-footer button').unbind('click').on('click', function() {
$('div#attack-container').hide(200);
$('#attack-container').show();
$('#attack-container div.modal-header button.close, #about-modal div.modal-footer button').unbind('click').on('click', function() {
$('#attack-container').hide(200);
});
//this.lessonView.makeFormsAjax();
//this.lessonView.ajaxifyAttackHref();
if (this.lessonInfoModel.get('numberHints') > 0) {
this.lessonView.$el.find('#show-hints-button').unbind().on('click',_.bind(this.showHints,this)).show();
}
}
};

33
webgoat-container/src/main/resources/static/js/goatApp/model/LessonContentModel.js
View File

@ -14,24 +14,25 @@ define(['jquery',
selectedItem:null
},
initialize: function (options) {
this.scrParam = null;
this.menuParam = null;
this.stageParam = null;
this.numParam = null;
this.baseUrlRoot = 'attack';
//this.scrParam = null;
//this.menuParam = null;
//this.stageParam = null;
//this.numParam = null;
//this.baseUrlRoot = '';
},
loadData: function(options) {
this.urlRoot = this.baseUrlRoot + "?Screen=" + options.scr + '&menu=' + options.menu;
if (options.stage != null) {
this.urlRoot += '&stage=' + options.stage;
}
if (options.num != null) {
this.urlRoot += '&Num=' + options.num;
}
this.set('menuParam', options.menu);
this.set('scrParam', options.scr);
this.set('stageParam', options.stage)
this.set('numParam', options.num)
this.urlRoot = _.escape(encodeURIComponent(options.name)) + '.lesson'
// if (options.stage != null) {
// this.urlRoot += '&stage=' + options.stage;
// }
// if (options.num != null) {
// this.urlRoot += '&Num=' + options.num;
// }
//TODO - is below needed anymore?
// this.set('menuParam', options.menu);
// this.set('scrParam', options.scr);
// this.set('stageParam', options.stage);
// this.set('numParam', options.num);
var self = this;
this.fetch().done(function(data) {
self.setContent(data);

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

@ -22,9 +22,9 @@ define(['jquery',
var GoatAppRouter = Backbone.Router.extend({
routes: {
'welcome':'welcomeRoute',
'attack/:scr/:menu':'attackRoute',
'attack/:scr/:menu/:stage':'attackRoute',
'attack/:scr/:menu/*stage/:num':'attackRoute',
'lesson/:name':'lessonRoute'
//'attack/:scr/:menu/:stage':'attackRoute',
//'attack/:scr/:menu/*stage/:num':'attackRoute',
},
lessonController: new LessonController({
@ -40,16 +40,21 @@ define(['jquery',
this.lessonController.start();
// this.menuController.initMenu();
goatRouter.on('route:attackRoute', function(scr,menu,stage,num) {
this.lessonController.loadLesson(scr,menu,stage,num);
this.menuController.updateMenu(scr,menu);
// goatRouter.on('route:attackRoute', function(scr,menu,stage,num) {
// this.lessonController.loadLesson(scr,menu,stage,num);
// this.menuController.updateMenu(scr,menu);
// });
goatRouter.on('route:lessonRoute', function(name) {
console.log('lesson route initiated');
this.lessonController.loadLesson(name);
//TODO - update menu code from below
this.menuController.updateMenu(name);
});
goatRouter.on('route:welcomeRoute', function() {
this.lessonController.loadWelcome();
});
goatRouter.on("route", function(route, params) {
});
goatRouter.on("route", function(route, params) {});
Backbone.history.start();
this.listenTo(this.lessonController, 'menu:reload',this.reloadMenu)

7
webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js
View File

@ -32,9 +32,7 @@ function($,_,Backbone) {
if (true) { //FIXME: change to this.hasAttack
this.$el.find('#show-attack-button').unbind().on('click',_.bind(this.showAttack,this)).show();
}
if (this.hasHints) {
this.$el.find('#show-hints-button').unbind().on('click',_.bind(this.showHints,this)).show();
}
this.$el.find('#restart-lesson-button').unbind().on('click',_.bind(this.restartLesson,this)).show();
//this.$el.append(this.helpButtons.restartLesson);
@ -52,9 +50,6 @@ function($,_,Backbone) {
this.trigger('attack:show',{show:true});
},
showHints: function() {
this.trigger('hints:show','hints');
},
restartLesson: function() {
this.trigger('lesson:restart');
}

14
webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js
View File

@ -19,13 +19,23 @@ function($,
this.hideHints();
},
isVisible: function() {
return this.$el.is(':visible');
},
toggleLabel: function() {
this.$el.text((showing) ? 'Hide hints' : 'Show hints');
},
render:function() {
if (this.$el.is(':visible')) {
if (this.isVisible()) {
this.$el.hide(350);
} else {
this.$el.show(350);
}
this.toggleLabel()
if (this.collection.length > 0) {
this.hideShowPrevNextButtons();
}

6
webgoat-container/src/main/resources/templates/lesson_content.html
View File

@ -14,9 +14,7 @@
<div th:switch="${migrated}">
<div th:case="false" th:utext="${lesson.content}"></div>
<div th:case="true" th:replace="lesson:__${lesson.html}__"></div>
<div th:case="true" th:replace="lesson:__${lesson.id}__"></div>
</div>
</html>
</html>

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

@ -8,11 +8,11 @@
<meta http-equiv="Cache-Control" CONTENT="no-store"/>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"/> <![endif]-->
<id class="no-js lt-ie9 lt-ie8 lt-ie7"/> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"/> <![endif]-->
<id class="no-js lt-ie9 lt-ie8"/> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"/> <![endif]-->
<id class="no-js lt-ie9"/> <![endif]-->
<!--[if gt IE 8]><!-->
<!-- CSS -->
@ -34,7 +34,7 @@
<!-- Require.js used to load js asynchronously -->
<script src="js/libs/require.min.js" data-main="js/main.js"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta http-equiv="Content-Type" content="text/id; charset=ISO-8859-1"/>
<title>WebGoat</title>
</head>
<body>
@ -107,33 +107,17 @@
<div class="col-md-8">
<div class="col-md-12" align="left">
<div class="panel" id="help-controls">
<button class="btn btn-primary btn-xs btn-danger help-button" id="show-source-button">Show
Source
<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-solution-button">Show
Solution
<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-hints-button">Show
Hints
<button class="btn btn-xs help-button" id="restart-lesson-button">
Reset Lesson
</button>
<button class="btn btn-primary btn-xs btn-danger help-button" id="show-attack-button">Attack It
</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 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>
<!-- hints moved into lesson template -->
</div>
<div class="col-md-12" align="left">
<div id="lesson-content-wrapper" class="panel">
@ -141,35 +125,36 @@
</div>
</div>
</div><!--col-md-8 end-->
<div class="col-md-4">
<div class="col-md-12">
<div class="panel">
<div class="panel-body">
<div align="left">
<h3>Cookies / Parameters</h3>
</div>
<hr/>
<div id="cookies-and-params">
<div id="cookies-view">
<h4>Cookies</h4>
</div>
<div id="params-view"> <!--class="paramsView"-->
<h4>Params</h4>
</div>
</div>
<div id="developer-control-container">
<div align="left">
<h3>Developer controls</h3>
</div>
<hr/>
<div id="developer-controls">
<!--<div class="col-md-4">-->
<!--<div class="col-md-12">-->
<!--<div class="panel">-->
<!--<div class="panel-body">-->
<!--<div align="left">-->
<!--<h3>Cookies / Parameters</h3>-->
<!--</div>-->
<!--<hr/>-->
<!--<div id="cookies-and-params">-->
<!--<div id="cookies-view">-->
<!--<h4>Cookies</h4>-->
<!--</div>-->
<!--<div id="params-view"> &lt;!&ndash;class="paramsView"&ndash;&gt;-->
<!--<h4>Params</h4>-->
<!--</div>-->
<!--</div>-->
<!--<div id="developer-control-container">-->
<!--<div align="left">-->
<!--<h3>Developer controls</h3>-->
<!--</div>-->
<!--<hr/>-->
<!--<div id="developer-controls">-->
</div>
</div>
</div>
</div>
</div>
</div><!--col-md-4 end-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--col-md-4 end-->
</div>
<div id="lesson-helps-wrapper" class="panel">
<div class="lesson-help" id="lesson-plan-row">