Implement isolateForm directive for isolating form validation like option password changes

angular/angular.js#5858

Author: evilaliv3

client/app/js/directives.js

@@ -266,4 +266,39 @@ angular.module('GLDirectives', ['GLBrowserCrypto']).
         pgpPubkeyValidator: '@',
       }
     };
+}]).
+  // isolateForm directive makes possible to isolate validation of nested forms
+  directive('isolateForm', [function () {
+    return {
+        restrict: 'A',
+        require: '?form',
+        link: function (scope, elm, attrs, ctrl) {
+            if (!ctrl) {
+                return;
+            }
+
+            // Do a copy of the controller
+            var ctrlCopy = {};
+            angular.copy(ctrl, ctrlCopy);
+
+            // Get the parent of the form
+            var parent = elm.parent().controller('form');
+            // Remove parent link to the controller
+            parent.$removeControl(ctrl);
+
+            // Replace form controller with a "isolated form"
+            var isolatedFormCtrl = {
+                $setValidity: function (validationToken, isValid, control) {
+                    ctrlCopy.$setValidity(validationToken, isValid, control);
+                    parent.$setValidity(validationToken, true, ctrl);
+                },
+                $setDirty: function () {
+                    elm.removeClass('ng-pristine').addClass('ng-dirty');
+                    ctrl.$dirty = true;
+                    ctrl.$pristine = false;
+                },
+            };
+            angular.extend(ctrl, isolatedFormCtrl);
+        }
+    };
 }]);

client/app/views/admin/users.html

@@ -113,7 +113,7 @@
                     <div class="text-danger" data-ng-show="editUser.email.$error.required" data-translate>This field is mandatory</div>
                     <div class="text-danger" data-ng-show="editUser.email.$error.pattern" data-translate>Invalid email address</div>
                   </div>
-                  <div class="form-group">
+                  <div class="form-group" data-ng-form="userPasswordForm" data-isolate-form data-ng-class="{'has-error': passwordStrength.score > 0 && !userPassword.password.$valid}">
                     <label data-translate>Password</label>
                     <input name="password" class="form-control" data-ng-model="user.password" maxlength="{{node.maximum_namesize}}" type="password" zxcvbn="passwordStrength" zx-min-score="3" />
                     <zx-password-meter value="passwordStrength"></zx-password-meter>