Merge pull request #1346 from sgratch/password-hidden--button-split-i…

…nto-next-line 🐞 Wrap password/token fields with hidden content option with InputGroup
kubev2v · Oct 7, 2024 · e45b60f · e45b60f
2 parents 74ea537 + 671dffa
commit e45b60f
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 179 deletions.
diff --git a/...iders/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx b/...iders/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx
@@ -5,7 +5,15 @@ import { CertificateUpload } from 'src/modules/Providers/utils/components/Certif
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
+import {
+  Button,
+  Divider,
+  Form,
+  InputGroup,
+  Popover,
+  Switch,
+  TextInput,
+} from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -158,23 +166,25 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
         helperTextInvalid={state.validation.password.msg}
         validated={state.validation.password.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          aria-label="Password input"
-          onChange={(e, v) => onChangePassword(v, e)}
-          value={password}
-          validated={state.validation.password.type}
-        />
-        <Button
-          variant="control"
-          onClick={onClickTogglePassword}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            aria-label="Password input"
+            onChange={(e, v) => onChangePassword(v, e)}
+            value={password}
+            validated={state.validation.password.type}
+          />
+          <Button
+            variant="control"
+            onClick={onClickTogglePassword}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <Divider />

diff --git a/.../views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx b/.../views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx
@@ -5,7 +5,15 @@ import { CertificateUpload } from 'src/modules/Providers/utils/components/Certif
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
+import {
+  Button,
+  Divider,
+  Form,
+  InputGroup,
+  Popover,
+  Switch,
+  TextInput,
+} from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -133,23 +141,25 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
         helperTextInvalid={state.validation.token.msg}
         validated={state.validation.token.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          aria-label="Token input"
-          onChange={(e, v) => onChangeToken(v, e)}
-          value={token}
-          validated={state.validation.token.type}
-        />
-        <Button
-          variant="control"
-          onClick={onClickTogglePassword}
-          aria-label={state.passwordHidden ? 'Show token' : 'Hide token'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            aria-label="Token input"
+            onChange={(e, v) => onChangeToken(v, e)}
+            value={token}
+            validated={state.validation.token.type}
+          />
+          <Button
+            variant="control"
+            onClick={onClickTogglePassword}
+            aria-label={state.passwordHidden ? 'Show token' : 'Hide token'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <Divider />

diff --git a/...dit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx b/...dit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -113,24 +113,26 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
         helperTextInvalid={state.validation.applicationCredentialSecret.msg}
         validated={state.validation.applicationCredentialSecret.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          id="applicationCredentialSecret"
-          name="applicationCredentialSecret"
-          value={applicationCredentialSecret}
-          onChange={(e, v) => onChangeFactory('applicationCredentialSecret')(v, e)}
-          validated={state.validation.applicationCredentialSecret.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            id="applicationCredentialSecret"
+            name="applicationCredentialSecret"
+            value={applicationCredentialSecret}
+            onChange={(e, v) => onChangeFactory('applicationCredentialSecret')(v, e)}
+            validated={state.validation.applicationCredentialSecret.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText

diff --git a/...ponents/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx b/...ponents/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -109,24 +109,26 @@ export const ApplicationWithCredentialsIDFormGroup: React.FC<EditComponentProps>
         helperTextInvalid={state.validation.applicationCredentialSecret.msg}
         validated={state.validation.applicationCredentialSecret.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          id="applicationCredentialSecret"
-          name="applicationCredentialSecret"
-          value={applicationCredentialSecret}
-          onChange={(e, v) => onChangeFactory('applicationCredentialSecret')(v, e)}
-          validated={state.validation.applicationCredentialSecret.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            id="applicationCredentialSecret"
+            name="applicationCredentialSecret"
+            value={applicationCredentialSecret}
+            onChange={(e, v) => onChangeFactory('applicationCredentialSecret')(v, e)}
+            validated={state.validation.applicationCredentialSecret.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText

diff --git a/...tion/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx b/...tion/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -105,23 +105,25 @@ export const PasswordSecretFieldsFormGroup: React.FC<EditComponentProps> = ({
         helperTextInvalid={state.validation.password.msg}
         validated={state.validation.password.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          aria-label="Password input"
-          value={password}
-          onChange={(e, v) => onChangeFactory('password')(v, e)}
-          validated={state.validation.password.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            aria-label="Password input"
+            value={password}
+            onChange={(e, v) => onChangeFactory('password')(v, e)}
+            validated={state.validation.password.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText

diff --git a/...mponents/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx b/...mponents/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -82,24 +82,26 @@ export const TokenWithUserIDSecretFieldsFormGroup: React.FC<EditComponentProps>
         helperTextInvalid={state.validation.token.msg}
         validated={state.validation.token.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          id="token"
-          name="token"
-          value={token}
-          onChange={(e, v) => onChangeFactory('token')(v, e)}
-          validated={state.validation.token.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            id="token"
+            name="token"
+            value={token}
+            onChange={(e, v) => onChangeFactory('token')(v, e)}
+            validated={state.validation.token.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText

diff --git a/...onents/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx b/...onents/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx
@@ -4,7 +4,7 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
-import { Button, TextInput } from '@patternfly/react-core';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -84,24 +84,26 @@ export const TokenWithUsernameSecretFieldsFormGroup: React.FC<EditComponentProps
         helperTextInvalid={state.validation.token.msg}
         validated={state.validation.token.type}
       >
-        <TextInput
-          spellCheck="false"
-          className="pf-u-w-75"
-          isRequired
-          type={state.passwordHidden ? 'password' : 'text'}
-          id="token"
-          name="token"
-          value={token}
-          onChange={(e, v) => onChangeFactory('token')(v, e)}
-          validated={state.validation.token.type}
-        />
-        <Button
-          variant="control"
-          onClick={togglePasswordHidden}
-          aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroup>
+          <TextInput
+            spellCheck="false"
+            className="pf-u-w-75"
+            isRequired
+            type={state.passwordHidden ? 'password' : 'text'}
+            id="token"
+            name="token"
+            value={token}
+            onChange={(e, v) => onChangeFactory('token')(v, e)}
+            validated={state.validation.token.type}
+          />
+          <Button
+            variant="control"
+            onClick={togglePasswordHidden}
+            aria-label={state.passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroup>
       </FormGroupWithHelpText>
 
       <FormGroupWithHelpText