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 | 1x 16x 16x 16x 16x 16x 2x 14x 2x 2x | import { Box, Stack } from "@mui/material";
import { FormProvider } from "react-hook-form";
import { ArrowLeftIcon } from "@phosphor-icons/react";
import { useForgotPassword } from "@hooks/auth-api";
import { AUTH_PATHS } from "@routes/paths";
import { isValidEmail } from "@validation/regex";
import { isEqual } from "lodash";
import GiveText from "@shared/Text/GiveText";
import { HFGiveInput } from "@shared/HFInputs/HFGiveInput/HFGiveInput";
import { sanitizePaste } from "@utils/index";
import GiveLink from "@shared/Link/GiveLink";
import GiveButton from "@shared/Button/GiveButton";
import GiveCheckYourEmailContent from "./components/GiveCheckYourEmailContent";
const GiveForgotPassword = () => {
const { methods, exist, error, previousEmail, isLoading, handleClickReset } =
useForgotPassword();
const errorText = error
? "Email is not associated with an account"
: undefined;
const { watch } = methods;
const disabled =
isLoading ||
!watch("email") ||
isEqual(previousEmail, watch("email")) ||
!isValidEmail(watch("email"));
if (exist) {
return <GiveCheckYourEmailContent email={previousEmail} />;
}
return (
<Stack gap={"32px"}>
<Stack gap={"12px"}>
<GiveText variant="h3" sx={{ fontWeight: "300" }}>
Forgot Password
</GiveText>
<GiveText variant="bodyM" color={"secondary"}>
Enter your email address below and we'll send you a password
reset link.
</GiveText>
</Stack>
<FormProvider {...methods}>
<Box
component="form"
onSubmit={(e) => {
e.preventDefault();
handleClickReset();
}}
id="forgot-password"
>
<HFGiveInput
name="email"
label="Email"
fullWidth
disabled={false}
error={Boolean(error)}
helper={errorText}
handleNormalizeInput={sanitizePaste}
/>
</Box>
</FormProvider>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<GiveLink
link={`/${AUTH_PATHS.LOGIN}`}
data-testid="forgot-password-go-back-link"
variant="bodyS"
Icon={ArrowLeftIcon}
>
Back
</GiveLink>
<GiveButton
label="Reset Password"
size="large"
type="submit"
form="forgot-password"
disabled={disabled}
loading={isLoading}
sx={{ width: "fit-content" }}
/>
</Stack>
</Stack>
);
};
export default GiveForgotPassword;
|