SignIn / SignOut working

frontend/menus/AccountMenu.js

@@ -24,7 +24,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
   handleLogout = () => {
     this.props.auth.logout();
-    this.props.history.push('/');
+    window.location.href = BASE_URL;
   };
 
   render() {

frontend/scenes/SlackAuth/SlackAuth.js

@@ -5,6 +5,7 @@ import queryString from 'query-string';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { client } from 'utils/ApiClient';
+import { slackAuth } from 'utils/routeHelpers';
 
 import AuthStore from 'stores/AuthStore';
 
@@ -33,7 +34,7 @@ type Props = {
       } else {
         this.redirectTo = '/auth/error';
       }
-    } else {
+    } else if (code) {
       if (this.props.location.pathname === '/auth/slack/commands') {
         // User adding webhook integrations
         try {
@@ -43,7 +44,7 @@ type Props = {
           this.redirectTo = '/auth/error';
         }
       } else {
-        // Regular Slack authentication
+        // Slack authentication
         const redirectTo = sessionStorage.getItem('redirectTo');
         sessionStorage.removeItem('redirectTo');
 
@@ -52,6 +53,9 @@ type Props = {
           ? (this.redirectTo = redirectTo || '/dashboard')
           : (this.redirectTo = '/auth/error');
       }
+    } else {
+      // Sign In
+      window.location.href = slackAuth(this.props.auth.getOauthState());
     }
   }
 

frontend/stores/AuthStore.js

@@ -34,7 +34,7 @@ class AuthStore {
   @action logout = () => {
     this.user = null;
     this.token = null;
-    Cookie.remove('loggedId', { path: '/' });
+    Cookie.remove('loggedIn', { path: '/' });
   };
 
   @action getOauthState = () => {

frontend/utils/routeHelpers.js

@@ -22,6 +22,31 @@ export function documentUrl(doc: Document): string {
   return doc.url;
 }
 
+export function slackAuth(
+  state: string,
+  scopes: string[] = [
+    'identity.email',
+    'identity.basic',
+    'identity.avatar',
+    'identity.team',
+  ],
+  redirectUri: string = `${BASE_URL}/auth/slack`
+): string {
+  const baseUrl = 'https://slack.com/oauth/authorize';
+  const params = {
+    client_id: SLACK_KEY,
+    scope: scopes ? scopes.join(' ') : '',
+    redirect_uri: redirectUri,
+    state,
+  };
+
+  const urlParams = Object.keys(params)
+    .map(key => `${key}=${encodeURIComponent(params[key])}`)
+    .join('&');
+
+  return `${baseUrl}?${urlParams}`;
+}
+
 export function documentNewUrl(doc: Document): string {
   const newUrl = `${doc.collection.url}/new`;
   if (doc.parentDocumentId) {

server/pages/About.js

@@ -1,14 +1,8 @@
 // @flow
 import React from 'react';
-import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import { Helmet } from 'react-helmet';
-
-const Header = styled.div`
-  width: 100%;
-  padding: 3em;
-  text-align: center;
-`;
+import Hero from './components/Hero';
 
 export default function About() {
   return (
@@ -16,12 +10,12 @@ export default function About() {
       <Helmet>
         <title>About</title>
       </Helmet>
-      <Header>
+      <Hero>
         <h1>About Atlas</h1>
         <p>
           Just a proof of concept for multiple pages.
         </p>
-      </Header>
+      </Hero>
     </Grid>
   );
 }

server/pages/Home.js

@@ -2,25 +2,24 @@
 import React from 'react';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
+import Hero from './components/Hero';
 
 const Unit = Grid.Unit;
 
-const Header = styled.div`
-  width: 100%;
+const Feature = styled(Unit)`
   padding: 3em;
-  text-align: center;
 `;
 
 export default function Home() {
   return (
     <Grid>
-      <Header>
+      <Hero>
         <h1>Your team’s knowledge base</h1>
         <p>
           Documentation, meeting notes, playbooks, onboarding, work logs, brainstorming, decisions, & more…
         </p>
-        <a href="">Sign In</a>
-      </Header>
+        <a href="/auth/slack">Sign In</a>
+      </Hero>
       <Unit size={{ desktop: 1 / 2 }} />
       <Unit size={{ desktop: 1 / 2 }}>
         <h2>Blazing Fast</h2>
@@ -39,30 +38,30 @@ export default function Home() {
 
       <Unit size={{ desktop: 1 / 2 }} />
       <Unit size={{ desktop: 1 / 2 }}>
-        <h2>Markdown Support</h2>
+        <h2>Beautiful Editor</h2>
         <p>
           Documents are stored in Markdown and you can export them at any time. Markdown shortcuts are also built right into the editor so you can easily format using markdown syntax or our GUI.
         </p>
       </Unit>
 
-      <Unit size={{ desktop: 1 / 3 }}>
+      <Feature size={{ desktop: 1 / 3 }}>
         <h2>Powerful Search</h2>
         <p>
           Built-in search makes that one document easy to find in a large knowledgebase.
         </p>
-      </Unit>
-      <Unit size={{ desktop: 1 / 3 }}>
+      </Feature>
+      <Feature size={{ desktop: 1 / 3 }}>
         <h2>API & Integrations</h2>
         <p>
-          Atlas is built on it’s own API, treat Atlas as a CMS or automatically great documents from outside events.
+          Atlas is built on it’s own API, treat Atlas as a CMS or automatically create documents from outside events.
         </p>
-      </Unit>
-      <Unit size={{ desktop: 1 / 3 }}>
+      </Feature>
+      <Feature size={{ desktop: 1 / 3 }}>
         <h2>Open Source</h2>
         <p>
-          Want to contribute or host Atlas yourself? All of the code is on GitHub.
+          Want to contribute or host Atlas yourself? All of the code is available on GitHub.
         </p>
-      </Unit>
+      </Feature>
     </Grid>
   );
 }

server/pages/Pricing.js

@@ -1,14 +1,8 @@
 // @flow
 import React from 'react';
-import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import { Helmet } from 'react-helmet';
-
-const Header = styled.div`
-  width: 100%;
-  padding: 3em;
-  text-align: center;
-`;
+import Hero from './components/Hero';
 
 export default function Pricing() {
   return (
@@ -16,12 +10,12 @@ export default function Pricing() {
       <Helmet>
         <title>Pricing</title>
       </Helmet>
-      <Header>
+      <Hero>
         <h1>Pricing</h1>
         <p>
-          Just a proof of concept for multiple pages.
+          Explore Atlas with a 14 day trial, free forever for teams smaller than 5.
         </p>
-      </Header>
+      </Hero>
     </Grid>
   );
 }

server/pages/components/Hero.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+
+const Hero = styled.div`
+  width: 100%;
+  padding: 4em 3em;
+  text-align: center;
+`;
+
+export default Hero;

server/static/index.html

@@ -25,7 +25,7 @@
 
 <body>
   <div id="root"></div>
+  <script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js" data-apikey="<%= BUGSNAG_KEY %>"></script>
 </body>
-<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js" data-apikey="<%= BUGSNAG_KEY %>"></script>
 
-</html>
+</html>