Renames, clear token, show signin options based on env

app/stores/AuthStore.js

@@ -29,7 +29,6 @@ class AuthStore {
     return JSON.stringify({
       user: this.user,
       team: this.team,
-      token: this.token,
       oauthState: this.oauthState,
     });
   }
@@ -57,7 +56,7 @@ class AuthStore {
     this.user = null;
     this.token = null;
 
-    Cookie.remove('loggedIn', { path: '/' });
+    Cookie.remove('accessToken', { path: '/' });
     await localForage.clear();
     window.location.href = BASE_URL;
   };
@@ -106,7 +105,6 @@ class AuthStore {
     );
     this.user = res.data.user;
     this.team = res.data.team;
-    this.token = res.data.accessToken;
 
     return {
       success: true,
@@ -123,10 +121,8 @@ class AuthStore {
     }
     this.user = data.user;
     this.team = data.team;
-    this.token = Cookie.get('accessToken') || data.token;
-    console.log('TOKEN', this.token);
-
     this.oauthState = data.oauthState;
+    this.token = Cookie.get('accessToken') || data.token;
 
     autorun(() => {
       try {

server/auth/google.js

@@ -66,7 +66,7 @@ router.get('google.callback', async ctx => {
     await team.createFirstCollection(user.id);
   }
 
-  ctx.cookies.set('lastLoggedIn', 'google', {
+  ctx.cookies.set('lastSignedIn', 'google', {
     httpOnly: false,
     expires: new Date('2100'),
   });

server/pages/Home.js

@@ -5,15 +5,17 @@ import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import breakpoint from 'styled-components-breakpoint';
 import Hero from './components/Hero';
-import SignupButton from './components/SignupButton';
+import SigninButtons from './components/SigninButtons';
 import { developers, githubUrl } from '../../shared/utils/routeHelpers';
 import { color } from '../../shared/styles/constants';
 
 type Props = {
-  lastLoggedIn: string,
+  lastSignedIn: string,
+  googleSigninEnabled: boolean,
+  slackSigninEnabled: boolean,
 };
 
-function Home({ lastLoggedIn }: Props) {
+function Home(props: Props) {
   return (
     <span>
       <Helmet>
@@ -27,7 +29,7 @@ function Home({ lastLoggedIn }: Props) {
             logs, brainstorming, & more…
           </HeroText>
           <p>
-            <SignupButton lastLoggedIn={lastLoggedIn} />
+            <SigninButtons {...props} />
           </p>
         </Hero>
         <Features reverse={{ mobile: true, tablet: false, desktop: false }}>
@@ -94,10 +96,10 @@ function Home({ lastLoggedIn }: Props) {
         <Footer>
           <h2>Create an account</h2>
           <p>
-            On the same page as us? Create a beta account to give Outline a try.
+            On the same page as us? Create a free account to give Outline a try.
           </p>
           <FooterCTA>
-            <SignupButton />
+            <SigninButtons {...props} />
           </FooterCTA>
         </Footer>
       </Grid>

server/pages/components/SigninButtons.js

@@ -0,0 +1,72 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { signin } from '../../../shared/utils/routeHelpers';
+import Flex from '../../../shared/components/Flex';
+import GoogleLogo from '../../../shared/components/GoogleLogo';
+import SlackLogo from '../../../shared/components/SlackLogo';
+import { color } from '../../../shared/styles/constants';
+
+type Props = {
+  lastSignedIn: string,
+  googleSigninEnabled: boolean,
+  slackSigninEnabled: boolean,
+};
+
+const SigninButtons = ({
+  lastSignedIn,
+  slackSigninEnabled,
+  googleSigninEnabled,
+}: Props) => {
+  return (
+    <Flex justify="center">
+      {slackSigninEnabled && (
+        <Flex column>
+          <Button href={signin('slack')}>
+            <SlackLogo />
+            <Spacer>Sign In with Slack</Spacer>
+          </Button>
+          <LastLogin>
+            {lastSignedIn === 'slack' && 'You signed in with Slack previously'}
+          </LastLogin>
+        </Flex>
+      )}
+      &nbsp;
+      {googleSigninEnabled && (
+        <Flex column>
+          <Button href={signin('google')}>
+            <GoogleLogo />
+            <Spacer>Sign In with Google</Spacer>
+          </Button>
+          <LastLogin>
+            {lastSignedIn === 'google' &&
+              'You signed in with Google previously'}
+          </LastLogin>
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+const Spacer = styled.span`
+  padding-left: 10px;
+`;
+
+const Button = styled.a`
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 20px;
+  color: ${color.white};
+  background: ${color.black};
+  border-radius: 4px;
+  font-weight: 600;
+  height: 56px;
+`;
+
+const LastLogin = styled.p`
+  font-size: 12px;
+  color: ${color.slate};
+  padding-top: 4px;
+`;
+
+export default SigninButtons;

server/pages/components/SignupButton.js

@@ -1,61 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { signin } from '../../../shared/utils/routeHelpers';
-import Flex from '../../../shared/components/Flex';
-import GoogleLogo from '../../../shared/components/GoogleLogo';
-import SlackLogo from '../../../shared/components/SlackLogo';
-import { color } from '../../../shared/styles/constants';
-
-type Props = {
-  lastLoggedIn: string,
-};
-
-const SignupButton = ({ lastLoggedIn }: Props) => {
-  return (
-    <Flex justify="center">
-      <Flex column>
-        <Button href={signin('slack')}>
-          <SlackLogo />
-          <Spacer>Sign In with Slack</Spacer>
-        </Button>
-        <LastLogin>
-          {lastLoggedIn === 'slack' && 'You signed in with Slack previously'}
-        </LastLogin>
-      </Flex>
-      &nbsp;
-      <Flex column>
-        <Button href={signin('google')}>
-          <GoogleLogo />
-          <Spacer>Sign In with Google</Spacer>
-        </Button>
-        <LastLogin>
-          {lastLoggedIn === 'google' && 'You signed in with Google previously'}
-        </LastLogin>
-      </Flex>
-    </Flex>
-  );
-};
-
-const Spacer = styled.span`
-  padding-left: 10px;
-`;
-
-const Button = styled.a`
-  display: inline-flex;
-  align-items: center;
-  padding: 10px 20px;
-  color: ${color.white};
-  background: ${color.black};
-  border-radius: 4px;
-  font-weight: 600;
-  height: 56px;
-`;
-
-const LastLogin = styled.p`
-  font-size: 12px;
-  color: ${color.slate};
-  padding-top: 4px;
-`;
-
-export default SignupButton;

server/routes.js

@@ -62,14 +62,20 @@ router.get('/changelog', async ctx => {
 
 // home page
 router.get('/', async ctx => {
-  const lastLoggedIn = ctx.cookies.get('lastLoggedIn');
+  const lastSignedIn = ctx.cookies.get('lastSignedIn');
   const accessToken = ctx.cookies.get('accessToken');
-  console.log(lastLoggedIn, accessToken);
 
   if (accessToken) {
     await renderapp(ctx);
   } else {
-    await renderpage(ctx, <Home lastLoggedIn={lastLoggedIn} />);
+    await renderpage(
+      ctx,
+      <Home
+        lastSignedIn={lastSignedIn}
+        googleSigninEnabled={!!process.env.GOOGLE_CLIENT_ID}
+        slackSigninEnabled={!!process.env.SLACK_KEY}
+      />
+    );
   }
 });