CORD GUI -- Bundle Icons added to git. Login/logout functionality added.

Change-Id: I291b8e3106db3f47c5a9d9b4d06403b35e53d635

apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css

@@ -35,7 +35,11 @@ div.mast {
 
 .mast div.right {
     right: 7%;
-    width: 30%;
+    width: 37%;
+}
+
+.mast h1 {
+    font-size: 250%;
 }
 
 .mast a,
@@ -47,8 +51,21 @@ div.mast {
 .mast svg {
     position: absolute;
     top: -1px;
-    left: 88px;
+    left: 106px;
 }
 .mast g.icon use.glyph.bird {
     fill: #CE5650;
 }
+
+.mast li.logout {
+    list-style-type: none;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+.mast li.logout:hover {
+    border-bottom: 2px solid #CE5650;
+    list-style-type: none;
+    cursor: pointer;
+}

apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html

@@ -1,12 +1,15 @@
 <!--Mast HTML-->
 
-<div class="mast">
+<div class="mast" ng-controller="CordMastCtrl">
     <div class="left">
         <a href="#/home" class="logo"><h1>CORD</h1></a>
-        <icon size="25px" id="bird"></icon>
+        <icon size="30" id="bird"></icon>
     </div>
 
     <div class="right">
         <nav ng-show="page.curr !== 'login'"></nav>
+        <li class="logout"
+           ng-show="page.curr !== 'login'"
+           ng-click="logout()">Logout</li>
     </div>
 </div>

apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.js

@@ -14,10 +14,33 @@
  * limitations under the License.
  */
 
-angular.module('cordMast', [])
+(function () {
-    .directive('mast', function () {
+    'use strict';
-        return {
+
-            restrict: 'E',
+    var urlSuffix = '/rs/logout';
-            templateUrl: 'app/fw/mast/mast.html'
+
-        };
+    angular.module('cordMast', [])
-    });
+        .controller('CordMastCtrl',
+        ['$log','$scope', '$resource', '$location', '$window',
+            function ($log, $scope, $resource, $location, $window) {
+                var LogoutData, resource;
+
+                $scope.logout = function () {
+                    $log.debug('Logging out...');
+                    LogoutData = $resource($scope.shared.url + urlSuffix);
+                    resource = LogoutData.get({},
+                        function () {
+                            $location.path('/login');
+                            $window.location.href = $location.absUrl();
+                            $log.debug('Resource received:', resource);
+                        });
+                };
+            }])
+
+        .directive('mast', function () {
+            return {
+                restrict: 'E',
+                templateUrl: 'app/fw/mast/mast.html'
+            };
+        });
+}());

apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css

@@ -18,7 +18,7 @@
     display: table;
     table-layout: fixed;
     list-style-type: none;
-    width: 100%;
+    width: 80%;
 }
 
 .nav li {

apps/demo/cord-gui/src/main/webapp/app/view/common/common.css

@@ -18,6 +18,10 @@
     display: none !important;
 }
 
+html, body, div#frame, div#view {
+    height: 100%;
+}
+
 head, body, footer,
 h1, h2, h3, h4, h5, h6, p,
 a, ul, li, div,
@@ -74,6 +78,10 @@ th {
     font-weight: lighter;
 }
 
+div.container {
+    min-height: 100%;
+}
+
 button,
 input[type="button"],
 input[type="reset"] {

apps/demo/cord-gui/src/main/webapp/app/view/home/home.css

@@ -23,7 +23,7 @@
     width: 42%;
 }
 #home div.move-down {
-    margin-top: 10%;
+    margin-top: 5%;
 }
 
 #home div.image-holder {

apps/demo/cord-gui/src/main/webapp/app/view/home/home.html

@@ -7,6 +7,7 @@
     <div class="main-right">
         <div class="move-down">
             <div class="bundle-title">
+                <h4>Welcome {{shared.login}}!</h4>
                 <h5>You are subscribed to the</h5>
                 <h3>{{bundle}}</h3>
             </div>

apps/demo/cord-gui/src/main/webapp/app/view/home/home.js

@@ -20,7 +20,9 @@
     var urlSuffix = '/rs/dashboard';
 
     function randomDate(start, end) {
-        return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+        return new Date(
+            start.getTime() + Math.random() * (end.getTime() - start.getTime())
+        );
     }
 
     angular.module('cordHome', [])
