Redesigned and polished login view, still needs work on validation

src/app/controllers/grafanaCtrl.js

@@ -45,12 +45,6 @@ function (angular, config, _, $, store) {
         $scope.grafana.sidemenu = false;
         $scope.grafana.user = {};
       });
-
-      $scope.onAppEvent('logged-in', function(evt, user) {
-        $scope.grafana.sidemenu = store.getBool('grafana.sidemenu', true);
-        $scope.grafana.user = user;
-        store.set('grafana.sidemenu', $scope.grafana.sidemenu);
-      });
     };
 
     $scope.initDashboard = function(dashboardData, viewScope) {

src/app/controllers/loginCtrl.js

@@ -8,8 +8,15 @@ function (angular, config) {
   var module = angular.module('grafana.controllers');
 
   module.controller('LoginCtrl', function($scope, backendSrv, $location, $routeParams, alertSrv) {
-    $scope.loginModel = {};
+    $scope.loginModel = {
+      user: '',
+      password: ''
+    };
+
+    $scope.newUser = {};
+
     $scope.grafana.sidemenu = false;
+    $scope.mode = 'login';
 
     // build info view model
     $scope.buildInfo = {
@@ -18,12 +25,35 @@ function (angular, config) {
       buildstamp: new Date(config.buildInfo.buildstamp * 1000)
     };
 
+    $scope.submit = function() {
+      if ($scope.mode === 'login') {
+        $scope.login();
+      } else {
+        $scope.signUp();
+      }
+    };
+
     $scope.init = function() {
       if ($routeParams.logout) {
         $scope.logout();
       }
     };
 
+    $scope.signUp = function() {
+      if ($scope.mode === 'login') {
+        $scope.mode = 'signup';
+        return;
+      }
+
+      if (!$scope.loginForm.$valid) {
+        return;
+      }
+
+      backendSrv.put('/api/user/signup', $scope.newUser).then(function() {
+        window.location.href = config.appSubUrl + '/';
+      });
+    };
+
     $scope.logout = function() {
       backendSrv.post('/logout').then(function() {
         alertSrv.set('Logged out!', '', 'success', 3000);
@@ -33,14 +63,17 @@ function (angular, config) {
     };
 
     $scope.login = function() {
+      if ($scope.mode === 'signup') {
+        $scope.mode = 'login';
+        return;
+      }
       delete $scope.loginError;
 
       if (!$scope.loginForm.$valid) {
         return;
       }
 
-      backendSrv.post('/login', $scope.loginModel).then(function(results) {
-        $scope.appEvent('logged-in', results.user);
+      backendSrv.post('/login', $scope.loginModel).then(function() {
         window.location.href = config.appSubUrl + '/';
       });
     };

src/app/partials/login.html

@@ -1,4 +1,3 @@
-
 <div class="container">
 
 	<div class="login-box">
@@ -7,69 +6,105 @@
 			<img src="img/logo_transparent_200x75.png">
 		</div>
 
-		<div class="login-inner-box">
+    <div class="login-inner-box">
+			<h1 ng-if="mode === 'login'">Login</h1>
+			<h1 ng-if="mode === 'signup'">Sign up</h1>
+
+      <form name="loginForm" class="login-form">
+        <div class="tight-form" ng-if="mode === 'login'">
+          <ul class="tight-form-list">
+            <li class="tight-form-item" style="width: 80px">
+              User
+            </li>
+            <li>
+              <input type="text" class="tight-form-input last" ng-model='loginModel.user' placeholder="email or username" style="width: 246px">
+            </li>
+          </ul>
+          <div class="clearfix"></div>
+        </div>
+        <div class="tight-form" ng-if="mode === 'login'">
+          <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="loginModel.password" id="inputPassword" 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">
+              Email
+            </li>
+            <li>
+              <input type="email" class="tight-form-input last" required ng-model='newUser.email' placeholder="email" 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">
+              Name
+            </li>
+            <li>
+              <input type="text" class="tight-form-input last" ng-model='newUser.name' placeholder="your full name (optional)" 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>
 
-			<form name="loginForm">
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 80px">
-							User
-						</li>
-						<li>
-							<input type="text" class="input-large tight-form-input" ng-model='login.email' placeholder="email or username"></input>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
 				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 80px">
-							Password
+          <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>
-							<input type="password" class="input-large tight-form-input" required ng-model="loginModel.password" id="inputPassword">
+						<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>
-						<li class="tight-form-item">
-							<a href="asd">Forgotten password?</a>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-			</div>
+          </ul>
+          <div class="clearfix"></div>
+        </div>
 
-			<button type="submit" ng-click="login()" class="btn btn-success" style="margin-bottom: 20px">
-				Sign in
-			</button>
-		</form>
+				<button type="submit" ng-click="submit();" class="hidden"></button>
+			</form>
 
-		<div class="alert alert-error" ng-show="loginError">
-			<button type="button" class="close" data-dismiss="alert">&times;</button>
-			<strong>Login failed:</strong> {{loginError}}
-		</div>
-
-		<div class="login-oauth text-center">
-			<a class="btn btn-primary" href="login/google" target="_self">
-				Sign in with Google
-			</a>
-			<a class="btn btn-primary" href="login/github" target="_self">
-				Sign in with Github
-			</a>
-		</div>
+			<div class="clearfix"></div>
 
-		<div class="register-box text-center">
-			<a href="signup" class="btn btn-info">Sign up now!</a>
-		</div>
+			<div class="login-oauth text-center">
+				<a class="btn btn-google" href="login/google" target="_self">
+					<i class="fa fa-google"></i>
+					with Google
+				</a>
+				<a class="btn btn-github" href="login/github" target="_self">
+					<i class="fa fa-github"></i>
+					with Github
+				</a>
+			</div>
 	</div>
 
-	<div class="clearfix"></div>
-</div>
-
-<div class="row" style="margin-top: 100px">
-	<div class="version-footer text-center small">
-		Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
-		build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
+	<div class="row" style="margin-top: 100px">
+		<div class="version-footer text-center small">
+			Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
+			build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
+		</div>
 	</div>
-</div>
 
 </div>
 

src/css/less/p_pro.less

@@ -70,16 +70,55 @@
 }
 
 .login-inner-box {
+  background: @grafanaPanelBackground;
+  h1 {
+    font-size: 1.15em;
+    background: @grafanaTargetBackground;
+    text-align: center;
+    padding: 2px;
+  }
+}
+
+.login-signup-button {
+  width: 45%;
+  text-align: center;
+
+  a {
+    font-weight: bold;
+  }
+  &.login-signup-button-disable {
+    a {
+      color: darken(@linkColor, 35%);
+    }
+  }
+}
+
+.login-oauth {
+  margin-top: 30px;
+  padding: 10px;
+  background: @grafanaTargetBackground;
+  .btn-google {
+    background: #dd4b39;
+    color: white;
+  }
+  .btn-github {
+    background: #555;
+    color: white;
+  }
+}
+
+.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;

src/css/less/tightform.less

@@ -125,15 +125,20 @@ input[type=text].tight-form-clear-input {
   border-right: 1px solid @grafanaTargetSegmentBorder;
 }
 
-//[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
-[type=text].tight-form-input, [type=number].tight-form-input {
-  border: none;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
-  margin: 0px;
-  border-radius: 0;
-  padding: 8px 4px;
-  &.last {
-    border-right: none;
+[type=text],
+[type=email],
+[type=number],
+[type=password] {
+
+  &.tight-form-input {
+    border: none;
+    border-right: 1px solid @grafanaTargetSegmentBorder;
+    margin: 0px;
+    border-radius: 0;
+    padding: 8px 4px;
+    &.last {
+      border-right: none;
+    }
   }
 }