10 files changed, 101 insertions, 78 deletions

diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index 3cb08feb1..72ba7b2e3 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 
+import ErrorBoundary from '../util/ErrorBoundary';
 import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
 
@@ -36,18 +37,22 @@ export default @observer class SettingsLayout extends Component {
     return (
       <Appear transitionName="fadeIn-fast">
         <div className="settings-wrapper">
-          <button
-            className="settings-wrapper__action"
-            onClick={closeSettings}
-          />
-          <div className="settings franz-form">
-            {navigation}
-            {children}
+          <ErrorBoundary>
             <button
-              className="settings__close mdi mdi-close"
+              type="button"
+              className="settings-wrapper__action"
               onClick={closeSettings}
             />
-          </div>
+            <div className="settings franz-form">
+              {navigation}
+              {children}
+              <button
+                type="button"
+                className="settings__close mdi mdi-close"
+                onClick={closeSettings}
+              />
+            </div>
+          </ErrorBoundary>
         </div>
       </Appear>
     );
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 06c7074dd..9c9543749 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -132,21 +132,19 @@ export default @observer class AccountDashboard extends Component {
           )}
 
           {!isLoading && userInfoRequestFailed && (
-            <div>
-              <Infobox
-                icon="alert"
-                type="danger"
-                ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
-                ctaLoading={isLoading}
-                ctaOnClick={retryUserInfoRequest}
-              >
-                {intl.formatMessage(messages.userInfoRequestFailed)}
-              </Infobox>
-            </div>
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryUserInfoRequest}
+            >
+              {intl.formatMessage(messages.userInfoRequestFailed)}
+            </Infobox>
           )}
 
           {!userInfoRequestFailed && (
-            <div>
+            <Fragment>
               {!isLoading && (
                 <div className="account">
                   <div className="account__box account__box--flex">
@@ -169,7 +167,8 @@ export default @observer class AccountDashboard extends Component {
                         {`${user.firstname} ${user.lastname}`}
                       </h2>
                       {user.organization && `${user.organization}, `}
-                      {user.email}<br />
+                      {user.email}
+                      <br />
                       {!user.isEnterprise && !user.isPremium && (
                         <span className="badge badge">{intl.formatMessage(messages.accountTypeBasic)}</span>
                       )}
@@ -194,7 +193,7 @@ export default @observer class AccountDashboard extends Component {
                 ) : (
                   <div className="account franz-form">
                     {orders.length > 0 && (
-                      <div>
+                      <Fragment>
                         <div className="account__box">
                           <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
                           <div className="account__subscription">
@@ -219,6 +218,7 @@ export default @observer class AccountDashboard extends Component {
                                   </td>
                                   <td className="invoices__action">
                                     <button
+                                      type="button"
                                       onClick={() => openExternalUrl(order.invoiceUrl)}
                                     >
                                       {intl.formatMessage(messages.invoiceDownload)}
@@ -229,7 +229,7 @@ export default @observer class AccountDashboard extends Component {
                             </tbody>
                           </table>
                         </div>
-                      </div>
+                      </Fragment>
                     )}
                   </div>
                 )
@@ -262,20 +262,6 @@ export default @observer class AccountDashboard extends Component {
                 </div>
               )}
 
-              {user.isMiner && (
-                <div className="account franz-form">
-                  <div className="account__box account__box">
-                    <h2>Miner Info</h2>
-                    <div className="account__subscription">
-                      <div>
-                        <p>To maintain a high security level for all our Franz users, we had to remove the miner. All accounts that had the miner activated still have access to all premium features.</p>
-                        <p>Every financial support is still much appreciated.</p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-
               {!user.isEnterprise && !user.isPremium && (
                 isLoadingPlans ? (
                   <Loader />
@@ -312,7 +298,7 @@ export default @observer class AccountDashboard extends Component {
                   </div>
                 </div>
               )}
-            </div>
+            </Fragment>
           )}
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index b86d94ac7..953f702f8 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -59,7 +59,9 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           className="settings-navigation__link"
           activeClassName="is-active"
         >
-          {intl.formatMessage(messages.yourServices)} <span className="badge">{serviceCount}</span>
+          {intl.formatMessage(messages.yourServices)}
+          {' '}
+          <span className="badge">{serviceCount}</span>
         </Link>
         <Link
           to="/settings/user"
@@ -93,4 +95,3 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
     );
   }
 }
-
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index dae8891b3..3bb0852b2 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -15,6 +15,7 @@ export default @observer class RecipeItem extends Component {
 
     return (
       <button
+        type="button"
         className="recipe-teaser"
         onClick={onClick}
       >
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index cd783200f..00cd725cf 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -129,11 +129,17 @@ export default @observer class RecipesDashboard extends Component {
                 activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
                 onClick={() => resetSearch()}
               >
-                {intl.formatMessage(messages.devRecipes)} ({devRecipesCount})
+                {intl.formatMessage(messages.devRecipes)}
+                {' '}
+(
+                {devRecipesCount}
+)
               </Link>
             )}
             <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request">
-              {intl.formatMessage(messages.missingService)} <i className="mdi mdi-open-in-new" />
+              {intl.formatMessage(messages.missingService)}
+              {' '}
+              <i className="mdi mdi-open-in-new" />
             </a>
           </div>
           {/* )} */}
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index d16ec35b8..468d85c45 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
@@ -14,6 +14,7 @@ import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Button from '../../ui/Button';
 import ImageUpload from '../../ui/ImageUpload';
+import Select from '../../ui/Select';
 
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 
@@ -96,7 +97,11 @@ const messages = defineMessages({
   },
   headlineProxy: {
     id: 'settings.service.form.proxy.headline',
-    defaultMessage: '!!!Proxy Settings',
+    defaultMessage: '!!!HTTP/HTTPS Proxy Settings',
+  },
+  proxyRestartInfo: {
+    id: 'settings.service.form.proxy.restartInfo',
+    defaultMessage: '!!!Please restart Franz after changing proxy Settings.',
   },
   proxyInfo: {
     id: 'settings.service.form.proxy.info',
@@ -129,6 +134,7 @@ export default @observer class EditServiceForm extends Component {
   static defaultProps = {
     service: {},
   };
+
   static contextTypes = {
     intl: intlShape,
   };
@@ -270,14 +276,14 @@ export default @observer class EditServiceForm extends Component {
                 {recipe.hasCustomUrl && (
                   <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
                     {user.isPremium || recipe.author.find(a => a.email === user.email) ? (
-                      <div>
+                      <Fragment>
                         <Input field={form.$('customUrl')} />
                         {form.error === 'url-validation-error' && (
                           <p className="franz-form__error">
                             {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
                           </p>
                         )}
-                      </div>
+                      </Fragment>
                     ) : (
                       <div className="center premium-info">
                         <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p>
@@ -307,12 +313,12 @@ export default @observer class EditServiceForm extends Component {
                   <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
                   <Toggle field={form.$('isBadgeEnabled')} />
                   {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
-                    <div>
+                    <Fragment>
                       <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
                       <p className="settings__help">
                         {intl.formatMessage(messages.indirectMessageInfo)}
                       </p>
-                    </div>
+                    </Fragment>
                   )}
                 </div>
 
@@ -333,6 +339,12 @@ export default @observer class EditServiceForm extends Component {
               </div>
             </div>
 
+            <PremiumFeatureContainer>
+              <div className="settings__settings-group">
+                <Select field={form.$('spellcheckerLanguage')} />
+              </div>
+            </PremiumFeatureContainer>
+
             {isProxyFeatureEnabled && (
               <PremiumFeatureContainer condition={isProxyFeaturePremiumFeature}>
                 <div className="settings__settings-group">
@@ -342,18 +354,31 @@ export default @observer class EditServiceForm extends Component {
                   </h3>
                   <Toggle field={form.$('proxy.isEnabled')} />
                   {form.$('proxy.isEnabled').value && (
-                    <div>
-                      <Input field={form.$('proxy.host')} />
-                      <Input field={form.$('proxy.user')} />
-                      <Input
-                        field={form.$('proxy.password')}
-                        showPasswordToggle
-                      />
+                    <Fragment>
+                      <div className="grid">
+                        <div className="grid__row">
+                          <Input field={form.$('proxy.host')} className="proxyHost" />
+                          <Input field={form.$('proxy.port')} />
+                        </div>
+                      </div>
+                      <div className="grid">
+                        <div className="grid__row">
+                          <Input field={form.$('proxy.user')} />
+                          <Input
+                            field={form.$('proxy.password')}
+                            showPasswordToggle
+                          />
+                        </div>
+                      </div>
+                      <p>
+                        <span className="mdi mdi-information" />
+                        {intl.formatMessage(messages.proxyRestartInfo)}
+                      </p>
                       <p>
                         <span className="mdi mdi-information" />
                         {intl.formatMessage(messages.proxyInfo)}
                       </p>
-                    </div>
+                    </Fragment>
                   )}
                 </div>
               </PremiumFeatureContainer>
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index 84080519b..ebc618a00 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -27,6 +27,7 @@ export default @observer class ServiceItem extends Component {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     goToServiceForm: PropTypes.func.isRequired,
   };
+
   static contextTypes = {
     intl: intlShape,
   };
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index e7dfaf106..a12df7372 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -101,17 +101,15 @@ export default @observer class ServicesDashboard extends Component {
             />
           )}
           {!isLoading && servicesRequestFailed && (
-            <div>
-              <Infobox
-                icon="alert"
-                type="danger"
-                ctaLabel={intl.formatMessage(messages.tryReloadServices)}
-                ctaLoading={isLoading}
-                ctaOnClick={retryServicesRequest}
-              >
-                {intl.formatMessage(messages.servicesRequestFailed)}
-              </Infobox>
-            </div>
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadServices)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryServicesRequest}
+            >
+              {intl.formatMessage(messages.servicesRequestFailed)}
+            </Infobox>
           )}
 
           {status.length > 0 && status.includes('updated') && (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 1ec2ab614..a92e559f3 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -1,5 +1,5 @@
 import { remote } from 'electron';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -171,21 +171,23 @@ export default @observer class EditSettingsForm extends Component {
             <PremiumFeatureContainer
               condition={isSpellcheckerPremiumFeature}
             >
-              <div>
+              <Fragment>
                 <Toggle
                   field={form.$('enableSpellchecking')}
                 />
                 {form.$('enableSpellchecking').value && (
                   <Select field={form.$('spellcheckerLanguage')} />
                 )}
-              </div>
+              </Fragment>
             </PremiumFeatureContainer>
             <a
               href={FRANZ_TRANSLATION}
               target="_blank"
               className="link"
             >
-              {intl.formatMessage(messages.translationHelp)} <i className="mdi mdi-open-in-new" />
+              {intl.formatMessage(messages.translationHelp)}
+              {' '}
+              <i className="mdi mdi-open-in-new" />
             </a>
 
             {/* Advanced */}
@@ -233,7 +235,9 @@ export default @observer class EditSettingsForm extends Component {
             )}
             <br />
             <Toggle field={form.$('beta')} />
-            {intl.formatMessage(messages.currentVersion)} {remote.app.getVersion()}
+            {intl.formatMessage(messages.currentVersion)}
+            {' '}
+            {remote.app.getVersion()}
           </form>
         </div>
       </div>
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index b825f844a..0e3ac6b10 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -48,10 +48,6 @@ export default @observer class EditServiceForm extends Component {
     isEnterprise: PropTypes.bool.isRequired,
   };
 
-  static defaultProps = {
-    service: {},
-  };
-
   static contextTypes = {
     intl: intlShape,
   };