Skip to content

N
nexpie-grafana-theme
Commit d85405d5 by Alexander Zobnin Committed by Torkel Ödegaard
Options

ux: move add member into its own page (#10167)

parent 67f1435d
Showing with 67 additions and 62 deletions
public/app/core/routes/routes.ts
......@@ -104,6 +104,11 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
controllerAs: 'ctrl',
resolve: loadOrgBundle,
})
.when('/org/users/new', {
templateUrl: 'public/app/features/org/partials/invite.html',
controller : 'UserInviteCtrl',
resolve: loadOrgBundle,
})
.when('/org/apikeys', {
templateUrl: 'public/app/features/org/partials/orgApiKeys.html',
controller : 'OrgApiKeysCtrl',
......
public/app/features/org/partials/invite.html
<div class="modal-body" ng-controller="UserInviteCtrl" ng-init="init()">
<page-header model="navModel"></page-header>
<div class="modal-header">
<h2 class="modal-header-title">
Invite Users
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="page-container page-body" ng-cloak>
<div class="p-b-2">
Send invite or add existing Grafana users to the organization
<span class="highlight-word">{{contextSrv.user.orgName}}</span>
</div>
<div class="modal-content">
<form name="inviteForm">
<div class="gf-form-group">
<div class="gf-form-inline" ng-repeat="invite in invites">
<div class="gf-form max-width-21">
<span class="gf-form-label">Email or Username</span>
<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
</div>
<div class="gf-form max-width-14">
<span class="gf-form-label">Name</span>
<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
</div>
<div class="gf-form max-width-10">
<span class="gf-form-label">Role</span>
<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
</select>
</div>
<div class="gf-form gf-size-auto">
<a class="gf-form-label pointer" tabindex="1" ng-click="removeInvite(invite)">
<i class="fa fa-remove"></i>
</a>
</div>
</div>
</div>
<div class="modal-tagline p-b-2">
Send invite or add existing Grafana users to the organization
<span class="highlight-word">{{contextSrv.user.orgName}}</span>
</div>
<div class="gf-form-inline gf-form-group">
<div class="gf-form" style="margin-right:.25rem">
<a class="btn btn-inverse gf-form-button" ng-click="addInvite()">
<i class="fa fa-plus"></i>
Invite another
</a>
</div>
<gf-form-switch class="gf-form" label="Skip sending invite email" checked="options.skipEmails" switch-class="max-width-6"></gf-form-switch>
</div>
<form name="inviteForm">
<div class="gf-form-group">
<div class="gf-form-inline" ng-repeat="invite in invites">
<div class="gf-form max-width-21">
<span class="gf-form-label">Email or Username</span>
<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
</div>
<div class="gf-form max-width-14">
<span class="gf-form-label">Name</span>
<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
</div>
<div class="gf-form max-width-10">
<span class="gf-form-label">Role</span>
<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
</select>
</div>
<div class="gf-form gf-size-auto">
<a class="gf-form-label pointer" tabindex="1" ng-click="removeInvite(invite)">
<i class="fa fa-remove"></i>
</a>
</div>
</div>
</div>
<div class="gf-form-inline gf-form-group">
<div class="gf-form" style="margin-right:.25rem">
<a class="btn btn-inverse gf-form-button" ng-click="addInvite()">
<i class="fa fa-plus"></i>
Invite another
</a>
</div>
<gf-form-switch class="gf-form" label="Skip sending invite email" checked="options.skipEmails" switch-class="max-width-6"></gf-form-switch>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="sendInvites();">Invite Users</button>
<a class="btn-text" ng-click="dismiss()">Cancel</a>
</div>
<div class="clearfix"></div>
</form>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="sendInvites();">Invite Users</button>
<a class="btn-text" href="org/users">Cancel</a>
</div>
<div class="clearfix"></div>
</form>
</div>
public/app/features/org/partials/orgUsers.html
......@@ -38,10 +38,10 @@
<button class="btn btn-inverse" ng-show="ctrl.pendingInvites.length" ng-click="ctrl.editor.index = 1">
Pending Invites ({{ctrl.pendingInvites.length}})
</button>
<button class="btn btn-success" ng-click="ctrl.openAddUsersView()" ng-hide="ctrl.externalUserMngLinkUrl">
<a class="btn btn-success" href="org/users/new" ng-hide="ctrl.externalUserMngLinkUrl">
<i class="fa fa-plus"></i>
<span>{{ctrl.addUsersBtnName}}</span>
</button>
</a>
<a class="btn btn-inverse" ng-href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng-if="ctrl.externalUserMngLinkUrl">
<i class="fa fa-external-link-square"></i>
{{ctrl.addUsersBtnName}}
......
public/app/features/org/user_invite_ctrl.ts
import angular from 'angular';
import coreModule from 'app/core/core_module';
import _ from 'lodash';
export class UserInviteCtrl {
/** @ngInject **/
constructor($scope, backendSrv) {
$scope.invites = [
constructor($scope, backendSrv, navModelSrv) {
$scope.navModel = navModelSrv.getNav('cfg', 'users', 0);
const defaultInvites = [
{name: '', email: '', role: 'Editor'},
];
$scope.invites = _.cloneDeep(defaultInvites);
$scope.options = {skipEmails: false};
$scope.init = function() { };
......@@ -20,11 +24,19 @@ export class UserInviteCtrl {
$scope.invites = _.without($scope.invites, invite);
};
$scope.resetInvites = function() {
$scope.invites = _.cloneDeep(defaultInvites);
};
$scope.sendInvites = function() {
if (!$scope.inviteForm.$valid) { return; }
$scope.sendSingleInvite(0);
};
$scope.invitesSent = function() {
$scope.resetInvites();
};
$scope.sendSingleInvite = function(index) {
var invite = $scope.invites[index];
invite.skipEmails = $scope.options.skipEmails;
......@@ -34,7 +46,6 @@ export class UserInviteCtrl {
if (index === $scope.invites.length) {
$scope.invitesSent();
$scope.dismiss();
} else {
$scope.sendSingleInvite(index);
}
......@@ -43,4 +54,4 @@ export class UserInviteCtrl {
}
}
angular.module('grafana.controllers').controller('UserInviteCtrl', UserInviteCtrl);
coreModule.controller('UserInviteCtrl', UserInviteCtrl);
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