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

This commit is contained in:
Tom Moor
2018-11-03 20:27:57 -07:00
parent 07e61bd347
commit 21b1c0747c
24 changed files with 512 additions and 130 deletions

View File

@@ -20,7 +20,7 @@ router.post('team.update', auth(), async ctx => {
authorize(user, 'update', team);
if (name) team.name = name;
if (subdomain) team.subdomain = subdomain;
if (subdomain !== undefined) team.subdomain = subdomain;
if (sharing !== undefined) team.sharing = sharing;
if (avatarUrl && avatarUrl.startsWith(`${endpoint}/uploads/${user.id}`)) {
team.avatarUrl = avatarUrl;

View File

@@ -2,6 +2,7 @@
import crypto from 'crypto';
import Router from 'koa-router';
import addMonths from 'date-fns/add_months';
import { stripSubdomain } from '../utils/domains';
import { capitalize } from 'lodash';
import { OAuth2Client } from 'google-auth-library';
import { User, Team } from '../models';
@@ -100,13 +101,15 @@ router.get('google.callback', async ctx => {
ctx.cookies.set('lastSignedIn', 'google', {
httpOnly: false,
expires: new Date('2100'),
domain: stripSubdomain(ctx.request.hostname),
});
ctx.cookies.set('accessToken', user.getJwtToken(), {
httpOnly: false,
expires: addMonths(new Date(), 1),
domain: stripSubdomain(ctx.request.hostname),
});
ctx.redirect('/');
ctx.redirect(team.url);
});
export default router;

View File

@@ -5,6 +5,7 @@ import addHours from 'date-fns/add_hours';
import addMonths from 'date-fns/add_months';
import { slackAuth } from '../../shared/utils/routeHelpers';
import { Authentication, Integration, User, Team } from '../models';
import { stripSubdomain } from '../utils/domains';
import * as Slack from '../slack';
const router = new Router();
@@ -18,6 +19,7 @@ router.get('slack', async ctx => {
ctx.cookies.set('state', state, {
httpOnly: false,
expires: addHours(new Date(), 1),
domain: stripSubdomain(ctx.request.hostname),
});
ctx.redirect(slackAuth(state));
});
@@ -29,7 +31,7 @@ router.get('slack.callback', async ctx => {
ctx.assertPresent(state, 'state is required');
if (state !== ctx.cookies.get('state') || error) {
ctx.redirect('/?notice=auth-error');
ctx.redirect(`/?notice=auth-error`);
return;
}
@@ -69,13 +71,15 @@ router.get('slack.callback', async ctx => {
ctx.cookies.set('lastSignedIn', 'slack', {
httpOnly: false,
expires: new Date('2100'),
domain: stripSubdomain(ctx.request.hostname),
});
ctx.cookies.set('accessToken', user.getJwtToken(), {
httpOnly: false,
expires: addMonths(new Date(), 1),
domain: stripSubdomain(ctx.request.hostname),
});
ctx.redirect('/');
ctx.redirect(team.url);
});
router.get('slack.commands', auth(), async ctx => {

View File

@@ -1,10 +1,10 @@
// @flow
import { type Context } from 'koa';
import type { Context } from 'koa';
export default function subdomainRedirect() {
return async function subdomainRedirectMiddleware(
export default function apexRedirect() {
return async function apexRedirectMiddleware(
ctx: Context,
next: () => Promise<void>
next: () => Promise<*>
) {
if (ctx.headers.host === 'getoutline.com') {
ctx.redirect(`https://www.${ctx.headers.host}${ctx.path}`);

View File

@@ -1,35 +1,52 @@
// @flow
import uuid from 'uuid';
import url from 'url';
import { DataTypes, sequelize, Op } from '../sequelize';
import { publicS3Endpoint, uploadToS3FromUrl } from '../utils/s3';
import { RESERVED_SUBDOMAINS } from '../domains';
import { RESERVED_SUBDOMAINS } from '../utils/domains';
import Collection from './Collection';
import User from './User';
const Team = sequelize.define('team', {
id: {
type: DataTypes.UUID,
defaultValue: DataTypes.UUIDV4,
primaryKey: true,
},
name: DataTypes.STRING,
subdomain: {
type: DataTypes.STRING,
allowNull: true,
validate: {
isLowercase: true,
isAlphanumeric: true,
len: [4, 32],
notIn: [RESERVED_SUBDOMAINS],
const Team = sequelize.define(
'team',
{
id: {
type: DataTypes.UUID,
defaultValue: DataTypes.UUIDV4,
primaryKey: true,
},
unique: true,
name: DataTypes.STRING,
subdomain: {
type: DataTypes.STRING,
allowNull: true,
validate: {
isLowercase: true,
is: [/^[a-z\d-]+$/, 'i'],
len: [4, 32],
notIn: [RESERVED_SUBDOMAINS],
},
unique: true,
},
slackId: { type: DataTypes.STRING, allowNull: true },
googleId: { type: DataTypes.STRING, allowNull: true },
avatarUrl: { type: DataTypes.STRING, allowNull: true },
sharing: { type: DataTypes.BOOLEAN, allowNull: false, defaultValue: true },
slackData: DataTypes.JSONB,
},
slackId: { type: DataTypes.STRING, allowNull: true },
googleId: { type: DataTypes.STRING, allowNull: true },
avatarUrl: { type: DataTypes.STRING, allowNull: true },
sharing: { type: DataTypes.BOOLEAN, allowNull: false, defaultValue: true },
slackData: DataTypes.JSONB,
});
{
getterMethods: {
url() {
if (!this.subdomain) return process.env.URL;
const u = url.parse(process.env.URL);
if (u.hostname) {
u.hostname = `${this.subdomain}.${u.hostname}`;
return u.href;
}
},
},
}
);
Team.associate = models => {
Team.hasMany(models.Collection, { as: 'collections' });

View File

@@ -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;

View File

@@ -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;

View File

@@ -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>
);
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -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>

View File

@@ -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,
};

View File

@@ -12,6 +12,8 @@ function present(ctx: Object, team: Team) {
slackConnected: !!team.slackId,
googleConnected: !!team.googleId,
sharing: team.sharing,
subdomain: team.subdomain,
url: team.url,
};
}

View File

@@ -5,10 +5,12 @@ import Koa from 'koa';
import Router from 'koa-router';
import sendfile from 'koa-sendfile';
import serve from 'koa-static';
import subdomainRedirect from './middlewares/subdomainRedirect';
import parseDomain from 'parse-domain';
import apexRedirect from './middlewares/apexRedirect';
import renderpage from './utils/renderpage';
import { robotsResponse } from './utils/robots';
import { NotFoundError } from './errors';
import { Team } from './models';
import Home from './pages/Home';
import About from './pages/About';
@@ -16,6 +18,7 @@ import Changelog from './pages/Changelog';
import Privacy from './pages/Privacy';
import Pricing from './pages/Pricing';
import Api from './pages/Api';
import SubdomainSignin from './pages/SubdomainSignin';
const isProduction = process.env.NODE_ENV === 'production';
const koa = new Koa();
@@ -64,20 +67,44 @@ router.get('/changelog', async ctx => {
router.get('/', async ctx => {
const lastSignedIn = ctx.cookies.get('lastSignedIn');
const accessToken = ctx.cookies.get('accessToken');
const subdomain = parseDomain(ctx.request.hostname).subdomain;
console.log('subdomain', subdomain);
if (accessToken) {
await renderapp(ctx);
} else {
await renderpage(
ctx,
<Home
notice={ctx.request.query.notice}
lastSignedIn={lastSignedIn}
googleSigninEnabled={!!process.env.GOOGLE_CLIENT_ID}
slackSigninEnabled={!!process.env.SLACK_KEY}
/>
);
return renderapp(ctx);
}
if (subdomain) {
const team = await Team.find({
where: { subdomain },
});
if (team && process.env.SUBDOMAINS_ENABLED) {
return renderpage(
ctx,
<SubdomainSignin
team={team}
notice={ctx.request.query.notice}
lastSignedIn={lastSignedIn}
googleSigninEnabled={!!process.env.GOOGLE_CLIENT_ID}
slackSigninEnabled={!!process.env.SLACK_KEY}
hostname={ctx.request.hostname}
/>
);
}
ctx.redirect(process.env.URL);
return;
}
return renderpage(
ctx,
<Home
notice={ctx.request.query.notice}
lastSignedIn={lastSignedIn}
googleSigninEnabled={!!process.env.GOOGLE_CLIENT_ID}
slackSigninEnabled={!!process.env.SLACK_KEY}
/>
);
});
// Other
@@ -90,7 +117,7 @@ router.get('*', async ctx => {
});
// middleware
koa.use(subdomainRedirect());
koa.use(apexRedirect());
koa.use(router.routes());
export default koa;

View File

@@ -1,4 +1,12 @@
// @flow
import parseDomain from 'parse-domain';
export function stripSubdomain(hostname) {
const parsed = parseDomain(hostname);
if (parsed.tld) return `${parsed.domain}.${parsed.tld}`;
return parsed.domain;
}
export const RESERVED_SUBDOMAINS = [
'admin',
'api',