Provide ability to view password (#1980)

* Provide ability to view password Signed-off-by: Derek Ho <[email protected]> * Add snapshot to verify it is a FieldPassword Signed-off-by: Derek Ho <[email protected]> * Stop running macos unit tests and change login screen Signed-off-by: Derek Ho <[email protected]> * Try to fix the flakiness of oidc with basepath test Signed-off-by: Derek Ho <[email protected]> * Revert data test subj changes Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]> Co-authored-by: Darshit Chanpura <[email protected]>
opensearch-project · Jun 3, 2024 · 5fbc14e · 5fbc14e
1 parent b3e444f
commit 5fbc14e
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 67 deletions.
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
@@ -8,7 +8,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ ubuntu-latest , windows-latest, macos-latest ]
+        os: [ ubuntu-latest , windows-latest ]
     runs-on: ${{ matrix.os }}
 
     steps:

diff --git a/public/apps/account/password-reset-panel.tsx b/public/apps/account/password-reset-panel.tsx
@@ -123,6 +123,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
                 setIsCurrentPasswordInvalid(false);
               }}
               isInvalid={isCurrentPasswordInvalid}
+              type="dual"
             />
           </FormRow>
           <EuiSpacer />
@@ -141,6 +142,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
                     setIsNewPasswordInvalid(false);
                     setIsRepeatNewPasswordInvalid(repeatNewPassword !== newPassword);
                   }}
+                  type="dual"
                   isInvalid={isNewPasswordInvalid}
                 />
               </FormRow>
@@ -162,6 +164,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
                 setRepeatNewPassword(value);
                 setIsRepeatNewPasswordInvalid(value !== newPassword);
               }}
+              type="dual"
             />
           </FormRow>
 

diff --git a/public/apps/configuration/utils/password-edit-panel.tsx b/public/apps/configuration/utils/password-edit-panel.tsx
@@ -15,7 +15,7 @@
 
 import React from 'react';
 import { CoreStart } from 'opensearch-dashboards/public';
