-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #112 from SocialGouv/feat/forgot-password
feat: add forgot and reset password pages
- Loading branch information
Showing
15 changed files
with
980 additions
and
393 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { AlertProps, createMultiStyleConfigHelpers } from "@chakra-ui/react"; | ||
| import { alertAnatomy } from "@chakra-ui/anatomy"; | ||
|
|
||
| const { definePartsStyle, defineMultiStyleConfig } = | ||
| createMultiStyleConfigHelpers(alertAnatomy.keys); | ||
|
|
||
| const baseStyle = definePartsStyle((props: AlertProps) => { | ||
| const { status } = props; | ||
|
|
||
| const base = { | ||
| container: { | ||
| borderRadius: "lg", | ||
| }, | ||
| description: { | ||
| fontWeight: 500, | ||
| }, | ||
| }; | ||
|
|
||
| const statusBases = { | ||
| success: base, | ||
| info: base, | ||
| warning: { | ||
| container: { | ||
| borderRadius: "lg", | ||
| bg: "highlight.50", | ||
| color: "orange.500", | ||
| }, | ||
| icon: { | ||
| bg: "highlight.50", | ||
| color: "highlight.500", | ||
| }, | ||
| description: { | ||
| fontWeight: 500, | ||
| }, | ||
| }, | ||
| error: base, | ||
| }; | ||
|
|
||
| const baseStyle = statusBases[status as keyof typeof statusBases]; | ||
|
|
||
| return baseStyle; | ||
| }); | ||
|
|
||
| export const alertTheme = defineMultiStyleConfig({ baseStyle }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { swrPOSTFetch } from "@/utils/tools"; | ||
| import { CheckCircleIcon } from "@chakra-ui/icons"; | ||
| import { | ||
| Box, | ||
| Button, | ||
| Divider, | ||
| FormControl, | ||
| FormErrorMessage, | ||
| FormLabel, | ||
| Heading, | ||
| Image, | ||
| Input, | ||
| InputGroup, | ||
| InputLeftElement, | ||
| Link, | ||
| Text, | ||
| } from "@chakra-ui/react"; | ||
| import NextLink from "next/link"; | ||
| import { useForm, type SubmitHandler } from "react-hook-form"; | ||
| import useSWRMutation from "swr/mutation"; | ||
| import { WrapperForm } from "./WrapperForm"; | ||
|
|
||
| type FormForgotPassword = { | ||
| username: string; | ||
| }; | ||
|
|
||
| export const FormForgotPassword = () => { | ||
| const { trigger: triggerForgotPassword, isMutating } = useSWRMutation( | ||
| "/api/auth/forgot-password", | ||
| swrPOSTFetch<{ username: string }> | ||
| ); | ||
|
|
||
| const { | ||
| handleSubmit, | ||
| register, | ||
| formState: { errors, isSubmitting, isSubmitSuccessful }, | ||
| } = useForm<FormForgotPassword>(); | ||
|
|
||
| const onSubmit: SubmitHandler<FormForgotPassword> = ({ username }) => { | ||
| triggerForgotPassword({ username }); | ||
| }; | ||
|
|
||
| const displayForm = () => { | ||
| return ( | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <FormControl mb={[4, 6]} isInvalid={!!errors.username}> | ||
| <FormLabel | ||
| htmlFor="username" | ||
| fontSize={["2xs", "xs"]} | ||
| fontWeight={500} | ||
| > | ||
| Identifiant | ||
| </FormLabel> | ||
| <InputGroup> | ||
| <InputLeftElement pointerEvents="none"> | ||
| <Image | ||
| src={"/icons/user.svg"} | ||
| alt="User Icon" | ||
| boxSize={9} | ||
| pt={2} | ||
| /> | ||
| </InputLeftElement> | ||
| <Input | ||
| type="text" | ||
| id="username" | ||
| autoFocus | ||
| placeholder="Saisissez votre adresse email" | ||
| fontSize="xs" | ||
| bg={"secondary.500"} | ||
| {...register("username", { | ||
| required: "Ce champ est obligatoire", | ||
| })} | ||
| /> | ||
| </InputGroup> | ||
| </FormControl> | ||
| <FormErrorMessage> | ||
| {errors.username && errors.username.message} | ||
| </FormErrorMessage> | ||
| <Button | ||
| type="submit" | ||
| isLoading={isSubmitting || isMutating} | ||
| colorScheme="primary" | ||
| loadingText="..." | ||
| color="white" | ||
| w="full" | ||
| fontSize={["md", "lg", "xl"]} | ||
| fontWeight={600} | ||
| > | ||
| Réinitialiser le mot de passe | ||
| </Button> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| const displaySubmitSuccess = () => { | ||
| return ( | ||
| <Text fontSize={["sm", "md"]} color="neutral.500"> | ||
| <CheckCircleIcon w={5} h={5} mb={1} color="green.500" /> Un email de | ||
| réinitialisation de mot de passe a été envoyé à | ||
| <br /> | ||
| l'adresse email associée à votre compte. | ||
| </Text> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <WrapperForm title="Mot de passe oublié"> | ||
| <Box>{isSubmitSuccessful ? displaySubmitSuccess() : displayForm()}</Box> | ||
| <Divider my={4} /> | ||
| <Text fontSize={["xs", "sm"]} color="neutral.500"> | ||
| <Link as={NextLink} href="/login"> | ||
| Retour à la connexion | ||
| </Link> | ||
| </Text> | ||
| </WrapperForm> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.