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 146 additions and 40 deletions
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
<div class="container">
<div class="login-box">
......@@ -8,68 +7,104 @@
</div>
<div class="login-inner-box">
<h1 ng-if="mode === 'login'">Login</h1>
<h1 ng-if="mode === 'signup'">Sign up</h1>
<form name="loginForm">
<div class="tight-form">
<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="input-large tight-form-input" ng-model='login.email' placeholder="email or username"></input>
<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">
<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="input-large tight-form-input" required ng-model="loginModel.password" id="inputPassword">
<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 class="tight-form-item">
<a href="asd">Forgotten password?</a>
<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>
<button type="submit" ng-click="login()" class="btn btn-success" style="margin-bottom: 20px">
Sign in
</button>
</form>
<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="alert alert-error" ng-show="loginError">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Login failed:</strong> {{loginError}}
<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>
</form>
<div class="clearfix"></div>
<div class="login-oauth text-center">
<a class="btn btn-primary" href="login/google" target="_self">
Sign in with Google
<a class="btn btn-google" href="login/google" target="_self">
<i class="fa fa-google"></i>
with Google
</a>
<a class="btn btn-primary" href="login/github" target="_self">
Sign in with Github
<a class="btn btn-github" href="login/github" target="_self">
<i class="fa fa-github"></i>
with Github
</a>
</div>
<div class="register-box text-center">
<a href="signup" class="btn btn-info">Sign up now!</a>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="row" style="margin-top: 100px">
<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,8 +125,12 @@ 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 {
[type=text],
[type=email],
[type=number],
[type=password] {
&.tight-form-input {
border: none;
border-right: 1px solid @grafanaTargetSegmentBorder;
margin: 0px;
......@@ -135,6 +139,7 @@ input[type=text].tight-form-clear-input {
&.last {
border-right: none;
}
}
}
//input[type=checkbox].grafana-target-option-checkbox {
......
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