From 2cde7336dcece196fb3a4ad56ddcede77e79e9cd Mon Sep 17 00:00:00 2001
From: kevgliss <kevgliss@gmail.com>
Date: Fri, 1 Apr 2016 13:01:56 -0700
Subject: [PATCH] Closes #263

---
 .../authorities/authority/authority.js        |   4 +
 .../authority/authorityWizard.tpl.html        |   1 +
 .../authorities/authority/edit.tpl.html       |   1 +
 .../app/angular/authorities/view/view.js      |   5 +-
 .../certificates/certificate/certificate.js   |   4 +
 .../certificate/certificateWizard.tpl.html    |   3 +-
 .../certificates/certificate/edit.tpl.html    |   1 +
 .../certificates/certificate/export.tpl.html  |   1 +
 .../certificates/certificate/upload.tpl.html  |   1 +
 .../app/angular/certificates/view/view.js     |   8 +-
 .../destination/destination.tpl.html          |  97 +++++-----
 .../app/angular/destinations/view/view.js     |   4 +-
 lemur/static/app/angular/domains/view/view.js |   3 +-
 .../notification/notification.tpl.html        | 155 ++++++++--------
 .../app/angular/notifications/view/view.js    |   4 +-
 .../app/angular/roles/role/role.tpl.html      | 161 ++++++++--------
 lemur/static/app/angular/roles/view/view.js   |   4 +-
 .../angular/sources/source/source.tpl.html    |  97 +++++-----
 lemur/static/app/angular/sources/view/view.js |   4 +-
 .../app/angular/users/user/user.tpl.html      | 174 +++++++++---------
 lemur/static/app/angular/users/view/view.js   |   4 +-
 21 files changed, 386 insertions(+), 350 deletions(-)

diff --git a/lemur/static/app/angular/authorities/authority/authority.js b/lemur/static/app/angular/authorities/authority/authority.js
index 1e6ff95d..688a33a4 100644
--- a/lemur/static/app/angular/authorities/authority/authority.js
+++ b/lemur/static/app/angular/authorities/authority/authority.js
@@ -41,6 +41,10 @@ angular.module('lemur')
     // set the defaults
     AuthorityService.getDefaults($scope.authority);
 