-import { EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiIcon } from '@elastic/eui';
+import { EuiFieldPassword, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 import { FormRow } from './form-row';
 import { PASSWORD_INSTRUCTION } from '../../apps-constants';
 import { getDashboardsInfo } from '../../../utils/dashboards-info-utils';
@@ -65,10 +65,9 @@ export function PasswordEditPanel(props: {
       <EuiFlexGroup direction="row">
         <EuiFlexItem grow={false}>
           <FormRow headerText="Password" helpText={passwordHelpText}>
-            <EuiFieldText
+            <EuiFieldPassword
               data-test-subj="password"
-              prepend={<EuiIcon type="lock" />}
-              type="password"
+              type="dual"
               onChange={passwordChangeHandler}
             />
           </FormRow>
@@ -82,10 +81,9 @@ export function PasswordEditPanel(props: {
         headerText="Re-enter password"
         helpText="The password must be identical to what you entered above."
       >
-        <EuiFieldText
+        <EuiFieldPassword
           data-test-subj="re-enter-password"
-          prepend={<EuiIcon type="lock" />}
-          type="password"
+          type="dual"
           isInvalid={isRepeatPasswordInvalid}
           onChange={repeatPasswordChangeHandler}
         />

diff --git a/public/apps/configuration/utils/test/__snapshots__/password-edit-panel.test.tsx.snap b/public/apps/configuration/utils/test/__snapshots__/password-edit-panel.test.tsx.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Password edit panel repeat password field update 1`] = `
+<Fragment>
+  <EuiFlexGroup
+    direction="row"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <FormRow
+        headerText="Password"
+        helpText="Password should be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character."
+      >
+        <EuiFieldPassword
+          compressed={false}
+          data-test-subj="password"
+          fullWidth={false}
+          isLoading={false}
+          onChange={[Function]}
+          type="dual"
+        />
+      </FormRow>
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        fullWidth={false}
+        hasChildLabel={true}
+        hasEmptyLabelSpace={false}
+        labelType="label"
+      >
+        <PasswordStrengthBar
+          password=""
+        />
+      </EuiFormRow>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <FormRow
+    headerText="Re-enter password"
+    helpText="The password must be identical to what you entered above."
+  >
+    <EuiFieldPassword
+      compressed={false}
+      data-test-subj="re-enter-password"
+      fullWidth={false}
+      isInvalid={false}
+      isLoading={false}
+      onChange={[Function]}
+      type="dual"
+    />
+  </FormRow>
+</Fragment>
+`;
diff --git a/public/apps/configuration/utils/test/password-edit-panel.test.tsx b/public/apps/configuration/utils/test/password-edit-panel.test.tsx
@@ -90,6 +90,7 @@ describe('Password edit panel', () => {
         updateIsInvalid={updateIsInvalid}
       />
     );
+    expect(component).toMatchSnapshot();
     const event = {
       target: { value: 'dummy' },
     } as React.ChangeEvent<HTMLInputElement>;

diff --git a/public/apps/login/login-page.tsx b/public/apps/login/login-page.tsx
@@ -25,6 +25,7 @@ import {
   EuiForm,
   EuiFormRow,
   EuiHorizontalRule,
+  EuiFieldPassword,
 } from '@elastic/eui';
 import { CoreStart } from '../../../../../src/core/public';
 import { ClientConfigType } from '../../types';
@@ -202,12 +203,11 @@ export function LoginPage(props: LoginPageDeps) {
           );
           formBody.push(
             <EuiFormRow isInvalid={passwordValidationFailed}>
-              <EuiFieldText
+              <EuiFieldPassword
                 data-test-subj="password"
                 aria-label="password_input"
                 placeholder="Password"
-                prepend={<EuiIcon type="lock" />}
-                type="password"
+                type="dual"
                 onChange={(e) => setPassword(e.target.value)}
                 value={password}
                 isInvalid={usernameValidationFailed}

diff --git a/public/apps/login/test/__snapshots__/login-page.test.tsx.snap b/public/apps/login/test/__snapshots__/login-page.test.tsx.snap
@@ -64,18 +64,16 @@ exports[`Login page renders renders with config value for multiauth 1`] = `
       isInvalid={false}
       labelType="label"
     >
-      <EuiFieldText
+      <EuiFieldPassword
         aria-label="password_input"
+        compressed={false}
         data-test-subj="password"
+        fullWidth={false}
         isInvalid={false}
+        isLoading={false}
         onChange={[Function]}
         placeholder="Password"
-        prepend={
-          <EuiIcon
-            type="lock"
-          />
-        }
-        type="password"
+        type="dual"
         value=""
       />
     </EuiFormRow>
@@ -217,18 +215,16 @@ exports[`Login page renders renders with config value for multiauth with anonymo
       isInvalid={false}
       labelType="label"
     >
-      <EuiFieldText
+      <EuiFieldPassword
         aria-label="password_input"
+        compressed={false}
         data-test-subj="password"
+        fullWidth={false}
         isInvalid={false}
+        isLoading={false}
         onChange={[Function]}
         placeholder="Password"
-        prepend={
-          <EuiIcon
-            type="lock"
-          />
-        }
-        type="password"
+        type="dual"
         value=""
       />
     </EuiFormRow>
@@ -388,18 +384,16 @@ exports[`Login page renders renders with config value with anonymous auth enable
       isInvalid={false}
       labelType="label"
     >
-      <EuiFieldText
+      <EuiFieldPassword
         aria-label="password_input"
+        compressed={false}
         data-test-subj="password"
+        fullWidth={false}
         isInvalid={false}
+        isLoading={false}
         onChange={[Function]}
         placeholder="Password"
-        prepend={
-          <EuiIcon
-            type="lock"
-          />
-        }
-        type="password"
+        type="dual"
         value=""
       />
     </EuiFormRow>
@@ -509,18 +503,16 @@ exports[`Login page renders renders with config value with anonymous auth enable
       isInvalid={false}
       labelType="label"
     >
-      <EuiFieldText
+      <EuiFieldPassword
         aria-label="password_input"
+        compressed={false}
         data-test-subj="password"
+        fullWidth={false}
         isInvalid={false}
+        isLoading={false}
         onChange={[Function]}
         placeholder="Password"
-        prepend={
-          <EuiIcon
-            type="lock"
-          />
-        }
-        type="password"
+        type="dual"
         value=""
       />
     </EuiFormRow>
@@ -630,18 +622,16 @@ exports[`Login page renders renders with config value: string 1`] = `
       isInvalid={false}
       labelType="label"
     >
-      <EuiFieldText
+      <EuiFieldPassword
         aria-label="password_input"
+        compressed={false}
         data-test-subj="password"
+        fullWidth={false}
         isInvalid={false}
+        isLoading={false}
         onChange={[Function]}
         placeholder="Password"
-        prepend={
-          <EuiIcon
-            type="lock"
-          />
-        }
-        type="password"
+        type="dual"
         value=""
       />
     </EuiFormRow>
@@ -733,18 +723,16 @@ exports[`Login page renders renders with config value: string array 1`] = `
       isInvalid={false}
       labelType="label"
     >
-      <EuiFieldText
+      <EuiFieldPassword
         aria-label="password_input"
+        compressed={false}
         data-test-subj="password"
+        fullWidth={false}
         isInvalid={false}
+        isLoading={false}
         onChange={[Function]}
         placeholder="Password"
-        prepend={
-          <EuiIcon
-            type="lock"
-          />
-        }
-        type="password"
+        type="dual"
         value=""
       />
     </EuiFormRow>
@@ -836,18 +824,16 @@ exports[`Login page renders renders with default value: string 1`] = `
       isInvalid={false}
       labelType="label"
     >
-      <EuiFieldText
+      <EuiFieldPassword
         aria-label="password_input"
+        compressed={false}
         data-test-subj="password"
+        fullWidth={false}
         isInvalid={false}
+        isLoading={false}
         onChange={[Function]}
         placeholder="Password"
-        prepend={
-          <EuiIcon
-            type="lock"
-          />
-        }
-        type="password"
+        type="dual"
         value=""
       />
     </EuiFormRow>
@@ -939,18 +925,16 @@ exports[`Login page renders renders with default value: string array 1`] = `
       isInvalid={false}
       labelType="label"
     >
-      <EuiFieldText
+      <EuiFieldPassword
         aria-label="password_input"
+        compressed={false}
         data-test-subj="password"
+        fullWidth={false}
         isInvalid={false}
+        isLoading={false}
         onChange={[Function]}
         placeholder="Password"
-        prepend={
-          <EuiIcon
-            type="lock"
-          />
-        }
-        type="password"
+        type="dual"
         value=""
       />
     </EuiFormRow>