Update client dependencies

client/js/components/pages/Connect.js

@@ -37,12 +37,39 @@ class Connect extends Component {
     return (
       <div>
         {!hexIP && <TextInput name="username" />}
-        <TextInput name="password" type="password" />
-        <TextInput name="realname" />
+        <TextInput name="password" type="password" noTrim />
+        <TextInput name="realname" noTrim />
       </div>
     );
   };
 
+  transformPort = port => {
+    if (!port) {
+      return this.props.values.tls ? 6697 : 6667;
+    }
+    return port;
+  };
+
+  transformChannels = channels => {
+    const comma = channels[channels.length - 1] === ',';
+
+    channels = channels
+      .split(',')
+      .map(channel => {
+        channel = channel.trim();
+        if (channel) {
+          if (isValidChannel(channel, false) && channel[0] !== '#') {
+            channel = `#${channel}`;
+          }
+        }
+        return channel;
+      })
+      .filter(s => s)
+      .join(',');
+
+    return comma ? channels + ',' : channels;
+  };
+
   render() {
     const { defaults, values } = this.props;
     const { readOnly, showDetails } = defaults;
@@ -70,10 +97,15 @@ class Connect extends Component {
       form = (
         <Form className="connect-form">
           <h1>Connect</h1>
-          <TextInput name="name" autoCapitalize="words" />
+          <TextInput name="name" autoCapitalize="words" noTrim />
           <div className="connect-form-address">
             <TextInput name="host" noError />
-            <TextInput name="port" type="number" noError />
+            <TextInput
+              name="port"
+              type="number"
+              blurTransform={this.transformPort}
+              noError
+            />
             <Checkbox
               name="tls"
               label="SSL"
@@ -84,7 +116,7 @@ class Connect extends Component {
           <Error name="host" />
           <Error name="port" />
           <TextInput name="nick" />
-          <TextInput name="channels" />
+          <TextInput name="channels" transform={this.transformChannels} />
           {this.state.showOptionals && this.renderOptionals()}
           <i className="icon-ellipsis" onClick={this.handleShowClick} />
           <Button type="submit">Connect</Button>
@@ -120,16 +152,10 @@ export default withFormik({
       username: '',
       password: defaults.password ? '      ' : '',
       realname: '',
-      tls: defaults.ssl
+      tls: defaults.ssl || false
     };
   },
   validate: values => {
-    Object.keys(values).forEach(k => {
-      if (typeof values[k] === 'string') {
-        values[k] = values[k].trim();
-      }
-    });
-
     const errors = {};
 
     if (!values.host) {
@@ -138,9 +164,7 @@ export default withFormik({
       errors.host = 'Invalid host';
     }
 
-    if (!values.port) {
-      values.port = values.tls ? 6697 : 6667;
-    } else if (!isInt(values.port, 1, 65535)) {
+    if (!isInt(values.port, 1, 65535)) {
       errors.port = 'Invalid port';
     }
 
@@ -154,23 +178,18 @@ export default withFormik({
       errors.username = 'Invalid username';
     }
 
-    values.channels = values.channels
-      .split(',')
-      .map(channel => {
-        channel = channel.trim();
-        if (channel) {
-          if (isValidChannel(channel, false)) {
-            if (channel[0] !== '#') {
-              channel = `#${channel}`;
-            }
-          } else {
-            errors.channels = 'Invalid channel(s)';
-          }
-        }
-        return channel;
-      })
-      .filter(s => s)
-      .join(',');
+    const channels = values.channels.split(',');
+    for (let i = channels.length - 1; i >= 0; i--) {
+      if (i === channels.length - 1 && channels[i] === '') {
+        /* eslint-disable-next-line no-continue */
+        continue;
+      }
+
+      if (!isValidChannel(channels[i])) {
+        errors.channels = 'Invalid channel(s)';
+        break;
+      }
+    }
 
     return errors;
   },

client/js/components/ui/TextInput.js

@@ -4,6 +4,24 @@ import classnames from 'classnames';
 import capitalize from 'lodash/capitalize';
 import Error from 'components/ui/formik/Error';
 
+const getValue = (e, trim) => {
+  let v = e.target.value;
+
+  if (trim) {
+    v = v.trim();
+  }
+
+  if (e.target.type === 'number') {
+    v = parseFloat(v);
+    /* eslint-disable-next-line no-self-compare */
+    if (v !== v) {
+      v = '';
+    }
+  }
+
+  return v;
+};
+
 export default class TextInput extends PureComponent {
   constructor(props) {
     super(props);
@@ -38,49 +56,83 @@ export default class TextInput extends PureComponent {
   };
 
   render() {
-    const { name, label = capitalize(name), noError, ...props } = this.props;
+    const {
+      name,
+      label = capitalize(name),
+      noError,
+      noTrim,
+      transform,
+      blurTransform,
+      ...props
+    } = this.props;
 
     return (
       <FastField
         name={name}
-        render={({ field, form }) => {
-          return (
-            <>
-              <div className="textinput">
-                <input
-                  className={field.value && 'value'}
-                  type="text"
-                  name={name}
-                  autoCapitalize="off"
-                  autoCorrect="off"
-                  autoComplete="off"
-                  spellCheck="false"
-                  ref={this.input}
-                  onFocus={this.handleFocus}
-                  {...field}
-                  {...props}
-                />
-                <span
-                  className={classnames('textinput-1', {
-                    value: field.value,
-                    error: form.touched[name] && form.errors[name]
-                  })}
-                >
-                  {label}
-                </span>
-                <span
-                  className={classnames('textinput-2', {
-                    value: field.value,
-                    error: form.touched[name] && form.errors[name]
-                  })}
-                >
-                  {label}
-                </span>
-              </div>
-              {!noError && <Error name={name} />}
-            </>
-          );
-        }}
+        render={({ field, form }) => (
+          <>
+            <div className="textinput">
+              <input
+                className={field.value && 'value'}
+                type="text"
+                name={name}
+                autoCapitalize="off"
+                autoCorrect="off"
+                autoComplete="off"
+                spellCheck="false"
+                ref={this.input}
+                onFocus={this.handleFocus}
+                {...field}
+                {...props}
+                onChange={e => {
+                  let v = getValue(e, !noTrim);
+                  if (transform) {
+                    v = transform(v);
+                  }
+
+                  if (v !== field.value) {
+                    form.setFieldValue(name, v);
+
+                    if (props.onChange) {
+                      props.onChange(e);
+                    }
+                  }
+                }}
+                onBlur={e => {
+                  if (blurTransform) {
+                    const v = blurTransform(getValue(e));
+
+                    if (v && v !== field.value) {
+                      form.setFieldValue(name, v, false);
+                    }
+                  }
+
+                  field.onBlur(e);
+                  if (props.onBlur) {
+                    props.onBlur(e);
+                  }
+                }}
+              />
+              <span
+                className={classnames('textinput-1', {
+                  value: field.value,
+                  error: form.touched[name] && form.errors[name]
+                })}
+              >
+                {label}
+              </span>
+              <span
+                className={classnames('textinput-2', {
+                  value: field.value,
+                  error: form.touched[name] && form.errors[name]
+                })}
+              >
+                {label}
+              </span>
+            </div>
+            {!noError && <Error name={name} />}
+          </>
+        )}
       />
     );
   }

client/js/components/ui/formik/Checkbox.js

@@ -5,22 +5,19 @@ import Checkbox from 'components/ui/Checkbox';
 const FormikCheckbox = ({ name, onChange, ...props }) => (
   <FastField
     name={name}
-    render={({ field, form }) => {
-      return (
-        <Checkbox
-          name={name}
-          checked={field.value}
-          onChange={e => {
-            form.setFieldTouched(name, true);
-            field.onChange(e);
-            if (onChange) {
-              onChange(e);
-            }
-          }}
-          {...props}
-        />
-      );
-    }}
+    render={({ field }) => (
+      <Checkbox
+        name={name}
+        checked={field.value}
+        onChange={e => {
+          field.onChange(e);
+          if (onChange) {
+            onChange(e);
+          }
+        }}
+        {...props}
+      />
+    )}
   />
 );