From 23594cd3f595923b4bdb4dc9142b86c259bbc402 Mon Sep 17 00:00:00 2001
From: Neha Gupta <gnehapk@gmail.com>
Date: Wed, 12 Sep 2018 13:51:08 +0900
Subject: [PATCH] Added branding changes Bugzilla: 1627988 tendrl-github-id:
 https://github.com/Tendrl/ui/issues/1067

---
 gulpfile.js                         |   5 +-
 package.json                        |   1 +
 src/commons/js/index.js             |   2 +-
 src/commons/scss/_base.scss         |  35 +++++++++
 src/config.json                     |   3 +-
 src/images/bg-modal-about-pf.png    | Bin 0 -> 10987 bytes
 src/index.html                      |   2 +-
 src/modules/base/header/header.html |  47 +++++++++---
 src/modules/base/header/header.js   |   6 +-
 src/modules/base/header/header.scss |   4 +
 src/modules/login/login.html        |  97 ++++++++++++------------
 src/modules/login/login.scss        | 113 +---------------------------
 12 files changed, 140 insertions(+), 175 deletions(-)
 create mode 100644 src/images/bg-modal-about-pf.png

diff --git a/gulpfile.js b/gulpfile.js
index 9ce0a8f0..1feac7a2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -110,7 +110,10 @@ gulp.task("jsLibraries", function() {
         "node_modules/angular-patternfly/node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js",
         "node_modules/datatables/media/js/jquery.dataTables.js",
         "node_modules/angular-patternfly/node_modules/angularjs-datatables/dist/angular-datatables.js",
-        "node_modules/bootstrap-select/dist/js/bootstrap-select.js"
+        "node_modules/bootstrap-select/dist/js/bootstrap-select.js",
+        "node_modules/re-tree/re-tree.min.js",
+        "node_modules/ua-device-detector/ua-device-detector.min.js",
+        "node_modules/ng-device-detector/ng-device-detector.min.js"
     ])
     .pipe(uglify())
     .pipe(concat("libraries.js"))
diff --git a/package.json b/package.json
index ba6e0394..b1821a31 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
         "font-awesome": "^4.7.0",
         "idb-wrapper": "~1.7.1",
         "jquery": "~3.1.1",
+        "ng-device-detector": "^5.1.2",
         "numeral": "~1.5.3",
         "patternfly": "~3.51.1"
     },
