132 lines
3.7 KiB
JavaScript
132 lines
3.7 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
import styled from 'styled-components';
|
|
import Grid from 'styled-components-grid';
|
|
import Hero from './components/Hero';
|
|
import HeroText from './components/HeroText';
|
|
import Button from './components/Button';
|
|
import SigninButtons from './components/SigninButtons';
|
|
import AuthNotices from './components/AuthNotices';
|
|
import Centered from './components/Centered';
|
|
import PageTitle from './components/PageTitle';
|
|
import { Team } from '../models';
|
|
|
|
type Props = {
|
|
team: Team,
|
|
guest?: boolean,
|
|
notice?: 'google-hd' | 'auth-error' | 'hd-not-allowed' | 'guest-success',
|
|
lastSignedIn: string,
|
|
googleSigninEnabled: boolean,
|
|
slackSigninEnabled: boolean,
|
|
hostname: string,
|
|
};
|
|
|
|
function SubdomainSignin({
|
|
team,
|
|
guest,
|
|
lastSignedIn,
|
|
notice,
|
|
googleSigninEnabled,
|
|
slackSigninEnabled,
|
|
hostname,
|
|
}: Props) {
|
|
googleSigninEnabled = !!team.googleId && googleSigninEnabled;
|
|
slackSigninEnabled = !!team.slackId && slackSigninEnabled;
|
|
|
|
const guestSigninEnabled = team.guestSignin;
|
|
const guestSigninForm = (
|
|
<div>
|
|
<form method="POST" action="/auth/email">
|
|
<EmailInput type="email" name="email" placeholder="jane@domain.com" />{' '}
|
|
<Button type="submit" as="button">
|
|
Sign In
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
|
|
// only show the "last signed in" hint if there is more than one option available
|
|
const signinHint =
|
|
googleSigninEnabled && slackSigninEnabled ? lastSignedIn : undefined;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<PageTitle title={`Sign in to ${team.name}`} />
|
|
<Grid>
|
|
<Hero>
|
|
<h1>{lastSignedIn ? 'Welcome back,' : 'Hey there,'}</h1>
|
|
<AuthNotices notice={notice} />
|
|
{guest && guestSigninEnabled ? (
|
|
<React.Fragment>
|
|
<HeroText>
|
|
Sign in with your email address to continue to {team.name}.
|
|
<Subdomain>{hostname}</Subdomain>
|
|
</HeroText>
|
|
{guestSigninForm}
|
|
<br />
|
|
|
|
<HeroText>Have a team account? Sign in with SSO…</HeroText>
|
|
<p>
|
|
<SigninButtons
|
|
googleSigninEnabled={googleSigninEnabled}
|
|
slackSigninEnabled={slackSigninEnabled}
|
|
lastSignedIn={signinHint}
|
|
/>
|
|
</p>
|
|
</React.Fragment>
|
|
) : (
|
|
<React.Fragment>
|
|
<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>
|
|
|
|
{guestSigninEnabled && (
|
|
<React.Fragment>
|
|
<HeroText>Have a guest account? Sign in with email…</HeroText>
|
|
{guestSigninForm}
|
|
</React.Fragment>
|
|
)}
|
|
</React.Fragment>
|
|
)}
|
|
</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 EmailInput = styled.input`
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
border: 1px solid #999;
|
|
min-width: 217px;
|
|
height: 56px;
|
|
`;
|
|
|
|
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;
|