1 files changed, 104 insertions, 83 deletions

diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index 2a36d7aa9..cb26c0ea4 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -1,5 +1,4 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
-import Icon from '@mdi/react';
 import classnames from 'classnames';
 import {
   Component,
@@ -7,9 +6,13 @@ import {
   InputHTMLAttributes,
   ReactElement,
   RefObject,
+  KeyboardEvent,
 } from 'react';
-import injectSheet, { WithStylesProps } from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import { noop } from 'lodash';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import Icon from '../icon';
 import { IFormField } from '../typings/generic';
 import Error from '../error';
 import Label from '../label';
@@ -17,6 +20,12 @@ import Wrapper from '../wrapper';
 import { scorePasswordFunc } from './scorePassword';
 import styles from './styles';
 
+const messages = defineMessages({
+  passwordToggle: {
+    id: 'settings.app.form.passwordToggle',
+    defaultMessage: 'Password toggle',
+  },
+});
 interface IData {
   [index: string]: string;
 }
@@ -24,7 +33,8 @@ interface IData {
 interface IProps
   extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
-    WithStylesProps<typeof styles> {
+    WithStylesProps<typeof styles>,
+    WrappedComponentProps {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
@@ -40,8 +50,10 @@ interface IState {
   passwordScore: number;
 }
 
-class InputComponent extends Component<IProps, IState> {
-  private inputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>();
+@observer
+class Input extends Component<IProps, IState> {
+  private inputElement: RefObject<HTMLInputElement> =
+    createRef<HTMLInputElement>();
 
   constructor(props: IProps) {
     super(props);
@@ -53,36 +65,40 @@ class InputComponent extends Component<IProps, IState> {
   }
 
   componentDidMount(): void {
-    const { focus, data = {} } = this.props;
+    const { focus = false, data = {} } = this.props;
 
-    if (this.inputRef && this.inputRef.current) {
+    if (this.inputElement && this.inputElement.current) {
       if (focus) {
-        this.inputRef.current.focus();
+        this.inputElement.current.focus();
       }
 
-      for (const key of Object.keys(data))
-        this.inputRef.current!.dataset[key] = data[key];
+      for (const key of Object.keys(data)) {
+        this.inputElement.current.dataset[key] = data[key];
+      }
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLInputElement>): void {
-    const { scorePassword, onChange } = this.props;
+    const { scorePassword, onChange = noop } = this.props;
 
-    if (onChange) {
-      onChange(e);
-    }
+    onChange(e);
 
-    if (this.inputRef && this.inputRef.current && scorePassword) {
+    if (scorePassword) {
+      console.log(
+        '--->',
+        e.target.value,
+        scorePasswordFunc(e.target.value as string),
+      );
       this.setState({
-        passwordScore: scorePasswordFunc(this.inputRef.current.value),
+        passwordScore: scorePasswordFunc(e.target.value),
       });
     }
   }
 
-  onInputKeyPress(e: React.KeyboardEvent): void {
+  onInputKeyPress(e: KeyboardEvent<HTMLInputElement>): void {
     if (e.key === 'Enter') {
-      const { onEnterKey } = this.props;
-      onEnterKey && onEnterKey();
+      const { onEnterKey = noop } = this.props;
+      onEnterKey();
     }
   }
 
@@ -113,10 +129,9 @@ class InputComponent extends Component<IProps, IState> {
       type = 'text',
       disabled = false,
       readOnly,
+      intl,
     } = this.props;
-
     const { showPassword, passwordScore } = this.state;
-
     const inputType = type === 'password' && showPassword ? 'text' : type;
 
     return (
@@ -125,79 +140,85 @@ class InputComponent extends Component<IProps, IState> {
         identifier="franz-input"
         noMargin={noMargin}
       >
-        <Label
-          title={label}
-          showLabel={showLabel}
-          htmlFor={id}
-          className={classes.label}
-          isRequired={required}
+        {label && showLabel && (
+          <Label
+            title={label}
+            showLabel={showLabel}
+            htmlFor={id}
+            className={classes.label}
+            isRequired={required}
+          />
+        )}
+        <div
+          className={classnames({
+            [`${inputClassName}`]: inputClassName,
+            // [`${classes.hasPasswordScore}`]: scorePassword,
+            [`${classes.wrapper}`]: true,
+            [`${classes.disabled}`]: disabled,
+            [`${classes.hasError}`]: error,
+          })}
         >
+          {prefix && <span className={classes.prefix}>{prefix}</span>}
+          <input
+            id={id}
+            type={inputType}
+            name={name}
+            value={value as string}
+            placeholder={placeholder}
+            spellCheck={spellCheck}
+            className={classes.input}
+            ref={this.inputElement}
+            onChange={this.onChange.bind(this)}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            disabled={disabled}
+            onKeyPress={this.onInputKeyPress.bind(this)}
+            min={min}
+            max={max}
+            step={step}
+            readOnly={readOnly}
+          />
+
+          {suffix && <span className={classes.suffix}>{suffix}</span>}
+
+          {showPasswordToggle && (
+            <button
+              type="button"
+              className={classnames({
+                'franz-form__input-modifier': true,
+              })}
+              onClick={() =>
+                this.setState(prevState => ({
+                  showPassword: !prevState.showPassword,
+                }))
+              }
+              tabIndex={-1}
+              aria-label={intl.formatMessage(messages.passwordToggle)}
+            >
+              <Icon icon={this.state.showPassword ? mdiEye : mdiEyeOff} />
+            </button>
+          )}
+        </div>
+        {scorePassword && (
           <div
             className={classnames({
-              [`${inputClassName}`]: inputClassName,
-              [`${classes.hasPasswordScore}`]: scorePassword,
-              [`${classes.wrapper}`]: true,
-              [`${classes.disabled}`]: disabled,
+              [`${classes.passwordScore}`]: true,
               [`${classes.hasError}`]: error,
             })}
           >
-            {prefix && <span className={classes.prefix}>{prefix}</span>}
-            <input
-              id={id}
-              type={inputType}
-              name={name}
-              value={value as string}
-              placeholder={placeholder}
-              spellCheck={spellCheck}
-              className={classes.input}
-              ref={this.inputRef}
-              onChange={this.onChange.bind(this)}
-              onFocus={onFocus}
-              onBlur={onBlur}
-              disabled={disabled}
-              onKeyPress={this.onInputKeyPress.bind(this)}
-              min={min}
-              max={max}
-              step={step}
-              readOnly={readOnly}
+            <meter
+              value={passwordScore < 5 ? 5 : passwordScore}
+              low={30}
+              high={75}
+              optimum={100}
+              max={100}
             />
-            {suffix && <span className={classes.suffix}>{suffix}</span>}
-            {showPasswordToggle && (
-              <button
-                type="button"
-                className={classes.formModifier}
-                onClick={() =>
-                  this.setState(prevState => ({
-                    showPassword: !prevState.showPassword,
-                  }))
-                }
-                tabIndex={-1}
-              >
-                <Icon path={!showPassword ? mdiEye : mdiEyeOff} />
-              </button>
-            )}
           </div>
-          {scorePassword && (
-            <div
-              className={classnames({
-                [`${classes.passwordScore}`]: true,
-                [`${classes.hasError}`]: error,
-              })}
-            >
-              <meter
-                value={passwordScore < 5 ? 5 : passwordScore}
-                low={30}
-                high={75}
-                optimum={100}
-                max={100}
-              />
-            </div>
-          )}
-        </Label>
+        )}
         {error && <Error message={error} />}
       </Wrapper>
     );
   }
 }
 
-export default injectSheet(styles, { injectTheme: true })(InputComponent);
+export default injectIntl(withStyles(styles, { injectTheme: true })(Input));