Add visibility toggle of password input. Closes #2

client/src/components/AddUserPopup/AddUserPopup.jsx

@@ -5,10 +5,11 @@ import React, {
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Message } from 'semantic-ui-react';
+import { usePrevious } from '../../lib/hooks';
 import { withPopup } from '../../lib/popup';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import { useForm, usePrevious } from '../../hooks';
+import { useForm } from '../../hooks';
 
 import styles from './AddUserPopup.module.css';
 
@@ -120,7 +121,7 @@ const AddUserPopup = React.memo(
               onChange={handleFieldChange}
             />
             <div className={styles.text}>{t('common.password')}</div>
-            <Input
+            <Input.Password
               fluid
               ref={passwordField}
               name="password"

client/src/components/Board/AddList.jsx

@@ -4,10 +4,9 @@ import React, {
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../lib/hooks';
 
-import {
-  useClosableForm, useDidUpdate, useForm, useToggle,
-} from '../../hooks';
+import { useClosableForm, useForm } from '../../hooks';
 
 import styles from './AddList.module.css';
 

client/src/components/Card/Tasks.jsx

@@ -2,8 +2,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Progress } from 'semantic-ui-react';
-
-import { useToggle } from '../../hooks';
+import { useToggle } from '../../lib/hooks';
 
 import styles from './Tasks.module.css';
 

client/src/components/CardModal/NameField.jsx

@@ -2,8 +2,9 @@ import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import TextareaAutosize from 'react-textarea-autosize';
 import { TextArea } from 'semantic-ui-react';
+import { useDidUpdate, usePrevious } from '../../lib/hooks';
 
-import { useDidUpdate, useField, usePrevious } from '../../hooks';
+import { useField } from '../../hooks';
 
 import styles from './NameField.module.css';
 

client/src/components/CardModal/Tasks/Add.jsx

@@ -5,10 +5,9 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
 
-import {
-  useClosableForm, useDidUpdate, useForm, useToggle,
-} from '../../../hooks';
+import { useClosableForm, useForm } from '../../../hooks';
 
 import styles from './Add.module.css';
 

client/src/components/EditDueDateStep/EditDueDateStep.jsx

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-datepicker';
 import { Button, Form } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../lib/hooks';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import { useDidUpdate, useForm, useToggle } from '../../hooks';
+import { useForm } from '../../hooks';
 
 import styles from './EditDueDateStep.module.css';
 

client/src/components/EditTimerStep/EditTimerStep.jsx

@@ -3,9 +3,10 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form } from 'semantic-ui-react';
+import { useToggle } from '../../lib/hooks';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import { useForm, useToggle } from '../../hooks';
+import { useForm } from '../../hooks';
 import {
   createTimer, getTimerParts, startTimer, stopTimer, updateTimer,
 } from '../../utils/timer';
