worked on login view

src/app/controllers/p_loginCtrl.js

@@ -0,0 +1,34 @@
+define([
+  'angular',
+  'app',
+  'lodash'
+],
+function (angular, app) {
+  'use strict';
+
+  var module = angular.module('grafana.controllers');
+
+  module.controller('LoginCtrl', function($scope, $http, $location) {
+    $scope.loginModel = {};
+
+    $scope.login = function() {
+      delete $scope.loginError;
+      if (!$scope.loginForm.$valid) {
+        return;
+      }
+
+      $http.post('/login', $scope.loginModel).then(function(results) {
+        $location.path('/');
+      }, function(err) {
+        if (err.status === 401) {
+          $scope.loginError = "Username or password is incorrect";
+        }
+        else {
+          $scope.loginErro = "Unexpected error";
+        }
+      });
+    };
+
+  });
+
+});

src/app/partials/p_login.html

@@ -0,0 +1,47 @@
+
+<div class="container">
+
+	<div class="login-box">
+		<div class="login-box-logo">
+			<img src="/img/logo_transparent_200x75.png">
+		</div>
+
+		<form name="loginForm" class="form-horizontal">
+			<div class="row-fluid">
+				<div class="span8">
+					<div class="control-group">
+						<label class="control-label" for="inputEmail">Email</label>
+						<div class="controls">
+							<input type="text" required ng-model="loginModel.email" id="inputEmail" placeholder="Email">
+						</div>
+					</div>
+					<div class="control-group">
+						<label class="control-label" for="inputPassword">Password</label>
+						<div class="controls">
+							<input type="password" required ng-model="loginModel.password" id="inputPassword" placeholder="Password">
+						</div>
+					</div>
+					<div class="control-group">
+						<div class="controls">
+							<label class="checkbox">
+								<input type="checkbox" ng-model="loginModel.remember" ng-checked="login.remember"> Remember me
+							</label>
+						</div>
+					</div>
+				</div>
+				<div class="span4">
+					<button type="submit" ng-click="login()" class="btn btn-success btn-large">
+						<i class="icon-lock"></i>
+						Sign in
+					</button>
+				</div>
+			</div>
+			<div class="alert alert-error" ng-show="loginError">
+				<button type="button" class="close" data-dismiss="alert">&times;</button>
+				<strong>Login failed:</strong> {{loginError}}
+			</div>
+		</form>
+	</div>
+
+
+</div>

src/app/routes/p_dashboard.js

@@ -1,5 +1,6 @@
 define([
   'angular',
+  'controllers/p_loginCtrl'
 ],
 function (angular) {
   "use strict";
@@ -8,6 +9,10 @@ function (angular) {
 
   module.config(function($routeProvider) {
     $routeProvider
+      .when('/', {
+        templateUrl: '/app/partials/dashboard.html',
+        controller : 'DashFromDBProvider',
+      })
       .when('/dashboard/db/:id', {
         templateUrl: '/app/partials/dashboard.html',
         controller : 'DashFromDBProvider',
@@ -15,6 +20,10 @@ function (angular) {
       .when('/dashboard/temp/:id', {
         templateUrl: '/app/partials/dashboard.html',
         controller : 'DashFromDBProvider',
+      })
+      .when('/login', {
+        templateUrl: '/app/partials/p_login.html',
+        controller : 'LoginCtrl',
       });
   });
 
@@ -22,6 +31,9 @@ function (angular) {
 
     var db = datasourceSrv.getGrafanaDB();
     var isTemp = window.location.href.indexOf('dashboard/temp') !== -1;
+    if (!$routeParams.id) {
+      $routeParams.id = 'default';
+    }
 
     db.getDashboard($routeParams.id, isTemp)
       .then(function(dashboard) {

src/css/less/bootswatch.dark.less

@@ -479,7 +479,7 @@ legend, label {
 .alert-error .alert-heading,
 .alert-info,
 .alert-info .alert-heading {
-  color: @grayLighter;
+  color: @white;
   text-shadow: none;
   border: none;
 }

src/css/less/grafana.less

@@ -2,6 +2,7 @@
 @import "graph.less";
 @import "console.less";
 @import "bootstrap-tagsinput.less";
+@import "p_pro.less";
 
 .hide-controls {
   padding: 0;

src/css/less/p_pro.less

@@ -0,0 +1,14 @@
+.login-box {
+  width: 700px;
+  margin: 100px auto 0 auto;
+
+  button.btn {
+    margin-top: 19px;
+    padding: 12px 30px;
+  }
+}
+.login-box-logo {
+  text-align: center;
+  padding-bottom: 50px;
+}
+