9000515521

Committed 08 May 2024 10:46AM UTC coverage: 31.825% (-0.06%) from 31.881%

Build # 9000515521

Build Type

Pull #9244

github

Committed by

oetherington

Commit Message

Don't show emoji banner when setting username for the first time

Pull Request Pull Request #9244: [EA] Emoji Banner May '24

Run Details

4731 of 38910 branches covered (12.16%)

Branch coverage included in aggregate %.

49 of 186 new or added lines in 11 files covered. (26.34%)

98 existing lines in 8 files now uncovered.

27641 of 62810 relevant lines covered (44.01%)

177.87 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

9.66

/packages/lesswrong/components/ea-forum/auth/EALoginPopover.tsx

import React, { ChangeEvent, FC, FormEvent, useCallback, useEffect, useState } from "react";
import { Components, registerComponent } from "../../../lib/vulcan-lib";
import { useAuth0Client } from "../../hooks/useAuth0Client";
import { Link } from "../../../lib/reactRouterWrapper";
import { lightbulbIcon } from "../../icons/lightbulbIcon";
import { FacebookIcon } from "../../icons/FacebookIcon";
import classNames from "classnames";
import { AnalyticsContext } from "../../../lib/analyticsEvents";
import { useRefetchCurrentUser } from "../../common/withUser";
import { LoginAction, useLoginPopoverContext } from "../../hooks/useLoginPopoverContext";

const styles = (theme: ThemeType) => ({
  root: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    width: 386,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "24px",
    textAlign: "center",
  },
  close: {
    color: theme.palette.grey[600],
    cursor: "pointer",
    position: "absolute",
    top: 16,
    right: 16,
    width: 20,
    height: 20,
  },
  lightbulb: {
    color: theme.palette.primary.dark,
    width: 52,
  },
  title: {
    fontSize: 24,
    fontWeight: 600,
  },
  formContainer: {
    width: "100%",
  },
  form: {
    display: "flex",
    flexDirection: "column",
    gap: "8px",
    width: "100%",
    marginBottom: 12,
  },
  inputContainer: {
    display: "flex",
    alignItems: "center",
    gap: "12px",
    width: "100%",
    borderRadius: theme.borderRadius.default,
    background: theme.palette.panelBackground.loginInput,
    padding: "0px 17px",
  },
  input: {
    flexGrow: 1,
    padding: "15px 0px",
    color: theme.palette.grey[1000],
    background: "transparent",
    fontSize: 14,
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontWeight: 500,
    "&::placeholder": {
      color: theme.palette.grey[600],
    },
  },
  inputBottomMargin: {
    marginBottom: 10,
  },
  showPasswordButton: {
    width: 16,
    cursor: "pointer",
    color: theme.palette.grey[600],
  },
  forgotPassword: {
    color: theme.palette.primary.main,
    fontSize: 14,
    fontWeight: 600,
    marginTop: 4,
    marginBottom: 8,
  },
  message: {
    marginBottom: 4,
    fontSize: 14,
    fontWeight: 500,
  },
  error: {
    color: theme.palette.text.error2,
    marginBottom: 4,
    fontSize: 14,
    fontWeight: 500,
  },
  button: {
    width: "100%",
    height: 50,
    padding: "15px 17px",
    fontWeight: 600,
    "& .Loading-spinner": {
      height: "100%",
      display: "flex",
      alignItems: "center",
    },
  },
  orContainer: {
    display: "flex",
    alignItems: "center",
    gap: "11px",
    width: "100%",
    margin: "24px 0",
    fontWeight: 500,
    color: theme.palette.grey[600],
  },
  orHr: {
    borderTop: `1px solid ${theme.palette.border.eaButtonGreyOutline}`,
    flexGrow: 1,
  },
  socialContainer: {
    display: "flex",
    flexDirection: "column",
    gap: "8px",
    width: "100%",
    marginBottom: 24,
  },
  socialButton: {
    "& svg, & img": {
      width: 20,
      height: 20,
      marginRight: 16,
    },
    "& .MuiButton-label": {
      justifyContent: "flex-start",
    },
  },
  switchPrompt: {
    fontSize: 14,
  },
  switchPromptButton: {
    color: theme.palette.primary.main,
    fontWeight: 700,
    userSelect: "none",
  },
  finePrint: {
    color: theme.palette.grey[600],
    marginTop: 16,
    fontSize: 13,
    fontWeight: 500,
    lineHeight: "140%",
    "& a": {
      textDecoration: "underline",
      "&:hover": {
        textDecoration: "none",
        opacity: 1,
      },
    },
  },
  passwordPolicy: {
    textAlign: "left",
  },
});

