Add client-side for challenge push notifications

(resolves juice-shop#206)

Author: bkimminich

app/i18n/en.json

@@ -80,5 +80,6 @@
   "LABEL_STATUS":"Status",
   "STATUS_UNSOLVED":"unsolved",
   "STATUS_SOLVED":"solved",
-  "CALL_FOR_CONTRIBUTIONS":"Got an idea for a new challenge? Found a vulnerability that is not tracked here? Let us know via {{gitter}} community chat or by opening a {{github}} issue!"
+  "CALL_FOR_CONTRIBUTIONS":"Got an idea for a new challenge? Found a vulnerability that is not tracked here? Let us know via {{gitter}} community chat or by opening a {{github}} issue!",
+  "CHALLENGE_SOLVED": "You successfully solved a challenge: {{challenge}}"
 }

app/index.html

@@ -43,6 +43,7 @@
     <script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
     <script src="bower_components/angular-touch/angular-touch.min.js"></script>
     <script src="bower_components/angular-animate/angular-animate.min.js"></script>
+    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
     <script src="bower_components/ng-file-upload/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
     <script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
@@ -121,6 +122,10 @@
 
 <h1 class="hidden">OWASP Juice Shop</h1><!-- for SEO -->
 
+<div class="container" ng-controller="ChallengeSolvedNotificationController">
+    <div uib-alert ng-repeat="notification in notifications" ng-class="'alert alert-success'" close="closeNotification($index)" dismiss-on-timeout="10000">{{notification.message}}</div>
+</div>
+
 <!-- CONTENT -->
 <div class="container-fluid" ng-view></div>
 

app/js/app.js

@@ -25,6 +25,10 @@ angular.module('juiceShop').factory('authInterceptor', ['$rootScope', '$q', '$co
   }
 }])
 
+angular.module('juiceShop').factory('socket', ['socketFactory', function (socketFactory) {
+  return socketFactory()
+}])
+
 angular.module('juiceShop').config(['$httpProvider', function ($httpProvider) {
   'use strict'
   $httpProvider.interceptors.push('authInterceptor')
@@ -46,3 +50,4 @@ angular.module('juiceShop').config(['$translateProvider', function ($translatePr
   $translateProvider.determinePreferredLanguage()
   $translateProvider.fallbackLanguage('en')
 }])
+

app/js/controllers/ChallengeSolvedNotificationController.js

@@ -0,0 +1,23 @@
+angular.module('juiceShop').controller('ChallengeSolvedNotificationController', [
+  '$scope',
+  '$translate',
+  'socket',
+  function ($scope, $translate, socket) {
+    'use strict'
+
+    $scope.notifications = []
+
+    $scope.closeNotification = function (index) {
+      $scope.notifications.splice(index, 1)
+    }
+
+    socket.on('challenge solved', function (data) {
+      if (data && data.challenge) {
+        $translate('CHALLENGE_SOLVED', { challenge: data.challenge.description }).then(function (challengeSolved) {
+          $scope.notifications.push({message: challengeSolved})
+        }, function (translationId) {
+          $scope.notifications.push({message: translationId})
+        })
+      }
+    })
+  } ])

karma.conf-ci.js

@@ -54,6 +54,7 @@ module.exports = function (config) {
       'app/bower_components/angular-touch/angular-touch.js',
       'app/bower_components/angular-animate/angular-animate.js',
       'app/bower_components/angular-bootstrap/ui-bootstrap.js',
+      'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
       'app/bower_components/underscore/underscore.js',
       'app/bower_components/jquery/dist/jquery.js',
       'app/bower_components/ng-file-upload/ng-file-upload.js',

karma.conf.js

@@ -15,6 +15,7 @@ module.exports = function (config) {
       'app/bower_components/angular-touch/angular-touch.js',
       'app/bower_components/angular-animate/angular-animate.js',
       'app/bower_components/angular-bootstrap/ui-bootstrap.js',
+      'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
       'app/bower_components/underscore/underscore.js',
       'app/bower_components/jquery/dist/jquery.js',
       'app/bower_components/ng-file-upload/ng-file-upload.js',