From 94bd0c606b51bcb0dfa72805bc06fee5ddc94fc2 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 10 Feb 2016 16:59:24 +0100
Subject: [PATCH] Add group removal ui

---
 webadmin/src/views/users.html | 35 ++++++++++++++++++++++++++++---
 webadmin/src/views/users.js   | 39 +++++++++++++++++++++++++++++++++--
 2 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/webadmin/src/views/users.html b/webadmin/src/views/users.html
index 54ae59ef9..245f69c84 100644
--- a/webadmin/src/views/users.html
+++ b/webadmin/src/views/users.html
@@ -167,7 +167,7 @@
                         </div>
                         <input type="text" class="form-control" ng-model="groupAdd.name" id="groupAddName" name="name" ng-maxlength="200" ng-minlength="2" required autofocus>
                     </div>
-                    <input class="ng-hide" type="submit" ng-disabled="groupAddForm.$invalid || groupAdd.busy"/>
+                    <input class="hide" type="submit" ng-disabled="groupAddForm.$invalid || groupAdd.busy"/>
                 </form>
             </div>
             <div class="modal-footer">
@@ -178,6 +178,35 @@
     </div>
 </div>
 
+<!-- Modal remove group -->
+<div class="modal fade" id="groupRemoveModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Delete group {{ groupRemove.name }}</h4>
+            </div>
+            <div class="modal-body">
+                <form name="groupRemoveForm" role="form" novalidate ng-submit="groupRemove.submit()" autocomplete="off">
+                    <input type="password" style="display: none;">
+                    <div class="form-group" ng-class="{ 'has-error': (groupRemoveForm.password.$dirty && groupRemoveForm.password.$invalid) || (!groupRemoveForm.password.$dirty && groupRemove.error.password)}">
+                        <label class="control-label" for="groupRemovePasswordInput">Give your password to verify that you are performing that action</label>
+                        <div class="control-label" ng-show="(!groupRemoveForm.password.$dirty && groupRemove.error.password) || (groupRemoveForm.password.$dirty && groupRemoveForm.password.$invalid)">
+                            <small ng-show="groupRemoveForm.password.$error.required && !groupRemove.error.password">A password is required</small>
+                            <small ng-show="!groupRemoveForm.password.$dirty && groupRemove.error.password">{{ groupRemove.error.password }}</small>
+                        </div>
+                        <input type="password" class="form-control" ng-model="groupRemove.password" id="groupRemovePasswordInput" name="password" placeholder="Password" required>
+                    </div>
+                    <input class="hide" type="submit" ng-disabled="groupRemoveForm.$invalid || groupRemove.busy"/>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-danger" ng-click="groupRemove.submit()" ng-disabled="groupRemoveForm.$invalid || groupRemove.busy"><i class="fa fa-spinner fa-pulse" ng-show="groupRemove.busy"></i> Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="content">
 
     <br/>
@@ -258,8 +287,8 @@
                                     {{ group.name }}
                                 </td>
                                 <td class="text-right" style="vertical-align: bottom">
-                                    <button ng-show="userInfo.admin" class="btn btn-xs btn-danger" ng-click="showGroupRemove(user)" title="Remove Group"><i class="fa fa-trash-o"></i></button>
-                                    <button ng-show="userInfo.admin" class="btn btn-xs btn-default" ng-click="showGroupEdit(user)" title="Edit Group"><i class="fa fa-pencil"></i></button>
+                                    <button ng-show="userInfo.admin" class="btn btn-xs btn-danger" ng-click="groupRemove.show(group)" title="Remove Group"><i class="fa fa-trash-o"></i></button>
+                                    <button ng-show="userInfo.admin" class="btn btn-xs btn-default" ng-click="groupEdit.show(group)" title="Edit Group"><i class="fa fa-pencil"></i></button>
                                 </td>
                             </tr>
                         </tbody>
diff --git a/webadmin/src/views/users.js b/webadmin/src/views/users.js
index 4ca8d424d..9a06af59a 100644
--- a/webadmin/src/views/users.js
+++ b/webadmin/src/views/users.js
@@ -54,7 +54,7 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
 
         submit: function () {
             $scope.groupAdd.busy = true;
-            $scope.groupAdd.error.name = null;
+            $scope.groupAdd.error = {};
 
             Client.createGroup($scope.groupAdd.name, function (error) {
                 $scope.groupAdd.busy = false;
@@ -73,6 +73,41 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
         }
     };
 
+    $scope.groupRemove = {
+        busy: false,
+        error: {},
+        group: null,
+        password: '',
+
+        show: function (group) {
+            $scope.groupRemove.busy = false;
+
+            $scope.groupRemove.error = {};
+            $scope.groupRemove.password = '';
+
+            $scope.groupRemove.group = angular.copy(group);
+
+            $scope.groupRemoveForm.$setUntouched();
+            $scope.groupRemoveForm.$setPristine();
+
+            $('#groupRemoveModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.groupRemove.busy = true;
+            $scope.groupRemove.error = {};
+
+            Client.removeGroup($scope.groupRemove.group.id, $scope.groupRemove.password, function (error) {
+                $scope.groupRemove.busy = false;
+
+                if (error) return console.error('Unable to remove group.', error.statusCode, error.message);
+
+                refresh();
+                $('groupRemoveModal').modal('hide');
+            });
+        }
+    };
+
     $scope.isMe = function (user) {
         return user.username === Client.getUserInfo().username;
     };
@@ -303,7 +338,7 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
     refresh();
 
     // setup all the dialog focus handling
-    ['userAddModal', 'userRemoveModal', 'userEditModal', 'groupAddModal'].forEach(function (id) {
+    ['userAddModal', 'userRemoveModal', 'userEditModal', 'groupAddModal', 'groupRemoveModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });