diff --git a/redisinsight/ui/src/components/base/inputs/PasswordInput.tsx b/redisinsight/ui/src/components/base/inputs/PasswordInput.tsx new file mode 100644 index 0000000000..6e94fdd9e8 --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/PasswordInput.tsx @@ -0,0 +1,9 @@ +import React, { ComponentProps } from 'react' + +import { PasswordInput as RedisPasswordInput } from '@redis-ui/components' + +export type RedisPasswordInputProps = ComponentProps + +export default function PasswordInput(props: RedisPasswordInputProps) { + return +} diff --git a/redisinsight/ui/src/components/base/inputs/index.ts b/redisinsight/ui/src/components/base/inputs/index.ts new file mode 100644 index 0000000000..21c9adb49f --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/index.ts @@ -0,0 +1 @@ +export { default as PasswordInput } from './PasswordInput' diff --git a/redisinsight/ui/src/components/form-dialog/styles.module.scss b/redisinsight/ui/src/components/form-dialog/styles.module.scss index 4afd9292a3..d7feb5a393 100644 --- a/redisinsight/ui/src/components/form-dialog/styles.module.scss +++ b/redisinsight/ui/src/components/form-dialog/styles.module.scss @@ -52,7 +52,6 @@ .euiFieldText, .euiFieldNumber, - .euiFieldPassword, .euiFieldSearch, .euiSelect, .euiSuperSelectControl, @@ -81,8 +80,7 @@ .euiSuperSelectControl:not(.euiSuperSelectControl--compressed), .euiSelect:not(.euiSelect--compressed), .euiFieldText:not(.euiFieldText--compressed), - .euiFieldNumber:not(.euiFieldNumber--compressed), - .euiFieldPassword { + .euiFieldNumber:not(.euiFieldNumber--compressed) { height: 40px !important; } } diff --git a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx index 64b611155f..162284e29f 100644 --- a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx +++ b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx @@ -1,6 +1,5 @@ import { EuiFieldText, - EuiFieldPassword, EuiIcon, EuiFieldNumber, } from '@elastic/eui' @@ -9,6 +8,7 @@ import React, { useState } from 'react' import cx from 'classnames' import { useDebouncedEffect } from 'uiSrc/services' import { validateNumber } from 'uiSrc/utils' +import { PasswordInput } from 'uiSrc/components/base/inputs' import styles from './styles.module.scss' @@ -68,11 +68,10 @@ const InputFieldSentinel = (props: Props) => { /> )} {inputType === SentinelInputFieldType.Password && ( - handleChange(e.target?.value)} + onChange={(value) => handleChange(value)} data-testid="sentinel-input-password" /> )} diff --git a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx index 8d24ecb568..5f5faf03c1 100644 --- a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx @@ -4,7 +4,6 @@ import { isEmpty } from 'lodash' import { FormikErrors, useFormik } from 'formik' import { EuiFieldNumber, - EuiFieldPassword, EuiFieldText, EuiForm, EuiFormRow, @@ -30,6 +29,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' +import { PasswordInput } from 'uiSrc/components/base/inputs' export interface Props { host: string @@ -300,18 +300,15 @@ const ClusterConnectionForm = (props: Props) => { - diff --git a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx index 148ff2b6e5..17bee465f8 100644 --- a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx +++ b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx @@ -4,7 +4,6 @@ import { FormikProps } from 'formik' import { EuiFieldNumber, - EuiFieldPassword, EuiFieldText, EuiFormRow, EuiIcon, @@ -24,6 +23,7 @@ import { } from 'uiSrc/utils' import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { PasswordInput } from 'uiSrc/components/base/inputs' interface IShowFields { alias: boolean @@ -192,13 +192,10 @@ const DatabaseForm = (props: Props) => { - { ? SECURITY_FIELD : (formik.values.password ?? '') } - onChange={formik.handleChange} + onChangeCapture={formik.handleChange} onFocus={() => { if (formik.values.password === true) { formik.setFieldValue('password', '') } }} - dualToggleProps={{ color: 'text' }} autoComplete="new-password" disabled={isFieldDisabled('password')} /> diff --git a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx index 114f7331e0..7e429e95ef 100644 --- a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx +++ b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx @@ -2,7 +2,6 @@ import React, { ChangeEvent } from 'react' import { EuiCheckbox, EuiFieldNumber, - EuiFieldPassword, EuiFieldText, EuiFormRow, EuiRadioGroup, @@ -26,6 +25,7 @@ import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { PasswordInput } from 'uiSrc/components/base/inputs' import styles from '../styles.module.scss' export interface Props { @@ -164,13 +164,10 @@ const SSHDetails = (props: Props) => { - { ? SECURITY_FIELD : (formik.values.sshPassword ?? '') } - onChange={formik.handleChange} + onChangeCapture={formik.handleChange} onFocus={() => { if (formik.values.sshPassword === true) { formik.setFieldValue('sshPassword', '') @@ -201,7 +198,6 @@ const SSHDetails = (props: Props) => { id="sshPrivateKey" data-testid="sshPrivateKey" fullWidth - className="passwordField" maxLength={50_000} placeholder="Enter SSH Private Key in PEM format" value={ @@ -225,13 +221,10 @@ const SSHDetails = (props: Props) => { - { ? SECURITY_FIELD : (formik.values.sshPassphrase ?? '') } - onChange={formik.handleChange} + onChangeCapture={formik.handleChange} onFocus={() => { if (formik.values.sshPassphrase === true) { formik.setFieldValue('sshPassphrase', '') diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx index 4724806e02..4766e0eec2 100644 --- a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx +++ b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx @@ -1,6 +1,5 @@ import React from 'react' import { - EuiFieldPassword, EuiFieldText, EuiFormRow, EuiText, @@ -11,6 +10,7 @@ import { FormikProps } from 'formik' import { Nullable } from 'uiSrc/utils' import { SECURITY_FIELD } from 'uiSrc/constants' import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces' +import { PasswordInput } from 'uiSrc/components/base/inputs' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import styles from '../../styles.module.scss' @@ -59,13 +59,11 @@ const SentinelMasterDatabase = (props: Props) => { - { ? SECURITY_FIELD : (formik.values.sentinelMasterPassword ?? '') } - onChange={formik.handleChange} + onChangeCapture={formik.handleChange} onFocus={() => { if (formik.values.sentinelMasterPassword === true) { formik.setFieldValue('sentinelMasterPassword', '') } }} - dualToggleProps={{ color: 'text' }} autoComplete="new-password" /> diff --git a/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx b/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx index cc36245725..62c5eda59d 100644 --- a/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx +++ b/redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx @@ -1,5 +1,4 @@ import { - EuiFieldPassword, EuiFieldText, EuiForm, EuiFormRow, @@ -33,6 +32,7 @@ import { SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { InfoIcon } from 'uiSrc/components/base/icons' +import { PasswordInput } from 'uiSrc/components/base/inputs' import ValidationTooltip from './components/ValidationTooltip' import styles from './styles.module.scss' @@ -231,7 +231,14 @@ const ConnectionForm = (props: Props) => { - + + Password + + + } + > {({ field, @@ -242,13 +249,12 @@ const ConnectionForm = (props: Props) => { form: FormikHelpers meta: FieldMetaProps }) => ( - { form.setFieldValue('password', '') } }} - append={ - - } /> )} diff --git a/redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss b/redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss index 06519ccd18..91e35db27d 100644 --- a/redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss +++ b/redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss @@ -13,10 +13,6 @@ margin: 0 !important; } -.passwordField { - padding-left: 12px !important; -} - .testConnectionBtn { border-color: transparent !important; } diff --git a/redisinsight/ui/src/pages/settings/styles.module.scss b/redisinsight/ui/src/pages/settings/styles.module.scss index d3b72a6deb..62375a5d04 100644 --- a/redisinsight/ui/src/pages/settings/styles.module.scss +++ b/redisinsight/ui/src/pages/settings/styles.module.scss @@ -80,7 +80,6 @@ .euiFieldText, .euiFieldNumber, - .euiFieldPassword, .euiSelect, .euiSuperSelectControl, .euiTextArea { diff --git a/redisinsight/ui/src/styles/base/_inputs.scss b/redisinsight/ui/src/styles/base/_inputs.scss index df1938840e..d0f49e292a 100644 --- a/redisinsight/ui/src/styles/base/_inputs.scss +++ b/redisinsight/ui/src/styles/base/_inputs.scss @@ -1,7 +1,6 @@ .euiFormControlLayout--group { .euiFieldText, .euiFieldNumber, - .euiFieldPassword, .euiSelect, .euiSuperSelectControl, .euiTextArea { @@ -31,10 +30,6 @@ input[name='sshPassphrase'] ~ .euiFormControlLayoutIcons { display: none; } -.euiFieldPassword.euiFieldPassword--compressed { - padding: 8px !important; -} - .inputAppendIcon.inputAppendIcon { height: auto; } diff --git a/redisinsight/ui/src/styles/base/_typography.scss b/redisinsight/ui/src/styles/base/_typography.scss index f1591a31c8..ba809a1847 100644 --- a/redisinsight/ui/src/styles/base/_typography.scss +++ b/redisinsight/ui/src/styles/base/_typography.scss @@ -99,7 +99,6 @@ body { .euiFieldText, .euiFieldSearch, .euiFieldNumber, -.euiFieldPassword, .euiTextArea { font-family: 'Graphik', sans-serif !important; color: var(--htmlColor) !important; diff --git a/redisinsight/ui/src/styles/components/_accordion.scss b/redisinsight/ui/src/styles/components/_accordion.scss index 668f819fe9..7a83e51439 100644 --- a/redisinsight/ui/src/styles/components/_accordion.scss +++ b/redisinsight/ui/src/styles/components/_accordion.scss @@ -43,7 +43,6 @@ .euiFieldText, .euiFieldNumber, - .euiFieldPassword, .euiSelect, .euiSuperSelectControl, .euiTextArea { diff --git a/redisinsight/ui/src/styles/components/_forms.scss b/redisinsight/ui/src/styles/components/_forms.scss index 85fe0ebda7..8ed13761d6 100644 --- a/redisinsight/ui/src/styles/components/_forms.scss +++ b/redisinsight/ui/src/styles/components/_forms.scss @@ -86,7 +86,6 @@ .euiFieldText, .euiFieldNumber, -.euiFieldPassword, .euiFieldSearch, .euiSelect, .euiSuperSelectControl, @@ -208,7 +207,6 @@ } .euiFieldSearch:focus, -.euiFieldPassword:focus, .euiTextArea:focus, .euiSuperSelectControl:focus, .euiFieldNumber:focus, diff --git a/redisinsight/ui/src/styles/elastic.css b/redisinsight/ui/src/styles/elastic.css index 15b8a8233f..21bae5ba7d 100644 --- a/redisinsight/ui/src/styles/elastic.css +++ b/redisinsight/ui/src/styles/elastic.css @@ -8751,238 +8751,6 @@ .euiFieldNumber--withIcon.euiFieldNumber--compressed { padding-left: 32px; } - .euiFieldPassword { - max-width: 400px; - width: 100%; - height: 40px; - background-color: #fbfcfd; - background-repeat: no-repeat; - background-size: 0% 100%; - box-shadow: - 0 1px 1px -1px rgba(152, 162, 179, 0.2), - 0 3px 2px -2px rgba(152, 162, 179, 0.2), - inset 0 0 0 1px rgba(16, 38, 118, 0.1); - transition: - box-shadow 150ms ease-in, - background-image 150ms ease-in, - background-size 150ms ease-in, - background-color 150ms ease-in; - font-family: - 'Inter UI', - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Helvetica, - Arial, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji', - 'Segoe UI Symbol'; - font-weight: 400; - letter-spacing: -0.005em; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - font-kerning: normal; - font-size: 14px; - color: #343741; - border: none; - border-radius: 0; - padding: 12px; - padding-left: 40px; - } - .euiFieldPassword--fullWidth { - max-width: 100%; - } - .euiFieldPassword--compressed { - height: 32px; - } - .euiFieldPassword--inGroup { - height: 100%; - } - @supports (-moz-appearance: none) { - .euiFieldPassword { - transition-property: box-shadow, background-image, background-size; - } - } - @media screen and (-ms-high-contrast: active), - screen and (-ms-high-contrast: none) { - .euiFieldPassword { - line-height: 1em; - } - } - .euiFieldPassword::-webkit-input-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword::-moz-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword:-ms-input-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword:-moz-placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword::placeholder { - color: #6a717d; - opacity: 1; - } - .euiFieldPassword:invalid { - background-image: linear-gradient( - to top, - #bd271e, - #bd271e 2px, - transparent 2px, - transparent 100% - ); - background-size: 100%; - } - .euiFieldPassword:focus { - background-color: #fff; - background-image: linear-gradient( - to top, - #006bb4, - #006bb4 2px, - transparent 2px, - transparent 100% - ); - background-size: 100% 100%; - box-shadow: - 0 1px 1px -1px rgba(152, 162, 179, 0.2), - 0 4px 4px -2px rgba(152, 162, 179, 0.2), - inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword:disabled { - color: #98a2b3; - -webkit-text-fill-color: #98a2b3; - cursor: not-allowed; - background: #eef2f7; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword:disabled::-webkit-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword:disabled::-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword:disabled:-ms-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword:disabled:-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword:disabled::placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword[readOnly] { - cursor: default; - background: rgba(211, 218, 230, 0.05); - border-color: rgba(0, 0, 0, 0); - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword:-webkit-autofill { - -webkit-text-fill-color: #343741; - } - .euiFieldPassword:-webkit-autofill ~ .euiFormControlLayoutIcons { - color: #343741; - } - .euiFieldPassword--compressed { - background-color: #fbfcfd; - background-repeat: no-repeat; - background-size: 0% 100%; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - transition: - box-shadow 150ms ease-in, - background-image 150ms ease-in, - background-size 150ms ease-in, - background-color 150ms ease-in; - padding: 8px; - border-radius: 2px; - } - @supports (-moz-appearance: none) { - .euiFieldPassword--compressed { - transition-property: box-shadow, background-image, background-size; - } - } - .euiFieldPassword--compressed:invalid { - background-image: linear-gradient( - to top, - #bd271e, - #bd271e 2px, - transparent 2px, - transparent 100% - ); - background-size: 100%; - } - .euiFieldPassword--compressed:focus { - background-color: #fff; - background-image: linear-gradient( - to top, - #006bb4, - #006bb4 2px, - transparent 2px, - transparent 100% - ); - background-size: 100% 100%; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword--compressed:disabled { - color: #98a2b3; - -webkit-text-fill-color: #98a2b3; - cursor: not-allowed; - background: #eef2f7; - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword--compressed:disabled::-webkit-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed:disabled::-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed:disabled:-ms-input-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed:disabled:-moz-placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed:disabled::placeholder { - color: #98a2b3; - opacity: 1; - } - .euiFieldPassword--compressed[readOnly] { - cursor: default; - background: rgba(211, 218, 230, 0.05); - border-color: rgba(0, 0, 0, 0); - box-shadow: inset 0 0 0 1px rgba(16, 38, 118, 0.1); - } - .euiFieldPassword--inGroup { - box-shadow: none !important; - border-radius: 0; - } - .euiFieldPassword-isLoading { - padding-right: 40px; - } - .euiFieldPassword-isLoading.euiFieldPassword--compressed { - padding-right: 32px; - } - .euiFieldPassword.euiFieldPassword--compressed { - padding-left: 32px; - } - .euiFieldPassword--withToggle::-ms-reveal { - display: none; - } .euiFieldSearch { max-width: 400px; width: 100%;