type Tree = {
  root: string;
  content: Tree[];
}

const treeify = (data: string): Tree[] => {
  const result: Tree[] = [];
  const levels = [result];
  for (let line of data.split("\n")) {
    let level = line.search(/\S/);
    const trimmed = line.trim();
    const root = trimmed.match(/(\*\s*)?(.*)/)?.[2] ?? trimmed;
    if (root) {
      const content: Tree[] = [];
      levels[level].push({root, content});
      levels[++level] = content;
    }
  }
  return result;
}

const TreeDisplay: FC<{ tree: Tree[] }> = ({ tree }) => {
  return (
    <ul>
      {tree.map(({root, content}) => (
        <>
          <li>{root}</li>
          <TreeDisplay tree={content} />
        </>
      ))}
    </ul>
  );
}

const PasswordPolicy: FC<{
  policy?: string,
  classes: ClassesType<typeof styles>,
}> = ({ policy, classes }) => {
  if (!policy) {
    return null;
  }

  return (
    <div className={classes.passwordPolicy}>
      <TreeDisplay tree={treeify(policy)} />
    </div>
  );
}

const links = {
  googleLogo: "/googleLogo.png",
  eaOrg: "https://effectivealtruism.org",
  terms: "/termsOfUse",
  privacy: "https://ev.org/ops/about/privacy-policy",
} as const;