diff --git a/src/commons/js/index.js b/src/commons/js/index.js
index 6be67184..2459ea18 100755
--- a/src/commons/js/index.js
+++ b/src/commons/js/index.js
@@ -1,7 +1,7 @@
 //# sourceURL=storage-management-plugin.js
 (function() {
 
-    var storageModule = angular.module("TendrlModule", ["ui.router", "ui.bootstrap", "frapontillo.bootstrap-switch", "patternfly.charts", "patternfly.card", "patternfly.form", "patternfly.notification", "patternfly.table", "patternfly.filters", "patternfly.modals"]);
+    var storageModule = angular.module("TendrlModule", ["ui.router", "ui.bootstrap", "frapontillo.bootstrap-switch", "patternfly.charts", "patternfly.card", "patternfly.form", "patternfly.notification", "patternfly.table", "patternfly.filters", "patternfly.modals", "ng.deviceDetector"]);
 
     /* Setting up provider for getting config data */
     storageModule.provider("config", function() {
diff --git a/src/commons/scss/_base.scss b/src/commons/scss/_base.scss
index 5bb5879f..29700582 100644
--- a/src/commons/scss/_base.scss
+++ b/src/commons/scss/_base.scss
@@ -208,4 +208,39 @@
     .toolbar-pf-actions .toolbar-pf-filter {
         width: 25%;
     }
+}
+
+
+/* About modal styles */
+
+.about-modal-pf {
+    background-image: url(/images/bg-modal-about-pf.png) !important;
+
+    .about-modal-footer-logo {
+        height: 35px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    #aboutModal .modal-dialog {
+        width: 460px;
+
+        .modal-body {
+            padding: 0 40px;
+        }
+
+        .about-modal-footer-logo {
+            height: 27px;
+        }
+    }
+}
+
+@media screen and (max-width: 480px) {
+    #aboutModal .modal-dialog {
+        width: 444px;
+    }
+
+    .about-modal-footer-logo {
+        height: 25px;
+    }
 }
\ No newline at end of file
diff --git a/src/config.json b/src/config.json
index b2d4c1ac..c593a256 100644
--- a/src/config.json
+++ b/src/config.json
@@ -5,5 +5,6 @@
     "msgRefreshIntervalTime": 5,
     "statusRefreshIntervalTime": 30,
     "eventsRefreshIntervalTime": 20,
-    "volumeRefreshInterval": 10
+    "volumeRefreshInterval": 10,
+    "releaseVersion": "1.6.3"
 }
diff --git a/src/images/bg-modal-about-pf.png b/src/images/bg-modal-about-pf.png
new file mode 100644
index 0000000000000000000000000000000000000000..7309fa85ffe39760b49b46fb13e0a333dfdea065
GIT binary patch
literal 10987
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

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
index ef9b5cce..40bf0d2d 100755
--- a/src/index.html
+++ b/src/index.html
@@ -15,7 +15,7 @@
 </head>
 
 <body class="tendrl-app">
-    <header ng-if="isHeaderShow"></header>
+    <tendrl-header ng-if="isHeaderShow"></tendrl-header>
     <tendrl-nav></tendrl-nav>
     <div class="container-fluid container-cards-pf container-pf-nav-pf-vertical container-pf-nav-pf-vertical-with-secondary margin-fix">
         <div class="row">
diff --git a/src/modules/base/header/header.html b/src/modules/base/header/header.html
index f98ea542..9cd3f30d 100644
--- a/src/modules/base/header/header.html
+++ b/src/modules/base/header/header.html
@@ -22,6 +22,11 @@
             <pf-toast-notification-list notifications="$root.notification" html-content="header.htmlContent" show-close="true" close-callback="header.notificationClose" update-viewing="header.updateViewing"></pf-toast-notification-list>
         </span>
         <ul class="nav navbar-nav navbar-right navbar-iconic" ng-if="!notification.message.length">
+            <li dropdown routerLinkActive="active" class="dropdown">
+                <button class="btn btn-link nav-item-iconic" id="aboutModalDropdown" data-toggle="modal" data-target="#aboutModal">
+                    <span title="Help" class="fa pficon-help dropdown-title"></span>
+                </button>
+            </li>
             <li class="dropdown admin" ng-if="header.getUserRole() === 'admin'">
                 <a data-toggle="dropdown" class="dropdown-toggle nav-item-iconic" href="" data-template="" data-animation="am-fade-and-slide-top" bs-dropdown="dropdown" title="User Management" id="usermanagement" data-toggle="admin-dropdown">
                     <i class="fa fa-gear"></i>
@@ -43,15 +48,7 @@
                     <i class="pficon pficon-user"></i>
                     <span class="headerName">{{ header.currentUser }}</span>
                 </a>
-                <pf-modal-overlay 
-                    show-modal="header.showUserSetting" 
-                    on-close="header.closeUserSetting(dismissCause)" 
-                    modal-id="header.userSettingId" 
-                    modal-title="header.userSettingTitle" 
-                    modal-body-template="header.userSettingTemplate" 
-                    action-buttons="header.userSettingActionButtons" 
-                    is-form="header.isForm"
-                    modal-body-scope="header.userScope">
+                <pf-modal-overlay show-modal="header.showUserSetting" on-close="header.closeUserSetting(dismissCause)" modal-id="header.userSettingId" modal-title="header.userSettingTitle" modal-body-template="header.userSettingTemplate" action-buttons="header.userSettingActionButtons" is-form="header.isForm" modal-body-scope="header.userScope">
                 </pf-modal-overlay>
                 <ul class="dropdown-menu" role="menu" aria-labelledby="usermenu">
                     <li role="presentation"><a href="" role="menuitem" tabindex="-1" ng-click="header.userSetting()">My Settings</a></li>
@@ -115,4 +112,34 @@ <h1>No Alerts Detected</h1>
             </div>
         </div>
     </div>
-</nav>
\ No newline at end of file
+</nav>
+<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content about-modal-pf">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <h1>Tendrl Unified Storage Manager</h1>
+                <div class="product-versions-pf">
+                    <ul class="list-unstyled">
+                        <li><strong>Version</strong>{{header.releaseVersion}}</li>
+                        <li><strong>User</strong> {{ header.currentUser }}</li>
+                        <li><strong>User Role</strong> {{header.getUserRole()}}</li>
+                        <li class="text-capitalize"><strong>Browser</strong> {{header.device.browser}}</li>
+                        <li><strong>Browser Version</strong> {{header.device.browser_version}}</li>
+                        <li class="text-capitalize"><strong>Browser OS</strong> {{header.device.os}}</li>
+                    </ul>
+                </div>
+                <div class="trademark-pf">
+                    <div class="pull-left">http://www.tendrl.org</div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <img class="pull-right about-modal-footer-logo" src="../images/logo.png" alt="tendrl | Unified Storage Manager" />
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/modules/base/header/header.js b/src/modules/base/header/header.js
index 8841aaa3..96b6a2fb 100644
--- a/src/modules/base/header/header.js
+++ b/src/modules/base/header/header.js
@@ -3,7 +3,7 @@
 
     angular
         .module("TendrlModule")
-        .component("header", {
+        .component("tendrlHeader", {
 
             templateUrl: "/modules/base/header/header.html",
             controller: headerController,
@@ -11,7 +11,7 @@
         });
 
     /*@ngInject*/
-    function headerController($rootScope, $state, $scope, $uibModal, AuthManager, utils, Notifications, userStore) {
+    function headerController($rootScope, $state, $scope, $uibModal, AuthManager, utils, Notifications, userStore, deviceDetector, config) {
 
         var vm = this,
             currentUser;
@@ -20,6 +20,7 @@
         vm.searchBy = {};
         vm.filterBy = "";
         vm.severity = "";
+        vm.releaseVersion = config.releaseVersion;
 
         vm.notificationClose = notificationClose;
         vm.logout = logout;
@@ -35,6 +36,7 @@
         vm.toggleNav = toggleNav;
         vm.getUserRole = getUserRole;
         vm.updateViewing = updateViewing;
+        vm.device = deviceDetector;
 
         $rootScope.notification = Notifications.data;
         vm.htmlContent = true;
diff --git a/src/modules/base/header/header.scss b/src/modules/base/header/header.scss
index 503a62dc..0f7750d8 100644
--- a/src/modules/base/header/header.scss
+++ b/src/modules/base/header/header.scss
@@ -90,6 +90,10 @@
         visibility: hidden;
     }
 
+    .dropdown-title {
+        line-height: 1.2 !important;
+    }
+
     @media screen and (max-width: 992px) {
         .navbar-brand {
             display: none;
diff --git a/src/modules/login/login.html b/src/modules/login/login.html
index 80108fba..b119abcb 100644
--- a/src/modules/login/login.html
+++ b/src/modules/login/login.html
@@ -1,59 +1,56 @@
 <div class="tendrl-login-view-container">
     <img src="/images/bg-login.jpg" alt="" class="adjusted">
-    <div class="login-page">
-        <span id="badge">
-            <img src="/images/logo.png" alt="Tendrl logo">
-        </span>
-        <div class="container">
+    <div class="login-pf-page">
+        <div class="container-fluid">
             <div class="row">
-                <div class="col-sm-12">
-                    <div id="brand">
-                        <img class="nav-brand-name brand-name-img" src="/images/name.png" alt="tendrl | Unified Storage Manager" />
-                    </div>
-                    <!--/#brand-->
-                </div>
-                <!--/.col-*-->
-                <div class="col-sm-6 col-md-5 col-lg-3 login">
-                    <div class="alert alert-danger" ng-if="loginCntrl.errorMsg.length > 0">
-                        <span class="pficon pficon-error-circle-o"></span>
-                        <label ng-bind="loginCntrl.errorMsg"></label>
-                    </div>
-                    <form class="form-horizontal" name="loginCntrl.signInForm" ng-submit="loginCntrl.login()">
-                        <div class="form-group" ng-class="{'has-error': loginCntrl.signInForm.username.$dirty && loginCntrl.signInForm.username.$error.required }">
-                            <label for="inputUsername" class="col-sm-3 col-md-3">Username</label>
-                            <div class="col-sm-8 col-md-8">
-                                <input class="form-control" id="username" tabindex="1" type="text" ng-model="loginCntrl.user.username" ng-trim="false" name="username" placeholder="Username" required />
-                            </div>
-                            <div>
-                                <div class="col-sm-3 col-md-3"></div>
-                                <span class="col-sm-8 col-md-8 help-block" ng-show="loginCntrl.signInForm.username.$dirty && loginCntrl.signInForm.username.$error.required">Username is required</span>
-                            </div>
-                        </div>
-                        <div class="form-group" ng-class="{ 'has-error': loginCntrl.signInForm.username.$dirty && loginCntrl.signInForm.username.$error.required }">
-                            <label for="inputPassword" class="col-sm-3 col-md-3">Password</label>
-                            <div class="col-sm-8 col-md-8">
-                                <input class="form-control" type="password" name="password" id="password" tabindex="2" placeholder="Password" ng-model="loginCntrl.user.password" required />
-                            </div>
-                            <div>
-                                <div class="col-sm-3 col-md-3"></div>
-                                <span class="col-sm-8 col-md-8 help-block" ng-show="loginCntrl.signInForm.password.$dirty && loginCntrl.signInForm.password.$error.required">Password is required</span>
+                <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
+                    <header class="login-pf-page-header">
+                        <img class="login-pf-brand" src="/images/name.png" alt="tendrl | Unified Storage Manager" />
+                    </header>
+                    <div class="row">
+                        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
+                            <div class="card-pf">
+                                <header class="login-pf-header">
+                                    <select class="selectpicker">
+                                        <option>English</option>
+                                    </select>
+                                    <h1>Log In to Your Account</h1>
+                                </header>
+                                <div class="text-danger validation-msg" ng-if="loginCntrl.errorMsg.length > 0">
+                                    <label ng-bind="loginCntrl.errorMsg"></label>
+                                </div>
+                                <form name="loginCntrl.signInForm" ng-submit="loginCntrl.login()" novalidate>
+                                    <div class="form-group form-group has-feedback" ng-class="{'has-error': (loginCntrl.signInForm.$submitted || loginCntrl.signInForm.username.$dirty) && loginCntrl.signInForm.username.$invalid }">
+                                        <label class="sr-only" for="username">Username</label>
+                                        <input class="form-control" name="username" id="username" tabindex="1" type="text" placeholder="Username" ng-model="loginCntrl.user.username" ng-trim="false" required autofocus>
+                                        <div class="help-block" ng-show="(loginCntrl.signInForm.$submitted || loginCntrl.signInForm.username.$dirty) && loginCntrl.signInForm.username.$invalid">Enter your Username</div>
+                                    </div>
+                                    <div class="form-group" class="form-group has-feedback" ng-class="{ 'has-error': (loginCntrl.signInForm.$submitted || loginCntrl.signInForm.password.$dirty) && loginCntrl.signInForm.password.$invalid }">
+                                        <label class="sr-only" for="password">Password
+                                        </label>
+                                        <input class="form-control" id="password" name="password" type="password" tabindex="2" placeholder="Password" ng-model="loginCntrl.user.password" required>
+                                        <div class="help-block" ng-show="(loginCntrl.signInForm.$submitted || loginCntrl.signInForm.password.$dirty) && loginCntrl.signInForm.password.$invalid">Enter your password
+                                        </div>
+                                    </div>
+                                    <button type="submit" class="btn btn-primary btn-block btn-lg">
+                                        <i class="glyphicon glyphicon-refresh glyphicon-refresh-animate hidden" data-ng-class="{'hidden': loginCntrl.formSubmitInProgress !== true }">
+                                        </i>
+                                        <span class="submit-button-text">Log In</span>
+                                    </button>
+                                </form>
+                                <p class="login-pf-signup"></p>
                             </div>
                         </div>
-                        <div class="form-group">
-                            <div class="col-xs-4 col-md-offset-7 col-xs-offset-7 col-sm-offset-7 col-sm-4 col-md-4 submit">
-                                <button type="submit" class="btn btn-primary btn-lg">
-                                <i class="glyphicon glyphicon-refresh glyphicon-refresh-animate hidden" data-ng-class="{'hidden': loginCntrl.formSubmitInProgress !== true }">
-                                </i>
-                                <span class="submit-button-text">Log In</span>
-                                </button>
-                            </div>
-                        </div>
-                    </form>
+                        <!-- col -->
+                    </div>
+                    <!-- row -->
                 </div>
-                <!--/.col-*-->
+                <!-- col -->
             </div>
-            <!--/.row-->
+            <!-- row -->
         </div>
-        <!--/.container-->
+        <!-- container -->
     </div>
-</div>
+    <!-- login-pf-page -->
+    <!-- login-pf-page -->
+</div>
\ No newline at end of file
diff --git a/src/modules/login/login.scss b/src/modules/login/login.scss
index aa51cd06..967f8abd 100644
--- a/src/modules/login/login.scss
+++ b/src/modules/login/login.scss
@@ -1,105 +1,7 @@
 .tendrl-login-view-container {
-    .login-page {
-        height: 100%;
-    }
-    .login-page #brand {
-        position: relative;
-        top: -60px;
-        left: -50px;
-    }
-    .login-page #brand img {
-        display: block;
-        height: 25px;
-        margin: 0 auto;
-        max-width: 100%;
-    }
-    @media (min-width: 768px) {
-        .login-page #brand img {
-            margin: 0;
-            text-align: left;
-        }
-    }
-    .login-page #badge {
-        display: block;
-        margin: 20px auto 70px;
-        position: relative;
-        text-align: center;
-    }
-    @media (min-width: 768px) {
-        .login-page #badge {
-            float: right;
-            margin-right: 64px;
-            margin-top: 50px;
-        }
-    }
-    .help-block{
+    .help-block {
         color: $color-red;
     }
-    .login-page {
-        background-image: url(../../images/bg-login.jpg);;
-        background-size: auto;
-        color: $color-white;
-    }
-    @media (min-width: 768px) {
-        .login-page {
-            background-size: 100% auto;
-        }
-    }
-    .login-page .container {
-        background-color: $color-nero-grey;
-        background-color: rgba(255, 255, 255, 0.055);
-        clear: right;
-        padding-bottom: 40px;
-        padding-top: 20px;
-        width: auto;
-    }
-    @media (min-width: 768px) {
-        .login-page .container {
-            bottom: 13%;
-            padding-left: 80px;
-            position: fixed;
-            width: 100%;
-        }
-    }
-    .login-page .container .details p:first-child {
-        border-top: 1px solid #474747;
-        padding-top: 25px;
-        margin-top: 25px;
-    }
-    @media (min-width: 768px) {
-        .login-page .container .details {
-            border-left: 1px solid #474747;
-            padding-left: 40px;
-        }
-        .login-page .container .details p:first-child {
-            border-top: 0;
-            padding-top: 0;
-            margin-top: 0;
-        }
-    }
-    .login-page .container .details p {
-        margin-bottom: 2px;
-    }
-    .login-page .container .form-horizontal .control-label {
-        font-size: 13px;
-        font-weight: 400;
-        text-align: left;
-    }
-    .login-page .container .form-horizontal .form-group:last-child,
-    .login-page .container .form-horizontal .form-group:last-child .help-block:last-child {
-        margin-bottom: 0;
-    }
-    .login-page .container {
-        color: $color-white;
-    }
-    @media (min-width: 768px) {
-        .login-page .container .login {
-            padding-right: 40px;
-        }
-    }
-    .login-page .container .submit {
-        text-align: right;
-    }
     img.adjusted {
         position: fixed;
         z-index: -1;
@@ -107,14 +9,7 @@
         top: 0;
         left: 0;
     }
-    .red-font {
-        color: $color-red;
-    }
-    .text-heading {
-        color: $color-white;
-        font-size: large;
-    }
-    #brand{
-        padding-left:30px;
+    .validation-msg {
+        margin-bottom: 8px;
     }
-}
+}
\ No newline at end of file