fix: replaced session input component with the new one

ts/components/basic/SessionInput.tsx

@@ -1,126 +0,0 @@
-import { ChangeEvent, useState } from 'react';
-
-import classNames from 'classnames';
-import { Noop } from '../../types/Util';
-import { useHTMLDirection } from '../../util/i18n';
-import { SessionIconButton } from '../icon';
-
-type Props = {
-  label?: string;
-  error?: string;
-  type?: string;
-  value?: string;
-  placeholder: string;
-  maxLength?: number;
-  enableShowHide?: boolean;
-  onValueChanged?: (value: string) => any;
-  onEnterPressed?: any;
-  autoFocus?: boolean;
-  ref?: any;
-  inputDataTestId?: string;
-};
-
-const LabelItem = (props: { inputValue: string; label?: string }) => {
-  return (
-    <label
-      htmlFor="session-input-floating-label"
-      className={classNames(
-        props.inputValue !== ''
-          ? 'session-input-with-label-container filled'
-          : 'session-input-with-label-container'
-      )}
-    >
-      {props.label}
-    </label>
-  );
-};
-
-const ErrorItem = (props: { error: string | undefined }) => {
-  return (
-    <label
-      htmlFor="session-input-floating-label"
-      className={classNames('session-input-with-label-container filled error')}
-    >
-      {props.error}
-    </label>
-  );
-};
-
-const ShowHideButton = (props: { toggleForceShow: Noop }) => {
-  const htmlDirection = useHTMLDirection();
-  const position = htmlDirection === 'ltr' ? { right: '0px' } : { left: '0px' };
-
-  return (
-    <SessionIconButton
-      iconType="eye"
-      iconSize="medium"
-      onClick={props.toggleForceShow}
-      style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', ...position }}
-    />
-  );
-};
-
-export const SessionInput = (props: Props) => {
-  const {
-    autoFocus,
-    placeholder,
-    type,
-    value,
-    maxLength,
-    enableShowHide,
-    error,
-    label,
-    onValueChanged,
-    inputDataTestId,
-  } = props;
-  const [inputValue, setInputValue] = useState('');
-  const [forceShow, setForceShow] = useState(false);
-
-  const correctType = forceShow ? 'text' : type;
-
-  const updateInputValue = (e: ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    const val = e.target.value;
-    setInputValue(val);
-    if (onValueChanged) {
-      onValueChanged(val);
-    }
-  };
-
-  return (
-    <div className="session-input-with-label-container">
-      {error ? (
-        <ErrorItem error={props.error} />
-      ) : (
-        <LabelItem inputValue={inputValue} label={label} />
-      )}
-      <input
-        id="session-input-floating-label"
-        type={correctType}
-        placeholder={placeholder}
-        value={value}
-        maxLength={maxLength}
-        autoFocus={autoFocus}
-        data-testid={inputDataTestId}
-        onChange={updateInputValue}
-        className={classNames(enableShowHide ? 'session-input-floating-label-show-hide' : '')}
-        // just in case onChange isn't triggered
-        onBlur={updateInputValue}
-        onKeyPress={event => {
-          if (event.key === 'Enter' && props.onEnterPressed) {
-            props.onEnterPressed();
-          }
-        }}
-      />
-
-      {enableShowHide && (
-        <ShowHideButton
-          toggleForceShow={() => {
-            setForceShow(!forceShow);
-          }}
-        />
-      )}
-      <hr />
-    </div>
-  );
-};

ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings2.tsx

@@ -7,7 +7,7 @@ import { useSelectedConversationKey } from '../../../../state/selectors/selected
 import { Flex } from '../../../basic/Flex';
 import { SessionButton } from '../../../basic/SessionButton';
 import { SpacerLG, SpacerXL } from '../../../basic/Text';
-import { SessionInput2 } from '../../../inputs';
+import { SessionInput } from '../../../inputs';
 import { SessionProgressBar } from '../../../loading';
 import { StyledScrollContainer } from './components';
 
@@ -82,7 +82,7 @@ export const OverlayRightPanelSettings2 = () => {
           showPercentage={true}
         />
         <SpacerLG />
-        <SessionInput2
+        <SessionInput
           placeholder={window.i18n('enterDisplayName')}
           value={inputValue}
           error={inputError}

ts/components/inputs/SessionInput.tsx

@@ -102,7 +102,7 @@ type Props = {
   ctaButton?: ReactNode;
 };
 
-export const SessionInput2 = (props: Props) => {
+export const SessionInput = (props: Props) => {
   const {
     autoFocus,
     placeholder,

ts/components/inputs/index.tsx

@@ -1,3 +1,3 @@
-import { SessionInput2 } from './SessionInput2';
+import { SessionInput } from './SessionInput';
 
-export { SessionInput2 };
+export { SessionInput };

ts/components/registration/RegistrationUserDetails.tsx

@@ -1,5 +1,5 @@
 import { SpacerLG } from '../basic/Text';
-import { SessionInput2 } from '../inputs';
+import { SessionInput } from '../inputs';
 
 const RecoveryPhraseInput = (props: {
   recoveryPhrase: string;
@@ -8,7 +8,7 @@ const RecoveryPhraseInput = (props: {
   stealAutoFocus?: boolean;
 }) => {
   return (
-    <SessionInput2
+    <SessionInput
       type="password"
       value={props.recoveryPhrase}
       autoFocus={props.stealAutoFocus || false}

ts/components/registration/stages/CreateAccount.tsx

@@ -10,7 +10,7 @@ import {
 import { Flex } from '../../basic/Flex';
 import { SessionButton, SessionButtonColor } from '../../basic/SessionButton';
 import { SpacerLG, SpacerSM } from '../../basic/Text';
-import { SessionInput2 } from '../../inputs';
+import { SessionInput } from '../../inputs';
 import { signUp } from '../RegistrationStages';
 import { BackButtonWithininContainer } from '../components/BackButton';
 
@@ -79,7 +79,7 @@ export const CreateAccount = () => {
           <SpacerSM />
           <StyledDescription>{window.i18n('displayNameDescription')}</StyledDescription>
           <SpacerLG />
-          <SessionInput2
+          <SessionInput
             autoFocus={true}
             type="text"
             placeholder={window.i18n('enterDisplayName')}