@@ -38,12 +40,13 @@
 
                         if ($.isEmptyObject($scope.shared.userActivity)) {
                             $scope.users.forEach(function (user) {
-                                var date = randomDate(new Date(2015, 0, 1), new Date());
+                                var date = randomDate(new Date(2015, 0, 1),
+                                    new Date());
 
-                                $scope.shared.userActivity[user.id] = $filter('date')(date, 'mediumTime');
+                                $scope.shared.userActivity[user.id] =
+                                    $filter('date')(date, 'mediumTime');
                             });
                         }
-
                     },
                     // error
                     function () {

apps/demo/cord-gui/src/main/webapp/app/view/login/login.css

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+div#login{
+    /*background: url("/imgs/login.png") no-repeat;*/
+    height: 100%;
+}
+
 div#login-wrapper {
     text-align: center;
 }
@@ -28,21 +33,10 @@ div#login-wrapper {
     top: -140px;
 }
 
-div#login-logo {
+div#login-form {
-    margin-top: 13%;
-    width: 217px;
-}
-div#login-logo, div#login-form {
     display: inline-block;
 }
 
-#login-logo use.glyph.bird {
-    fill: #CE5650;
-}
-#login-logo circle {
-    fill: none;
-}
-
 #login div.outline {
     position: absolute;
     border: 1px solid rgba(115, 115, 115, 0.7);
@@ -57,12 +51,13 @@ div#login-form {
     margin-left: 2.5%;
     position: relative;
     width: 255px;
+    margin-top: 30%;
 }
 
 #login-form form {
     line-height: 250%;
-
 }
+
 #login-form input {
     display: block;
     height: 40px;
@@ -112,3 +107,8 @@ div#login-form {
     color: white;
     background-color: rgb(122, 188, 229);
 }
+
+#login-form input.ng-invalid.ng-touched {
+    background-color: #CE5650;
+    color: white;
+}

apps/demo/cord-gui/src/main/webapp/app/view/login/login.html

@@ -1,19 +1,13 @@
 <!-- Login page partial html -->
 <div id="login" class="container">
     <div id="login-wrapper">
-        <div id="login-logo">
-            <icon size="125" id="bird"></icon>
-        </div>
-
         <div id="login-form">
             <div class="outline"></div>
                 <h2>Subscriber Portal</h2>
                 <form>
-                    <input ng-model="email" type="text" placeholder="email">
+                    <input ng-model="email" type="text" placeholder="email" required>
-                    <input type="password" placeholder="password">
+                    <input ng-model="password" type="password" placeholder="password" required>
-                    <a href="#/home">
+                    <input ng-click="login()" type="button" value="Log In">
-                        <input ng-click="login()" type="button" value="Log In">
-                    </a>
                 </form>
         </div>
     </div>

apps/demo/cord-gui/src/main/webapp/app/view/login/login.js

@@ -19,20 +19,28 @@
     var urlSuffix = '/rs/login';
 
     angular.module('cordLogin', [])
-        .controller('CordLoginCtrl', ['$log', '$scope', '$resource',
+        .controller('CordLoginCtrl',
-            function ($log, $scope, $resource) {
+        ['$log', '$scope', '$resource', '$location', '$window',
+            function ($log, $scope, $resource, $location, $window) {
                 var LoginData, resource;
                 $scope.page.curr = 'login';
 
-                $scope.login = function () {
+                function getResource(email) {
-                    var email;
-                    if (!$scope.email) {
-                        email = 'mom@user.org';
-                    } else {
-                        email = $scope.email;
-                    }
                     LoginData = $resource($scope.shared.url + urlSuffix + '/' + email);
-                    resource = LoginData.get();
+                    resource = LoginData.get({},
+                        function () {
+                            $location.url('/home');
+                            $window.location.href = $location.absUrl();
+                        });
+                }
+
+                $scope.login = function () {
+
+                    if ($scope.email && $scope.password) {
+                        getResource($scope.email);
+                    }
+
+                    $scope.shared.login = $scope.email;
                 };
 
                 $log.debug('Cord Login Ctrl has been created.');