fix(auth): hide/show password revealer in auth pages.

fix(expense): auto-adding new lines.
fix(journal): auto-adding new lines.

client/src/containers/Authentication/InviteAcceptFormContent.js

@@ -17,6 +17,17 @@ export default function InviteUserFormContent() {
   // Formik context.
   const { isSubmitting } = useFormikContext();
 
+  const [passwordType, setPasswordType] = React.useState('password');
+
+  // Handle password revealer changing.
+  const handlePasswordRevealerChange = React.useCallback(
+    (shown) => {
+      const type = shown ? 'text' : 'password';
+      setPasswordType(type);
+    },
+    [setPasswordType],
+  );
+
   return (
     <Form>
       <Row>
@@ -74,14 +85,14 @@ export default function InviteUserFormContent() {
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'password'} />}
-            labelInfo={<PasswordRevealer />}
+            labelInfo={<PasswordRevealer onChange={handlePasswordRevealerChange} />}
             className={'form-group--password has-password-revealer'}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'password'} />}
           >
             <InputGroup
               lang={true}
-              // type={shown ? 'text' : 'password'}
+              type={passwordType}
               intent={inputIntent({ error, touched })}
               {...field}
             />

client/src/containers/Authentication/LoginForm.js

@@ -6,7 +6,7 @@ import {
   FormGroup,
   Checkbox,
 } from '@blueprintjs/core';
-import { Form, ErrorMessage, FastField } from 'formik';
+import { Form, ErrorMessage, Field } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
 import { inputIntent } from 'utils';
 import { PasswordRevealer } from './components';
@@ -14,12 +14,21 @@ import { PasswordRevealer } from './components';
 /**
  * Login form.
  */
-export default function LoginForm({
-  isSubmitting
-}) {
+export default function LoginForm({ isSubmitting }) {
+  const [passwordType, setPasswordType] = React.useState('password');
+
+  // Handle password revealer changing.
+  const handlePasswordRevealerChange = React.useCallback(
+    (shown) => {
+      const type = shown ? 'text' : 'password';
+      setPasswordType(type);
+    },
+    [setPasswordType],
+  );
+
   return (
     <Form className={'authentication-page__form'}>
-      <FastField name={'crediential'}>
+      <Field name={'crediential'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'email_or_phone_number'} />}
@@ -34,13 +43,15 @@ export default function LoginForm({
             />
           </FormGroup>
         )}
-      </FastField>
+      </Field>
 
-      <FastField name={'password'}>
+      <Field name={'password'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'password'} />}
-            labelInfo={<PasswordRevealer />}
+            labelInfo={
+              <PasswordRevealer onChange={handlePasswordRevealerChange} />
+            }
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name={'password'} />}
             className={'form-group--password has-password-revealer'}
@@ -48,12 +59,12 @@ export default function LoginForm({
             <InputGroup
               large={true}
               intent={inputIntent({ error, touched })}
-              // type={shown ? 'text' : 'password'}
+              type={passwordType}
               {...field}
             />
           </FormGroup>
         )}
-      </FastField>
+      </Field>
 
       <div className={'login-form__checkbox-section'}>
         <Checkbox large={true} className={'checkbox--remember-me'}>

client/src/containers/Authentication/RegisterForm.js

@@ -4,26 +4,35 @@ import {
   InputGroup,
   Intent,
   FormGroup,
-  Spinner
+  Spinner,
 } from '@blueprintjs/core';
-import { ErrorMessage, FastField, Form } from 'formik';
+import { ErrorMessage, Field, Form } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Row, Col, If } from 'components';
-
+import { PasswordRevealer } from './components';
 import { inputIntent } from 'utils';
 
 /**
  * Register form.
  */
-export default function RegisterForm({
-  isSubmitting,
-}) {
+export default function RegisterForm({ isSubmitting }) {
+  const [passwordType, setPasswordType] = React.useState('password');
+
+  // Handle password revealer changing.
+  const handlePasswordRevealerChange = React.useCallback(
+    (shown) => {
+      const type = shown ? 'text' : 'password';
+      setPasswordType(type);
+    },
+    [setPasswordType],
+  );
+
   return (
     <Form className={'authentication-page__form'}>
       <Row className={'name-section'}>
         <Col md={6}>
-          <FastField name={'first_name'}>
+          <Field name={'first_name'}>
             {({ form, field, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'first_name'} />}
@@ -37,11 +46,11 @@ export default function RegisterForm({
                 />
               </FormGroup>
             )}
-          </FastField>
+          </Field>
         </Col>
 
         <Col md={6}>
-          <FastField name={'last_name'}>
+          <Field name={'last_name'}>
             {({ form, field, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'last_name'} />}
@@ -55,11 +64,11 @@ export default function RegisterForm({
                 />
               </FormGroup>
             )}
-          </FastField>
+          </Field>
         </Col>
       </Row>
 
-      <FastField name={'phone_number'}>
+      <Field name={'phone_number'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'phone_number'} />}
@@ -70,8 +79,9 @@ export default function RegisterForm({
             <InputGroup intent={inputIntent({ error, touched })} {...field} />
           </FormGroup>
         )}
-      </FastField>
-      <FastField name={'email'}>
+      </Field>
+
+      <Field name={'email'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'email'} />}
@@ -82,28 +92,28 @@ export default function RegisterForm({
             <InputGroup intent={inputIntent({ error, touched })} {...field} />
           </FormGroup>
         )}
-      </FastField>
+      </Field>
 
-      <FastField name={'password'}>
+      <Field name={'password'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'password'} />}
-            // labelInfo={passwordRevealerTmp}
-            intent={inputIntent({ error, touched })}
-            helperText={
-              <ErrorMessage name={'password'} />
+            labelInfo={
+              <PasswordRevealer onChange={handlePasswordRevealerChange} />
             }
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'password'} />}
             className={'form-group--password has-password-revealer'}
           >
             <InputGroup
               lang={true}
-              // type={shown ? 'text' : 'password'}
+              type={passwordType}
               intent={inputIntent({ error, touched })}
               {...field}
             />
           </FormGroup>
         )}
-      </FastField>
+      </Field>
 
       <div className={'register-form__agreement-section'}>
         <p>

client/src/containers/Authentication/components.js

@@ -2,10 +2,18 @@ import React from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import ContentLoader from 'react-content-loader';
 import { If, Icon } from 'components';
+import { saveInvoke } from 'utils';
+
+export function PasswordRevealer({ defaultShown = false, onChange }) {
+  const [shown, setShown] = React.useState(defaultShown);
+
+  const handleClick = () => {
+    setShown(!shown);
+    saveInvoke(onChange, !shown);
+  };
 
-export function PasswordRevealer({ shown, onClick }) {
   return (
-    <span class="password-revealer" onClick={onClick}>
+    <span class="password-revealer" onClick={handleClick}>
       <If condition={shown}>
         <Icon icon="eye-slash" />{' '}
         <span class="text">