Allow passwords to be visible on security screens (#77394)

Author: legrego

x-pack/plugins/security/public/account_management/account_management_page.test.tsx

@@ -115,8 +115,8 @@ describe('<AccountManagementPage>', () => {
       wrapper.update();
     });
 
-    expect(wrapper.find('EuiFieldText[data-test-subj="currentPassword"]')).toHaveLength(1);
-    expect(wrapper.find('EuiFieldText[data-test-subj="newPassword"]')).toHaveLength(1);
+    expect(wrapper.find('EuiFieldPassword[data-test-subj="currentPassword"]')).toHaveLength(1);
+    expect(wrapper.find('EuiFieldPassword[data-test-subj="newPassword"]')).toHaveLength(1);
   });
 
   it(`does not display change password form for users in the saml realm`, async () => {

x-pack/plugins/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap

@@ -221,6 +221,7 @@ export class LoginForm extends Component<Props, State> {
               id="password"
               name="password"
               data-test-subj="loginPassword"
+              type={'dual'}
               value={this.state.password}
               onChange={this.onPasswordChange}
               disabled={!this.isLoadingState(LoadingStateType.None)}

x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiFieldText } from '@elastic/eui';
+import { EuiFieldPassword } from '@elastic/eui';
 import { ReactWrapper } from 'enzyme';
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
@@ -14,15 +14,15 @@ import { coreMock } from '../../../../../../../../src/core/public/mocks';
 import { userAPIClientMock } from '../../index.mock';
 
 function getCurrentPasswordField(wrapper: ReactWrapper<any>) {
-  return wrapper.find(EuiFieldText).filter('[data-test-subj="currentPassword"]');
+  return wrapper.find(EuiFieldPassword).filter('[data-test-subj="currentPassword"]');
 }
 
 function getNewPasswordField(wrapper: ReactWrapper<any>) {
-  return wrapper.find(EuiFieldText).filter('[data-test-subj="newPassword"]');
+  return wrapper.find(EuiFieldPassword).filter('[data-test-subj="newPassword"]');
 }
 
 function getConfirmPasswordField(wrapper: ReactWrapper<any>) {
-  return wrapper.find(EuiFieldText).filter('[data-test-subj="confirmNewPassword"]');
+  return wrapper.find(EuiFieldPassword).filter('[data-test-subj="confirmNewPassword"]');
 }
 
 describe('<ChangePasswordForm>', () => {

x-pack/plugins/security/public/management/users/components/change_password_form/change_password_form.test.tsx

@@ -6,7 +6,7 @@
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiFieldText,
+  EuiFieldPassword,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
@@ -72,10 +72,10 @@ export class ChangePasswordForm extends Component<Props, State> {
               />
             }
           >
-            <EuiFieldText
+            <EuiFieldPassword
               autoComplete="off"
               data-test-subj="currentPassword"
-              type="password"
+              type="dual"
               value={this.state.currentPassword}
               onChange={this.onCurrentPasswordChange}
               disabled={this.state.changeInProgress}
@@ -100,10 +100,10 @@ export class ChangePasswordForm extends Component<Props, State> {
             />
           }
         >
-          <EuiFieldText
+          <EuiFieldPassword
             autoComplete="new-password"
             data-test-subj="newPassword"
-            type="password"
+            type="dual"
             value={this.state.newPassword}
             onChange={this.onNewPasswordChange}
             disabled={this.state.changeInProgress}
@@ -120,10 +120,10 @@ export class ChangePasswordForm extends Component<Props, State> {
             />
           }
         >
-          <EuiFieldText
+          <EuiFieldPassword
             autoComplete="new-password"
             data-test-subj="confirmNewPassword"
-            type="password"
+            type="dual"
             value={this.state.confirmPassword}
             onChange={this.onConfirmPasswordChange}
             disabled={this.state.changeInProgress}