From e8df3ccfdd07bedf77af878fa90cc978b5445a0f Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 19 Feb 2018 15:52:26 +0200
Subject: [PATCH] Add logo to login page.

---
 ui/src/app/login/login.controller.js | 9 +++++++++
 ui/src/app/login/login.scss          | 8 ++++++++
 ui/src/app/login/login.tpl.html      | 6 ++----
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/login/login.controller.js b/ui/src/app/login/login.controller.js
index 3dfb2d8c18..ab95b47d3e 100644
--- a/ui/src/app/login/login.controller.js
+++ b/ui/src/app/login/login.controller.js
@@ -13,10 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+/* eslint-disable import/no-unresolved, import/default */
+
+import logoSvg from '../../svg/logo_title_white.svg';
+
+/* eslint-enable import/no-unresolved, import/default */
+
 /*@ngInject*/
 export default function LoginController(toast, loginService, userService/*, $rootScope, $log, $translate*/) {
     var vm = this;
 
+    vm.logoSvg = logoSvg;
+
     vm.user = {
         name: '',
         password: ''
diff --git a/ui/src/app/login/login.scss b/ui/src/app/login/login.scss
index 0dbf8ad419..093b0afa95 100644
--- a/ui/src/app/login/login.scss
+++ b/ui/src/app/login/login.scss
@@ -20,4 +20,12 @@ md-card.tb-login-card {
   @media (min-width: $layout-breakpoint-sm) {
     width: 450px !important;
   }
+  md-card-title {
+    img.tb-login-logo {
+      height: 50px;
+    }
+  }
+  md-card-content {
+    margin-top: -50px;
+  }
 }
diff --git a/ui/src/app/login/login.tpl.html b/ui/src/app/login/login.tpl.html
index 05f9c8936f..213879adb4 100644
--- a/ui/src/app/login/login.tpl.html
+++ b/ui/src/app/login/login.tpl.html
@@ -18,11 +18,9 @@
 <md-content layout="row" layout-align="center center" style="width: 100%;">
     <md-card flex="initial" class="tb-login-card" md-theme="tb-dark">
         <md-card-title>
-            <md-card-title-text>
-                <span translate class="md-headline">login.sign-in</span>
-            </md-card-title-text>
+            <img src="{{vm.logoSvg}}" aria-label="logo" class="tb-login-logo"/>
         </md-card-title>
-        <md-progress-linear class="md-warn" style="z-index: 1; max-height: 5px; width: inherit; position: absolute"
+        <md-progress-linear class="md-warn" style="z-index: 1; max-height: 0px; width: inherit;"
                             md-mode="indeterminate" ng-disabled="!$root.loading" ng-show="$root.loading"></md-progress-linear>
         <md-card-content>
             <form class="login-form" ng-submit="vm.login()">