Open all desktop app links in browser

desktop/src/config.js

@@ -11,6 +11,8 @@ module.exports = {
   APP_VERSION: app.getVersion(),
   APP_REMOTE_URL: 'https://spectrum.chat/login',
   APP_DEV_URL: 'http://localhost:3000/login',
+  APP_REMOTE_HOME_URL: 'https://spectrum.chat',
+  APP_DEV_HOME_URL: 'http://localhost:3000',
 
   GITHUB_URL: 'https://github.com/withspectrum/spectrum',
   GITHUB_URL_LICENSE:

desktop/src/main.js

@@ -1,7 +1,7 @@
 // @flow
 const electron = require('electron');
 const windowStateKeeper = require('electron-window-state');
-const { app, BrowserWindow } = electron;
+const { app, BrowserWindow, shell } = electron;
 const isDev = require('electron-is-dev');
 
 const FIFTEEN_MINUTES = 900000;
@@ -74,6 +74,11 @@ function createWindow() {
   });
 
   mainWindowState.manage(mainWindow);
+
+  mainWindow.webContents.on('new-window', (event, url) => {
+    event.preventDefault();
+    shell.openExternal(url);
+  });
 }
 
 // This method will be called when Electron has finished
@@ -99,15 +104,3 @@ app.on('activate', () => {
     createWindow();
   }
 });
-
-app.on('web-contents-created', (event, wc) => {
-  wc.on('before-input-event', (event, input) => {
-    if (input.key === ']' && input.meta && !input.shift && !input.control) {
-      if (wc.canGoForward()) wc.goForward();
-    }
-
-    if (input.key === '[' && input.meta && !input.shift && !input.control) {
-      if (wc.canGoBack()) wc.goBack();
-    }
-  });
-});

desktop/src/menu.js

@@ -1,6 +1,7 @@
 // @flow
 const { dialog, Menu, MenuItem, shell } = require('electron');
 const checkForUpdates = require('./autoUpdate');
+const isDev = require('electron-is-dev');
 
 const CONFIG = require('./config');
 
@@ -41,6 +42,42 @@ const template = [
       { role: 'quit' },
     ],
   },
