From b06b8df7463a592829ef4f29966764eeee6350a7 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <webmaster@nebulon.de>
Date: Thu, 21 Aug 2014 14:09:26 -0700
Subject: [PATCH] webadmin: add user deletion dialog

---
 webadmin/index.html            |  1 -
 webadmin/js/index.js           |  3 ---
 webadmin/views/userdelete.html | 46 ---------------------------------
 webadmin/views/userdelete.js   | 47 ----------------------------------
 webadmin/views/userlist.html   | 31 +++++++++++++++++++++-
 webadmin/views/userlist.js     | 23 +++++++++++++----
 6 files changed, 48 insertions(+), 103 deletions(-)
 delete mode 100644 webadmin/views/userdelete.html
 delete mode 100644 webadmin/views/userdelete.js

diff --git a/webadmin/index.html b/webadmin/index.html
index 500aeee0d..46f18f9ac 100644
--- a/webadmin/index.html
+++ b/webadmin/index.html
@@ -110,7 +110,6 @@
     <script src="views/volumeunmount.js"></script>
     <script src="views/userlist.js"></script>
     <script src="views/usercreate.js"></script>
-    <script src="views/userdelete.js"></script>
     <script src="views/userpassword.js"></script>
     <script src="views/applist.js"></script>
     <script src="views/appdetails.js"></script>
