diff --git a/src/app/controllers/grafanaCtrl.js b/src/app/controllers/grafanaCtrl.js index 130e07ead8d..d2047cfef30 100644 --- a/src/app/controllers/grafanaCtrl.js +++ b/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) { diff --git a/src/app/controllers/loginCtrl.js b/src/app/controllers/loginCtrl.js index b0787d35b16..9cc28d75ddb 100644 --- a/src/app/controllers/loginCtrl.js +++ b/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 + '/'; }); }; diff --git a/src/app/partials/login.html b/src/app/partials/login.html index 3887a46197a..a6e5aa9634e 100644 --- a/src/app/partials/login.html +++ b/src/app/partials/login.html @@ -1,4 +1,3 @@ -
@@ -7,70 +6,106 @@
-
+ + + + + +
+ + +
- - - -
- - Login failed: {{loginError}} -
- -
- - Sign in with Google - - - Sign in with Github - -
- -
- Sign up now! +
+
-
-
- -
- -
-
diff --git a/src/css/less/p_pro.less b/src/css/less/p_pro.less index ad138f73339..0565bdbde04 100644 --- a/src/css/less/p_pro.less +++ b/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; diff --git a/src/css/less/tightform.less b/src/css/less/tightform.less index b51f98ab9da..22efcda2fcf 100644 --- a/src/css/less/tightform.less +++ b/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; + } } }