fix(onboarding): fix IMAP port fields, enter key behavior

Summary:
Fix issue where ports were being stored as strings - add a format field for
account settings that turns on casting to int when set to `integer`.

Change behavior of pressing enter - rather than always submitting, have it
move to the next page on multi-page account settings.

Test Plan: manual

Reviewers: evan, bengotow

Reviewed By: bengotow

Subscribers: bengotow

Differential Revision: https://phab.nylas.com/D2094

internal_packages/onboarding/lib/account-settings-page.cjsx

@@ -79,11 +79,16 @@ class AccountSettingsPage extends React.Component
 
   _onSettingsChanged: (event) =>
     field = event.target.dataset.field
+    format = event.target.dataset.format
+    int_formatter = (a) ->
+      i = parseInt(a)
+      if isNaN(i) then "" else i
+    formatter = if format is 'integer' then int_formatter else (a) -> a
     settings = @state.settings
     if event.target.type is 'checkbox'
       settings[field] = event.target.checked
     else
-      settings[field] = event.target.value
+      settings[field] = formatter(event.target.value)
     @setState({settings})
 
   _onValueChanged: (event) =>
@@ -94,7 +99,11 @@ class AccountSettingsPage extends React.Component
 
   _onFieldKeyPress: (event) =>
     if event.key in ['Enter', 'Return']
-      @_onSubmit()
+      pages = @state.provider.pages || []
+      if pages.length > @state.pageNumber+1
+        @_onNextButton()
+      else
+        @_onSubmit()
 
   _renderTitle: =>
     if @state.provider.name is 'gmail'
@@ -129,6 +138,7 @@ class AccountSettingsPage extends React.Component
            onChange={@_onValueChanged}
            onKeyPress={@_onFieldKeyPress}
            data-field={field.name}
+           data-format={field.format} ? ""
            className={errclass}
            placeholder={field.placeholder} />
       </label>
@@ -144,6 +154,7 @@ class AccountSettingsPage extends React.Component
              onChange={@_onSettingsChanged}
              onKeyPress={@_onFieldKeyPress}
              data-field={field.name}
+             data-format={field.format} ? ""
              className={field.className ? ""} />
           {field.label}
         </label>
@@ -159,6 +170,7 @@ class AccountSettingsPage extends React.Component
              onChange={@_onSettingsChanged}
              onKeyPress={@_onFieldKeyPress}
              data-field={field.name}
+             data-format={field.format} ? ""
              className={errclass+(field.className ? "")}
              placeholder={field.placeholder} />
         </label>

internal_packages/onboarding/lib/account-types.coffee

@@ -125,6 +125,7 @@ Providers = [
         label: 'Port (optional)'
         className: 'half'
         default: 993
+        format: 'integer'
         page: 1
       }, {
         name: 'imap_ssl_enabled'
@@ -157,6 +158,7 @@ Providers = [
         placeholder: '587'
         label: 'Port (optional)'
         className: 'half'
+        format: 'integer'
         default: 587
         page: 2
       }, {