Basic functionality in place, need improved errors and logged in redirect

server/pages/Home.js

@@ -4,8 +4,9 @@ import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import breakpoint from 'styled-components-breakpoint';
-import Notice from '../../shared/components/Notice';
+import AuthErrors from './components/AuthErrors';
 import Hero from './components/Hero';
+import HeroText from './components/HeroText';
 import Centered from './components/Centered';
 import SigninButtons from './components/SigninButtons';
 import SlackLogo from '../../shared/components/SlackLogo';
@@ -36,24 +37,7 @@ function Home(props: Props) {
           <p>
             <SigninButtons {...props} />
           </p>
-          {props.notice === 'google-hd' && (
-            <Notice>
-              Sorry, Google sign in cannot be used with a personal email. Please
-              try signing in with your company Google account.
-            </Notice>
-          )}
-          {props.notice === 'hd-not-allowed' && (
-            <Notice>
-              Sorry, your Google apps domain is not allowed. Please try again
-              with an allowed company domain.
-            </Notice>
-          )}
-          {props.notice === 'auth-error' && (
-            <Notice>
-              Authentication failed - we were unable to sign you in at this
-              time. Please try again.
-            </Notice>
-          )}
+          <AuthErrors notice={props.notice} />
         </Hero>
         <Mask>
           <Features>
@@ -232,13 +216,4 @@ const Footer = styled.div`
   `};
 `;
 
-const HeroText = styled.p`
-  font-size: 22px;
-  color: #666;
-  font-weight: 500;
-  text-align: left;
-  max-width: 600px;
-  margin-bottom: 2em;
-`;
-
 export default Home;

server/pages/SubdomainSignin.js

@@ -0,0 +1,81 @@
+// @flow
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+import styled from 'styled-components';
+import Grid from 'styled-components-grid';
+import Hero from './components/Hero';
+import HeroText from './components/HeroText';
+import SigninButtons from './components/SigninButtons';
+import AuthErrors from './components/AuthErrors';
+import Centered from './components/Centered';
+import { Team } from '../models';
+
+type Props = {
+  team: Team,
+  notice?: 'google-hd' | 'auth-error' | 'hd-not-allowed',
+  lastSignedIn: string,
+  googleSigninEnabled: boolean,
+  slackSigninEnabled: boolean,
+  hostname: string,
+};
+
+function SubdomainSignin({
+  team,
+  lastSignedIn,
+  notice,
+  googleSigninEnabled,
+  slackSigninEnabled,
+  hostname,
+}: Props) {
+  googleSigninEnabled = !!team.googleId && googleSigninEnabled;
+  slackSigninEnabled = !!team.slackId && slackSigninEnabled;
+
+  // only show the "last signed in" hint if there is more than one option available
+  const signinHint =
+    googleSigninEnabled && slackSigninEnabled ? lastSignedIn : undefined;
+
+  return (
+    <React.Fragment>
+      <Helmet>
+        <title>Outline - Sign in to {team.name}</title>
+      </Helmet>
+      <Grid>
+        <Hero>
+          <h1>{lastSignedIn ? 'Welcome back,' : 'Hey there,'}</h1>
+          <HeroText>
+            Sign in with your team account to continue to {team.name}.
+            <Subdomain>{hostname}</Subdomain>
+          </HeroText>
+          <p>
+            <SigninButtons
+              googleSigninEnabled={googleSigninEnabled}
+              slackSigninEnabled={slackSigninEnabled}
+              lastSignedIn={signinHint}
+            />
+          </p>
+          <AuthErrors notice={notice} />
+        </Hero>
+      </Grid>
+      <Alternative>
+        <p>
+          Trying to create or sign in to a different team?{' '}
+          <a href={process.env.URL}>Head to the homepage</a>.
+        </p>
+      </Alternative>
+    </React.Fragment>
+  );
+}
+
+const Subdomain = styled.span`
+  display: block;
+  font-weight: 500;
+  font-size: 16px;
+  margin-top: 0;
+`;
+
+const Alternative = styled(Centered)`
+  padding: 2em 0;
+  text-align: center;
+`;
+
+export default SubdomainSignin;

server/pages/components/AuthErrors.js

@@ -0,0 +1,32 @@
+// @flow
+import * as React from 'react';
+import Notice from '../../../shared/components/Notice';
+
+type Props = {
+  notice?: string,
+};
+
+export default function AuthErrors({ notice }: Props) {
+  return (
+    <React.Fragment>
+      {notice === 'google-hd' && (
+        <Notice>
+          Sorry, Google sign in cannot be used with a personal email. Please try
+          signing in with your company Google account.
+        </Notice>
+      )}
+      {notice === 'hd-not-allowed' && (
+        <Notice>
+          Sorry, your Google apps domain is not allowed. Please try again with
+          an allowed company domain.
+        </Notice>
+      )}
+      {notice === 'auth-error' && (
+        <Notice>
+          Authentication failed - we were unable to sign you in at this time.
+          Please try again.
+        </Notice>
+      )}
+    </React.Fragment>
+  );
+}

server/pages/components/Hero.js

@@ -11,6 +11,11 @@ const Hero = styled(Centered)`
     font-size: 3.5em;
     line-height: 1em;
   }
+
+  h2 {
+    font-size: 2.5em;
+    line-height: 1em;
+  }
 `;
 
 export default Hero;

server/pages/components/HeroText.js

@@ -0,0 +1,13 @@
+// @flow
+import styled from 'styled-components';
+
+const HeroText = styled.p`
+  font-size: 22px;
+  color: #666;
+  font-weight: 500;
+  text-align: left;
+  max-width: 600px;
+  margin-bottom: 2em;
+`;
+
+export default HeroText;

server/pages/components/Navigation.js

@@ -16,7 +16,7 @@ import {
 function TopNavigation() {
   return (
     <Nav>
-      <Brand href="/">Outline</Brand>
+      <Brand href={process.env.URL}>Outline</Brand>
       <Menu>
         <MenuItemDesktop>
           <a href="/#features">Features</a>

server/pages/components/SigninButtons.js

@@ -8,7 +8,7 @@ import SlackLogo from '../../../shared/components/SlackLogo';
 import breakpoint from 'styled-components-breakpoint';
 
 type Props = {
-  lastSignedIn: string,
+  lastSignedIn?: string,
   googleSigninEnabled: boolean,
   slackSigninEnabled: boolean,
 };