@@ -114,7 +115,7 @@ const EditTimerStep = React.memo(({
           <div className={styles.fieldWrapper}>
             <div className={styles.fieldBox}>
               <div className={styles.text}>{t('common.hours')}</div>
-              <Input
+              <Input.Mask
                 ref={hoursField}
                 name="hours"
                 value={data.hours}
@@ -126,7 +127,7 @@ const EditTimerStep = React.memo(({
             </div>
             <div className={styles.fieldBox}>
               <div className={styles.text}>{t('common.minutes')}</div>
-              <Input
+              <Input.Mask
                 ref={minutesField}
                 name="minutes"
                 value={data.minutes}
@@ -138,7 +139,7 @@ const EditTimerStep = React.memo(({
             </div>
             <div className={styles.fieldBox}>
               <div className={styles.text}>{t('common.seconds')}</div>
-              <Input
+              <Input.Mask
                 ref={secondsField}
                 name="seconds"
                 value={data.seconds}

client/src/components/List/AddCard.jsx

@@ -5,10 +5,9 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../lib/hooks';
 
-import {
-  useClosableForm, useDidUpdate, useForm, useToggle,
-} from '../../hooks';
+import { useClosableForm, useForm } from '../../hooks';
 
 import styles from './AddCard.module.css';
 

client/src/components/Login/Login.jsx

@@ -8,11 +8,10 @@ import isEmail from 'validator/lib/isEmail';
 import {
   Form, Grid, Header, Message,
 } from 'semantic-ui-react';
+import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
 import { Input } from '../../lib/custom-ui';
 
-import {
-  useDidUpdate, useForm, usePrevious, useToggle,
-} from '../../hooks';
+import { useForm } from '../../hooks';
 
 import styles from './Login.module.css';
 
@@ -156,10 +155,9 @@ const Login = React.memo(
                       </div>
                       <div className={styles.inputWrapper}>
                         <div className={styles.inputLabel}>{t('common.password')}</div>
-                        <Input
+                        <Input.Password
                           fluid
                           ref={passwordField}
-                          type="password"
                           name="password"
                           value={data.password}
                           readOnly={isSubmitting}

client/src/components/Timer/Timer.jsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { useForceUpdate, usePrevious } from '../../lib/hooks';
 
-import { useForceUpdate, usePrevious } from '../../hooks';
 import { formatTimer } from '../../utils/timer';
 
 import styles from './Timer.module.css';

client/src/components/UserPopup/EditEmailStep.jsx

@@ -5,11 +5,10 @@ import React, {
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Message } from 'semantic-ui-react';
+import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import {
-  useDidUpdate, useForm, usePrevious, useToggle,
-} from '../../hooks';
+import { useForm } from '../../hooks';
 
 import styles from './EditNameStep.module.css';
 
@@ -145,10 +144,9 @@ const EditEmailStep = React.memo(
             {data.email.trim() !== email && (
               <>
                 <div className={styles.text}>{t('common.currentPassword')}</div>
-                <Input
+                <Input.Password
                   fluid
                   ref={currentPasswordField}
-                  type="password"
                   name="currentPassword"
                   value={data.currentPassword}
                   className={styles.field}

client/src/components/UserPopup/EditPasswordStep.jsx

@@ -4,11 +4,10 @@ import React, {
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Message } from 'semantic-ui-react';
+import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import {
-  useDidUpdate, useForm, usePrevious, useToggle,
-} from '../../hooks';
+import { useForm } from '../../hooks';
 
 import styles from './EditNameStep.module.css';
 
@@ -107,7 +106,7 @@ const EditPasswordStep = React.memo(
           )}
           <Form onSubmit={handleSubmit}>
             <div className={styles.text}>{t('common.newPassword')}</div>
-            <Input
+            <Input.Password
               fluid
               ref={passwordField}
               name="password"
@@ -116,10 +115,9 @@ const EditPasswordStep = React.memo(
               onChange={handleFieldChange}
             />
             <div className={styles.text}>{t('common.currentPassword')}</div>
-            <Input
+            <Input.Password
               fluid
               ref={currentPasswordField}
-              type="password"
               name="currentPassword"
               value={data.currentPassword}
               className={styles.field}

client/src/hooks/index.js

@@ -1,19 +1,8 @@
-import usePrevious from './use-previous';
 import useField from './use-field';
 import useForm from './use-form';
 import useSteps from './use-steps';
-import useToggle from './use-toggle';
-import useForceUpdate from './use-force-update';
 import useClosableForm from './use-closable-form';
-import useDidUpdate from './use-did-update';
 
 export {
-  usePrevious,
-  useField,
-  useForm,
-  useSteps,
-  useToggle,
-  useForceUpdate,
-  useClosableForm,
-  useDidUpdate,
+  useField, useForm, useSteps, useClosableForm,
 };

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);

client/src/lib/hooks/index.js

@@ -0,0 +1,8 @@
+import usePrevious from './use-previous';
+import useToggle from './use-toggle';
+import useForceUpdate from './use-force-update';
+import useDidUpdate from './use-did-update';
+
+export {
+  usePrevious, useToggle, useForceUpdate, useDidUpdate,
+};