Skip to content

Commit ce2b246

Browse files
tommoortommoor
authored
fix: auth.config request should only be made on Login screen (outline#1852)
1 parent ae13347 commit ce2b246

File tree

2 files changed

+121
-129
lines changed

2 files changed

+121
-129
lines changed

‎app/scenes/Login/index.js

Lines changed: 121 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
// @flow
22
import { find } from "lodash";
3-
import { observer, inject } from "mobx-react";
3+
import { observer } from "mobx-react";
44
import { BackIcon, EmailIcon } from "outline-icons";
55
import * as React from "react";
6-
import { Redirect, Link } from "react-router-dom";
6+
import { Redirect, Link, type Location } from "react-router-dom";
77
import styled from "styled-components";
88
import getQueryVariable from "shared/utils/getQueryVariable";
9-
import AuthStore from "stores/AuthStore";
109
import ButtonLarge from "components/ButtonLarge";
1110
import Fade from "components/Fade";
1211
import Flex from "components/Flex";
@@ -18,147 +17,141 @@ import TeamLogo from "components/TeamLogo";
1817
import Notices from "./Notices";
1918
import Service from "./Service";
2019
import env from "env";
20+
import useStores from "hooks/useStores";
2121

22-
type Props = {
23-
auth: AuthStore,
24-
location: Object,
25-
};
22+
type Props = {|
23+
location: Location,
24+
|};
2625

27-
type State = {
28-
emailLinkSentTo: string,
29-
};
26+
function Login({ location }: Props) {
27+
const { auth } = useStores();
28+
const { config } = auth;
29+
const [emailLinkSentTo, setEmailLinkSentTo] = React.useState("");
30+
const isCreate = location.pathname === "/create";
3031

31-
@observer
32-
class Login extends React.Component<Props, State> {
33-
state = {
34-
emailLinkSentTo: "",
35-
};
32+
const handleReset = React.useCallback(() => {
33+
setEmailLinkSentTo("");
34+
}, []);
3635

37-
handleReset = () => {
38-
this.setState({ emailLinkSentTo: "" });
39-
};
36+
const handleEmailSuccess = React.useCallback((email) => {
37+
setEmailLinkSentTo(email);
38+
}, []);
4039

41-
handleEmailSuccess = (email) => {
42-
this.setState({ emailLinkSentTo: email });
43-
};
40+
React.useEffect(() => {
41+
auth.fetchConfig();
42+
}, []);
4443

45-
render() {
46-
const { auth, location } = this.props;
47-
const { config } = auth;
48-
const isCreate = location.pathname === "/create";
44+
console.log(config);
4945

50-
if (auth.authenticated) {
51-
return <Redirect to="/home" />;
52-
}
53-
54-
// we're counting on the config request being fast
55-
if (!config) {
56-
return null;
57-
}
58-
59-
const hasMultipleServices = config.services.length > 1;
60-
const defaultService = find(
61-
config.services,
62-
(service) => service.id === auth.lastSignedIn && !isCreate
63-
);
46+
if (auth.authenticated) {
47+
return <Redirect to="/home" />;
48+
}
6449

65-
const header =
66-
env.DEPLOYMENT === "hosted" &&
67-
(config.hostname ? (
68-
<Back href={env.URL}>
69-
<BackIcon color="currentColor" /> Back to home
70-
</Back>
71-
) : (
72-
<Back href="https://www.getoutline.com">
73-
<BackIcon color="currentColor" /> Back to website
74-
</Back>
75-
));
76-
77-
if (this.state.emailLinkSentTo) {
78-
return (
79-
<Background>
80-
{header}
81-
<Centered align="center" justify="center" column auto>
82-
<PageTitle title="Check your email" />
83-
<CheckEmailIcon size={38} color="currentColor" />
84-
85-
<Heading centered>Check your email</Heading>
86-
<Note>
87-
A magic sign-in link has been sent to the email{" "}
88-
<em>{this.state.emailLinkSentTo}</em>, no password needed.
89-
</Note>
90-
<br />
91-
<ButtonLarge onClick={this.handleReset} fullwidth neutral>
92-
Back to login
93-
</ButtonLarge>
94-
</Centered>
95-
</Background>
96-
);
97-
}
50+
// we're counting on the config request being fast
51+
if (!config) {
52+
return null;
53+
}
9854

55+
const hasMultipleServices = config.services.length > 1;
56+
const defaultService = find(
57+
config.services,
58+
(service) => service.id === auth.lastSignedIn && !isCreate
59+
);
60+
61+
const header =
62+
env.DEPLOYMENT === "hosted" &&
63+
(config.hostname ? (
64+
<Back href={env.URL}>
65+
<BackIcon color="currentColor" /> Back to home
66+
</Back>
67+
) : (
68+
<Back href="https://www.getoutline.com">
69+
<BackIcon color="currentColor" /> Back to website
70+
</Back>
71+
));
72+
73+
if (emailLinkSentTo) {
9974
return (
10075
<Background>
10176
{header}
10277
<Centered align="center" justify="center" column auto>
103-
<PageTitle title="Login" />
104-
<Logo>
105-
{env.TEAM_LOGO && env.DEPLOYMENT !== "hosted" ? (
106-
<TeamLogo src={env.TEAM_LOGO} />
107-
) : (
108-
<OutlineLogo size={38} fill="currentColor" />
109-
)}
110-
</Logo>
111-
112-
{isCreate ? (
113-
<Heading centered>Create an account</Heading>
114-
) : (
115-
<Heading centered>Login to {config.name || "Outline"}</Heading>
116-
)}
117-
118-
<Notices notice={getQueryVariable("notice")} />
119-
120-
{defaultService && (
121-
<React.Fragment key={defaultService.id}>
122-
<Service
123-
isCreate={isCreate}
124-
onEmailSuccess={this.handleEmailSuccess}
125-
{...defaultService}
126-
/>
127-
{hasMultipleServices && (
128-
<>
129-
<Note>
130-
You signed in with {defaultService.name} last time.
131-
</Note>
132-
<Or />
133-
</>
134-
)}
135-
</React.Fragment>
136-
)}
137-
138-
{config.services.map((service) => {
139-
if (defaultService && service.id === defaultService.id) {
140-
return null;
141-
}
142-
143-
return (
144-
<Service
145-
key={service.id}
146-
isCreate={isCreate}
147-
onEmailSuccess={this.handleEmailSuccess}
148-
{...service}
149-
/>
150-
);
151-
})}
152-
153-
{isCreate && (
154-
<Note>
155-
Already have an account? Go to <Link to="/">login</Link>.
156-
</Note>
157-
)}
78+
<PageTitle title="Check your email" />
79+
<CheckEmailIcon size={38} color="currentColor" />
80+
81+
<Heading centered>Check your email</Heading>
82+
<Note>
83+
A magic sign-in link has been sent to the email{" "}
84+
<em>{emailLinkSentTo}</em>, no password needed.
85+
</Note>
86+
<br />
87+
<ButtonLarge onClick={handleReset} fullwidth neutral>
88+
Back to login
89+
</ButtonLarge>
15890
</Centered>
15991
</Background>
16092
);
16193
}
94+
95+
return (
96+
<Background>
97+
{header}
98+
<Centered align="center" justify="center" column auto>
99+
<PageTitle title="Login" />
100+
<Logo>
101+
{env.TEAM_LOGO && env.DEPLOYMENT !== "hosted" ? (
102+
<TeamLogo src={env.TEAM_LOGO} />
103+
) : (
104+
<OutlineLogo size={38} fill="currentColor" />
105+
)}
106+
</Logo>
107+
108+
{isCreate ? (
109+
<Heading centered>Create an account</Heading>
110+
) : (
111+
<Heading centered>Login to {config.name || "Outline"}</Heading>
112+
)}
113+
114+
<Notices notice={getQueryVariable("notice")} />
115+
116+
{defaultService && (
117+
<React.Fragment key={defaultService.id}>
118+
<Service
119+
isCreate={isCreate}
120+
onEmailSuccess={handleEmailSuccess}
121+
{...defaultService}
122+
/>
123+
{hasMultipleServices && (
124+
<>
125+
<Note>You signed in with {defaultService.name} last time.</Note>
126+
<Or />
127+
</>
128+
)}
129+
</React.Fragment>
130+
)}
131+
132+
{config.services.map((service) => {
133+
if (defaultService && service.id === defaultService.id) {
134+
return null;
135+
}
136+
137+
return (
138+
<Service
139+
key={service.id}
140+
isCreate={isCreate}
141+
onEmailSuccess={handleEmailSuccess}
142+
{...service}
143+
/>
144+
);
145+
})}
146+
147+
{isCreate && (
148+
<Note>
149+
Already have an account? Go to <Link to="/">login</Link>.
150+
</Note>
151+
)}
152+
</Centered>
153+
</Background>
154+
);
162155
}
163156

164157
const CheckEmailIcon = styled(EmailIcon)`
@@ -234,4 +227,4 @@ const Centered = styled(Flex)`
234227
margin: 0 auto;
235228
`;
236229

237-
export default inject("auth")(Login);
230+
export default observer(Login);

‎app/stores/AuthStore.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ export default class AuthStore {
4747
// no-op Safari private mode
4848
}
4949

50-
setImmediate(() => this.fetchConfig());
5150
this.rehydrate(data);
5251

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

0 commit comments

Comments
 (0)