Add collaborator now handles roles, added macaron-binding for binding and validation

src/app/features/account/collaboratorsCtrl.js

@@ -8,7 +8,10 @@ function (angular) {
 
   module.controller('CollaboratorsCtrl', function($scope, $http, backendSrv) {
 
-    $scope.collaborator = {};
+    $scope.collaborator = {
+      loginOrEmail: '',
+      role: 'Viewer',
+    };
 
     $scope.init = function() {
       $scope.get();
@@ -17,7 +20,6 @@ function (angular) {
     $scope.get = function() {
       backendSrv.get('/api/account/collaborators').then(function(collaborators) {
         $scope.collaborators = collaborators;
-        console.log(collaborators);
       });
     };
 
@@ -30,7 +32,7 @@ function (angular) {
     };
 
     $scope.addCollaborator = function() {
-      if (!$scope.addCollaboratorForm.$valid) {
+      if (!$scope.form.$valid) {
         return;
       }
 

src/app/features/account/partials/account.html

@@ -16,40 +16,38 @@
 
 				<form name="accountForm">
 
-					<div class="grafana-target">
-						<div class="grafana-target-inner">
-							<ul class="grafana-segment-list">
-								<li class="grafana-target-segment" style="width: 80px">
-									<strong>Name</strong>
-								</li>
-								<li>
-									<input type="text" ng-model="account.name" class="input-xxlarge grafana-target-segment-input last" >
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-						<div class="grafana-target-inner" style="margin-top: 10px">
-							<ul class="grafana-segment-list">
-								<li class="grafana-target-segment" style="width: 80px">
-									<strong>Email</strong>
-								</li>
-								<li>
-									<input type="text" ng-model="account.email" class="input-xxlarge grafana-target-segment-input last" >
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-						<div class="grafana-target-inner" style="margin-top: 10px">
-							<ul class="grafana-segment-list">
-								<li class="grafana-target-segment" style="width: 80px">
-									<strong>Username</strong>
-								</li>
-								<li>
-									<input type="text" ng-model="account.login" class="input-xxlarge grafana-target-segment-input last" >
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
+					<div class="tight-form">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 80px">
+								<strong>Name</strong>
+							</li>
+							<li>
+								<input type="text" ng-model="account.name" class="input-xxlarge tight-form-input last" >
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+					<div class="tight-form" style="margin-top: 10px">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 80px">
+								<strong>Email</strong>
+							</li>
+							<li>
+								<input type="text" ng-model="account.email" class="input-xxlarge tight-form-input last" >
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+					<div class="tight-form" style="margin-top: 10px">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 80px">
+								<strong>Username</strong>
+							</li>
+							<li>
+								<input type="text" ng-model="account.login" class="input-xxlarge tight-form-input last" >
+							</li>
+						</ul>
+						<div class="clearfix"></div>
 					</div>
 
 					<br>

src/app/features/account/partials/collaborators.html

@@ -1,6 +1,6 @@
 <div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account > Collaborators'"></div>
 
-<div class="dashboard-edit-view">
+<div class="dashboard-edit-view" style="min-height: 500px">
 
 	<div class="dashboard-editor-header">
 		<div class="dashboard-editor-title">
@@ -12,15 +12,34 @@
 	<div class="dashboard-editor-body">
 
 		<div class="editor-row">
-			<div class="editor-option">
-				<form name="addCollaboratorForm" class="form-inline">
-					<label class="small">Add a collaborator</label>
-					<input type="text" class="input-xxlarge" ng-model='collaborator.email' placeholder="collaborator@email.com"></input>
-					<button class="btn btn-success" ng-click="addCollaborator()">Add</button>
+			<div class="section">
+				<form name="form">
+					<div class="tight-form">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 160px">
+								<strong>Username or Email</strong>
+							</li>
+							<li>
+								<input type="text" ng-model="collaborator.loginOrEmail" required class="input-xlarge tight-form-input" placeholder="collaborator@email.com">
+							</li>
+							<li class="tight-form-item">
+								Role
+							</li>
+							<li>
+								<select type="text" ng-model="collaborator.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor2', 'Admin']">
+								</select>
+							</li>
+							<li>
+								<button class="btn btn-success tight-form-btn" ng-click="addCollaborator()">Add</button>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
 				</form>
 			</div>
 		</div>
 
+
 		<div class="editor-row row">
 			<table class="grafana-options-table span5">
 				<tr ng-repeat="collaborator in collaborators">

src/app/services/backendSrv.js

@@ -42,6 +42,11 @@ function (angular, _, config) {
         }
         return results.data;
       }, function(err) {
+        if (err.status === 422) {
+          alertSrv.set("Validation failed", "", "warning", 4000);
+          throw err.data;
+        }
+
         var data = err.data || { message: 'Unexpected error' };
 
         if (_.isString(data)) {

src/css/less/tightform.less

@@ -23,6 +23,10 @@
   }
 }
 
+.tight-form-btn {
+  padding: 8px 12px;
+}
+
 // old graphite-segment-list
 .tight-form-list {
   list-style: none;