From 1a11b400b026806753a567813d4b65026b526e86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Thu, 22 Jan 2015 10:14:24 +0100
Subject: [PATCH] Polish and incorporating new design for login screen from
 matt

---
 src/app/controllers/loginCtrl.js   |  29 +++---
 src/app/partials/login.html        |  57 +++++-------
 src/app/partials/sidemenu.html     |   2 +-
 src/css/less/bootswatch.dark.less  |   2 +-
 src/css/less/bootswatch.light.less |   2 +-
 src/css/less/overrides.less        |   1 -
 src/css/less/p_pro.less            | 136 ++++++++++++++++-------------
 src/css/less/variables.dark.less   |  12 +--
 8 files changed, 126 insertions(+), 115 deletions(-)

diff --git a/src/app/controllers/loginCtrl.js b/src/app/controllers/loginCtrl.js
index 9cc28d75ddb..752e1e26cb4 100644
--- a/src/app/controllers/loginCtrl.js
+++ b/src/app/controllers/loginCtrl.js
@@ -16,7 +16,7 @@ function (angular, config) {
     $scope.newUser = {};
 
     $scope.grafana.sidemenu = false;
-    $scope.mode = 'login';
+    $scope.loginMode = true;
 
     // build info view model
     $scope.buildInfo = {
@@ -26,13 +26,29 @@ function (angular, config) {
     };
 
     $scope.submit = function() {
-      if ($scope.mode === 'login') {
+      if ($scope.loginMode) {
         $scope.login();
       } else {
         $scope.signUp();
       }
     };
 
+    $scope.getSubmitBtnClass = function() {
+      if ($scope.loginForm.$valid) {
+        return "btn-primary";
+      } else {
+        return "btn-inverse";
+      }
+    };
+
+    $scope.getSubmitBtnText = function() {
+      if ($scope.loginMode) {
+        return "Log in";
+      } else {
+        return "Sign up";
+      }
+    };
+
     $scope.init = function() {
       if ($routeParams.logout) {
         $scope.logout();
@@ -40,11 +56,6 @@ function (angular, config) {
     };
 
     $scope.signUp = function() {
-      if ($scope.mode === 'login') {
-        $scope.mode = 'signup';
-        return;
-      }
-
       if (!$scope.loginForm.$valid) {
         return;
       }
@@ -63,10 +74,6 @@ function (angular, config) {
     };
 
     $scope.login = function() {
-      if ($scope.mode === 'signup') {
-        $scope.mode = 'login';
-        return;
-      }
       delete $scope.loginError;
 
       if (!$scope.loginForm.$valid) {
diff --git a/src/app/partials/login.html b/src/app/partials/login.html
index 9c197969b5e..68e80ef6139 100644
--- a/src/app/partials/login.html
+++ b/src/app/partials/login.html
@@ -7,14 +7,20 @@
 		</div>
 
     <div class="login-inner-box">
-			<h1 ng-if="mode === 'login'">Login</h1>
-			<h1 ng-if="mode === 'signup'">Sign up</h1>
+			<div class="login-tab-header">
+				<button class="btn-login-tab" ng-click="loginMode = true;" ng-class="{active: loginMode}">
+					Log in
+				</button>
+				<button class="btn-login-tab" ng-click="loginMode = false;" ng-class="{active: !loginMode}">
+					Sign up
+				</button>
+			</div>
 
       <form name="loginForm" class="login-form">
-        <div class="tight-form" ng-if="mode === 'login'">
+        <div class="tight-form" ng-if="loginMode">
           <ul class="tight-form-list">
             <li class="tight-form-item" style="width: 80px">
-              User
+							<strong>User</strong>
             </li>
             <li>
               <input type="text" class="tight-form-input last" ng-model='loginModel.user' placeholder="email or username" style="width: 246px">
@@ -22,10 +28,10 @@
           </ul>
           <div class="clearfix"></div>
         </div>
-        <div class="tight-form" ng-if="mode === 'login'">
+        <div class="tight-form" ng-if="loginMode">
           <ul class="tight-form-list">
             <li class="tight-form-item" style="width: 80px">
-              Password
+							<strong>Password</strong>
             </li>
             <li>
 							<input type="password" class="tight-form-input last" required ng-model="loginModel.password" id="inputPassword" style="width: 246px" placeholder="password">
@@ -34,10 +40,10 @@
           <div class="clearfix"></div>
         </div>
 
-				<div class="tight-form" ng-if="mode === 'signup'">
+				<div class="tight-form" ng-if="!loginMode">
           <ul class="tight-form-list">
             <li class="tight-form-item" style="width: 80px">
-              Email
+							<strong>Email</strong>
             </li>
             <li>
               <input type="email" class="tight-form-input last" required ng-model='newUser.email' placeholder="email" style="width: 246px">
@@ -46,43 +52,24 @@
           <div class="clearfix"></div>
         </div>
 
-				<div class="tight-form" ng-if="mode === 'signup'">
+				<div class="tight-form" ng-if="!loginMode">
           <ul class="tight-form-list">
             <li class="tight-form-item" style="width: 80px">
-              Name
+							<strong>Password</strong>
             </li>
             <li>
-              <input type="text" class="tight-form-input last" ng-model='newUser.name' placeholder="your full name (optional)" style="width: 246px">
+							<input type="password" class="tight-form-input last" required ng-model='newUser.password' placeholder="password" style="width: 246px">
             </li>
           </ul>
           <div class="clearfix"></div>
         </div>
 
-				<div class="tight-form" ng-if="mode === 'signup'">
-          <ul class="tight-form-list">
-            <li class="tight-form-item" style="width: 80px">
-              Password
-            </li>
-            <li>
-              <input type="password" class="tight-form-input last" required ng-model='newUser.password' placeholder="" style="width: 246px">
-            </li>
-          </ul>
-          <div class="clearfix"></div>
-        </div>
 
-				<div class="tight-form">
-          <ul class="tight-form-list">
-						<li class="tight-form-item login-signup-button" ng-class="{'login-signup-button-disable': mode === 'signup'}">
-							<a ng-click="login()">Log in</a>
-						</li>
-						<li class="tight-form-item login-signup-button last" ng-class="{'login-signup-button-disable': mode === 'login'}">
-							<a ng-click="signUp()">Sign up</a>
-						</li>
-          </ul>
-          <div class="clearfix"></div>
-        </div>
-
-				<button type="submit" ng-click="submit();" class="hidden"></button>
+				<div class="login-submit-button-row">
+					<button type="submit" class="btn" ng-class="getSubmitBtnClass()" ng-click="submit();">
+						{{getSubmitBtnText()}}
+					</button>
+				</div>
 			</form>
 
 			<div class="clearfix"></div>
diff --git a/src/app/partials/sidemenu.html b/src/app/partials/sidemenu.html
index 6c1bf140c3f..980ed6b897e 100644
--- a/src/app/partials/sidemenu.html
+++ b/src/app/partials/sidemenu.html
@@ -8,7 +8,7 @@
 				<span class="gravatar-email small">{{grafana.user.login}}</span>
 			</a>
 			<ul class="dropdown-menu">
-				<li><a href="/login?logout">Logout</a></li>
+				<li><a href="{{appSubUrl}}/login?logout">Logout</a></li>
 			</ul>
 		</li>
 		<li ng-repeat-start="item in menu" ng-class="{'active': item.active}">
diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less
index f3d83683f51..a1b06114d38 100644
--- a/src/css/less/bootswatch.dark.less
+++ b/src/css/less/bootswatch.dark.less
@@ -363,7 +363,7 @@ div.subnav {
 	background-image: none;
 	.box-shadow(none);
 	border: none;
-	.border-radius(2px);
+	.border-radius(3px);
 	text-shadow: none;
 
 	&.disabled {
diff --git a/src/css/less/bootswatch.light.less b/src/css/less/bootswatch.light.less
index f4f573c58b0..2e59e80769d 100644
--- a/src/css/less/bootswatch.light.less
+++ b/src/css/less/bootswatch.light.less
@@ -309,7 +309,7 @@ div.subnav {
 	background-image: none;
 	.box-shadow(none);
 	border: none;
-	.border-radius(0);
+	.border-radius(3px);
 	text-shadow: none;
 
 	&.disabled {
diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less
index f4139e020ea..969823a5481 100644
--- a/src/css/less/overrides.less
+++ b/src/css/less/overrides.less
@@ -58,7 +58,6 @@
 .bgInverse {
   background: @btnInverseBackground;
   color: rgba(255,255,255,.90);
-
 }
 
 code, pre {
diff --git a/src/css/less/p_pro.less b/src/css/less/p_pro.less
index dec3bc33393..e79105cf5bd 100644
--- a/src/css/less/p_pro.less
+++ b/src/css/less/p_pro.less
@@ -2,6 +2,33 @@
   display: none;
 }
 
+.pro-sidemenu-open {
+  .pro-sidemenu {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    background: @bodyBackground;
+    border-right: 2px solid black;
+    min-height: 100%;
+    z-index: 101;
+  }
+
+  .dashboard-notice {
+    margin-left: 200px;
+    width: auto;
+  }
+
+  .pro-main-view {
+    padding-left: 200px;
+  }
+
+  .panel-fullscreen {
+    left: 200px;
+  }
+}
+
 .sidemenu {
   list-style: none;
   background: @grafanaPanelBackground;
@@ -58,54 +85,66 @@
   border-bottom: 1px solid black;
 }
 
-.pro-sidemenu-open {
-  .pro-sidemenu {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 200px;
-    background: @bodyBackground;
-    border-right: 2px solid black;
-    min-height: 100%;
-    z-index: 101;
-  }
 
-  .dashboard-notice {
-    margin-left: 200px;
-    width: auto;
-  }
-
-  .pro-main-view {
-    padding-left: 200px;
-  }
-
-  .panel-fullscreen {
-    left: 200px;
-  }
+.login-form {
+  width: 50%;
+  float: left;
+  margin-left: 25%;
+  margin-right: 25%;
+  padding-top: 50px;
 }
 
+.login-box {
+  width: 700px;
+  margin: 100px auto 0 auto;
+}
+
+.login-box-logo {
+  text-align: center;
+  padding-bottom: 50px;
+}
+
+
 .login-inner-box {
   background: @grafanaPanelBackground;
-  h1 {
-    font-size: 1.15em;
-    background: @grafanaTargetBackground;
-    text-align: center;
-    padding: 2px;
-  }
 }
 
-.login-signup-button {
-  width: 45%;
+.login-tab-header {
+  background: @grafanaTargetBackground;
   text-align: center;
+}
 
-  a {
-    font-weight: bold;
+.btn-login-tab {
+  background: transparent;
+  border: none;
+  font-size: 15px;
+  padding: 10px 10px;
+
+  &.active {
+    background: darken(@grafanaTargetBackground, 5%);
+    color: @white;
   }
-  &.login-signup-button-disable {
-    a {
-      color: darken(@linkColor, 35%);
-    }
+
+  &:focus {
+    outline: none;
+  }
+
+  font-weight: bold;
+  display: inline-block;
+  width: 170px;
+  color: @textColor;
+}
+
+.login-submit-button-row {
+  text-align: center;
+  margin-top: 40px;
+  button {
+    padding: 9px 7px;
+    font-size: 14px;
+    font-weight: bold;
+    width: 150px;
+    display: inline-block;
+    border: 1px solid lighten(@btnInverseBackground, 10%);
   }
 }
 
@@ -123,25 +162,4 @@
   }
 }
 
-.login-form {
-  width: 50%;
-  float: left;
-  margin-left: 25%;
-  margin-right: 25%;
-  padding-top: 30px;
-}
-
-.login-box {
-  width: 700px;
-  margin: 100px auto 0 auto;
-}
-
-.login-box-logo {
-  text-align: center;
-  padding-bottom: 50px;
-}
-
-.register-box {
-  margin-top: 100px;
-}
 
diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less
index 6dbe943e0c2..be851d6a5ad 100644
--- a/src/css/less/variables.dark.less
+++ b/src/css/less/variables.dark.less
@@ -17,7 +17,7 @@
 // Accent colors
 // -------------------------
 @blue:                  #33B5E5;
-@blueDark:              #0099CC;
+@blueDark:              #0086b3;
 @green:                 #669900;
 @red:                   #CC3900;
 @yellow:                #ECBB13;
@@ -111,12 +111,12 @@
 
 // Buttons
 // -------------------------
-@btnBackground:                     @grayLight;
+@btnBackground:                     @grayDark;
 @btnBackgroundHighlight:            darken(@grayLight, 15%);
 @btnBorder:                         #bbb;
 
-@btnPrimaryBackground:              lighten(@blue, 5%);
-@btnPrimaryBackgroundHighlight:     darken(@blue, 5%);
+@btnPrimaryBackground:              lighten(@blueDark, 5%);
+@btnPrimaryBackgroundHighlight:     darken(@blueDark, 5%);
 
 @btnInfoBackground:                 lighten(@purple, 5%);
 @btnInfoBackgroundHighlight:        darken(@purple, 5%);
@@ -130,8 +130,8 @@
 @btnDangerBackground:               lighten(@red, 5%);
 @btnDangerBackgroundHighlight:      darken(@red, 5%);
 
-@btnInverseBackground:              lighten(@black, 5%);
-@btnInverseBackgroundHighlight:     darken(@black, 5%);
+@btnInverseBackground:              @grayDark;
+@btnInverseBackgroundHighlight:     lighten(@grayDark, 5%);
 
 
 // Forms