Add visibility toggle of password input. Closes #2

client/src/lib/custom-ui/components/Input/Input.jsx

@@ -1,28 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { Input as SemanticUIInput } from 'semantic-ui-react';
 
-import MaskedInput from './MaskedInput';
+import InputPassword from './InputPassword';
+import InputMask from './InputMask';
 
-const Input = React.forwardRef(({ mask, maskChar, ...props }, ref) => {
-  const nextProps = props;
+const Input = SemanticUIInput;
 
-  if (mask) {
-    nextProps.input = <MaskedInput mask={mask} maskChar={maskChar} />;
-  }
+Input.Password = InputPassword;
+Input.Mask = InputMask;
 
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  return <SemanticUIInput {...nextProps} ref={ref} />;
-});
-
-Input.propTypes = {
-  mask: PropTypes.string,
-  maskChar: PropTypes.string,
-};
-
-Input.defaultProps = {
-  mask: undefined,
-  maskChar: undefined,
-};
-
-export default React.memo(Input);
+export default Input;

client/src/lib/custom-ui/components/Input/InputMask.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'semantic-ui-react';
+
+import MaskedInput from './MaskedInput';
+
+const InputMask = React.forwardRef(({ mask, maskChar, ...props }, ref) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <Input {...props} ref={ref} input={<MaskedInput mask={mask} maskChar={maskChar} />} />
+));
+
+InputMask.propTypes = {
+  mask: PropTypes.string.isRequired,
+  maskChar: PropTypes.string,
+};
+
+InputMask.defaultProps = {
+  maskChar: undefined,
+};
+
+export default React.memo(InputMask);

client/src/lib/custom-ui/components/Input/InputPassword.jsx

@@ -0,0 +1,22 @@
+import React, { useCallback } from 'react';
+import { Icon, Input } from 'semantic-ui-react';
+import { useToggle } from '../../../hooks';
+
+const InputPassword = React.forwardRef((props, ref) => {
+  const [isHidden, toggleHidden] = useToggle(true);
+
+  const handleToggleClick = useCallback(() => {
+    toggleHidden();
+  }, [toggleHidden]);
+
+  return (
+    <Input
+      {...props} // eslint-disable-line react/jsx-props-no-spreading
+      ref={ref}
+      type={isHidden ? 'password' : 'text'}
+      icon={<Icon link name={isHidden ? 'eye slash' : 'eye'} onClick={handleToggleClick} />}
+    />
+  );
+});
+
+export default React.memo(InputPassword);