+  {
+    label: 'Go',
+    submenu: [
+      {
+        label: 'Home',
+        accelerator: 'CmdOrCtrl+Shift+H',
+        click: function(item, focusedWindow) {
+          if (focusedWindow) {
+            focusedWindow.webContents.loadURL(
+              isDev ? CONFIG.APP_DEV_HOME_URL : CONFIG.APP_REMOTE_HOME_URL
+            );
+          }
+        },
+      },
+      {
+        label: 'Forward',
+        accelerator: 'CmdOrCtrl+]',
+        click: function(item, focusedWindow) {
+          if (focusedWindow) {
+            const wc = focusedWindow.webContents;
+            if (wc && wc.canGoForward()) wc.goForward();
+          }
+        },
+      },
+      {
+        label: 'Back',
+        accelerator: 'CmdOrCtrl+[',
+        click: function(item, focusedWindow) {
+          if (focusedWindow) {
+            const wc = focusedWindow.webContents;
+            if (wc && wc.canGoBack()) wc.goBack();
+          }
+        },
+      },
+    ],
+  },
   {
     label: 'Edit',
     submenu: [

src/components/linkPreview/index.js

@@ -37,7 +37,7 @@ export class LinkPreview extends Component {
         size={this.props.size}
         padding={image}
         target="_blank"
-        rel="noopener"
+        rel="noopener noreferrer"
         href={url || trueUrl}
         margin={margin}
       >

src/components/profile/community.js

@@ -173,7 +173,11 @@ class CommunityWithData extends React.Component<Props> {
               {community.website && (
                 <ExtLink>
                   <Icon glyph="link" size={24} />
-                  <a href={addProtocolToString(community.website)}>
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={addProtocolToString(community.website)}
+                  >
                     {community.website}
                   </a>
                 </ExtLink>

src/components/threadFeed/index.js

@@ -24,22 +24,22 @@ const NullState = ({ viewContext, search }) => {
   let cp;
 
   if (viewContext && viewContext === 'community') {
-    hd = "This community's just getting started...";
-    cp = "Why don't you kick things off?";
+    hd = 'This community’s just getting started...';
+    cp = 'Why don’t you kick things off?';
   }
 
   if (viewContext && viewContext === 'channel') {
-    hd = "There's nothing in this channel yet";
+    hd = 'There’s nothing in this channel yet';
     cp = 'But you could be the first person to post something here!';
   }
 
   if (viewContext && viewContext === 'profile') {
-    hd = "This user hasn't posted yet";
+    hd = 'This user hasn’t posted yet';
     cp = 'But you could message them!';
   }
 
   if (search) {
-    hd = "Sorry, doesn't ring a bell";
+    hd = 'Sorry, doesn’t ring a bell';
     cp = 'You can always try again, though!';
   }
 
@@ -53,32 +53,39 @@ const UpsellState = ({ community }) => (
       <h3>Welcome to your new community!</h3>
     </UpsellHeader>
     <p>
-      You've already taken a huge step, but there's one problem - there's no one
+      You’ve already taken a huge step, but there’s one problem - there’s no one
       here yet!
     </p>
     <p>
-      This is usually the hardest part for new communities, but don't worry!
-      We've got a few suggestions to help you get things started...
+      This is usually the hardest part for new communities, but don’t worry!
+      We’ve got a few suggestions to help you get things started...
     </p>
     <p>
-      First things first, you'll want to <b>start a couple threads</b>.
+      First things first, you’ll want to <b>start a couple threads</b>.
     </p>
     <p>
       Open-ended questions are a great start, for example:
       <ul>
         <li>ask new members to introduce themselves</li>
         <li>
-          ask people about their favorite tools or what they're working on
+          ask people about their favorite tools or what they’re working on
         </li>
-        <li>ask for suggestions on a problem you're facing</li>
+        <li>ask for suggestions on a problem you’re facing</li>
       </ul>
     </p>
     <p>
-      Once you've got a couple threads started, make sure to{' '}
+      Once you’ve got a couple threads started, make sure to{' '}
       <b>help people find your community</b>. Talking about your community on
       social media like Twitter or Facebook is a great start - or you could add
-      our <a href="https://github.com/withspectrum/badge">badge</a> to a project
-      repo or your website.
+      our{' '}
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://github.com/withspectrum/badge"
+      >
+        badge
+      </a>{' '}
+      to a project repo or your website.
     </p>
     <p>
       You can also <b>invite people by email</b> or{' '}
@@ -87,11 +94,17 @@ const UpsellState = ({ community }) => (
     </p>
     <UpsellFooter>
       <p>
-        If you've encountered an issue, want a new feature, or just need some
+        If you’ve encountered an issue, want a new feature, or just need some
         help, you can always find the Spectrum team in the{' '}
         <Link to={'/spectrum'}>Spectrum Support</Link> community or on{' '}
-        <a href="https://twitter.com/withspectrum">Twitter</a> and we'd be more
-        than happy to give you a hand.
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://twitter.com/withspectrum"
+        >
+          Twitter
+        </a>{' '}
+        and we’d be more than happy to give you a hand.
       </p>
     </UpsellFooter>
   </Upsell>

src/views/dashboard/components/inboxThread.js

@@ -184,7 +184,11 @@ class InboxThread extends React.Component<Props> {
 
                     return (
                       <AttachmentsContainer active={active} key={url}>
-                        <MiniLinkPreview href={url} target="_blank">
+                        <MiniLinkPreview
+                          href={url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
                           <Icon glyph="link" size={18} />
                           <EllipsisText>{url}</EllipsisText>
                         </MiniLinkPreview>

src/views/userSettings/components/notificationSettings.js

@@ -125,7 +125,11 @@ class NotificationSettings extends React.Component<Props, State> {
                   You have blocked browser push notifications on this device!
                 </strong>{' '}
                 Unblock them by following{' '}
-                <a href="https://support.sendpulse.com/456261-How-to-Unblock-Web-Push-Notifications">
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://support.sendpulse.com/456261-How-to-Unblock-Web-Push-Notifications"
+                >
                   these steps
                 </a>.
               </Notice>