Add modal on close listener for clean-up; use ng-model instead of .val() for new user form

public/directives/editLongLinkModal.html

@@ -2,7 +2,7 @@
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="cleanModals()">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
                 <h4 class="modal-title">Long URL</h4>

public/js/AdminCtrl.js

@@ -8,7 +8,13 @@ polr.directive('editLongLinkModal', function () {
         templateUrl: '/directives/editLongLinkModal.html',
         transclude: true,
         controller: function ($scope, $element, $timeout) {
-            // TODO set a listener on close then delete!
+            $scope.init = function () {
+                // Destroy directive and clean modal on close
+                $element.find('.modal').on("hidden.bs.modal", function () {
+                    $scope.$destroy();
+                    $scope.cleanModals();
+                });
+            }
 
             $scope.saveChanges = function () {
                 // Save long URL changes
@@ -17,21 +23,31 @@ polr.directive('editLongLinkModal', function () {
                     'new_long_url': $element.find('input').val()
                 }, function(data) {
                     toastr.success('The link was updated.', 'Success')
-                    $scope.cleanModals();
                 }, function(err) {
                     toastr.error('The new URL format is not valid.', 'Error');
                 });
             };
-        },
+
+            $scope.init();
+        }
     };
 });
 
 polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
+    /* Initialize $scope variables */
     $scope.state = {
         showNewUserWell: false
     };
     $scope.datatables = {};
-    $scope.editLongLinkModals = [];
+    $scope.modals = {
+        editLongLink: []
+    };
+    $scope.newUserParams = {
+        username: '',
+        userPassword: '',
+        userEmail: '',
+        userRole: ''
+    };
 
     $scope.syncHash = function() {
         var url = document.location.toString();
@@ -42,10 +58,8 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
 
     $scope.cleanModals = function() {
         $timeout(function () {
-            $scope.editLongLinkModals.shift();
-            console.log('cleaning modals!!');
-            console.log($scope.editLongLinkModals);
-        }, 5000);
+            $scope.modals.editLongLink.shift();
+        });
 
         $scope.reloadLinkTables();
     };
@@ -172,14 +186,7 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
     }
 
     $scope.addNewUser = function($event) {
-        // Create a new user
-        // FIXME could use Angular models in the future
-        // instead of relying on .val()
-
-        var username = $('#new-username').val();
-        var user_password = $('#new-user-password').val();
-        var user_email = $('#new-user-email').val();
-        var user_role = $('#new-user-role').val();
+        // Allow admins to add new users
 
         if (!$scope.checkNewUserFields()) {
             toastr.error("Fields cannot be empty.", "Error");
@@ -187,10 +194,10 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
         }
 
         apiCall('admin/add_new_user', {
-            'username': username,
-            'user_password': user_password,
-            'user_email': user_email,
-            'user_role': user_role,
+            'username': $scope.newUserParams.username,
+            'user_password': $scope.newUserParams.userPassword,
+            'user_email': $scope.newUserParams.userEmail,
+            'user_role': $scope.newUserParams.userRole,
         }, function(result) {
             toastr.success("User " + username + " successfully created.", "Success");
             $('#new-user-form').clearForm();
@@ -328,7 +335,7 @@ polr.controller('AdminCtrl', function($scope, $compile, $timeout) {
 
     // Edit links' long_url
     $scope.editLongLink = function(link_ending, old_long_link) {
-        $scope.editLongLinkModals.push({
+        $scope.modals.editLongLink.push({
             linkEnding: link_ending,
             oldLongLink: old_long_link,
         });

resources/views/admin.blade.php

@@ -65,11 +65,11 @@
                             <th></th>
                         </tr>
                         <tr id="new-user-form">
-                            <td><input type="text" class="form-control" id="new-username"></td>
-                            <td><input type="password" class="form-control" id="new-user-password"></td>
-                            <td><input type="email" class="form-control" id="new-user-email"></td>
+                            <td><input type="text" class="form-control" ng-model="newUserParams.username"></td>
+                            <td><input type="password" class="form-control" ng-model="newUserParams.userPassword"></td>
+                            <td><input type="email" class="form-control" ng-model="newUserParams.userEmail"></td>
                             <td>
-                                <select class="form-control new-user-role" id="new-user-role">
+                                <select class="form-control new-user-role" ng-model="newUserParams.userRole">
                                     @foreach  ($user_roles as $role_text => $role_val)
                                         <option value="{{$role_val}}">{{$role_text}}</option>
                                     @endforeach
@@ -125,7 +125,7 @@
     </div>
 
     <div class="angular-modals">
-        <edit-long-link-modal ng-repeat="modal in editLongLinkModals" link-ending="modal.linkEnding"
+        <edit-long-link-modal ng-repeat="modal in modals.editLongLink" link-ending="modal.linkEnding"
             old-long-link="modal.oldLongLink" clean-modals="cleanModals"></edit-long-link-modal>
     </div>
 </div>