+    $scope.cancel = function () {
+      $modalInstance.dismiss('cancel');
+    };
+
     $scope.create = function (authority) {
       WizardHandler.wizard().context.loading = true;
       AuthorityService.create(authority).then(
diff --git a/lemur/static/app/angular/authorities/authority/authorityWizard.tpl.html b/lemur/static/app/angular/authorities/authority/authorityWizard.tpl.html
index 8eef96f1..43381dde 100644
--- a/lemur/static/app/angular/authorities/authority/authorityWizard.tpl.html
+++ b/lemur/static/app/angular/authorities/authority/authorityWizard.tpl.html
@@ -1,4 +1,5 @@
 <div class="modal-header">
+    <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h3 class="modal-title"><span ng-show="!authority.id">Create</span><span ng-show="authority.id">Edit</span> Authority <span class="text-muted"><small>The nail that sticks out farthest gets hammered the hardest</small></span></h3>
 </div>
 <div class="modal-body">
diff --git a/lemur/static/app/angular/authorities/authority/edit.tpl.html b/lemur/static/app/angular/authorities/authority/edit.tpl.html
index a11e9177..2d6bfbf9 100644
--- a/lemur/static/app/angular/authorities/authority/edit.tpl.html
+++ b/lemur/static/app/angular/authorities/authority/edit.tpl.html
@@ -1,5 +1,6 @@
 <div class="modal-header">
     <div class="modal-title">
+        <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h3 class="modal-header">Edit <span class="text-muted"><small>{{ authority.name }}</small></span></h3>
     </div>
     <div class="modal-body">
diff --git a/lemur/static/app/angular/authorities/view/view.js b/lemur/static/app/angular/authorities/view/view.js
index f7f68f31..f7dbeabe 100644
--- a/lemur/static/app/angular/authorities/view/view.js
+++ b/lemur/static/app/angular/authorities/view/view.js
@@ -73,6 +73,7 @@ angular.module('lemur')
         templateUrl: '/angular/authorities/authority/edit.tpl.html',
         controller: 'AuthorityEditController',
         size: 'lg',
+        backdrop: 'static',
         resolve: {
           editId: function () {
             return authorityId;
@@ -92,6 +93,7 @@ angular.module('lemur')
         templateUrl: '/angular/roles/role/role.tpl.html',
         controller: 'RolesEditController',
         size: 'lg',
+        backdrop: 'static',
         resolve: {
           editId: function () {
             return roleId;
@@ -110,7 +112,8 @@ angular.module('lemur')
         animation: true,
         controller: 'AuthorityCreateController',
         templateUrl: '/angular/authorities/authority/authorityWizard.tpl.html',
-        size: 'lg'
+        size: 'lg',
+        backdrop: 'static',
       });
 
       modalInstance.result.then(function () {
diff --git a/lemur/static/app/angular/certificates/certificate/certificate.js b/lemur/static/app/angular/certificates/certificate/certificate.js
index 4e20aec3..e8fe2b9f 100644
--- a/lemur/static/app/angular/certificates/certificate/certificate.js
+++ b/lemur/static/app/angular/certificates/certificate/certificate.js
@@ -90,6 +90,10 @@ angular.module('lemur')
     // set the defaults
     CertificateService.getDefaults($scope.certificate);
 
+    $scope.cancel = function () {
+      $modalInstance.dismiss('cancel');
+    };
+
     $scope.create = function (certificate) {
       WizardHandler.wizard().context.loading = true;
       CertificateService.create(certificate).then(
diff --git a/lemur/static/app/angular/certificates/certificate/certificateWizard.tpl.html b/lemur/static/app/angular/certificates/certificate/certificateWizard.tpl.html
index 726a3ec9..db69afd4 100644
--- a/lemur/static/app/angular/certificates/certificate/certificateWizard.tpl.html
+++ b/lemur/static/app/angular/certificates/certificate/certificateWizard.tpl.html
@@ -1,5 +1,6 @@
 <div class="modal-header">
-    <h3 class="modal-title"><span ng-show="!certificate.id">Create</span><span ng-show="certificate.id">Edit</span> Certificate <span class="text-muted"><small>encrypt all the things</small></h3>
+    <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h3 class="modal-title"><span ng-show="!certificate.id">Create</span><span ng-show="certificate.id">Edit</span> Certificate <span class="text-muted"><small>encrypt all the things</small></span></h3>
 </div>
 <div class="modal-body">
     <div>
diff --git a/lemur/static/app/angular/certificates/certificate/edit.tpl.html b/lemur/static/app/angular/certificates/certificate/edit.tpl.html
index effa8816..7221bae4 100644
--- a/lemur/static/app/angular/certificates/certificate/edit.tpl.html
+++ b/lemur/static/app/angular/certificates/certificate/edit.tpl.html
@@ -1,5 +1,6 @@
 <div class="modal-header">
     <div class="modal-title">
+        <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h3 class="modal-header">Edit <span class="text-muted"><small>{{ certificate.name }}</small></span></h3>
     </div>
     <div class="modal-body">
diff --git a/lemur/static/app/angular/certificates/certificate/export.tpl.html b/lemur/static/app/angular/certificates/certificate/export.tpl.html
index 7fbef70a..cd2903d7 100644
--- a/lemur/static/app/angular/certificates/certificate/export.tpl.html
+++ b/lemur/static/app/angular/certificates/certificate/export.tpl.html
@@ -1,5 +1,6 @@
 <div class="modal-header">
   <div class="modal-title">
+    <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h3 class="modal-header">Export <span class="text-muted"><small>{{ certificate.name }}</small></span></h3>
   </div>
   <div class="modal-body">
diff --git a/lemur/static/app/angular/certificates/certificate/upload.tpl.html b/lemur/static/app/angular/certificates/certificate/upload.tpl.html
index 75159f09..a01aa196 100644
--- a/lemur/static/app/angular/certificates/certificate/upload.tpl.html
+++ b/lemur/static/app/angular/certificates/certificate/upload.tpl.html
@@ -1,5 +1,6 @@
 <div class="modal-header">
     <div class="modal-title">
+        <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h3 class="modal-header">Upload a certificate <span class="text-muted"><small>encrypt all the things</small></span></h3>
     </div>
     <div class="modal-body">
diff --git a/lemur/static/app/angular/certificates/view/view.js b/lemur/static/app/angular/certificates/view/view.js
index f08f7281..1baf17ea 100644
--- a/lemur/static/app/angular/certificates/view/view.js
+++ b/lemur/static/app/angular/certificates/view/view.js
@@ -125,7 +125,8 @@ angular.module('lemur')
         animation: true,
         controller: 'CertificateCreateController',
         templateUrl: '/angular/certificates/certificate/certificateWizard.tpl.html',
-        size: 'lg'
+        size: 'lg',
+        backdrop: 'static'
       });
 
       modalInstance.result.then(function () {
@@ -139,6 +140,7 @@ angular.module('lemur')
         controller: 'CertificateEditController',
         templateUrl: '/angular/certificates/certificate/edit.tpl.html',
         size: 'lg',
+        backdrop: 'static',
         resolve: {
           editId: function () {
             return certificateId;
@@ -156,7 +158,8 @@ angular.module('lemur')
         animation: true,
         controller: 'CertificateUploadController',
         templateUrl: '/angular/certificates/certificate/upload.tpl.html',
-        size: 'lg'
+        size: 'lg',
+        backdrop: 'static'
       });
 
       modalInstance.result.then(function () {
@@ -170,6 +173,7 @@ angular.module('lemur')
         controller: 'CertificateExportController',
         templateUrl: '/angular/certificates/certificate/export.tpl.html',
         size: 'lg',
+        backdrop: 'static',
         resolve: {
           editId: function () {
             return certificateId;
diff --git a/lemur/static/app/angular/destinations/destination/destination.tpl.html b/lemur/static/app/angular/destinations/destination/destination.tpl.html
index 5ae1fdf3..15609c69 100644
--- a/lemur/static/app/angular/destinations/destination/destination.tpl.html
+++ b/lemur/static/app/angular/destinations/destination/destination.tpl.html
@@ -1,56 +1,55 @@
 <div class="modal-header">
-    <div class="modal-title">
-        <h3 class="modal-header"><span ng-show="!destination.fromServer">Create</span><span ng-show="destination.fromServer">Edit</span> Destination <span class="text-muted"><small>oh the places you will go!</small></span></h3>
-    </div>
-    <div class="modal-body">
-        <form name="createForm" class="form-horizontal" role="form" novalidate>
-            <div class="form-group"
-                 ng-class="{'has-error': createForm.label.$invalid, 'has-success': !createForm.label.$invalid&&createForm.label.$dirty}">
-                <label class="control-label col-sm-2">
-                    Label
-                </label>
-                <div class="col-sm-10">
-                    <input name="label" ng-model="destination.label" placeholder="Label" class="form-control" required/>
-                    <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an destination label</p>
-                </div>
+    <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h3><span ng-show="!destination.fromServer">Create</span><span ng-show="destination.fromServer">Edit</span> Destination <span class="text-muted"><small>oh the places you will go!</small></span></h3>
+</div>
+<div class="modal-body">
+    <form name="createForm" class="form-horizontal" role="form" novalidate>
+        <div class="form-group"
+             ng-class="{'has-error': createForm.label.$invalid, 'has-success': !createForm.label.$invalid&&createForm.label.$dirty}">
+            <label class="control-label col-sm-2">
+                Label
+            </label>
+            <div class="col-sm-10">
+                <input name="label" ng-model="destination.label" placeholder="Label" class="form-control" required/>
+                <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an destination label</p>
             </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Description
-                </label>
-                <div class="col-sm-10">
-                    <textarea name="comments" ng-model="destination.description" placeholder="Something elegant" class="form-control" ></textarea>
-                </div>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Description
+            </label>
+            <div class="col-sm-10">
+                <textarea name="comments" ng-model="destination.description" placeholder="Something elegant" class="form-control" ></textarea>
             </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Plugin
-                </label>
-                <div class="col-sm-10">
-                    <select class="form-control" ng-model="destination.plugin" ng-options="plugin.title for plugin in plugins" required></select>
-                </div>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Plugin
+            </label>
+            <div class="col-sm-10">
+                <select class="form-control" ng-model="destination.plugin" ng-options="plugin.title for plugin in plugins" required></select>
             </div>
-            <div class="form-group" ng-repeat="item in destination.plugin.pluginOptions">
-                <ng-form name="subForm" class="form-horizontal" role="form" novalidate>
-                    <div ng-class="{'has-error': subForm.sub.$invalid, 'has-success': !subForm.sub.$invalid&&subForm.sub.$dirty}">
-                        <label class="control-label col-sm-2">
-                            {{ item.name | titleCase }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input name="sub" ng-if="item.type == 'int'" type="number" ng-pattern="/^[0-9]{12,12}$/" class="form-control" ng-model="item.value"/>
-                            <select name="sub" ng-if="item.type == 'select'" class="form-control" ng-options="i for i in item.available" ng-model="item.value"></select>
-                            <input name="sub" ng-if="item.type == 'bool'" class="form-control" type="checkbox" ng-model="item.value">
-                            <input name="sub" ng-if="item.type == 'str'" type="text" class="form-control" ng-model="item.value"/>
-                            <p ng-show="subForm.sub.$invalid && !subForm.sub.$pristine" class="help-block">{{ item.helpMessage }}</p>
-                        </div>
+        </div>
+        <div class="form-group" ng-repeat="item in destination.plugin.pluginOptions">
+            <ng-form name="subForm" class="form-horizontal" role="form" novalidate>
+                <div ng-class="{'has-error': subForm.sub.$invalid, 'has-success': !subForm.sub.$invalid&&subForm.sub.$dirty}">
+                    <label class="control-label col-sm-2">
+                        {{ item.name | titleCase }}
+                    </label>
+                    <div class="col-sm-10">
+                        <input name="sub" ng-if="item.type == 'int'" type="number" ng-pattern="/^[0-9]{12,12}$/" class="form-control" ng-model="item.value"/>
+                        <select name="sub" ng-if="item.type == 'select'" class="form-control" ng-options="i for i in item.available" ng-model="item.value"></select>
+                        <input name="sub" ng-if="item.type == 'bool'" class="form-control" type="checkbox" ng-model="item.value">
+                        <input name="sub" ng-if="item.type == 'str'" type="text" class="form-control" ng-model="item.value"/>
+                        <p ng-show="subForm.sub.$invalid && !subForm.sub.$pristine" class="help-block">{{ item.helpMessage }}</p>
                     </div>
-                </ng-form>
-            </div>
-        </form>
-    </div>
-    <div class="modal-footer">
-        <button ng-click="save(destination)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
-        <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
-    </div>
+                </div>
+            </ng-form>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button ng-click="save(destination)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
+    <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
 </div>
 
diff --git a/lemur/static/app/angular/destinations/view/view.js b/lemur/static/app/angular/destinations/view/view.js
index c9a01505..cc766ff5 100644
--- a/lemur/static/app/angular/destinations/view/view.js
+++ b/lemur/static/app/angular/destinations/view/view.js
@@ -55,6 +55,7 @@ angular.module('lemur')
         templateUrl: '/angular/destinations/destination/destination.tpl.html',
         controller: 'DestinationsEditController',
         size: 'lg',
+        backdrop: 'static',
         resolve: {
             editId: function () {
               return destinationId;
@@ -73,7 +74,8 @@ angular.module('lemur')
         animation: true,
         controller: 'DestinationsCreateController',
         templateUrl: '/angular/destinations/destination/destination.tpl.html',
-        size: 'lg'
+        size: 'lg',
+        backdrop: 'static'
       });
 
       modalInstance.result.then(function () {
diff --git a/lemur/static/app/angular/domains/view/view.js b/lemur/static/app/angular/domains/view/view.js
index fa7a1541..dd851325 100644
--- a/lemur/static/app/angular/domains/view/view.js
+++ b/lemur/static/app/angular/domains/view/view.js
@@ -54,7 +54,8 @@ angular.module('lemur')
         animation: true,
         controller: 'DomainsCreateController',
         templateUrl: '/angular/domains/domain/domain.tpl.html',
-        size: 'lg'
+        size: 'lg',
+        backdrop: 'static'
       });
 
       modalInstance.result.then(function () {
diff --git a/lemur/static/app/angular/notifications/notification/notification.tpl.html b/lemur/static/app/angular/notifications/notification/notification.tpl.html
index 8289ae5b..99428cfb 100644
--- a/lemur/static/app/angular/notifications/notification/notification.tpl.html
+++ b/lemur/static/app/angular/notifications/notification/notification.tpl.html
@@ -1,87 +1,86 @@
 <div class="modal-header">
-    <div class="modal-title">
-        <h3 class="modal-header"><span ng-show="!notification.fromServer">Create</span><span ng-show="notification.fromServer">Edit</span> Notification <span class="text-muted"><small>you gotta speak louder son!</small></span></h3>
-    </div>
-    <div class="modal-body">
-        <form name="createForm" class="form-horizontal" role="form" novalidate>
-            <div class="form-group"
-                 ng-class="{'has-error': createForm.label.$invalid, 'has-success': !createForm.label.$invalid&&createForm.label.$dirty}">
-                <label class="control-label col-sm-2">
-                    Label
-                </label>
-                <div class="col-sm-10">
-                    <input name="label" ng-model="notification.label" placeholder="Label" class="form-control" required/>
-                    <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an notification label</p>
-                </div>
+  <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+  <h3><span ng-show="!notification.fromServer">Create</span><span ng-show="notification.fromServer">Edit</span> Notification <span class="text-muted"><small>you gotta speak louder son!</small></span></h3>
+</div>
+<div class="modal-body">
+    <form name="createForm" class="form-horizontal" role="form" novalidate>
+        <div class="form-group"
+             ng-class="{'has-error': createForm.label.$invalid, 'has-success': !createForm.label.$invalid&&createForm.label.$dirty}">
+            <label class="control-label col-sm-2">
+                Label
+            </label>
+            <div class="col-sm-10">
+                <input name="label" ng-model="notification.label" placeholder="Label" class="form-control" required/>
+                <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an notification label</p>
             </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Description
-                </label>
-                <div class="col-sm-10">
-                    <textarea name="comments" ng-model="notification.description" placeholder="Something elegant" class="form-control" ></textarea>
-                </div>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Description
+            </label>
+            <div class="col-sm-10">
+                <textarea name="comments" ng-model="notification.description" placeholder="Something elegant" class="form-control" ></textarea>
             </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Plugin
-                </label>
-                <div class="col-sm-10">
-                    <select class="form-control" ng-model="notification.plugin" ng-options="plugin.title for plugin in plugins" required></select>
-                </div>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Plugin
+            </label>
+            <div class="col-sm-10">
+                <select class="form-control" ng-model="notification.plugin" ng-options="plugin.title for plugin in plugins" required></select>
             </div>
-            <div class="form-group" ng-repeat="item in notification.plugin.pluginOptions">
-                <ng-form name="subForm" class="form-horizontal" role="form" novalidate>
-                    <div ng-class="{'has-error': subForm.sub.$invalid, 'has-success': !subForm.sub.$invalid&&subForm.sub.$dirty}">
-                        <label class="control-label col-sm-2">
-                            {{ item.name | titleCase }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input name="sub" ng-if="item.type == 'int'" type="number" ng-pattern="item.validation" class="form-control" ng-model="item.value"/>
-                            <select name="sub" ng-if="item.type == 'select'" class="form-control" ng-options="i as (i | titleCase) for i in item.available" ng-model="item.value"></select>
-                            <input name="sub" ng-if="item.type == 'bool'" class="form-control" type="checkbox" ng-model="item.value">
-                            <input name="sub" ng-if="item.type == 'str'" ng-pattern="item.validation" type="text" class="form-control" ng-model="item.value"/>
-                            <p ng-show="subForm.sub.$invalid && !subForm.sub.$pristine" class="help-block">{{ item.helpMessage }}</p>
-                        </div>
+        </div>
+        <div class="form-group" ng-repeat="item in notification.plugin.pluginOptions">
+            <ng-form name="subForm" class="form-horizontal" role="form" novalidate>
+                <div ng-class="{'has-error': subForm.sub.$invalid, 'has-success': !subForm.sub.$invalid&&subForm.sub.$dirty}">
+                    <label class="control-label col-sm-2">
+                        {{ item.name | titleCase }}
+                    </label>
+                    <div class="col-sm-10">
+                        <input name="sub" ng-if="item.type == 'int'" type="number" ng-pattern="item.validation" class="form-control" ng-model="item.value"/>
+                        <select name="sub" ng-if="item.type == 'select'" class="form-control" ng-options="i as (i | titleCase) for i in item.available" ng-model="item.value"></select>
+                        <input name="sub" ng-if="item.type == 'bool'" class="form-control" type="checkbox" ng-model="item.value">
+                        <input name="sub" ng-if="item.type == 'str'" ng-pattern="item.validation" type="text" class="form-control" ng-model="item.value"/>
+                        <p ng-show="subForm.sub.$invalid && !subForm.sub.$pristine" class="help-block">{{ item.helpMessage }}</p>
                     </div>
-                </ng-form>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Certificates
-                </label>
-                <div class="col-sm-10">
-                    <div class="input-group">
-                        <input type="text" ng-model="notification.selectedCertificate" placeholder="Certificate Name"
-                               typeahead="certificate.name for certificate in certificateService.findCertificatesByName($viewValue)" typeahead-loading="loadingCertificates"
-                               class="form-control input-md" typeahead-on-select="notification.attachCertificate($item)" typeahead-min-wait="50">
-                        <span class="input-group-btn">
-                            <button ng-model="certificates.show" class="btn btn-md btn-default" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
-                                <span class="badge">{{ notification.certificates.total || 0 }}</span>
-                            </button>
-                        </span>
-                    </div>
-                    <table ng-show="notification.certificates" class="table">
-                        <tr ng-repeat="certificate in notification.certificates track by $index">
-                            <td><a class="btn btn-sm btn-info" href="#">{{ certificate.name }}</a></td>
-                            <td><span class="text-muted">{{ certificate.description }}</span></td>
-                            <td>
-                                <button type="button" ng-click="notification.removeCertificate($index)" class="btn btn-danger btn-sm pull-right">Remove</button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td><a class="pull-right" ng-click="loadMoreCertificates()"><strong>More</strong></a></td>
-                        </tr>
-                    </table>
                 </div>
+            </ng-form>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Certificates
+            </label>
+            <div class="col-sm-10">
+                <div class="input-group">
+                    <input type="text" ng-model="notification.selectedCertificate" placeholder="Certificate Name"
+                           typeahead="certificate.name for certificate in certificateService.findCertificatesByName($viewValue)" typeahead-loading="loadingCertificates"
+                           class="form-control input-md" typeahead-on-select="notification.attachCertificate($item)" typeahead-min-wait="50">
+                    <span class="input-group-btn">
+                        <button ng-model="certificates.show" class="btn btn-md btn-default" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
+                            <span class="badge">{{ notification.certificates.total || 0 }}</span>
+                        </button>
+                    </span>
+                </div>
+                <table ng-show="notification.certificates" class="table">
+                    <tr ng-repeat="certificate in notification.certificates track by $index">
+                        <td><a class="btn btn-sm btn-info" href="#">{{ certificate.name }}</a></td>
+                        <td><span class="text-muted">{{ certificate.description }}</span></td>
+                        <td>
+                            <button type="button" ng-click="notification.removeCertificate($index)" class="btn btn-danger btn-sm pull-right">Remove</button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td></td>
+                        <td><a class="pull-right" ng-click="loadMoreCertificates()"><strong>More</strong></a></td>
+                    </tr>
+                </table>
             </div>
-        </form>
-    </div>
-    <div class="modal-footer">
-        <button ng-click="save(notification)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
-        <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
-    </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button ng-click="save(notification)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
+    <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
 </div>
 
diff --git a/lemur/static/app/angular/notifications/view/view.js b/lemur/static/app/angular/notifications/view/view.js
index f037494e..fe3f28cd 100644
--- a/lemur/static/app/angular/notifications/view/view.js
+++ b/lemur/static/app/angular/notifications/view/view.js
@@ -61,6 +61,7 @@ angular.module('lemur')
         templateUrl: '/angular/notifications/notification/notification.tpl.html',
         controller: 'NotificationsEditController',
         size: 'lg',
+        backdrop: 'static',
         resolve: {
           editId: function () {
             return notificationId;
@@ -79,7 +80,8 @@ angular.module('lemur')
         animation: true,
         controller: 'NotificationsCreateController',
         templateUrl: '/angular/notifications/notification/notification.tpl.html',
-        size: 'lg'
+        size: 'lg',
+        backdrop: 'static'
       });
 
       modalInstance.result.then(function () {
diff --git a/lemur/static/app/angular/roles/role/role.tpl.html b/lemur/static/app/angular/roles/role/role.tpl.html
index 12287ada..b4b3b5ce 100644
--- a/lemur/static/app/angular/roles/role/role.tpl.html
+++ b/lemur/static/app/angular/roles/role/role.tpl.html
@@ -1,86 +1,85 @@
 <div class="modal-header">
-    <div class="modal-title">
-        <h3 class="modal-header"><span ng-show="!role.fromServer">Create</span><span ng-show="role.fromServer">Edit</span> Role <span class="text-muted"><small>The nail that sticks out farthest gets hammered the hardest</small></span></h3>
-    </div>
-    <div class="modal-body">
-        <form name="createForm" class="form-horizontal" ng-submit="save(role)" role="form" novalidate>
-            <div class="form-group"
-                 ng-class="{'has-error': createForm.name.$invalid, 'has-success': !createForm.name.$invalid&&createForm.name.$dirty}">
-                <label class="control-label col-sm-2">
-                    Name
-                </label>
-                <div class="col-sm-10">
-                    <input name="name" ng-model="role.name" placeholder="Name" class="form-control" required/>
-                    <p ng-show="createForm.name.$invalid && !createForm.name.$pristine" class="help-block">You must enter an role name</p>
-                </div>
+    <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h3><span ng-show="!role.fromServer">Create</span><span ng-show="role.fromServer">Edit</span> Role <span class="text-muted"><small>The nail that sticks out farthest gets hammered the hardest</small></span></h3>
+</div>
+<div class="modal-body">
+    <form name="createForm" class="form-horizontal" ng-submit="save(role)" role="form" novalidate>
+        <div class="form-group"
+             ng-class="{'has-error': createForm.name.$invalid, 'has-success': !createForm.name.$invalid&&createForm.name.$dirty}">
+            <label class="control-label col-sm-2">
+                Name
+            </label>
+            <div class="col-sm-10">
+                <input name="name" ng-model="role.name" placeholder="Name" class="form-control" required/>
+                <p ng-show="createForm.name.$invalid && !createForm.name.$pristine" class="help-block">You must enter an role name</p>
             </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Description
-                </label>
-                <div class="col-sm-10">
-                    <textarea name="description" ng-model="role.description" placeholder="Something elegant" class="form-control" ></textarea>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Username
-                </label>
-                <div class="col-sm-10">
-                    <input ng-show="!role.fromServer" name="username" ng-model="role.username" placeholder="Username" class="form-control"/>
-                    <div class="well">
-            <span ng-show="role.password">
-              {{ role.username }}
-            </span>
-            <span ng-show="!role.password">
-              ******************
-            </span>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Password
-                </label>
-                <div class="col-sm-10">
-                    <input ng-show="!role.fromServer" type="password" name="password" ng-model="role.password" placeholder="hunter2" class="form-control"/>
-                    <p ng-show="createForm.password.$invalid && !createForm.password.$pristine" class="help-block">You must enter an password</p>
-                    <div class="well">
-            <span ng-show="role.password">
-                {{ role.password }}
-            </span>
-            <span ng-show="!role.password">
-              *****************
-            </span>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">User(s)</label>
-                <div class="col-sm-10">
-                    <input tooltip="You can attach any user to this role, once attached they will have access as defined by this role"
-                           typeahead="user.username for user in userService.findUserByName($viewValue)" typeahead-loading="loadingUsers"
-                           typeahead-min-wait="100" typeahead-on-select="role.addUser($item)"
-                           type="text" name="user" ng-model="role.selectedUser" placeholder="Username..." class="form-control"/>
-                    <table ng-show="role.users" class="table">
-                        <tr ng-repeat="user in role.users track by $index">
-                            <td>{{ user.username }}</td>
-                            <td>
-                                <button type="button" ng-click="role.removeUser($index)" class="btn btn-danger btn-sm pull-right">Remove</button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td><a class="pull-right" ng-click="loadMoreUsers()"><strong>More</strong></a></td>
-                        </tr>
-                    </table>
-                </div>
-            </div>
-        </form>
-        <div class="modal-footer">
-            <button ng-click="roleService.loadPassword(role)" class="btn btn-warning pull-left">Show Credentials</button>
-            <button ng-click="save(role)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
-            <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
         </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Description
+            </label>
+            <div class="col-sm-10">
+                <textarea name="description" ng-model="role.description" placeholder="Something elegant" class="form-control" ></textarea>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Username
+            </label>
+            <div class="col-sm-10">
+                <input ng-show="!role.fromServer" name="username" ng-model="role.username" placeholder="Username" class="form-control"/>
+                <div class="well">
+        <span ng-show="role.password">
+          {{ role.username }}
+        </span>
+        <span ng-show="!role.password">
+          ******************
+        </span>
+                </div>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Password
+            </label>
+            <div class="col-sm-10">
+                <input ng-show="!role.fromServer" type="password" name="password" ng-model="role.password" placeholder="hunter2" class="form-control"/>
+                <p ng-show="createForm.password.$invalid && !createForm.password.$pristine" class="help-block">You must enter an password</p>
+                <div class="well">
+        <span ng-show="role.password">
+            {{ role.password }}
+        </span>
+        <span ng-show="!role.password">
+          *****************
+        </span>
+                </div>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">User(s)</label>
+            <div class="col-sm-10">
+                <input tooltip="You can attach any user to this role, once attached they will have access as defined by this role"
+                       typeahead="user.username for user in userService.findUserByName($viewValue)" typeahead-loading="loadingUsers"
+                       typeahead-min-wait="100" typeahead-on-select="role.addUser($item)"
+                       type="text" name="user" ng-model="role.selectedUser" placeholder="Username..." class="form-control"/>
+                <table ng-show="role.users" class="table">
+                    <tr ng-repeat="user in role.users track by $index">
+                        <td>{{ user.username }}</td>
+                        <td>
+                            <button type="button" ng-click="role.removeUser($index)" class="btn btn-danger btn-sm pull-right">Remove</button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td><a class="pull-right" ng-click="loadMoreUsers()"><strong>More</strong></a></td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </form>
+    <div class="modal-footer">
+        <button ng-click="roleService.loadPassword(role)" class="btn btn-warning pull-left">Show Credentials</button>
+        <button ng-click="save(role)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
+        <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
     </div>
 </div>
diff --git a/lemur/static/app/angular/roles/view/view.js b/lemur/static/app/angular/roles/view/view.js
index 4957f8b0..e1edcca5 100644
--- a/lemur/static/app/angular/roles/view/view.js
+++ b/lemur/static/app/angular/roles/view/view.js
@@ -47,6 +47,7 @@ angular.module('lemur')
         templateUrl: '/angular/roles/role/role.tpl.html',
         controller: 'RolesEditController',
         size: 'lg',
+        backdrop: 'static',
         resolve: {
           editId: function () {
             return roleId;
@@ -65,7 +66,8 @@ angular.module('lemur')
         animation: true,
         controller: 'RolesCreateController',
         templateUrl: '/angular/roles/role/role.tpl.html',
-        size: 'lg'
+        size: 'lg',
+        backdrop: 'static'
       });
 
       modalInstance.result.then(function () {
diff --git a/lemur/static/app/angular/sources/source/source.tpl.html b/lemur/static/app/angular/sources/source/source.tpl.html
index 39e8c277..a4ab1887 100644
--- a/lemur/static/app/angular/sources/source/source.tpl.html
+++ b/lemur/static/app/angular/sources/source/source.tpl.html
@@ -1,56 +1,55 @@
 <div class="modal-header">
-    <div class="modal-title">
-        <h3 class="modal-header"><span ng-show="!source.fromServer">Create</span><span ng-show="source.fromServer">Edit</span> Source <span class="text-muted"><small>oh the places you will go!</small></span></h3>
-    </div>
-    <div class="modal-body">
-        <form name="createForm" class="form-horizontal" role="form" novalidate>
-            <div class="form-group"
-                 ng-class="{'has-error': createForm.label.$invalid, 'has-success': !createForm.label.$invalid&&createForm.label.$dirty}">
-                <label class="control-label col-sm-2">
-                    Label
-                </label>
-                <div class="col-sm-10">
-                    <input name="label" ng-model="source.label" placeholder="Label" class="form-control" required/>
-                    <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an source label</p>
-                </div>
+    <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h3><span ng-show="!source.fromServer">Create</span><span ng-show="source.fromServer">Edit</span> Source <span class="text-muted"><small>oh the places you will go!</small></span></h3>
+</div>
+<div class="modal-body">
+    <form name="createForm" class="form-horizontal" role="form" novalidate>
+        <div class="form-group"
+             ng-class="{'has-error': createForm.label.$invalid, 'has-success': !createForm.label.$invalid&&createForm.label.$dirty}">
+            <label class="control-label col-sm-2">
+                Label
+            </label>
+            <div class="col-sm-10">
+                <input name="label" ng-model="source.label" placeholder="Label" class="form-control" required/>
+                <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an source label</p>
             </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Description
-                </label>
-                <div class="col-sm-10">
-                    <textarea name="comments" ng-model="source.description" placeholder="Something elegant" class="form-control" ></textarea>
-                </div>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Description
+            </label>
+            <div class="col-sm-10">
+                <textarea name="comments" ng-model="source.description" placeholder="Something elegant" class="form-control" ></textarea>
             </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Plugin
-                </label>
-                <div class="col-sm-10">
-                    <select class="form-control" ng-model="source.plugin" ng-options="plugin.title for plugin in plugins" required></select>
-                </div>
+        </div>
+        <div class="form-group">
+            <label class="control-label col-sm-2">
+                Plugin
+            </label>
+            <div class="col-sm-10">
+                <select class="form-control" ng-model="source.plugin" ng-options="plugin.title for plugin in plugins" required></select>
             </div>
-            <div class="form-group" ng-repeat="item in source.plugin.pluginOptions">
-                <ng-form name="subForm" class="form-horizontal" role="form" novalidate>
-                    <div ng-class="{'has-error': subForm.sub.$invalid, 'has-success': !subForm.sub.$invalid&&subForm.sub.$dirty}">
-                        <label class="control-label col-sm-2">
-                            {{ item.name | titleCase }}
-                        </label>
-                        <div class="col-sm-10">
-                            <input name="sub" ng-if="item.type == 'int'" type="number" ng-pattern="/^[0-9]{12,12}$/" class="form-control" ng-model="item.value"/>
-                            <select name="sub" ng-if="item.type == 'select'" class="form-control" ng-options="i for i in item.available" ng-model="item.value"></select>
-                            <input name="sub" ng-if="item.type == 'bool'" class="form-control" type="checkbox" ng-model="item.value">
-                            <input name="sub" ng-if="item.type == 'str'" type="text" class="form-control" ng-model="item.value"/>
-                            <p ng-show="subForm.sub.$invalid && !subForm.sub.$pristine" class="help-block">{{ item.helpMessage }}</p>
-                        </div>
+        </div>
+        <div class="form-group" ng-repeat="item in source.plugin.pluginOptions">
+            <ng-form name="subForm" class="form-horizontal" role="form" novalidate>
+                <div ng-class="{'has-error': subForm.sub.$invalid, 'has-success': !subForm.sub.$invalid&&subForm.sub.$dirty}">
+                    <label class="control-label col-sm-2">
+                        {{ item.name | titleCase }}
+                    </label>
+                    <div class="col-sm-10">
+                        <input name="sub" ng-if="item.type == 'int'" type="number" ng-pattern="/^[0-9]{12,12}$/" class="form-control" ng-model="item.value"/>
+                        <select name="sub" ng-if="item.type == 'select'" class="form-control" ng-options="i for i in item.available" ng-model="item.value"></select>
+                        <input name="sub" ng-if="item.type == 'bool'" class="form-control" type="checkbox" ng-model="item.value">
+                        <input name="sub" ng-if="item.type == 'str'" type="text" class="form-control" ng-model="item.value"/>
+                        <p ng-show="subForm.sub.$invalid && !subForm.sub.$pristine" class="help-block">{{ item.helpMessage }}</p>
                     </div>
-                </ng-form>
-            </div>
-        </form>
-    </div>
-    <div class="modal-footer">
-        <button ng-click="save(source)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
-        <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
-    </div>
+                </div>
+            </ng-form>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button ng-click="save(source)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
+    <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
 </div>
 
diff --git a/lemur/static/app/angular/sources/view/view.js b/lemur/static/app/angular/sources/view/view.js
index f125eb85..b1dea337 100644
--- a/lemur/static/app/angular/sources/view/view.js
+++ b/lemur/static/app/angular/sources/view/view.js
@@ -55,6 +55,7 @@ angular.module('lemur')
         templateUrl: '/angular/sources/source/source.tpl.html',
         controller: 'SourcesEditController',
         size: 'lg',
+        backdrop: 'static',
         resolve: {
             editId: function () {
               return sourceId;
@@ -73,7 +74,8 @@ angular.module('lemur')
         animation: true,
         controller: 'SourcesCreateController',
         templateUrl: '/angular/sources/source/source.tpl.html',
-        size: 'lg'
+        size: 'lg',
+        backdrop: 'static'
       });
 
       modalInstance.result.then(function () {
diff --git a/lemur/static/app/angular/users/user/user.tpl.html b/lemur/static/app/angular/users/user/user.tpl.html
index b19750b1..0b867673 100644
--- a/lemur/static/app/angular/users/user/user.tpl.html
+++ b/lemur/static/app/angular/users/user/user.tpl.html
@@ -1,85 +1,93 @@
 <div class="modal-header">
-    <div class="modal-title">
-        <h3 class="modal-header"><span ng-show="!user.fromServer">Create</span><span ng-show="user.fromServer">Edit</span> User <span class="text-muted"><small>what was your name again?</small></span></h3>
-    </div>
-    <div class="modal-body">
-        <form name="createForm" class="form-horizontal" role="form" novalidate>
-            <div class="form-group"
-                 ng-class="{'has-error': createForm.username.$invalid, 'has-success': !createForm.username.$invalid&&createForm.username.$dirty}">
-                <label class="control-label col-sm-2">
-                    Name
-                </label>
-                <div class="col-sm-10">
-                    <input name="username" ng-model="user.username" placeholder="Name" class="form-control" required/>
-                    <p ng-show="createForm.username.$invalid && !createForm.username.$pristine" class="help-block">You must enter a username</p>
-                </div>
-            </div>
-            <div class="form-group"
-                 ng-class="{'has-error': createForm.email.$invalid, 'has-success': !createForm.email.$invalid&&createForm.email.$dirty}">
-                <label class="control-label col-sm-2">
-                    Email
-                </label>
-                <div class="col-sm-10">
-                    <input type="email" name="email" ng-model="user.email" placeholder="hi@example.com" class="form-control" required/>
-                    <p ng-show="createForm.email.$invalid && !createForm.email.$pristine" class="help-block">You must enter an email</p>
-                </div>
-            </div>
-            <div ng-if="!user.id" class="form-group"
-                 ng-class="{'has-error': createForm.password.$invalid, 'has-success': !createForm.password.$invalid&&createForm.password.$dirty}">
-                <label class="control-label col-sm-2">
-                    Password
-                </label>
-                <div class="col-sm-10">
-                    <input type="password" name="password" ng-model="user.password" placeholder="hunter2" class="form-control" />
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Active
-                </label>
-                <div class="col-sm-10">
-                    <div class="checkbox col-sm-10">
-                        <switch ng-model="user.active" id="active" name="active" ng-init="user.active=true" class="green small"></switch>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-sm-2">
-                    Roles
-                </label>
-                <div class="col-sm-10">
-                    <div class="input-group">
-                        <input type="text" ng-model="user.selectedRole" placeholder="Role Name"
-                               typeahead="role.name for role in roleService.findRoleByName($viewValue)" typeahead-loading="loadingRoles"
-                               class="form-control input-md" typeahead-on-select="user.attachRole($item)" typeahead-min-wait="50"
-                               tooltip="Roles control which authorities a user can issue certificates from"
-                               tooltip-trigger="focus" tooltip-placement="top">
-                        <span class="input-group-btn">
-                            <button ng-model="roles.show" class="btn btn-md btn-default" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
-                                <span class="badge">{{ user.roles.total || 0 }}</span>
-                            </button>
-                        </span>
-                    </div>
-                    <table ng-show="user.roles" class="table">
-                        <tr ng-repeat="role in user.roles track by $index">
-                            <td><a class="btn btn-sm btn-info" href="#/roles/{{ role.id }}/edit">{{ role.name }}</a></td>
-                            <td><span class="text-muted">{{ role.description }}</span></td>
-                            <td>
-                                <button type="button" ng-click="user.removeRole($index)" class="btn btn-danger btn-sm pull-right">Remove</button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td><a class="pull-right" ng-click="loadMoreRoles()"><strong>More</strong></a></td>
-                        </tr>
-                    </table>
-                </div>
-            </div>
-        </form>
-        <div class="modal-footer">
-            <button ng-click="save(user)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
-            <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
-        </div>
-    </div>
+  <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span>
+  </button>
+  <h3><span ng-show="!user.fromServer">Create</span><span ng-show="user.fromServer">Edit</span> User <span
+    class="text-muted"><small>what was your name again?</small></span></h3>
+</div>
+<div class="modal-body">
+  <form name="createForm" class="form-horizontal" role="form" novalidate>
+    <div class="form-group"
+         ng-class="{'has-error': createForm.username.$invalid, 'has-success': !createForm.username.$invalid&&createForm.username.$dirty}">
+      <label class="control-label col-sm-2">
+        Name
+      </label>
+      <div class="col-sm-10">
+        <input name="username" ng-model="user.username" placeholder="Name" class="form-control" required/>
+        <p ng-show="createForm.username.$invalid && !createForm.username.$pristine" class="help-block">You must enter a
+          username</p>
+      </div>
+    </div>
+    <div class="form-group"
+         ng-class="{'has-error': createForm.email.$invalid, 'has-success': !createForm.email.$invalid&&createForm.email.$dirty}">
+      <label class="control-label col-sm-2">
+        Email
+      </label>
+      <div class="col-sm-10">
+        <input type="email" name="email" ng-model="user.email" placeholder="hi@example.com" class="form-control"
+               required/>
+        <p ng-show="createForm.email.$invalid && !createForm.email.$pristine" class="help-block">You must enter an
+          email</p>
+      </div>
+    </div>
+    <div ng-if="!user.id" class="form-group"
+         ng-class="{'has-error': createForm.password.$invalid, 'has-success': !createForm.password.$invalid&&createForm.password.$dirty}">
+      <label class="control-label col-sm-2">
+        Password
+      </label>
+      <div class="col-sm-10">
+        <input type="password" name="password" ng-model="user.password" placeholder="hunter2" class="form-control"/>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="control-label col-sm-2">
+        Active
+      </label>
+      <div class="col-sm-10">
+        <div class="checkbox col-sm-10">
+          <switch ng-model="user.active" id="active" name="active" ng-init="user.active=true"
+                  class="green small"></switch>
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="control-label col-sm-2">
+        Roles
+      </label>
+      <div class="col-sm-10">
+        <div class="input-group">
+          <input type="text" ng-model="user.selectedRole" placeholder="Role Name"
+                 typeahead="role.name for role in roleService.findRoleByName($viewValue)"
+                 typeahead-loading="loadingRoles"
+                 class="form-control input-md" typeahead-on-select="user.attachRole($item)" typeahead-min-wait="50"
+                 tooltip="Roles control which authorities a user can issue certificates from"
+                 tooltip-trigger="focus" tooltip-placement="top">
+                    <span class="input-group-btn">
+                        <button ng-model="roles.show" class="btn btn-md btn-default" btn-checkbox btn-checkbox-true="1"
+                                btn-checkbox-false="0">
+                          <span class="badge">{{ user.roles.total || 0 }}</span>
+                        </button>
+                    </span>
+        </div>
+        <table ng-show="user.roles" class="table">
+          <tr ng-repeat="role in user.roles track by $index">
+            <td><a class="btn btn-sm btn-info" href="#/roles/{{ role.id }}/edit">{{ role.name }}</a></td>
+            <td><span class="text-muted">{{ role.description }}</span></td>
+            <td>
+              <button type="button" ng-click="user.removeRole($index)" class="btn btn-danger btn-sm pull-right">Remove
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td><a class="pull-right" ng-click="loadMoreRoles()"><strong>More</strong></a></td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </form>
+  <div class="modal-footer">
+    <button ng-click="save(user)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
+    <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
+  </div>
 </div>
diff --git a/lemur/static/app/angular/users/view/view.js b/lemur/static/app/angular/users/view/view.js
index 1b60e048..a79392f9 100644
--- a/lemur/static/app/angular/users/view/view.js
+++ b/lemur/static/app/angular/users/view/view.js
@@ -43,6 +43,7 @@ angular.module('lemur')
         templateUrl: '/angular/users/user/user.tpl.html',
         controller: 'UsersEditController',
         size: 'lg',
+        backdrop: 'static',
         resolve: {
           editId: function () {
             return userId;
@@ -61,7 +62,8 @@ angular.module('lemur')
         animation: true,
         controller: 'UsersCreateController',
         templateUrl: '/angular/users/user/user.tpl.html',
-        size: 'lg'
+        size: 'lg',
+        backdrop: 'static'
       });
 
       modalInstance.result.then(function () {