Merge pull request Tendrl#1072 from gnehapk/update-login-view

Added branding changes
gnehapk · Sep 26, 2018 · fa41bbf · fa41bbf
2 parents dab426f + 23594cd
commit fa41bbf
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 175 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+    }
 }
diff --git 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
diff --git 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
@@ -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>
+</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>
diff --git a/src/modules/base/header/header.js b/src/modules/base/header/header.js
@@ -3,15 +3,15 @@
 
     angular
         .module("TendrlModule")
-        .component("header", {
+        .component("tendrlHeader", {
 
             templateUrl: "/modules/base/header/header.html",
             controller: headerController,
             controllerAs: "header"
         });
 
     /*@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
@@ -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
@@ -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>