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