Separate O365, Outlook, add GMX and Yandex, add notes about required settings

app/internal_packages/onboarding/lib/account-providers.es6

@@ -1,3 +1,5 @@
+import { React } from 'mailspring-exports';
+
 const AccountProviders = [
   {
     provider: 'gmail',
@@ -9,9 +11,9 @@ const AccountProviders = [
   {
     provider: 'office365',
     displayName: 'Office 365',
-    icon: 'ic-settings-account-outlook.png',
-    headerIcon: 'setup-icon-provider-outlook.png',
-    color: '#0078d7',
+    icon: 'ic-settings-account-office365.png',
+    headerIcon: 'setup-icon-provider-office365.png',
+    color: '#D83B01',
   },
   {
     provider: 'yahoo',
@@ -20,9 +22,25 @@ const AccountProviders = [
     headerIcon: 'setup-icon-provider-yahoo.png',
     color: '#a76ead',
   },
+  {
+    provider: 'outlook',
+    displayName: 'Outlook.com / Hotmail',
+    displayNameShort: 'Outlook',
+    icon: 'ic-settings-account-outlook.png',
+    headerIcon: 'setup-icon-provider-outlook.png',
+    color: '#0078d7',
+  },
   {
     provider: 'icloud',
     displayName: 'iCloud',
+    note: (
+      <span>
+        <strong>Important:</strong> iCloud requires that you create a unique app password for email
+        apps like Mailspring. Follow{' '}
+        <a href="https://support.apple.com/en-us/HT204397">these instructions</a> to create one and
+        then paste it below.
+      </span>
+    ),
     icon: 'ic-settings-account-icloud.png',
     headerIcon: 'setup-icon-provider-icloud.png',
     color: '#61bfe9',
@@ -30,15 +48,47 @@ const AccountProviders = [
   {
     provider: 'fastmail',
     displayName: 'FastMail',
-    title: 'Set up your account',
     icon: 'ic-settings-account-fastmail.png',
     headerIcon: 'setup-icon-provider-fastmail.png',
     color: '#24345a',
   },
+  {
+    provider: 'gmx',
+    displayName: 'GMX',
+    note: (
+      <span>
+        Enter your email account credentials to get started.<br />
+        <strong>Important:</strong> GMX requires that you{' '}
+        <a href="https://support.gmx.com/pop-imap/toggle.html">enable IMAP</a> before using email
+        clients like Mailspring.
+      </span>
+    ),
+    icon: 'ic-settings-account-gmx.png',
+    headerIcon: 'setup-icon-provider-gmx.png',
+    color: '#1D387F',
+  },
+  {
+    provider: 'yandex',
+    displayName: 'Yandex',
+    note: (
+      <span>
+        <strong>Important:</strong> You may need to{' '}
+        <a href="https://phone-passport.yandex.com/phones">link a phone number</a> to your Yandex
+        account before connecting email apps. If you use two-factor auth, you need to create an{' '}
+        <a href="https://yandex.com/support/passport/authorization/app-passwords.html">
+          App Password
+        </a>{' '}
+        for Mailspring.
+      </span>
+    ),
+    icon: 'ic-settings-account-yandex.png',
+    headerIcon: 'setup-icon-provider-yandex.png',
+    color: '#fff',
+  },
   {
     provider: 'imap',
     displayName: 'IMAP / SMTP',
-    title: 'Set up your IMAP account',
+    displayNameShort: 'IMAP',
     icon: 'ic-settings-account-imap.png',
     headerIcon: 'setup-icon-provider-imap.png',
     color: '#aaa',

app/internal_packages/onboarding/lib/form-error-message.jsx

@@ -23,17 +23,19 @@ const FormErrorMessage = props => {
     );
   }
 
-  const linkMatch = RegExpUtils.urlRegex({ matchEntireString: false }).exec(message);
-  if (linkMatch) {
-    const link = linkMatch[0];
-    return (
-      <div className="message error">
-        {message.substr(0, linkMatch.index)}
-        <a href={link}>{link}</a>
-        {message.substr(linkMatch.index + link.length)}
-        {rawLogLink}
-      </div>
-    );
+  if (typeof message === 'string') {
+    const linkMatch = RegExpUtils.urlRegex({ matchEntireString: false }).exec(message);
+    if (linkMatch) {
+      const link = linkMatch[0];
+      return (
+        <div className="message error">
+          {message.substr(0, linkMatch.index)}
+          <a href={link}>{link}</a>
+          {message.substr(linkMatch.index + link.length)}
+          {rawLogLink}
+        </div>
+      );
+    }
   }
 
   return (
@@ -45,8 +47,8 @@ const FormErrorMessage = props => {
 };
 
 FormErrorMessage.propTypes = {
-  empty: PropTypes.string,
-  message: PropTypes.string,
+  empty: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };
 
 export default FormErrorMessage;

app/internal_packages/onboarding/lib/page-account-onboarding-success.jsx

@@ -26,7 +26,10 @@ class AccountOnboardingSuccess extends Component {
           />
         </div>
         <div>
-          <h2>Successfully connected to {providerConfig.displayName}!</h2>
+          <h2>
+            Successfully connected to{' '}
+            {providerConfig.displayNameShort || providerConfig.displayName}!
+          </h2>
           <h3>Adding your account to Mailspring…</h3>
         </div>
       </div>

app/internal_packages/onboarding/lib/page-account-settings.jsx

@@ -22,11 +22,17 @@ class AccountBasicSettingsForm extends React.Component {
   };
 
   static titleLabel = providerConfig => {
-    return providerConfig.title || `Add your ${providerConfig.displayName} account`;
+    return (
+      providerConfig.title ||
+      `Add your ${providerConfig.displayNameShort || providerConfig.displayName} account`
+    );
   };
 
-  static subtitleLabel = () => {
-    return `Enter your email account credentials to get started. Mailspring\nstores your email password securely and it is never sent to our servers.`;
+  static subtitleLabel = providerConfig => {
+    return (
+      providerConfig.note ||
+      `Enter your email account credentials to get started. Mailspring\nstores your email password securely and it is never sent to our servers.`
+    );
   };
 
   static validateAccount = account => {

app/internal_packages/onboarding/styles/onboarding.less

@@ -260,7 +260,7 @@
 
   .provider-list {
     margin: auto;
-    width: 280px;
+    width: 570px;
   }
   .cloud-sync-note {
     margin-bottom: 20px;
@@ -277,6 +277,14 @@
     text-align: left;
     cursor: default;
     line-height: 63px;
+    width: 280px;
+    display: inline-block;
+    border: 1px solid rgba(35, 31, 32, 0.1);
+    border-radius: 4px;
+    margin-left: 2.5px;
+    margin-right: 2.5px;
+    margin-bottom: 5px;
+    background: rgba(255, 255, 255, 0.4);
 
     .icon-container {
       width: 50px;
@@ -289,7 +297,7 @@
     }
   }
   .provider:hover {
-    background: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.7);
   }
 }
 

app/internal_packages/preferences/lib/tabs/preferences-identity.jsx

@@ -218,7 +218,13 @@ class PreferencesIdentity extends React.Component {
 
   render() {
     const { identity } = this.state;
-    const { firstName, lastName, emailAddress, stripePlan, stripePlanEffective } = identity;
+    const {
+      firstName,
+      lastName,
+      emailAddress,
+      stripePlan = '',
+      stripePlanEffective = '',
+    } = identity;
 
     const logout = () => Actions.logoutNylasIdentity();
 

app/src/browser/application-touch-bar.es6

@@ -142,6 +142,9 @@ export default class ApplicationTouchBar {
     });
 
     flushGroupIfPresent();
-    global.application.getMainWindow().setTouchBar(new TouchBar(final));
+
+    const win = global.application.getMainWindow();
+    if (!win) return;
+    win.setTouchBar(new TouchBar(final));
   }
 }

app/src/browser/application.es6

@@ -118,7 +118,8 @@ export default class Application extends EventEmitter {
   }
 
   getMainWindow() {
-    return this.windowManager.get(WindowManager.MAIN_WINDOW).browserWindow;
+    const win = this.windowManager.get(WindowManager.MAIN_WINDOW);
+    return win ? win.browserWindow : null;
   }
 
   getAllWindowDimensions() {