From d27712affa469ff9e871ac4d3f2854aa6d05eb65 Mon Sep 17 00:00:00 2001 From: Jason White Date: Tue, 5 Jul 2016 08:16:32 -0400 Subject: [PATCH] incremental UI changes --- .../src/main/resources/static/css/main.css | 15 ++- .../js/goatApp/controller/LessonController.js | 50 ++++------ .../js/goatApp/model/LessonContentModel.js | 33 +++---- .../static/js/goatApp/view/GoatRouter.js | 23 +++-- .../js/goatApp/view/HelpControlsView.js | 7 +- .../static/js/goatApp/view/HintView.js | 14 ++- .../resources/templates/lesson_content.html | 6 +- .../main/resources/templates/main_new.html | 95 ++++++++----------- 8 files changed, 121 insertions(+), 122 deletions(-) diff --git a/webgoat-container/src/main/resources/static/css/main.css b/webgoat-container/src/main/resources/static/css/main.css index dc79eafd1..383694ea5 100644 --- a/webgoat-container/src/main/resources/static/css/main.css +++ b/webgoat-container/src/main/resources/static/css/main.css @@ -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; } \ No newline at end of file diff --git a/webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js b/webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js index 4fedc2bf5..eb43259d7 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js +++ b/webgoat-container/src/main/resources/static/js/goatApp/controller/LessonController.js @@ -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(); + } } }; diff --git a/webgoat-container/src/main/resources/static/js/goatApp/model/LessonContentModel.js b/webgoat-container/src/main/resources/static/js/goatApp/model/LessonContentModel.js index d4923640d..60ca65a36 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/model/LessonContentModel.js +++ b/webgoat-container/src/main/resources/static/js/goatApp/model/LessonContentModel.js @@ -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); diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js b/webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js index 1d9e7ad94..3ca7688b7 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js +++ b/webgoat-container/src/main/resources/static/js/goatApp/view/GoatRouter.js @@ -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) diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js index 86235a16f..60f02600b 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js +++ b/webgoat-container/src/main/resources/static/js/goatApp/view/HelpControlsView.js @@ -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'); } diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js index cbe18e601..bd16640ae 100644 --- a/webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js +++ b/webgoat-container/src/main/resources/static/js/goatApp/view/HintView.js @@ -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(); } diff --git a/webgoat-container/src/main/resources/templates/lesson_content.html b/webgoat-container/src/main/resources/templates/lesson_content.html index 5572abf42..de18cb9d7 100644 --- a/webgoat-container/src/main/resources/templates/lesson_content.html +++ b/webgoat-container/src/main/resources/templates/lesson_content.html @@ -14,9 +14,7 @@
-
+
- - - + \ No newline at end of file diff --git a/webgoat-container/src/main/resources/templates/main_new.html b/webgoat-container/src/main/resources/templates/main_new.html index beea32f46..ce8175af8 100644 --- a/webgoat-container/src/main/resources/templates/main_new.html +++ b/webgoat-container/src/main/resources/templates/main_new.html @@ -8,11 +8,11 @@ + + + @@ -34,7 +34,7 @@