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 { #about-modal {
opacity: 95%; opacity: 95%;
} }
.modal-header {
border-bottom:none !important
}
/* ========================================================================== /* ==========================================================================
Media Queries Media Queries
========================================================================== */ ========================================================================== */
@ -904,6 +909,14 @@ cookie-container {
#lesson-hint-container { #lesson-hint-container {
display: none; display: none;
} }
#lesson-hint {
background-color: #ccc;
border-radius: 4px;
border-color: #999;
margin-top:4px;
}
#hintsViewTop{ #hintsViewTop{
display: none; display: none;
background-color: #eee; background-color: #eee;
@ -929,6 +942,6 @@ cookie-container {
/* ATTACK DISPLAY */ /* ATTACK DISPLAY */
div.attack-container { #attack-container {
display:none; display:none;
} }

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

@ -61,36 +61,24 @@ define(['jquery',
this.menuButtonView = new MenuButtonView(); this.menuButtonView = new MenuButtonView();
}; };
this.loadLesson = function(scr,menu,stage,num) { this.loadLesson = function(name) {
this.titleView = new TitleView(); this.titleView = new TitleView();
this.helpsLoaded = {}; this.helpsLoaded = {};
if (typeof(scr) == "undefined") { if (typeof(name) === 'undefined' || name === null) {
scr = null; //TODO: implement lesson not found or return to welcome page?
}
if (typeof(menu) == "undefined") {
menu = null;
}
if (typeof(stage) == "undefined") {
stage = null;
}
if (typeof(num) == "undefined") {
num = null;
} }
this.lessonContent.loadData({ this.lessonContent.loadData({
'scr': scr, 'name':name
'menu': menu, // 'scr': scr,
'stage': stage, // 'menu': menu,
'num': num, // 'stage': stage,
// 'num': num,
}); });
this.planView = {}; this.planView = {};
this.solutionView = {}; this.solutionView = {};
this.sourceView = {}; this.sourceView = {};
this.lessonHintView = {}; this.lessonHintView = {};
this.scr = scr; this.name = name;
this.menu = menu;
this.stage = stage;
this.num = num;
console.log("Lesson loading initiated")
}; };
this.onInfoLoaded = function() { this.onInfoLoaded = function() {
@ -104,11 +92,12 @@ define(['jquery',
this.listenTo(this.helpControlsView,'attack:show',this.hideShowAttack); this.listenTo(this.helpControlsView,'attack:show',this.hideShowAttack);
this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps); this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'hints:show',this.onShowHints)
this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps); this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson); this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
this.listenTo(this.developerControlsView, 'dev:labels', this.restartLesson); this.listenTo(this.developerControlsView, 'dev:labels', this.restartLesson);
this.listenTo(this,'hints:show',this.onShowHints);
this.helpControlsView.render(); this.helpControlsView.render();
this.titleView.render(this.lessonInfoModel.get('lessonTitle')); this.titleView.render(this.lessonInfoModel.get('lessonTitle'));
@ -176,18 +165,21 @@ define(['jquery',
} }
}; };
this.onShowHints = function() { this.showHints = function() {
this.lessonHintView.render(); this.lessonHintView.render();
this.lessonHintView.
}; };
this.hideShowAttack = function (options) { // will likely expand this to encompass this.hideShowAttack = function (options) { // will likely expand this to encompass
if (options.show) { if (options.show) {
$('div#attack-container').show(); $('#attack-container').show();
$('div#attack-container div.modal-header button.close, #about-modal div.modal-footer button').unbind('click').on('click', function() { $('#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').hide(200);
}); });
//this.lessonView.makeFormsAjax(); if (this.lessonInfoModel.get('numberHints') > 0) {
//this.lessonView.ajaxifyAttackHref();
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 selectedItem:null
}, },
initialize: function (options) { initialize: function (options) {
this.scrParam = null; //this.scrParam = null;
this.menuParam = null; //this.menuParam = null;
this.stageParam = null; //this.stageParam = null;
this.numParam = null; //this.numParam = null;
this.baseUrlRoot = 'attack'; //this.baseUrlRoot = '';
}, },
loadData: function(options) { loadData: function(options) {
this.urlRoot = this.baseUrlRoot + "?Screen=" + options.scr + '&menu=' + options.menu; this.urlRoot = _.escape(encodeURIComponent(options.name)) + '.lesson'
if (options.stage != null) { // if (options.stage != null) {
this.urlRoot += '&stage=' + options.stage; // this.urlRoot += '&stage=' + options.stage;
} // }
if (options.num != null) { // if (options.num != null) {
this.urlRoot += '&Num=' + options.num; // this.urlRoot += '&Num=' + options.num;
} // }
this.set('menuParam', options.menu); //TODO - is below needed anymore?
this.set('scrParam', options.scr); // this.set('menuParam', options.menu);
this.set('stageParam', options.stage) // this.set('scrParam', options.scr);
this.set('numParam', options.num) // this.set('stageParam', options.stage);
// this.set('numParam', options.num);
var self = this; var self = this;
this.fetch().done(function(data) { this.fetch().done(function(data) {
self.setContent(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({ var GoatAppRouter = Backbone.Router.extend({
routes: { routes: {
'welcome':'welcomeRoute', 'welcome':'welcomeRoute',
'attack/:scr/:menu':'attackRoute', 'lesson/:name':'lessonRoute'
'attack/:scr/:menu/:stage':'attackRoute', //'attack/:scr/:menu/:stage':'attackRoute',
'attack/:scr/:menu/*stage/:num':'attackRoute', //'attack/:scr/:menu/*stage/:num':'attackRoute',
}, },
lessonController: new LessonController({ lessonController: new LessonController({
@ -40,16 +40,21 @@ define(['jquery',
this.lessonController.start(); this.lessonController.start();
// this.menuController.initMenu(); // this.menuController.initMenu();
goatRouter.on('route:attackRoute', function(scr,menu,stage,num) { // goatRouter.on('route:attackRoute', function(scr,menu,stage,num) {
this.lessonController.loadLesson(scr,menu,stage,num); // this.lessonController.loadLesson(scr,menu,stage,num);
this.menuController.updateMenu(scr,menu); // 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() { goatRouter.on('route:welcomeRoute', function() {
this.lessonController.loadWelcome(); this.lessonController.loadWelcome();
}); });
goatRouter.on("route", function(route, params) { goatRouter.on("route", function(route, params) {});
});
Backbone.history.start(); Backbone.history.start();
this.listenTo(this.lessonController, 'menu:reload',this.reloadMenu) 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 if (true) { //FIXME: change to this.hasAttack
this.$el.find('#show-attack-button').unbind().on('click',_.bind(this.showAttack,this)).show(); 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.find('#restart-lesson-button').unbind().on('click',_.bind(this.restartLesson,this)).show();
//this.$el.append(this.helpButtons.restartLesson); //this.$el.append(this.helpButtons.restartLesson);
@ -52,9 +50,6 @@ function($,_,Backbone) {
this.trigger('attack:show',{show:true}); this.trigger('attack:show',{show:true});
}, },
showHints: function() {
this.trigger('hints:show','hints');
},
restartLesson: function() { restartLesson: function() {
this.trigger('lesson:restart'); this.trigger('lesson:restart');
} }

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

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

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

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