diff --git a/frontend/src/Components/Form/FormInputGroup.js b/frontend/src/Components/Form/FormInputGroup.js index cb14fd944..77e8efa55 100644 --- a/frontend/src/Components/Form/FormInputGroup.js +++ b/frontend/src/Components/Form/FormInputGroup.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; +import PrivacyTextInput from 'Components/Form/PrivacyTextInput'; import Link from 'Components/Link/Link'; import { inputTypes, kinds } from 'Helpers/Props'; import translate from 'Utilities/String/translate'; @@ -93,6 +94,9 @@ function getComponent(type) { case inputTypes.TAG_SELECT: return TagSelectInputConnector; + case inputTypes.PRIVACY_TEXT: + return PrivacyTextInput; + default: return TextInput; } diff --git a/frontend/src/Components/Form/PrivacyTextInput.css b/frontend/src/Components/Form/PrivacyTextInput.css new file mode 100644 index 000000000..ef6a0932e --- /dev/null +++ b/frontend/src/Components/Form/PrivacyTextInput.css @@ -0,0 +1,17 @@ +.container { + position: relative; +} + +.input { + composes: input from '~Components/Form/TextInput.css'; + + padding: 6px 30px 6px 16px; +} + +.toggle { + position: absolute; + margin-left: -25px; + width: 20px; + text-align: center; + line-height: 35px; +} diff --git a/frontend/src/Components/Form/PrivacyTextInput.css.d.ts b/frontend/src/Components/Form/PrivacyTextInput.css.d.ts new file mode 100644 index 000000000..a7d07a37b --- /dev/null +++ b/frontend/src/Components/Form/PrivacyTextInput.css.d.ts @@ -0,0 +1,9 @@ +// This file is automatically generated. +// Please do not change this file! +interface CssExports { + 'container': string; + 'input': string; + 'toggle': string; +} +export const cssExports: CssExports; +export default cssExports; diff --git a/frontend/src/Components/Form/PrivacyTextInput.tsx b/frontend/src/Components/Form/PrivacyTextInput.tsx new file mode 100644 index 000000000..5407349cb --- /dev/null +++ b/frontend/src/Components/Form/PrivacyTextInput.tsx @@ -0,0 +1,46 @@ +import React, { SyntheticEvent, useCallback, useState } from 'react'; +import IconButton from 'Components/Link/IconButton'; +import { icons } from 'Helpers/Props'; +import translate from 'Utilities/String/translate'; +import TextInput from './TextInput'; +import styles from './PrivacyTextInput.css'; + +interface PrivacyTextInputProps { + className: string; +} + +function PrivacyTextInput(props: PrivacyTextInputProps) { + const { className = styles.input, ...otherProps } = props; + + const [isVisible, setIsVisible] = useState(false); + + const toggleVisibility = useCallback(() => { + setIsVisible(!isVisible); + }, [isVisible, setIsVisible]); + + // Prevent a user from copying (or cutting) the password from the input + const onCopy = useCallback((event: SyntheticEvent) => { + event.preventDefault(); + event.nativeEvent.stopImmediatePropagation(); + }, []); + + return ( +