feat(user invite): progress on user invite feature, #2353

public/app/features/org/all.js

@@ -3,6 +3,7 @@ define([
   './datasourceEditCtrl',
   './orgUsersCtrl',
   './newOrgCtrl',
+  './userInviteCtrl',
   './orgApiKeysCtrl',
   './orgDetailsCtrl',
 ], function () {});

public/app/features/org/orgUsersCtrl.js

@@ -39,7 +39,7 @@ function (angular) {
 
     $scope.openInviteModal = function() {
       $scope.appEvent('show-modal', {
-        src: './app/partials/invite_users.html',
+        src: './app/features/org/partials/invite.html',
         modalClass: 'modal-no-header invite-modal',
         scope: $scope.$new()
       });

public/app/partials/invite_users.html → public/app/features/org/partials/invite.html

-<div class="modal-body">
+<div class="modal-body" ng-controller="UserInviteCtrl" ng-init="init()">
 
 	<a class="modal-close" ng-click="dismiss();">
 		<i class="fa fa-remove"></i>
@@ -16,40 +16,53 @@
 	<br>
 	<br>
 
-	<form name="addOrgForm" style="display: inline-block;">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item">
-					Email
-				</li>
-				<li>
-					<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"
-					required class="input-large tight-form-input" placeholder="email@test.com">
-				</li>
-				<li class="tight-form-item">
-					Name
-				</li>
-				<li>
-					<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"
-					required class="input-large tight-form-input" placeholder="name (optional)">
-				</li>
-
-				<li class="tight-form-item">
-					Role
-				</li>
-				<li>
-					<select type="text" ng-model="newOrg.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
-					</select>
-				</li>
-				<div class="clearfix"></div>
-			</ul>
-		</div>
-	</form>
+	<form name="inviteForm">
+		<div style="display: inline-block">
+			<div>
+				<div class="tight-form" ng-repeat="invite in invites">
+					<ul class="tight-form-list">
+						<li class="tight-form-item">
+							Email
+						</li>
+						<li>
+							<input type="email" ng-model="invite.email" required
+							class="input-large tight-form-input" placeholder="email@test.com">
+						</li>
+						<li class="tight-form-item">
+							Name
+						</li>
+						<li>
+							<input type="text" ng-model="invite.name" class="input-large tight-form-input" placeholder="name (optional)">
+						</li>
 
-	<div class="" style="margin-top: 30px; margin-bottom: 20px;">
-		<button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
-		<button type="button" class="btn btn-success" ng-click="onConfirm();dismiss();">Invite Users</button>
-	</div>
+						<li class="tight-form-item">
+							Role
+						</li>
+						<li>
+							<select ng-model="invite.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
+							</select>
+						</li>
+						<li class="tight-form-item last" ng-show="$index > 0">
+							<a class="pointer" tabindex="1" ng-click="removeInvite(invite)">
+								<i class="fa fa-remove"></i>
+							</a>
+						</li>
+						<div class="clearfix"></div>
+					</ul>
+				</div>
+			</div>
+
+			<br>
+			<div style="text-align: left">
+				<a ng-click="addInvite()">+ Invite another</a>
+			</div>
 
+			<div class="" style="margin-top: 30px; margin-bottom: 20px;">
+				<button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
+				<button type="submit" class="btn btn-success" ng-click="sendInvites();">Invite Users</button>
+			</div>
+		</div>
+	</form>
 </div>
 
+

public/app/features/org/userInviteCtrl.js

+define([
+  'angular',
+  'lodash',
+],
+function (angular, _) {
+  'use strict';
+
+  var module = angular.module('grafana.controllers');
+
+  module.controller('UserInviteCtrl', function($scope) {
+
+    $scope.invites = [
+      {name: '', email: '', role: 'Editor'},
+    ];
+
+    $scope.init = function() {
+    };
+
+    $scope.addInvite = function() {
+      $scope.invites.push({name: '', email: '', role: 'Editor'});
+    };
+
+    $scope.removeInvite = function(invite) {
+      $scope.invites = _.without($scope.invites, invite);
+    };
+
+    $scope.sendInvites = function() {
+      if (!$scope.inviteForm.$valid) { return; }
+
+      $scope.dismiss();
+    };
+  });
+});

public/css/less/tightform.less

@@ -165,7 +165,7 @@ select.tight-form-input {
   margin: 0px;
   border-radius: 0;
   height: 36px;
-  padding: 8px 3px;
+  padding: 9px 3px;
   &.last {
     border-right: none;
   }