export const EALoginPopover = ({action: action_, setAction: setAction_, classes}: {
  action?: LoginAction | null,
  setAction?: (action: LoginAction | null) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const {loginAction, setLoginAction} = useLoginPopoverContext();
  const action = action_ ?? loginAction;
  const setAction = setAction_ ?? setLoginAction;

  const open = !!action;
  const isSignup = action === "signup";

  const client = useAuth0Client();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [isResettingPassword, setIsResettingPassword] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [policy, setPolicy] = useState<string | null>(null);
  const refetchCurrentUser = useRefetchCurrentUser();

  const onChangeEmail = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
    setEmail(ev.target.value);
  }, []);

  const onChangePassword = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
    setPassword(ev.target.value);
  }, []);

  const toggleShowPassword = useCallback(() => {
    setShowPassword((showPassword) => !showPassword);
  }, []);

  const onSendPasswordReset = useCallback(async () => {
    setError(null);
    setPolicy(null);
    setMessage(null);
    try {
      setLoading(true);
      await client.resetPassword(email);
      setMessage("Password reset email sent");
    } catch(e) {
      // eslint-disable-next-line no-console
      console.error(e);
      setError(e.description || e.message || String(e) || "An error occurred");
    }
    setLoading(false);
  }, [client, email]);

  const onSubmit = useCallback(async (ev: FormEvent<HTMLFormElement>) => {
    ev.preventDefault();

    if (isResettingPassword) {
      return onSendPasswordReset();
    }

    if (!email || !password) {
      setError("Email and password are required");
      return;
    }

    setMessage(null);
    setError(null);
    setPolicy(null);

    try {
      setLoading(true);
      await (
        isSignup
          ? client.signup(email, password)
          : client.login(email, password)
      );
      await refetchCurrentUser();
    } catch (e) {
      // eslint-disable-next-line no-console
      console.error(e);
      setError(e.description || e.message || String(e) || "An error occurred");
      setPolicy(e.policy ?? null);
    } finally {
      setLoading(false);
    }
  }, [
    client, email, password, isSignup, isResettingPassword,
    onSendPasswordReset, refetchCurrentUser,
  ]);

  const onClickGoogle = useCallback(async () => {
    setMessage(null);
    setError(null);
    setPolicy(null);
    client.socialLogin("google-oauth2");
  }, [client]);

  const onClickFacebook = useCallback(async () => {
    setMessage(null);
    setError(null);
    setPolicy(null);
    client.socialLogin("facebook");
  }, [client]);

  const onForgotPassword = useCallback(() => {
    setIsResettingPassword(true);
  }, []);

  const onLinkToLogin = useCallback(() => {
    setAction("login");
  }, [setAction]);

  const onLinkToSignup = useCallback(() => {
    setAction("signup");
  }, [setAction]);

  const onClose = useCallback(() => {
    setAction(null);
  }, [setAction]);

  useEffect(() => {
    if (!open) {
      setEmail("");
      setPassword("");
      setShowPassword(false);
      setLoading(false);
      setMessage(null);
      setError(null);
      setPolicy(null);
      setIsResettingPassword(false);
    }
  }, [open]);

  const title = isSignup
    ? "Sign up to get more from the EA Forum"
    : "Welcome back";

  const canSubmit = !!email && (!!password || isResettingPassword) && !loading;

  const {BlurredBackgroundModal, ForumIcon, EAButton, Loading} = Components;
  return (
    <BlurredBackgroundModal open={open} onClose={onClose} className={classes.root}>
      <AnalyticsContext pageElementContext="loginPopover">
        <ForumIcon
          icon="Close"
          onClick={onClose}
          className={classes.close}
        />
        <div className={classes.lightbulb}>{lightbulbIcon}</div>
        <div className={classes.title}>{title}</div>
        <div className={classes.formContainer}>
          <form onSubmit={onSubmit} className={classes.form}>
            <div className={classNames(classes.inputContainer, {
              [classes.inputBottomMargin]: isResettingPassword,
            })}>
              <input
                type="text"
                placeholder="Email"
                value={email}
                onChange={onChangeEmail}
                className={classes.input}
                autoFocus
              />
            </div>
            {!isResettingPassword &&
              <div className={classes.inputContainer}>
                <input
                  type={showPassword ? "text" : "password"}
                  placeholder="Password"
                  value={password}
                  onChange={onChangePassword}
                  className={classes.input}
                />
                <ForumIcon
                  icon={showPassword ? "EyeSlash" : "Eye"}
                  onClick={toggleShowPassword}
                  className={classes.showPasswordButton}
                />
              </div>
            }
            {!isSignup && !isResettingPassword &&
              <div className={classes.forgotPassword}>
                <a onClick={onForgotPassword}>Forgot password?</a>
              </div>
            }
            {message &&
              <div className={classes.message}>
                {message}
              </div>
            }
            {error &&
              <div className={classes.error}>
                {error}
                {policy && <PasswordPolicy policy={policy} classes={classes} />}
              </div>
            }
            <EAButton
              type="submit"
              style="primary"
              disabled={!canSubmit}
              className={classes.button}
            >
              {loading
                ? <Loading />
                : isResettingPassword
                  ? "Request password reset"
                  : isSignup
                    ? "Sign up"
                    : "Login"
              }
            </EAButton>
          </form>
          <div className={classes.orContainer}>
            <span className={classes.orHr} />OR<span className={classes.orHr} />
          </div>
          <div className={classes.socialContainer}>
            <EAButton
              style="grey"
              variant="outlined"
              onClick={onClickGoogle}
              className={classNames(classes.button, classes.socialButton)}
            >
              <img src={links.googleLogo} /> Continue with Google
            </EAButton>
            <EAButton
              style="grey"
              variant="outlined"
              onClick={onClickFacebook}
              className={classNames(classes.button, classes.socialButton)}
            >
              <FacebookIcon /> Continue with Facebook
            </EAButton>
          </div>
          {isSignup
            ? (
              <div className={classes.switchPrompt}>
                Already have an account?{" "}
                <a
                  onClick={onLinkToLogin}
                  className={classes.switchPromptButton}
                >
                  Login
                </a>
              </div>
            )
            : (
              <div className={classes.switchPrompt}>
                Don't have an account?{" "}
                <a
                  onClick={onLinkToSignup}
                  className={classes.switchPromptButton}
                >
                  Sign up
                </a>
              </div>
            )
          }
        </div>
        <div className={classes.finePrint}>
          By creating an{" "}
          <Link to={links.eaOrg} target="_blank" rel="noopener noreferrer">
            EffectiveAltruism.org
          </Link>{" "}
          account, you agree to the{" "}
          <Link to={links.terms} target="_blank" rel="noopener noreferrer">
            Terms of Use
          </Link> and{" "}
          <Link to={links.privacy} target="_blank" rel="noopener noreferrer">
            Privacy Policy
          </Link>.
        </div>
      </AnalyticsContext>
    </BlurredBackgroundModal>
  );
}

