JS refactor. Authentication and rough login form & logic on client-side. Tiny…

JS refactor. Authentication and rough login form & logic on client-side. Tiny change in Java regarding authentication type.

service/pom.xml

@@ -95,6 +95,11 @@
             <artifactId>font-awesome</artifactId>
             <version>4.5.0</version>
         </dependency>
+        <dependency>
+            <groupId>org.webjars.bower</groupId>
+            <artifactId>angular-cookies</artifactId>
+            <version>1.4.5</version>
+        </dependency>
         <dependency>
             <groupId>commons-collections</groupId>
             <artifactId>commons-collections</artifactId>

service/src/main/java/CTFApplication.java

@@ -63,6 +63,7 @@ public class CTFApplication extends Application<ApplicationConfiguration>
                         .setAuthenticator(injector.getInstance(ExampleAuthenticator.class))
                         .setAuthorizer(new ExampleAuthorizer())
                         .setRealm("SUPER SECRET STUFF")
+                        .setPrefix("Not-So-Basic")
                         .buildAuthFilter()));
         environment.jersey().register(RolesAllowedDynamicFeature.class);
         environment.jersey().register(new AuthValueFactoryProvider.Binder<>(User.class));

service/src/main/resources/assets/index.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="/page/statics/css/main.css">
 </head>
 
-<nav>
+<nav ng-controller="NavigationController">
     <div class="nav-wrapper container">
         <a href="#" class="brand-logo">
             <span class="title"></span>
@@ -18,6 +18,7 @@
             <li><a href="page#/home">Początek</a></li>
             <li><a href="page#/tasks">Zadania</a></li>
             <li><a href="page#/scores">Wyniki</a></li>
+            <li ng-if="logged" ng-click="logout()">Wyloguj {{user}}</li>
         </ul>
     </div>
 </nav>
@@ -32,10 +33,23 @@
 <script type="text/javascript" src="/webjars/materializecss/js/materialize.min.js"></script>
 <script type="text/javascript" src="/webjars/angularjs/angular.min.js"></script>
 <script type="text/javascript" src="/webjars/angular-ui-router/angular-ui-router.min.js"></script>
+<script type="text/javascript" src="/webjars/angular-cookies/angular-cookies.min.js"></script>
 <script type="text/javascript" src="/page/statics/libs/angular-materialize.js"></script>
 <script type="text/javascript" src="/page/statics/libs/angular-breadcrumb.min.js"></script>
 <script type="text/javascript" src="/page/statics/libs/typed.js"></script>
+
+
 <script type="text/javascript" src="/page/statics/js/main.js"></script>
+<script type="text/javascript" src="/page/statics/js/base64.js"></script>
+<script type="text/javascript" src="/page/statics/js/apiProvider.js"></script>
+<script type="text/javascript" src="/page/statics/js/authenticationService.js"></script>
+<script type="text/javascript" src="/page/statics/js/controllers/navigationController.js"></script>
+<script type="text/javascript" src="/page/statics/js/controllers/loginController.js"></script>
+<script type="text/javascript" src="/page/statics/js/controllers/taskController.js"></script>
+<script type="text/javascript" src="/page/statics/js/controllers/tasksController.js"></script>
+<script type="text/javascript" src="/page/statics/js/controllers/scoreboardController.js"></script>
+
+
 <script>
 
     $(function(){

service/src/main/resources/assets/login.html

+<div ng-controller="LoginController">
+    <div ng-show="error" class="alert alert-danger">{{error}}</div>
+    <form name="form" ng-submit="login()" role="form">
+        <div class="form-group">
+            <label for="username">Username</label>
+            <i class="fa fa-key"></i>
+            <input type="text" name="username" id="username" class="form-control" ng-model="username" required />
+            <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
+        </div>
+        <div class="form-group">
+            <label for="password">Password</label>
+            <i class="fa fa-lock"></i>
+            <input type="password" name="password" id="password" class="form-control" ng-model="password" required />
+            <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
+        </div>
+        <div class="form-actions">
+            <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-danger">Login</button>
+            <img ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
+        </div>
+    </form>
+</div>
\ No newline at end of file

service/src/main/resources/assets/statics/js/apiProvider.js

+(function(){
+    angular.module('ctfApp').factory('APIProvider', ['$http', 'AppSettings', function($http, AppSettings){
+        var tasks, teams, scores;
+        return {
+            getScores: function(){},
+            getTasks: function(callback){
+                $http.get(AppSettings.apiAddress + '/tasks').
+                    success(function(data) {
+                        tasks = data;
+                        if (callback) callback(data);
+                    });
+            },
+            getTaskById: function(id, callback){
+                var result;
+                if (!tasks) {
+                    this.getTasks(function(data){
+                        result = this.getTaskById(id, callback)
+                    }.bind(this));
+                }
+                else {
+                    result = tasks.filter(function(task){
+                        return task.level == id;
+                    })[0];
+                }
+                callback(result);
+            },
+            submitFlag: function(flag){
+                return $http.post(AppSettings.apiAddress + '/solutions', flag);
+            }
+        };
+    }]);
+})();
\ No newline at end of file

service/src/main/resources/assets/statics/js/authenticationService.js

+(function () {
+
+    angular.module('ctfApp').factory('AuthenticationService', ['AppSettings', 'Base64', '$http', '$cookieStore', '$rootScope',
+        function (AppSettings, Base64, $http, $cookieStore, $rootScope) {
+
+            return {
+
+                /**
+                 * Login user.
+                 * @param username
+                 * @param password
+                 * @param callback
+                 */
+                login: function (username, password, callback) {
+
+                    $http.get(AppSettings.apiAddress + '/whoami', {
+                        headers: {'Authorization': 'Not-So-Basic ' + Base64.encode(username + ':' + password)}
+                    })
+                        .then(function (response) {
+                            console.debug("RESPONSE", response);
+                            response.team = response.data.teamName;
+                            callback(response);
+                        }, function(response) {
+                            callback(response);
+                        })
+
+                },
+
+                /**
+                 * Logout.
+                 * @param callback
+                 */
+                logout: function (callback) {
+
+                    $http.get(AppSettings.apiAddress + '/whoami', {
+                        headers: {'Authorization': 'Not-So-Basic ' + Base64.encode('askdjfadsf' + ':' + 'adsfasskdjfadsf')}
+                    }).then(function(response){
+                        this.clearCredentials();
+                        callback(response);
+                    }.bind(this), function(response){
+                        this.clearCredentials();
+                        callback(response);
+                    }.bind(this))
+
+
+                },
+
+                /**
+                 * Saves credentials to cookies and ensures that they are appended to every request.
+                 * @param username
+                 * @param password
+                 */
+                setCredentials: function (username, password) {
+
+                    var authdata = Base64.encode(username + ':' + password);
+
+                    $rootScope.globals = {
+                        currentUser: {
+                            username: username,
+                            authdata: authdata
+                        }
+                    };
+
+                    $http.defaults.headers.common['Authorization'] = 'Not-So-Basic ' + authdata;
+                    $cookieStore.put('globals', $rootScope.globals);
+
+                },
+
+                /**
+                 * Clears credentials saved in cookies.
+                 */
+                clearCredentials: function () {
+
+                    $rootScope.globals = {};
+                    $cookieStore.remove('globals');
+                    $http.defaults.headers.common.Authorization = 'Not-So-Basic '
+
+                }
+
+            };
+        }
+    ]);
+})();
\ No newline at end of file

service/src/main/resources/assets/statics/js/base64.js

+(function(){
+    angular.module('ctfApp').factory('Base64', function () {
+        /* jshint ignore:start */
+
+        var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+
+        return {
+            encode: function (input) {
+                var output = "";
+                var chr1, chr2, chr3 = "";
+                var enc1, enc2, enc3, enc4 = "";
+                var i = 0;
+
+                do {
+                    chr1 = input.charCodeAt(i++);
+                    chr2 = input.charCodeAt(i++);
+                    chr3 = input.charCodeAt(i++);
+
+                    enc1 = chr1 >> 2;
+                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+                    enc4 = chr3 & 63;
+
+                    if (isNaN(chr2)) {
+                        enc3 = enc4 = 64;
+                    } else if (isNaN(chr3)) {
+                        enc4 = 64;
+                    }
+
+                    output = output +
+                        keyStr.charAt(enc1) +
+                        keyStr.charAt(enc2) +
+                        keyStr.charAt(enc3) +
+                        keyStr.charAt(enc4);
+                    chr1 = chr2 = chr3 = "";
+                    enc1 = enc2 = enc3 = enc4 = "";
+                } while (i < input.length);
+
+                return output;
+            },
+
+            decode: function (input) {
+                var output = "";
+                var chr1, chr2, chr3 = "";
+                var enc1, enc2, enc3, enc4 = "";
+                var i = 0;
+
+                // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
+                var base64test = /[^A-Za-z0-9\+\/\=]/g;
+                if (base64test.exec(input)) {
+                    window.alert("There were invalid base64 characters in the input text.\n" +
+                        "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
+                        "Expect errors in decoding.");
+                }
+                input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+
+                do {
+                    enc1 = keyStr.indexOf(input.charAt(i++));
+                    enc2 = keyStr.indexOf(input.charAt(i++));
+                    enc3 = keyStr.indexOf(input.charAt(i++));
+                    enc4 = keyStr.indexOf(input.charAt(i++));
+
+                    chr1 = (enc1 << 2) | (enc2 >> 4);
+                    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+                    chr3 = ((enc3 & 3) << 6) | enc4;
+
+                    output = output + String.fromCharCode(chr1);
+
+                    if (enc3 != 64) {
+                        output = output + String.fromCharCode(chr2);
+                    }
+                    if (enc4 != 64) {
+                        output = output + String.fromCharCode(chr3);
+                    }
+
+                    chr1 = chr2 = chr3 = "";
+                    enc1 = enc2 = enc3 = enc4 = "";
+
+                } while (i < input.length);
+
+                return output;
+            }
+        };
+
+        /* jshint ignore:end */
+    });
+})();
\ No newline at end of file

service/src/main/resources/assets/statics/js/controllers/loginController.js

+(function(){
+    angular.module('ctfApp').controller('LoginController',
+        ['$scope', '$rootScope', '$location', 'AuthenticationService',
+            function ($scope, $rootScope, $location, AuthenticationService) {
+                // reset login status
+                AuthenticationService.clearCredentials();
+
+                $scope.login = function () {
+                    $scope.dataLoading = true;
+                    AuthenticationService.login($scope.username, $scope.password, function(response) {
+                        if(response.status == 200) {
+                            AuthenticationService.setCredentials($scope.username, $scope.password, response.team);
+                            $location.path('/');
+                        } else {
+                            $scope.error = response.message;
+                            $scope.dataLoading = false;
+                        }
+                    });
+                };
+
+
+            }]);
+})();
\ No newline at end of file

service/src/main/resources/assets/statics/js/controllers/navigationController.js

+(function(){
+    angular.module('ctfApp').controller('NavigationController', ['$scope', '$rootScope', '$location', 'AuthenticationService',
+        function($scope, $rootScope, $location, AuthenticationService){
+
+        $scope.logged = $rootScope.globals ? !!$rootScope.globals.currentUser : false;
+
+        $scope.user = $rootScope.globals && $rootScope.globals.currentUser ? $rootScope.globals.currentUser.username : undefined;
+
+        $scope.logout = function(){
+            AuthenticationService.logout(function(data){
+                console.log("Logged you out... i guess...", data);
+                $location.path('/');
+            });
+        };
+
+        $scope.$watch(function(){
+            return $rootScope.globals;
+        }, function(){
+            $scope.logged = $rootScope.globals ? !!$rootScope.globals.currentUser : false;
+            $scope.user = $rootScope.globals && $rootScope.globals.currentUser ? $rootScope.globals.currentUser.username : undefined;
+        });
+
+
+    }]);
+})();

service/src/main/resources/assets/statics/js/controllers/scoreboardController.js

+(function(){
+    angular.module('ctfApp').controller('ScoreboardController', ['$scope', '$http', 'AppSettings', function($scope, $http, AppSettings) {
+        var mock = { "nazwa zadania": ["lista","druzyn","ktora","rozwiazala"], "drugie zadanie": ["inna","druzyn","ktora","go"] };
+        var calculatePerTeam = function(data) {
+            var teams = {};
+            for (var key in data) {
+                if (data.hasOwnProperty(key)) {
+                    var task = data[key];
+                    for(var i = 0; i < task.length; i++){
+                        if (!teams[task[i]]){
+                            teams[task[i]] = 1;
+                        }
+                        else {
+                            teams[task[i]] += 1;
+                        }
+                    }
+                }
+            }
+            return teams;
+        };
+
+        function viewGraph(){
+            $('.column').css('height','0');
+            console.log($scope.teamsScores);
+            setTimeout(function(){
+                    $('.column').each(function(){
+                        $(this).animate({width: 150*$(this).attr('data-score')}, 1500);
+                    });
+                }
+            );
+        }
+
+
+        $http.get(AppSettings.apiAddress + '/solutions/all').
+            success(function(data) {
+                console.log(data);
+                if ($.isEmptyObject(data)){
+                    data = mock; // Delete!
+                }
+                $scope.teamsScores = calculatePerTeam(data);
+                console.log($scope.teamsScores);
+                viewGraph()
+            });
+
+
+
+    }]);
+
+})();
\ No newline at end of file

service/src/main/resources/assets/statics/js/controllers/taskController.js

+(function(){
+    angular.module('ctfApp').controller('TaskController', ['$scope', '$stateParams', 'APIProvider', 'AppSettings', function($scope, $stateParams, APIProvider, AppSettings) {
+        $scope.submitUnknown = false;
+        $scope.apiAddress = AppSettings.apiAddress;
+        $scope.selectedTaskId = $stateParams.taskLevel;
+        console.log('SELECTED TASK ID', $scope.selectedTaskId);
+        APIProvider.getTaskById($scope.selectedTaskId, function(data){
+            console.log(data);
+            $scope.task = data;
+        });
+        $scope.submitFlag = function(){
+            var flag = $('input#flag-to-submit').val();
+            $scope.submitUnknown = true;
+            APIProvider.submitFlag(flag).success(function(){
+                Materialize.toast('Poprawna flaga! :)', 5000, 'toast-success');
+                $scope.submitUnknown = false;
+            }).error(function(){
+                console.log("Flaga zla!");
+                Materialize.toast('Błędna flaga! :(', 5000 ,'toast-error');
+                $scope.submitUnknown = false;
+            });
+
+        };
+    }]);
+})();
\ No newline at end of file

service/src/main/resources/assets/statics/js/controllers/tasksController.js

+(function(){
+    angular.module('ctfApp').controller('TasksController', ['$scope', '$http', 'APIProvider', 'AppSettings', function($scope, $http, APIProvider, AppSettings) {
+        $scope.apiAddress = AppSettings.apiAddress;
+        APIProvider.getTasks(function(data){
+            console.log(data);
+            $scope.tasks = data;
+        });
+    }]);
+})();
\ No newline at end of file

service/src/main/resources/assets/statics/js/main.js

@@ -2,7 +2,8 @@
 
     'use strict';
 
-    var app = angular.module('ctfApp', ['ui.router', 'ncy-angular-breadcrumb']);
+    var app = angular.module('ctfApp', ['ui.router', 'ncy-angular-breadcrumb', 'ngCookies']);
+
     app.config(function($stateProvider, $urlRouterProvider, $breadcrumbProvider) {
 
         $urlRouterProvider.otherwise('/home');
@@ -14,6 +15,11 @@
                 templateUrl: '/page/home.html'
             })
 
+            .state('login', {
+                url: '/login',
+                templateUrl: '/page/login.html'
+            })
+
             .state('tasks', {
                 url: '/tasks',
                 templateUrl: '/page/tasks.html'
@@ -37,117 +43,24 @@
         }
     });
 
+    app.run(['$rootScope', '$location', '$cookieStore', '$http',
+        function ($rootScope, $location, $cookieStore, $http) {
+            // keep user logged in after page refresh
+            $rootScope.globals = $cookieStore.get('globals') || {};
 
-    app.factory('APIProvider', ['$http', 'AppSettings', function($http, AppSettings){
-        var tasks, teams, scores;
-        return {
-            getScores: function(){},
-            getTasks: function(callback){
-                $http.get(AppSettings.apiAddress + '/tasks').
-                    success(function(data) {
-                        tasks = data;
-                        if (callback) callback(data);
-                    });
-            },
-            getTaskById: function(id, callback){
-                var result;
-                if (!tasks) {
-                    this.getTasks(function(data){
-                        result = this.getTaskById(id, callback)
-                    }.bind(this));
-                }
-                else {
-                    result = tasks.filter(function(task){
-                        return task.level == id;
-                    })[0];
-                }
-                callback(result);
-            },
-            submitFlag: function(flag){
-                return $http.post(AppSettings.apiAddress + '/solutions', flag);
+            if ($rootScope.globals.currentUser) {
+                $http.defaults.headers.common['Authorization'] = 'Not-So-Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
             }
-        };
-    }]);
-
-
-    app.controller('TasksController', ['$scope', '$http', 'APIProvider', 'AppSettings', function($scope, $http, APIProvider, AppSettings) {
-        $scope.apiAddress = AppSettings.apiAddress;
-        APIProvider.getTasks(function(data){
-            console.log(data);
-            $scope.tasks = data;
-        });
-    }]);
-
-    app.controller('TaskController', ['$scope', '$stateParams', 'APIProvider', 'AppSettings', function($scope, $stateParams, APIProvider, AppSettings) {
-        $scope.submitUnknown = false;
-        $scope.apiAddress = AppSettings.apiAddress;
-        $scope.selectedTaskId = $stateParams.taskLevel;
-        console.log('SELECTED TASK ID', $scope.selectedTaskId);
-        APIProvider.getTaskById($scope.selectedTaskId, function(data){
-            console.log(data);
-            $scope.task = data;
-        });
-        $scope.submitFlag = function(){
-            var flag = $('input#flag-to-submit').val();
-            $scope.submitUnknown = true;
-            APIProvider.submitFlag(flag).success(function(){
-                Materialize.toast('Poprawna flaga! :)', 5000, 'toast-success');
-                $scope.submitUnknown = false;
-            }).error(function(){
-                console.log("Flaga zla!");
-                Materialize.toast('Błędna flaga! :(', 5000 ,'toast-error');
-                $scope.submitUnknown = false;
-            });
 
-        };
-    }]);
-
-    app.controller('ScoreboardController', ['$scope', '$http', 'AppSettings', function($scope, $http, AppSettings) {
-        var mock = { "nazwa zadania": ["lista","druzyn","ktora","rozwiazala"], "drugie zadanie": ["inna","druzyn","ktora","go"] };
-        var calculatePerTeam = function(data) {
-            var teams = {};
-            for (var key in data) {
-                if (data.hasOwnProperty(key)) {
-                    var task = data[key];
-                    for(var i = 0; i < task.length; i++){
-                        if (!teams[task[i]]){
-                            teams[task[i]] = 1;
-                        }
-                        else {
-                            teams[task[i]] += 1;
-                        }
-                    }
+            $rootScope.$on('$locationChangeStart', function (event, next, current) {
+                // redirect to login page if not logged in
+                console.log('Globale', $rootScope.globals);
+                if ($location.path() !== '/login' && !$rootScope.globals.currentUser) {
+                    $location.path('/login');
                 }
-            }
-            return teams;
-        };
-
-        function viewGraph(){
-            $('.column').css('height','0');
-            console.log($scope.teamsScores);
-            setTimeout(function(){
-                    $('.column').each(function(){
-                        $(this).animate({width: 150*$(this).attr('data-score')}, 1500);
-                    });
-                }
-            );
-        }
-
-
-        $http.get(AppSettings.apiAddress + '/solutions/all').
-            success(function(data) {
-                console.log(data);
-                if ($.isEmptyObject(data)){
-                    data = mock; // Delete!
-                }
-                $scope.teamsScores = calculatePerTeam(data);
-                console.log($scope.teamsScores);
-                viewGraph()
             });
 
-
-
-    }]);
+        }]);
 
 })();