Master merge into fui/master (#2750)

Author: jsorohova

.gitignore

@@ -1,6 +1,8 @@
 .history/
 .vs/
 .vscode/
+.idea/
+*.iml
 .DS_Store
 dist/
 node_modules/

package-lock.json

@@ -8,7 +8,7 @@
         "azure"
     ],
     "engines": {
-        "node": ">=14.18.2"
+        "node": ">=14.18.2 <21"
     },
     "scripts": {
         "start": "webpack-dev-server --open --config webpack.develop.js",
@@ -84,11 +84,11 @@
         "@monaco-editor/loader": "^1.3.3",
         "@monaco-editor/react": "^4.6.0",
         "@paperbits/azure": "^0.1.631",
-        "@paperbits/common": "^0.1.631",
-        "@paperbits/core": "^0.1.631",
-        "@paperbits/forms": "^0.1.631",
+        "@paperbits/common": "^0.1.632",
+        "@paperbits/core": "^0.1.632",
+        "@paperbits/forms": "^0.1.632",
         "@paperbits/react": "1.0.8",
-        "@paperbits/styles": "^0.1.631",
+        "@paperbits/styles": "^0.1.632",
         "@webcomponents/custom-elements": "1.6.0",
         "@webcomponents/shadydom": "^1.11.0",
         "client-oauth2": "4.3.3",

package.json

@@ -98,12 +98,20 @@ export class RightPanel extends React.Component<{}, RightPanelState> {
     componentDidMount(): void {
         this.eventManager.addEventListener('onDataChange', this.onDataChange.bind(this));
         window.addEventListener('resize', this.checkScreenSize.bind(this));
+        this.router.addRouteChangeListener(() => this.getPageName());
+        this.getPageName();
         this.checkScreenSize();
         this.getRoles();
     }
 
-    componentDidUpdate(prevProps: Readonly<{}>, prevState: Readonly<RightPanelState>, snapshot?: any): void {
-        if (this.state.isFocusedState && !prevState.isFocusedState) {
+    componentWillUnmount() {
+        this.eventManager.removeEventListener('onDataChange', this.onDataChange.bind(this));
+        window.removeEventListener('resize', this.checkScreenSize.bind(this));        
+        this.router.removeRouteChangeListener(() => this.getPageName());
+    }
+
+    setPageName = () => {
+        if (this.state.isFocusedState) {
             const host = this.viewManager.getHost();
             if (host.name === HostNames.Page) {
                 this.getPageName();
@@ -115,11 +123,6 @@ export class RightPanel extends React.Component<{}, RightPanelState> {
         }
     }
 
-    componentWillUnmount() {
-        this.eventManager.removeEventListener('onDataChange', this.onDataChange.bind(this));
-        window.removeEventListener('resize', this.checkScreenSize.bind(this));
-    }
-
     getRoles = async (): Promise<void> => {
         const roles = await this.roleService.getRoles();
 

src/admin/rightPanel.tsx

@@ -55,6 +55,7 @@ export class ChangePassword {
 
         this.password.extend(<any>{ required: { message: ValidationMessages.passwordRequired } }); // TODO: password requirements should come from Management API.
         this.newPassword.extend(<any>{ required: { message: ValidationMessages.newPasswordRequired }, minLength: 8 }); // TODO: password requirements should come from Management API.
+        this.newPassword.extend(<any>{ notEqual: { message: ValidationMessages.newPasswordMustBeDifferent, params: this.password } });
         this.passwordConfirmation.extend(<any>{ equal: { message: ValidationMessages.passwordConfirmationMustMatch, params: this.newPassword } });
         this.captcha.extend(<any>{ required: { message: ValidationMessages.captchaRequired } });
     }

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

@@ -7,6 +7,7 @@ export class ValidationMessages {
     static passwordRequired = `Password is required.`;
     static passwordConfirmationMustMatch = `Password confirmation field must be equal to password.`;
     static newPasswordRequired = `New password is required.`;
+    static newPasswordMustBeDifferent = `New password must be different from your old password.`;
     static consentRequired = `You must agree to the terms of use.`;
     static subscriptionNameRequired = `Subscription name is required.`;
 }