Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 520x 138x 138x 138x 138x 138x 138x 16x 16x 138x 3x 3x 138x 19x 19x 3x 3x 16x 16x 4x 4x 12x 10x 1x 9x 1x 103x 8x 1x | import { ChangeEvent, ReactElement, useState } from "react";
import { useTranslation } from "react-i18next";
import styled, { css } from "styled-components";
import { EMAIL_REGEX } from "shared/constants/validation";
import { Button } from "client/components/Button";
import { EmailInput } from "client/components/EmailInput";
import { EmailNotificationField } from "client/components/EmailNotificationField";
import { ButtonStyle } from "client/components/componentStyles";
import { useAppDispatch } from "client/utils/hooks";
import { submitUpdateUserEmailAddress } from "client/views/login/loginThunks";
interface Props {
email: string;
}
// The logged-in user's own email notification settings — shown only in Profile, never in the
// helper flow where another user is managed (there the email endpoint would target the helper)
export const EmailSettingsForm = ({ email }: Props): ReactElement => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const [changeEmailInput, setChangeEmailInput] = useState<string>(email);
const [emailChangeMessage, setEmailChangeMessage] = useState<ReactElement>(
<Message />,
);
const [emailNotificationsEnabled, setEmailNotificationsEnabled] =
useState<boolean>(email.length > 0);
// Editing the form or starting a new save dismisses the previous save's
// message, so the visible message always refers to the current form state
const handleEmailChange = (event: ChangeEvent<HTMLInputElement>): void => {
setChangeEmailInput(event.target.value);
setEmailChangeMessage(<Message />);
};
const handleEmailNotificationChange = (enabled: boolean): void => {
setEmailNotificationsEnabled(enabled);
setEmailChangeMessage(<Message />);
};
const submitUpdateEmail = async (): Promise<void> => {
setEmailChangeMessage(<Message />);
if (emailNotificationsEnabled && !changeEmailInput.trim()) {
setEmailChangeMessage(
<Message error={true}>{t("validation.required")}</Message>,
);
return;
}
const emailToSend = emailNotificationsEnabled
? changeEmailInput.trim()
: "";
if (emailNotificationsEnabled && !EMAIL_REGEX.test(emailToSend)) {
setEmailChangeMessage(
<Message error={true}>{t("validation.invalidEmail")}</Message>,
);
return;
}
const emailErrorMessage = await dispatch(
submitUpdateUserEmailAddress(emailToSend),
);
if (emailErrorMessage) {
setEmailChangeMessage(
<Message error={true}>
{t("email.notifications.changingEmailError")}
</Message>,
);
} else {
setEmailChangeMessage(
<Message>{t("email.notifications.changingEmailSuccess")}</Message>,
);
}
};
return (
<>
<EmailNotificationField
enabled={emailNotificationsEnabled}
onEnabledChange={handleEmailNotificationChange}
>
<EmailInput
id="email"
value={changeEmailInput}
type={"email"}
disabled={!emailNotificationsEnabled}
onChange={handleEmailChange}
/>
</EmailNotificationField>
<ButtonWithMargin
onClick={submitUpdateEmail}
buttonStyle={ButtonStyle.PRIMARY}
>
{t("button.save")}
</ButtonWithMargin>
{emailChangeMessage}
</>
);
};
interface MessageProps {
error?: boolean;
}
const Message = styled.p<MessageProps>`
${(messageProps) =>
messageProps.error &&
css`
color: ${(props) => props.theme.textError};
`};
`;
const ButtonWithMargin = styled(Button)`
margin-top: 8px;
`;
|