const EALoginPopoverComponent = registerComponent(
  "EALoginPopover",
  EALoginPopover,
  {styles},
);

declare global {
  interface ComponentTypes {
    EALoginPopover: typeof EALoginPopoverComponent
  }
}

1	import React, { ChangeEvent, FC, FormEvent, useCallback, useEffect, useState } from "react";	3✔
2	import { Components, registerComponent } from "../../../lib/vulcan-lib";	1✔
3	import { useAuth0Client } from "../../hooks/useAuth0Client";	1✔
4	import { Link } from "../../../lib/reactRouterWrapper";	1✔
5	import { lightbulbIcon } from "../../icons/lightbulbIcon";	1✔
6	import { FacebookIcon } from "../../icons/FacebookIcon";	1✔
7	import classNames from "classnames";	1✔
8	import { AnalyticsContext } from "../../../lib/analyticsEvents";	1✔
9	import { useRefetchCurrentUser } from "../../common/withUser";	1✔
10	import { LoginAction, useLoginPopoverContext } from "../../hooks/useLoginPopoverContext";	1✔
11
12	const styles = (theme: ThemeType) => ({	1✔
13	root: {
14	fontFamily: theme.palette.fonts.sansSerifStack,
15	width: 386,
16	display: "flex",
17	flexDirection: "column",
18	alignItems: "center",
19	gap: "24px",
20	textAlign: "center",
21	},
22	close: {
23	color: theme.palette.grey[600],
24	cursor: "pointer",
25	position: "absolute",
26	top: 16,
27	right: 16,
28	width: 20,
29	height: 20,
30	},
31	lightbulb: {
32	color: theme.palette.primary.dark,
33	width: 52,
34	},
35	title: {
36	fontSize: 24,
37	fontWeight: 600,
38	},
39	formContainer: {
40	width: "100%",
41	},
42	form: {
43	display: "flex",
44	flexDirection: "column",
45	gap: "8px",
46	width: "100%",
47	marginBottom: 12,
48	},
49	inputContainer: {
50	display: "flex",
51	alignItems: "center",
52	gap: "12px",
53	width: "100%",
54	borderRadius: theme.borderRadius.default,
55	background: theme.palette.panelBackground.loginInput,
56	padding: "0px 17px",
57	},
58	input: {
59	flexGrow: 1,
60	padding: "15px 0px",
61	color: theme.palette.grey[1000],
62	background: "transparent",
63	fontSize: 14,
64	fontFamily: theme.palette.fonts.sansSerifStack,
65	fontWeight: 500,
66	"&::placeholder": {
67	color: theme.palette.grey[600],
68	},
69	},
70	inputBottomMargin: {
71	marginBottom: 10,
72	},
73	showPasswordButton: {
74	width: 16,
75	cursor: "pointer",
76	color: theme.palette.grey[600],
77	},
78	forgotPassword: {
79	color: theme.palette.primary.main,
80	fontSize: 14,
81	fontWeight: 600,
82	marginTop: 4,
83	marginBottom: 8,
84	},
85	message: {
86	marginBottom: 4,
87	fontSize: 14,
88	fontWeight: 500,
89	},
90	error: {
91	color: theme.palette.text.error2,
92	marginBottom: 4,
93	fontSize: 14,
94	fontWeight: 500,
95	},
96	button: {
97	width: "100%",
98	height: 50,
99	padding: "15px 17px",
100	fontWeight: 600,
101	"& .Loading-spinner": {
102	height: "100%",
103	display: "flex",
104	alignItems: "center",
105	},
106	},
107	orContainer: {
108	display: "flex",
109	alignItems: "center",
110	gap: "11px",
111	width: "100%",
112	margin: "24px 0",
113	fontWeight: 500,
114	color: theme.palette.grey[600],
115	},
116	orHr: {
117	borderTop: `1px solid ${theme.palette.border.eaButtonGreyOutline}`,
118	flexGrow: 1,
119	},
120	socialContainer: {
121	display: "flex",
122	flexDirection: "column",
123	gap: "8px",
124	width: "100%",
125	marginBottom: 24,
126	},
127	socialButton: {
128	"& svg, & img": {
129	width: 20,
130	height: 20,
131	marginRight: 16,
132	},
133	"& .MuiButton-label": {
134	justifyContent: "flex-start",
135	},
136	},
137	switchPrompt: {
138	fontSize: 14,
139	},
140	switchPromptButton: {
141	color: theme.palette.primary.main,
142	fontWeight: 700,
143	userSelect: "none",
144	},
145	finePrint: {
146	color: theme.palette.grey[600],
147	marginTop: 16,
148	fontSize: 13,
149	fontWeight: 500,
150	lineHeight: "140%",
151	"& a": {
152	textDecoration: "underline",
153	"&:hover": {
154	textDecoration: "none",
155	opacity: 1,
156	},
157	},
158	},
159	passwordPolicy: {
160	textAlign: "left",
161	},
162	});
163
164	type Tree = {
165	root: string;
166	content: Tree[];
167	}
168
169	const treeify = (data: string): Tree[] => {	1✔
170	const result: Tree[] = [];	×
171	const levels = [result];	×
172	for (let line of data.split("\n")) {	×
173	let level = line.search(/\S/);	×
174	const trimmed = line.trim();	×
175	const root = trimmed.match(/(\\s)?(.*)/)?.[2] ?? trimmed;	×
176	if (root) {	×
177	const content: Tree[] = [];	×
178	levels[level].push({root, content});	×
179	levels[++level] = content;	×
180	}
181	}
182	return result;	×
183	}
184
185	const TreeDisplay: FC<{ tree: Tree[] }> = ({ tree }) => {	1✔
186	return (	×
187	<ul>
188	{tree.map(({root, content}) => (
189	<>	×
190	<li>{root}</li>
191	<TreeDisplay tree={content} />
192	</>
193	))}
194	</ul>
195	);
196	}
197
198	const PasswordPolicy: FC<{
199	policy?: string,
200	classes: ClassesType<typeof styles>,
201	}> = ({ policy, classes }) => {	1✔
202	if (!policy) {	×
203	return null;	×
204	}
205
206	return (	×
207	<div className={classes.passwordPolicy}>
208	<TreeDisplay tree={treeify(policy)} />
209	</div>
210	);
211	}
212
213	const links = {	1✔
214	googleLogo: "/googleLogo.png",
215	eaOrg: "https://effectivealtruism.org",
216	terms: "/termsOfUse",
217	privacy: "https://ev.org/ops/about/privacy-policy",
218	} as const;
219
220	export const EALoginPopover = ({action: action_, setAction: setAction_, classes}: {	1✔
221	action?: LoginAction \| null,
222	setAction?: (action: LoginAction \| null) => void,
223	classes: ClassesType<typeof styles>,
224	}) => {
NEW 225	const {loginAction, setLoginAction} = useLoginPopoverContext();	×
NEW 226	const action = action_ ?? loginAction;	×
NEW 227	const setAction = setAction_ ?? setLoginAction;	×
228
NEW 229	const open = !!action;	×
NEW 230	const isSignup = action === "signup";	×
231
232	const client = useAuth0Client();	×
233	const [email, setEmail] = useState("");	×
234	const [password, setPassword] = useState("");	×
235	const [showPassword, setShowPassword] = useState(false);	×
236	const [loading, setLoading] = useState(false);	×
237	const [isResettingPassword, setIsResettingPassword] = useState(false);	×
238	const [message, setMessage] = useState<string \| null>(null);	×
239	const [error, setError] = useState<string \| null>(null);	×
240	const [policy, setPolicy] = useState<string \| null>(null);	×
241	const refetchCurrentUser = useRefetchCurrentUser();	×
242
243	const onChangeEmail = useCallback((ev: ChangeEvent<HTMLInputElement>) => {	×
244	setEmail(ev.target.value);	×
245	}, []);
246
247	const onChangePassword = useCallback((ev: ChangeEvent<HTMLInputElement>) => {	×
248	setPassword(ev.target.value);	×
249	}, []);
250
251	const toggleShowPassword = useCallback(() => {	×
252	setShowPassword((showPassword) => !showPassword);	×
253	}, []);
254
255	const onSendPasswordReset = useCallback(async () => {	×
256	setError(null);	×
257	setPolicy(null);	×
258	setMessage(null);	×
259	try {	×
260	setLoading(true);	×
261	await client.resetPassword(email);	×
262	setMessage("Password reset email sent");	×
263	} catch(e) {
264	// eslint-disable-next-line no-console
265	console.error(e);	×
266	setError(e.description \|\| e.message \|\| String(e) \|\| "An error occurred");	×
267	}
268	setLoading(false);	×
269	}, [client, email]);
270
271	const onSubmit = useCallback(async (ev: FormEvent<HTMLFormElement>) => {	×
272	ev.preventDefault();	×
273
274	if (isResettingPassword) {	×
275	return onSendPasswordReset();	×
276	}
277
278	if (!email \|\| !password) {	×
279	setError("Email and password are required");	×
280	return;	×
281	}
282
283	setMessage(null);	×
284	setError(null);	×
285	setPolicy(null);	×
286
287	try {	×
288	setLoading(true);	×
289	await (	×
290	isSignup
291	? client.signup(email, password)	×
292	: client.login(email, password)
293	);
294	await refetchCurrentUser();	×
295	} catch (e) {
296	// eslint-disable-next-line no-console
297	console.error(e);	×
298	setError(e.description \|\| e.message \|\| String(e) \|\| "An error occurred");	×
299	setPolicy(e.policy ?? null);	×
300	} finally {
301	setLoading(false);	×
302	}
303	}, [
304	client, email, password, isSignup, isResettingPassword,
305	onSendPasswordReset, refetchCurrentUser,
306	]);
307
308	const onClickGoogle = useCallback(async () => {	×
309	setMessage(null);	×
310	setError(null);	×
311	setPolicy(null);	×
312	client.socialLogin("google-oauth2");	×
313	}, [client]);
314
315	const onClickFacebook = useCallback(async () => {	×
316	setMessage(null);	×
317	setError(null);	×
318	setPolicy(null);	×
319	client.socialLogin("facebook");	×
320	}, [client]);
321
322	const onForgotPassword = useCallback(() => {	×
323	setIsResettingPassword(true);	×
324	}, []);
325
326	const onLinkToLogin = useCallback(() => {	×
327	setAction("login");	×
328	}, [setAction]);
329
330	const onLinkToSignup = useCallback(() => {	×
331	setAction("signup");	×
332	}, [setAction]);
333
334	const onClose = useCallback(() => {	×
335	setAction(null);	×
336	}, [setAction]);
337
338	useEffect(() => {	×
339	if (!open) {	×
340	setEmail("");	×
341	setPassword("");	×
342	setShowPassword(false);	×
343	setLoading(false);	×
344	setMessage(null);	×
345	setError(null);	×
346	setPolicy(null);	×
347	setIsResettingPassword(false);	×
348	}
349	}, [open]);
350
351	const title = isSignup	×
352	? "Sign up to get more from the EA Forum"	×
353	: "Welcome back";
354
355	const canSubmit = !!email && (!!password \|\| isResettingPassword) && !loading;	×
356
357	const {BlurredBackgroundModal, ForumIcon, EAButton, Loading} = Components;	×
358	return (	×
359	<BlurredBackgroundModal open={open} onClose={onClose} className={classes.root}>
360	<AnalyticsContext pageElementContext="loginPopover">
361	<ForumIcon
362	icon="Close"
363	onClick={onClose}
364	className={classes.close}
365	/>
366	<div className={classes.lightbulb}>{lightbulbIcon}</div>
367	<div className={classes.title}>{title}</div>
368	<div className={classes.formContainer}>
369	<form onSubmit={onSubmit} className={classes.form}>
370	<div className={classNames(classes.inputContainer, {
371	[classes.inputBottomMargin]: isResettingPassword,
372	})}>
373	<input
374	type="text"
375	placeholder="Email"
376	value={email}
377	onChange={onChangeEmail}
378	className={classes.input}
379	autoFocus
380	/>
381	</div>
382	{!isResettingPassword &&	×
383	<div className={classes.inputContainer}>
384	<input
385	type={showPassword ? "text" : "password"}	×
386	placeholder="Password"
387	value={password}
388	onChange={onChangePassword}
389	className={classes.input}
390	/>
391	<ForumIcon
392	icon={showPassword ? "EyeSlash" : "Eye"}	×
393	onClick={toggleShowPassword}
394	className={classes.showPasswordButton}
395	/>
396	</div>
397	}
398	{!isSignup && !isResettingPassword &&	×
399	<div className={classes.forgotPassword}>
400	<a onClick={onForgotPassword}>Forgot password?</a>
401	</div>
402	}
403	{message &&	×
404	<div className={classes.message}>
405	{message}
406	</div>
407	}
408	{error &&	×
409	<div className={classes.error}>
410	{error}
411	{policy && <PasswordPolicy policy={policy} classes={classes} />}	×
412	</div>
413	}
414	<EAButton
415	type="submit"
416	style="primary"
417	disabled={!canSubmit}
418	className={classes.button}
419	>
420	{loading
421	? <Loading />	×
422	: isResettingPassword
423	? "Request password reset"	×
424	: isSignup
425	? "Sign up"	×
426	: "Login"
427	}
428	</EAButton>
429	</form>
430	<div className={classes.orContainer}>
431	<span className={classes.orHr} />OR<span className={classes.orHr} />
432	</div>
433	<div className={classes.socialContainer}>
434	<EAButton
435	style="grey"
436	variant="outlined"
437	onClick={onClickGoogle}
438	className={classNames(classes.button, classes.socialButton)}
439	>
440	<img src={links.googleLogo} /> Continue with Google
441	</EAButton>
442	<EAButton
443	style="grey"
444	variant="outlined"
445	onClick={onClickFacebook}
446	className={classNames(classes.button, classes.socialButton)}
447	>
448	<FacebookIcon /> Continue with Facebook
449	</EAButton>
450	</div>
451	{isSignup
452	? (
453	<div className={classes.switchPrompt}>	×
454	Already have an account?{" "}
455	<a
456	onClick={onLinkToLogin}
457	className={classes.switchPromptButton}
458	>
459	Login
460	</a>
461	</div>
462	)
463	: (
464	<div className={classes.switchPrompt}>
465	Don't have an account?{" "}
466	<a
467	onClick={onLinkToSignup}
468	className={classes.switchPromptButton}
469	>
470	Sign up
471	</a>
472	</div>
473	)
474	}
475	</div>
476	<div className={classes.finePrint}>
477	By creating an{" "}
478	<Link to={links.eaOrg} target="_blank" rel="noopener noreferrer">
479	EffectiveAltruism.org
480	</Link>{" "}
481	account, you agree to the{" "}
482	<Link to={links.terms} target="_blank" rel="noopener noreferrer">
483	Terms of Use
484	</Link> and{" "}
485	<Link to={links.privacy} target="_blank" rel="noopener noreferrer">
486	Privacy Policy
487	</Link>.
488	</div>
489	</AnalyticsContext>
490	</BlurredBackgroundModal>
491	);
492	}
493
494	const EALoginPopoverComponent = registerComponent(	1✔
495	"EALoginPopover",
496	EALoginPopover,
497	{styles},
498	);
499
500	declare global {
501	interface ComponentTypes {
502	EALoginPopover: typeof EALoginPopoverComponent
503	}
504	}

ForumMagnum / ForumMagnum / 9000515521

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous