CORD GUI -- Bundle Icons added to git. Login/logout functionality added.
Change-Id: I291b8e3106db3f47c5a9d9b4d06403b35e53d635
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
index a2c3b00..94c3883 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
@@ -35,7 +35,11 @@
.mast div.right {
right: 7%;
- width: 30%;
+ width: 37%;
+}
+
+.mast h1 {
+ font-size: 250%;
}
.mast a,
@@ -47,8 +51,21 @@
.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;
+}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
index cd73f6c..cee8c10 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
+++ b/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>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.js b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.js
index 4ffb64d..090cb59 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.js
@@ -14,10 +14,33 @@
* limitations under the License.
*/
-angular.module('cordMast', [])
- .directive('mast', function () {
- return {
- restrict: 'E',
- templateUrl: 'app/fw/mast/mast.html'
- };
- });
+(function () {
+ 'use strict';
+
+ var urlSuffix = '/rs/logout';
+
+ 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'
+ };
+ });
+}());
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
index 91044d0..464f95b 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
+++ b/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 {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
index a99a70e..5974749 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
+++ b/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 @@
font-weight: lighter;
}
+div.container {
+ min-height: 100%;
+}
+
button,
input[type="button"],
input[type="reset"] {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
index 8f5002c..addb453 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
+++ b/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 {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
index a51ab18..bdab3fc 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
+++ b/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>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
index dc027e6..72b37a5 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
+++ b/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 () {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css
index 3fde6f8..3202930 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css
+++ b/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 @@
top: -140px;
}
-div#login-logo {
- margin-top: 13%;
- width: 217px;
-}
-div#login-logo, div#login-form {
+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 @@
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 @@
color: white;
background-color: rgb(122, 188, 229);
}
+
+#login-form input.ng-invalid.ng-touched {
+ background-color: #CE5650;
+ color: white;
+}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
index cc22598..34c188d 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
+++ b/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 type="password" placeholder="password">
- <a href="#/home">
- <input ng-click="login()" type="button" value="Log In">
- </a>
+ <input ng-model="email" type="text" placeholder="email" required>
+ <input ng-model="password" type="password" placeholder="password" required>
+ <input ng-click="login()" type="button" value="Log In">
</form>
</div>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js
index fb54f0a..b4d92ff 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js
+++ b/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',
- function ($log, $scope, $resource) {
+ .controller('CordLoginCtrl',
+ ['$log', '$scope', '$resource', '$location', '$window',
+ function ($log, $scope, $resource, $location, $window) {
var LoginData, resource;
$scope.page.curr = 'login';
- $scope.login = function () {
- var email;
- if (!$scope.email) {
- email = 'mom@user.org';
- } else {
- email = $scope.email;
- }
+ function getResource(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.');
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/firewall.png b/apps/demo/cord-gui/src/main/webapp/imgs/firewall.png
new file mode 100644
index 0000000..2da59f0
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/firewall.png
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/internet.png b/apps/demo/cord-gui/src/main/webapp/imgs/internet.png
new file mode 100644
index 0000000..0644c59
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/internet.png
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/url_filter.png b/apps/demo/cord-gui/src/main/webapp/imgs/url_filter.png
new file mode 100644
index 0000000..c5c8960
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/url_filter.png
Binary files differ
