Changes to prevent page reload on entering invalid current password and to disable reset button when current or new password is empty (opensearch-project#2238)

* Changes to prevent page reload on invalid current password validation during reset password

Signed-off-by: nishthm <nishthamittal04@gmail.com>

* Changes to disable reset button when current or new password is empty

Signed-off-by: nishthm <nishthamittal04@gmail.com>

---------

Signed-off-by: nishthm <nishthamittal04@gmail.com>

Author: nishthm

public/apps/account/password-reset-panel.tsx

@@ -34,7 +34,10 @@ import { FormRow } from '../configuration/utils/form-row';
 import { logout, updateNewPassword } from './utils';
 import { PASSWORD_INSTRUCTION } from '../apps-constants';
 import { constructErrorMessageAndLog } from '../error-utils';
-import { validateCurrentPassword } from '../../utils/login-utils';
+import {
+  isResetButtonDisabled,
+  validateCurrentPassword,
+} from '../../utils/password-reset-panel-utils';
 import { getDashboardsInfo } from '../../utils/dashboards-info-utils';
 import { PasswordStrengthBar } from '../configuration/utils/password-strength-bar';
 
@@ -85,7 +88,8 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
       await validateCurrentPassword(http, props.username, currentPassword);
     } catch (e) {
       setIsCurrentPasswordInvalid(true);
-      setCurrentPasswordError([constructErrorMessageAndLog(e, 'Invalid current password.')]);
+      setCurrentPasswordError([`Invalid current password. ${e.message}`]);
+      return;
     }
 
     // update new password
@@ -184,7 +188,11 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
           <EuiSmallButton
             data-test-subj="reset"
             fill
-            disabled={isRepeatNewPasswordInvalid}
+            disabled={isResetButtonDisabled(
+              currentPassword,
+              newPassword,
+              isRepeatNewPasswordInvalid
+            )}
             onClick={handleReset}
           >
             Reset

public/apps/account/test/password-reset-panel.test.tsx

@@ -15,7 +15,7 @@
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import { validateCurrentPassword } from '../../../utils/login-utils';
+import { validateCurrentPassword } from '../../../utils/password-reset-panel-utils';
 import { PasswordResetPanel } from '../password-reset-panel';
 import { logout, updateNewPassword } from '../utils';
 
@@ -24,7 +24,8 @@ jest.mock('../utils', () => ({
   updateNewPassword: jest.fn(),
 }));
 
-jest.mock('../../../utils/login-utils', () => ({
+jest.mock('../../../utils/password-reset-panel-utils', () => ({
+  isResetButtonDisabled: jest.fn(),
   validateCurrentPassword: jest.fn(),
 }));
 
@@ -71,15 +72,16 @@ describe('Account menu - Password reset panel', () => {
 
   it('invalid current password', (done) => {
     (validateCurrentPassword as jest.Mock).mockImplementationOnce(() => {
-      throw new Error();
+      throw new Error('Unauthorized');
     });
 
     // Hide the error message
     jest.spyOn(console, 'error').mockImplementationOnce(() => {});
 
     component.find('[data-test-subj="reset"]').simulate('click');
     process.nextTick(() => {
-      expect(setState).toHaveBeenCalledWith(true);
+      expect(setState).toHaveBeenNthCalledWith(1, true);
+      expect(setState).toHaveBeenNthCalledWith(2, ['Invalid current password. Unauthorized']);
       expect(setState).toBeTruthy();
       done();
     });

public/utils/password-reset-panel-utils.tsx

@@ -0,0 +1,46 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import { HttpStart } from 'opensearch-dashboards/public';
+
+export async function validateCurrentPassword(
+  http: HttpStart,
+  userName: string,
+  currentPassword: string
+) {
+  const url = http.basePath.prepend('/auth/login');
+  const res = await fetch(url, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      'osd-xsrf': 'true',
+    },
+    body: JSON.stringify({ username: userName, password: currentPassword }),
+  });
+
+  if (!res.ok) {
+    const data = await res.json();
+    throw new Error(data.message);
+  }
+}
+
+export function isResetButtonDisabled(
+  currentPassword: string,
+  newPassword: string,
+  isRepeatNewPasswordInvalid: boolean
+): boolean {
+  return !currentPassword || !newPassword || isRepeatNewPasswordInvalid;
+}

public/utils/test/password-reset-panel-utils.test.ts

@@ -0,0 +1,114 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import { isResetButtonDisabled, validateCurrentPassword } from '../password-reset-panel-utils';
+import { HttpStart } from 'opensearch-dashboards/public';
+
+describe('Test Password Reset Panel Utlis', () => {
+  const mockUrl = 'http://localhost:5601/auth/login';
+  let http: HttpStart;
+  beforeEach(() => {
+    http = {
+      basePath: {
+        prepend: jest.fn(() => mockUrl),
+      },
+    } as any;
+    global.fetch = jest.fn();
+  });
+
+  it('validate current password resolves when the server returns 2xx', async () => {
+    (global.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+    });
+
+    await expect(validateCurrentPassword(http, 'user', 'password')).resolves.toBeUndefined();
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      mockUrl,
+      expect.objectContaining({
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+          'osd-xsrf': 'true',
+        },
+        body: JSON.stringify({ username: 'user', password: 'password' }),
+      })
+    );
+  });
+
+  it('validate current password rejects with the server message on 4xx', async () => {
+    const serverBody = { message: 'Unauthorized' };
+    (global.fetch as jest.Mock).mockResolvedValue({
+      ok: false,
+      json: jest.fn().mockResolvedValue(serverBody),
+      status: 401,
+    });
+
+    await expect(validateCurrentPassword(http, 'user', 'incorrectpassword')).rejects.toThrow(
+      'Unauthorized'
+    );
+  });
+});
+
+describe('Validates password reset button state based on input conditions', () => {
+  const testScenarios = [
+    {
+      description: 'should be disabled when currentPassword is empty',
+      currentPassword: '',
+      newPassword: 'newpass',
+      isRepeatNewPasswordInvalid: false,
+      expected: true,
+    },
+    {
+      description: 'should be disabled when newPassword is empty',
+      currentPassword: 'current',
+      newPassword: '',
+      isRepeatNewPasswordInvalid: false,
+      expected: true,
+    },
+    {
+      description: 'should be disabled when isRepeatNewPasswordInvalid is true',
+      currentPassword: 'current',
+      newPassword: 'newpass',
+      isRepeatNewPasswordInvalid: true,
+      expected: true,
+    },
+    {
+      description: 'should be enabled when all conditions are valid',
+      currentPassword: 'current',
+      newPassword: 'newpass',
+      isRepeatNewPasswordInvalid: false,
+      expected: false,
+    },
+    {
+      description: 'should be disabled when all fields are invalid',
+      currentPassword: '',
+      newPassword: '',
+      isRepeatNewPasswordInvalid: true,
+      expected: true,
+    },
+  ] as const;
+
+  it.each(testScenarios)('$description', async function ({
+    currentPassword,
+    newPassword,
+    isRepeatNewPasswordInvalid,
+    expected,
+  }) {
+    const result = isResetButtonDisabled(currentPassword, newPassword, isRepeatNewPasswordInvalid);
+    expect(result).toBe(expected);
+  });
+});