diff --git a/webadmin/js/index.js b/webadmin/js/index.js
index 881dac4bc..fef0b4c65 100644
--- a/webadmin/js/index.js
+++ b/webadmin/js/index.js
@@ -15,9 +15,6 @@ app.config(function ($routeProvider) {
     }).when('/usercreate', {
         controller: 'UserCreateController',
         templateUrl: 'views/usercreate.html'
-    }).when('/userdelete', {
-        controller: 'UserDeleteController',
-        templateUrl: 'views/userdelete.html'
     }).when('/userpassword', {
         controller: 'UserPasswordController',
         templateUrl: 'views/userpassword.html'
diff --git a/webadmin/views/userdelete.html b/webadmin/views/userdelete.html
deleted file mode 100644
index 6c92c1775..000000000
--- a/webadmin/views/userdelete.html
+++ /dev/null
@@ -1,46 +0,0 @@
-
-<div class="row">
-  <div class="col-md-3"></div>
-  <div class="col-md-6">
-    <div class="container-fluid">
-      <form class="form-signin" role="form" ng-submit="submit()">
-        <div class="row">
-          <div class="col-sm-12">
-            <h2 class="form-signin-heading pull-right">Delete User {{username}}</h2>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-12">
-            Just to be sure you really want to delete this user, please type the user's name.
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-12">
-            <span ng-show="error.username" class="error show-animate">{{error.username}}</span>
-            <input type="text" class="form-control" ng-model="form.username" placeholder="Username" required autofocus>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-12">
-            Give your password to verify that you are performing that action.
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-12">
-            <span ng-show="error.password" class="error show-animate">{{error.password}}</span>
-            <input type="password" class="form-control" ng-model="form.password" placeholder="Password" required>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-6">
-            <input class="btn btn-block" ng-click="cancel()" type="button" value="Cancel"/>
-          </div>
-          <div class="col-sm-6">
-            <input class="btn btn-green btn-block" type="submit" ng-disabled="{{disabled}}" value="Delete User"/>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-  <div class="col-md-3"></div>
-</div>
\ No newline at end of file
diff --git a/webadmin/views/userdelete.js b/webadmin/views/userdelete.js
deleted file mode 100644
index 46dacc515..000000000
--- a/webadmin/views/userdelete.js
+++ /dev/null
@@ -1,47 +0,0 @@
-'use strict';
-
-function UserDeleteController ($scope, $routeParams, Client) {
-    if (!$routeParams.username) {
-        console.error('No user provided.');
-        return window.location.replace('#/volumelist');
-    }
-
-    $scope.disabled = false;
-    $scope.username = $routeParams.username;
-    $scope.form = {};
-    $scope.form.username = '';
-    $scope.form.password = '';
-    $scope.error = {};
-
-    $scope.submit = function () {
-        $scope.error.username = null;
-        $scope.error.password = null;
-
-        if ($routeParams.username !== $scope.form.username) {
-            $scope.error.username = 'Username does not match';
-            return;
-        }
-
-        $scope.disabled = true;
-        Client.removeUser($routeParams.username, $scope.form.password, function (error, result) {
-            if (error) {
-                console.error('Unable to delete user.', error);
-
-                if (error.statusCode === 401) {
-                    $scope.error.password = 'Wrong password';
-                }
-
-                $scope.disabled = false;
-                return;
-            }
-
-            console.debug('Successfully deleted user', $scope.form.username);
-            window.location.replace('#/volumelist');
-        });
-    };
-
-    $scope.cancel = function () {
-        window.history.back();
-    };
-}
-
diff --git a/webadmin/views/userlist.html b/webadmin/views/userlist.html
index b37e46b20..946d08f31 100644
--- a/webadmin/views/userlist.html
+++ b/webadmin/views/userlist.html
@@ -26,7 +26,36 @@
                 <tr ng-repeat="user in users">
                     <td>{{ user.username }} <span ng-show="isMe(user)" class="badge" style="margin-left: 20px;">This is you!</span></td>
                     <td style="text-align: right;">
-                        <button ng-show="!isMe(user)" ng-click="deleteUser(user.username)" class="btn btn-xs btn-danger"><i class="fa fa-trash-o"></i> Delete</button>
+                        <button ng-show="!isMe(user)" data-toggle="modal" data-target="#userDeleteModal-{{user.username}}" class="btn btn-xs btn-danger"><i class="fa fa-trash-o"></i> Delete</button>
+
+                        <!-- Modal really delete -->
+                        <div class="modal fade" id="userDeleteModal-{{user.username}}" tabindex="-1" role="dialog" aria-labelledby="userDeleteModalLabel-{{user.username}}" aria-hidden="true" style="text-align: left;">
+                            <div class="modal-dialog">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                                        <h4 class="modal-title" id="userDeleteModalLabel-{{user.username}}">Delete user {{ user.username }}</h4>
+                                    </div>
+                                    <div class="modal-body">
+                                        <form class="form-user-delete" role="form" ng-submit="deleteUser(user)">
+                                            <div class="form-group">
+                                                <label class="control-label" for="inputUsername">Just to be sure you really want to delete this user, please type the user's name</label>
+                                                <input type="text" class="form-control" ng-model="userDeleteForm.username" id="inputUsername" placeholder="Username" required autofocus>
+                                            </div>
+                                            <div class="form-group">
+                                                <label class="control-label" for="inputPassword">Give your password to verify that you are performing that action</label>
+                                                <input type="password" class="form-control" ng-model="userDeleteForm.password" id="inputPassword" placeholder="Password" required>
+                                            </div>
+                                            <input class="hide" type="submit"/>
+                                        </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="deleteUser(user)">Delete</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </td>
                 </tr>
             </tbody>
diff --git a/webadmin/views/userlist.js b/webadmin/views/userlist.js
index c59e361ed..beb21c20c 100644
--- a/webadmin/views/userlist.js
+++ b/webadmin/views/userlist.js
@@ -1,13 +1,31 @@
+/* global $:true */
+
 'use strict';
 
 function UserListController ($scope, Client) {
     $scope.ready = false;
     $scope.users = [];
+    $scope.userDeleteForm = {
+        username: '',
+        password: ''
+    };
 
     $scope.isMe = function (user) {
         return user.username === Client.getUserInfo().username;
     };
 
+    $scope.deleteUser = function (user) {
+        // TODO add busy indicator and block form
+        if ($scope.userDeleteForm.username !== user.username) return console.error('Username does not match');
+
+        Client.removeUser(user.username, $scope.userDeleteForm.password, function (error, result) {
+            if (error && error.statusCode === 401) return console.error('Wrong password');
+            if (error) return console.error('Unable to delete user.', error);
+
+            $('#userDeleteModal-' + user.username).modal('hide');
+        });
+    };
+
     function refresh() {
         Client.listUsers(function (error, result) {
             if (error) return console.error('Unable to get user listing.', error);
@@ -21,10 +39,5 @@ function UserListController ($scope, Client) {
         window.location.href = '#/usercreate';
     };
 
-    $scope.deleteUser = function (username) {
-        // TODO urlencode?
-        window.location.href = '#/userdelete?username=' + username;
-    };
-
     refresh();
 }