Added logic to prevent DOM changes on request to prevent error

src/components/users/change-password/ko/runtime/change-password.html

@@ -3,10 +3,8 @@
 <!-- /ko -->
 
 <!-- ko if: !isChangeConfirmed() -->
-
 <form data-bind="submit: changePassword">
-
-    <fieldset>
+    <fieldset data-bind="attr: { disabled: working}">
         <div class="form-group">
             <label for="password">Password</label>
             <input aria-required="true" class="form-control" id="password" name="password"

src/components/users/change-password/ko/runtime/change-password.ts

@@ -133,6 +133,8 @@ export class ChangePassword {
         userId = `/users/${userId}`;
 
         try {
+            this.working(true);
+
             if (isCaptcha) {
                 const resetRequest: ChangePasswordRequest = {
                     solution: captchaSolution,
@@ -177,6 +179,8 @@ export class ChangePassword {
                 errors: errorMessages
             };
             this.eventManager.dispatchEvent("onValidationErrors", validationReport);
+        } finally {
+            this.working(false);
         }
     }
 }

src/components/users/reset-password/ko/runtime/reset-password.html

@@ -4,10 +4,8 @@
 <!-- /ko -->
 
 <!-- ko if: !isResetRequested() -->
-
 <form data-bind="submit: resetSubmit">
-
-    <fieldset>
+    <fieldset data-bind="attr: { disabled: working}">
         <div class="form-group">
             <label for="email">Email</label>
             <input aria-required="true" autofocus="autofocus" class="form-control" id="email" name="email"

src/components/users/reset-password/ko/runtime/reset-password.ts

@@ -107,6 +107,8 @@ export class ResetPassword {
         }
 
         try {
+            this.working(true);
+
             if (isCaptcha) {
                 const resetRequest: ResetRequest = {
                     solution: captchaSolution,
@@ -127,8 +129,7 @@ export class ResetPassword {
                 errors: []
             };
             this.eventManager.dispatchEvent("onValidationErrors", validationReport);
-        }
-        catch (error) {
+        } catch (error) {
             if (isCaptcha) {
                 WLSPHIP0.reloadHIP();
             }
@@ -151,7 +152,8 @@ export class ResetPassword {
                 errors: errorMessages
             };
             this.eventManager.dispatchEvent("onValidationErrors", validationReport);
+        } finally {
+            this.working(false);
         }
-
     }
 }

src/components/users/signup/ko/runtime/signup.html

@@ -2,11 +2,9 @@
 <p id="confirmationMessage">Follow the instructions from the email to verify your account.</p>
 <!-- /ko -->
 
-
-<!-- ko ifnot: working -->
 <!-- ko ifnot: isUserRequested -->
 <form data-bind="submit: signup">
-    <fieldset>
+    <fieldset data-bind="attr: { disabled: working}">
         <div class="form-group">
             <label for="email">Email</label>
             <input aria-required="true" autofocus="autofocus" spellcheck="false" class="form-control" id="email" name="email"
@@ -72,5 +70,4 @@
         </div>
     </fieldset>
 </form>
-<!-- /ko -->
 <!-- /ko -->

src/components/users/signup/ko/runtime/signup.ts

@@ -222,8 +222,7 @@ export class Signup {
                 errors: []
             };
             this.eventManager.dispatchEvent("onValidationErrors", validationReport);
-        }
-        catch (error) {
+        } catch (error) {
             if (isCaptchaRequired) {
                 WLSPHIP0.reloadHIP();
             }
@@ -247,8 +246,7 @@ export class Signup {
             };
 
             this.eventManager.dispatchEvent("onValidationErrors", validationReport);
-        }
-        finally {
+        } finally {
             this.working(false);
         }
     }