Skip to content

Commit

Permalink
fix: auth.config request should only be made on Login screen (outline…
Browse files Browse the repository at this point in the history 
…#1852)
  • Loading branch information
@tommoor
tommoor authored Jan 30, 2021
1 parent ae13347 commit ce2b246
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 129 deletions.
249 changes: 121 additions & 128 deletions app/scenes/Login/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
// @flow
import { find } from "lodash";
import { observer, inject } from "mobx-react";
import { observer } from "mobx-react";
import { BackIcon, EmailIcon } from "outline-icons";
import * as React from "react";
import { Redirect, Link } from "react-router-dom";
import { Redirect, Link, type Location } from "react-router-dom";
import styled from "styled-components";
import getQueryVariable from "shared/utils/getQueryVariable";
import AuthStore from "stores/AuthStore";
import ButtonLarge from "components/ButtonLarge";
import Fade from "components/Fade";
import Flex from "components/Flex";
Expand All @@ -18,147 +17,141 @@ import TeamLogo from "components/TeamLogo";
import Notices from "./Notices";
import Service from "./Service";
import env from "env";
import useStores from "hooks/useStores";

type Props = {
auth: AuthStore,
location: Object,
};
type Props = {|
location: Location,
|};

type State = {
emailLinkSentTo: string,
};
function Login({ location }: Props) {
const { auth } = useStores();
const { config } = auth;
const [emailLinkSentTo, setEmailLinkSentTo] = React.useState("");
const isCreate = location.pathname === "/create";

@observer
class Login extends React.Component<Props, State> {
state = {
emailLinkSentTo: "",
};
const handleReset = React.useCallback(() => {
setEmailLinkSentTo("");
}, []);

handleReset = () => {
this.setState({ emailLinkSentTo: "" });
};
const handleEmailSuccess = React.useCallback((email) => {
setEmailLinkSentTo(email);
}, []);

handleEmailSuccess = (email) => {
this.setState({ emailLinkSentTo: email });
};
React.useEffect(() => {
auth.fetchConfig();
}, []);

render() {
const { auth, location } = this.props;
const { config } = auth;
const isCreate = location.pathname === "/create";
console.log(config);

if (auth.authenticated) {
return <Redirect to="/home" />;
}

// we're counting on the config request being fast
if (!config) {
return null;
}

const hasMultipleServices = config.services.length > 1;
const defaultService = find(
config.services,
(service) => service.id === auth.lastSignedIn && !isCreate
);
if (auth.authenticated) {
return <Redirect to="/home" />;
}

const header =
env.DEPLOYMENT === "hosted" &&
(config.hostname ? (
<Back href={env.URL}>
<BackIcon color="currentColor" /> Back to home
</Back>
) : (
<Back href="https://www.getoutline.com">
<BackIcon color="currentColor" /> Back to website
</Back>
));

if (this.state.emailLinkSentTo) {
return (
<Background>
{header}
<Centered align="center" justify="center" column auto>
<PageTitle title="Check your email" />
<CheckEmailIcon size={38} color="currentColor" />

<Heading centered>Check your email</Heading>
<Note>
A magic sign-in link has been sent to the email{" "}
<em>{this.state.emailLinkSentTo}</em>, no password needed.
</Note>
<br />
<ButtonLarge onClick={this.handleReset} fullwidth neutral>
Back to login
</ButtonLarge>
</Centered>
</Background>
);
}
// we're counting on the config request being fast
if (!config) {
return null;
}

const hasMultipleServices = config.services.length > 1;
const defaultService = find(
config.services,
(service) => service.id === auth.lastSignedIn && !isCreate
);

const header =
env.DEPLOYMENT === "hosted" &&
(config.hostname ? (
<Back href={env.URL}>
<BackIcon color="currentColor" /> Back to home
</Back>
) : (
<Back href="https://www.getoutline.com">
<BackIcon color="currentColor" /> Back to website
</Back>
));

if (emailLinkSentTo) {
return (
<Background>
{header}
<Centered align="center" justify="center" column auto>
<PageTitle title="Login" />
<Logo>
{env.TEAM_LOGO && env.DEPLOYMENT !== "hosted" ? (
<TeamLogo src={env.TEAM_LOGO} />
) : (
<OutlineLogo size={38} fill="currentColor" />
)}
</Logo>

{isCreate ? (
<Heading centered>Create an account</Heading>
) : (
<Heading centered>Login to {config.name || "Outline"}</Heading>
)}

<Notices notice={getQueryVariable("notice")} />

{defaultService && (
<React.Fragment key={defaultService.id}>
<Service
isCreate={isCreate}
onEmailSuccess={this.handleEmailSuccess}
{...defaultService}
/>
{hasMultipleServices && (
<>
<Note>
You signed in with {defaultService.name} last time.
</Note>
<Or />
</>
)}
</React.Fragment>
)}

{config.services.map((service) => {
if (defaultService && service.id === defaultService.id) {
return null;
}

return (
<Service
key={service.id}
isCreate={isCreate}
onEmailSuccess={this.handleEmailSuccess}
{...service}
/>
);
})}

{isCreate && (
<Note>
Already have an account? Go to <Link to="/">login</Link>.
</Note>
)}
<PageTitle title="Check your email" />
<CheckEmailIcon size={38} color="currentColor" />

<Heading centered>Check your email</Heading>
<Note>
A magic sign-in link has been sent to the email{" "}
<em>{emailLinkSentTo}</em>, no password needed.
</Note>
<br />
<ButtonLarge onClick={handleReset} fullwidth neutral>
Back to login
</ButtonLarge>
</Centered>
</Background>
);
}

return (
<Background>
{header}
<Centered align="center" justify="center" column auto>
<PageTitle title="Login" />
<Logo>
{env.TEAM_LOGO && env.DEPLOYMENT !== "hosted" ? (
<TeamLogo src={env.TEAM_LOGO} />
) : (
<OutlineLogo size={38} fill="currentColor" />
)}
</Logo>

{isCreate ? (
<Heading centered>Create an account</Heading>
) : (
<Heading centered>Login to {config.name || "Outline"}</Heading>
)}

<Notices notice={getQueryVariable("notice")} />

{defaultService && (
<React.Fragment key={defaultService.id}>
<Service
isCreate={isCreate}
onEmailSuccess={handleEmailSuccess}
{...defaultService}
/>
{hasMultipleServices && (
<>
<Note>You signed in with {defaultService.name} last time.</Note>
<Or />
</>
)}
</React.Fragment>
)}

{config.services.map((service) => {
if (defaultService && service.id === defaultService.id) {
return null;
}

return (
<Service
key={service.id}
isCreate={isCreate}
onEmailSuccess={handleEmailSuccess}
{...service}
/>
);
})}

{isCreate && (
<Note>
Already have an account? Go to <Link to="/">login</Link>.
</Note>
)}
</Centered>
</Background>
);
}

const CheckEmailIcon = styled(EmailIcon)`
Expand Down Expand Up @@ -234,4 +227,4 @@ const Centered = styled(Flex)`
margin: 0 auto;
`;

export default inject("auth")(Login);
export default observer(Login);
1 change: 0 additions & 1 deletion app/stores/AuthStore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export default class AuthStore {
// no-op Safari private mode
}

setImmediate(() => this.fetchConfig());
this.rehydrate(data);

// persists this entire store to localstorage whenever any keys are changed
Expand Down

0 comments on commit ce2b246

Please sign in to comment.