Skip to content

N
nexpie-grafana-theme
Commit 8ed92124 by Torkel Ödegaard
Options

Redesigned and polished login view, still needs work on validation

parent 5760fa10
Showing with 179 additions and 73 deletions
src/app/controllers/grafanaCtrl.js
...@@ -45,12 +45,6 @@ function (angular, config, _, $, store) { ...@@ -45,12 +45,6 @@ function (angular, config, _, $, store) {
$scope.grafana.sidemenu = false; $scope.grafana.sidemenu = false;
$scope.grafana.user = {}; $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) { $scope.initDashboard = function(dashboardData, viewScope) {
......
src/app/controllers/loginCtrl.js
...@@ -8,8 +8,15 @@ function (angular, config) { ...@@ -8,8 +8,15 @@ function (angular, config) {
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
module.controller('LoginCtrl', function($scope, backendSrv, $location, $routeParams, alertSrv) { module.controller('LoginCtrl', function($scope, backendSrv, $location, $routeParams, alertSrv) {
$scope.loginModel = {}; $scope.loginModel = {
user: '',
password: ''
};
$scope.newUser = {};
$scope.grafana.sidemenu = false; $scope.grafana.sidemenu = false;
$scope.mode = 'login';
// build info view model // build info view model
$scope.buildInfo = { $scope.buildInfo = {
...@@ -18,12 +25,35 @@ function (angular, config) { ...@@ -18,12 +25,35 @@ function (angular, config) {
buildstamp: new Date(config.buildInfo.buildstamp * 1000) buildstamp: new Date(config.buildInfo.buildstamp * 1000)
}; };
$scope.submit = function() {
if ($scope.mode === 'login') {
$scope.login();
} else {
$scope.signUp();
}
};
$scope.init = function() { $scope.init = function() {
if ($routeParams.logout) { if ($routeParams.logout) {
$scope.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() { $scope.logout = function() {
backendSrv.post('/logout').then(function() { backendSrv.post('/logout').then(function() {
alertSrv.set('Logged out!', '', 'success', 3000); alertSrv.set('Logged out!', '', 'success', 3000);
...@@ -33,14 +63,17 @@ function (angular, config) { ...@@ -33,14 +63,17 @@ function (angular, config) {
}; };
$scope.login = function() { $scope.login = function() {
if ($scope.mode === 'signup') {
$scope.mode = 'login';
return;
}
delete $scope.loginError; delete $scope.loginError;
if (!$scope.loginForm.$valid) { if (!$scope.loginForm.$valid) {
return; return;
} }
backendSrv.post('/login', $scope.loginModel).then(function(results) { backendSrv.post('/login', $scope.loginModel).then(function() {
$scope.appEvent('logged-in', results.user);
window.location.href = config.appSubUrl + '/'; window.location.href = config.appSubUrl + '/';
}); });
}; };
......
src/app/partials/login.html
<div class="container"> <div class="container">
<div class="login-box"> <div class="login-box">
...@@ -7,69 +6,105 @@ ...@@ -7,69 +6,105 @@
<img src="img/logo_transparent_200x75.png"> <img src="img/logo_transparent_200x75.png">
</div> </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"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item login-signup-button" ng-class="{'login-signup-button-disable': mode === 'signup'}">
Password <a ng-click="login()">Log in</a>
</li> </li>
<li> <li class="tight-form-item login-signup-button last" ng-class="{'login-signup-button-disable': mode === 'login'}">
<input type="password" class="input-large tight-form-input" required ng-model="loginModel.password" id="inputPassword"> <a ng-click="signUp()">Sign up</a>
</li> </li>
<li class="tight-form-item"> </ul>
<a href="asd">Forgotten password?</a> <div class="clearfix"></div>
</li> </div>
</ul>
<div class="clearfix"></div>
</div>
</div>
<button type="submit" ng-click="login()" class="btn btn-success" style="margin-bottom: 20px"> <button type="submit" ng-click="submit();" class="hidden"></button>
Sign in </form>
</button>
</form>
<div class="alert alert-error" ng-show="loginError"> <div class="clearfix"></div>
<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="register-box text-center"> <div class="login-oauth text-center">
<a href="signup" class="btn btn-info">Sign up now!</a> <a class="btn btn-google" href="login/google" target="_self">
</div> <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>
<div class="clearfix"></div> <div class="row" style="margin-top: 100px">
</div> <div class="version-footer text-center small">
Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
<div class="row" style="margin-top: 100px"> build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
<div class="version-footer text-center small"> </div>
Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
</div> </div>
</div>
</div> </div>
......
src/css/less/p_pro.less
...@@ -70,16 +70,55 @@ ...@@ -70,16 +70,55 @@
} }
.login-inner-box { .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%; width: 50%;
float: left; float: left;
margin-left: 25%; margin-left: 25%;
margin-right: 25%; margin-right: 25%;
padding-top: 30px;
} }
.login-box { .login-box {
width: 700px; width: 700px;
margin: 100px auto 0 auto; margin: 100px auto 0 auto;
} }
.login-box-logo { .login-box-logo {
text-align: center; text-align: center;
......
src/css/less/tightform.less
...@@ -125,15 +125,20 @@ input[type=text].tight-form-clear-input { ...@@ -125,15 +125,20 @@ input[type=text].tight-form-clear-input {
border-right: 1px solid @grafanaTargetSegmentBorder; border-right: 1px solid @grafanaTargetSegmentBorder;
} }
//[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input { [type=text],
[type=text].tight-form-input, [type=number].tight-form-input { [type=email],
border: none; [type=number],
border-right: 1px solid @grafanaTargetSegmentBorder; [type=password] {
margin: 0px;
border-radius: 0; &.tight-form-input {
padding: 8px 4px; border: none;
&.last { border-right: 1px solid @grafanaTargetSegmentBorder;
border-right: none; margin: 0px;
border-radius: 0;
padding: 8px 4px;
&.last {
border-right: none;
}
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment