-
Notifications
You must be signed in to change notification settings - Fork 0
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 #110 from Vizzuality/FORA-331-fe-implement-signin-…
…flow FE: Authentication Implementation
- Loading branch information
Showing
19 changed files
with
567 additions
and
320 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
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
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,22 @@ | ||
| import { FC, SVGProps } from 'react'; | ||
|
|
||
| const CircleUserIcon: FC<SVGProps<SVGSVGElement>> = (props) => { | ||
| return ( | ||
| <svg | ||
| width="40" | ||
| height="40" | ||
| viewBox="0 0 40 40" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| {...props} | ||
| > | ||
| <path | ||
| id="Vector" | ||
| d="M31.1719 30.0156C29.4453 27.0156 26.2031 25 22.5 25H17.5C13.7969 25 10.5547 27.0156 8.82812 30.0156C11.5781 33.0781 15.5625 35 20 35C24.4375 35 28.4219 33.0703 31.1719 30.0156ZM0 20C0 14.6957 2.10714 9.60859 5.85786 5.85786C9.60859 2.10714 14.6957 0 20 0C25.3043 0 30.3914 2.10714 34.1421 5.85786C37.8929 9.60859 40 14.6957 40 20C40 25.3043 37.8929 30.3914 34.1421 34.1421C30.3914 37.8929 25.3043 40 20 40C14.6957 40 9.60859 37.8929 5.85786 34.1421C2.10714 30.3914 0 25.3043 0 20ZM20 21.25C21.4918 21.25 22.9226 20.6574 23.9775 19.6025C25.0324 18.5476 25.625 17.1168 25.625 15.625C25.625 14.1332 25.0324 12.7024 23.9775 11.6475C22.9226 10.5926 21.4918 10 20 10C18.5082 10 17.0774 10.5926 16.0225 11.6475C14.9676 12.7024 14.375 14.1332 14.375 15.625C14.375 17.1168 14.9676 18.5476 16.0225 19.6025C17.0774 20.6574 18.5082 21.25 20 21.25Z" | ||
| fill="#DFDEDE" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default CircleUserIcon; |
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
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,85 @@ | ||
| import { FC, useCallback } from 'react'; | ||
|
|
||
| import { Form as FormRFF, Field as FieldRFF } from 'react-final-form'; | ||
|
|
||
| import { useRouter } from 'next/navigation'; | ||
|
|
||
| import { FORM_ERROR } from 'final-form'; | ||
|
|
||
| import { AuthWrapper } from 'containers/wrapper/component'; | ||
|
|
||
| import LinkButton, { Button } from 'components/button/component'; | ||
| import Input from 'components/forms/input/component'; | ||
|
|
||
| import authenticationService from 'services/authentication'; | ||
|
|
||
| const ChangePassword: FC<{ token: string | undefined }> = ({ token }) => { | ||
| const router = useRouter(); | ||
|
|
||
| const handleFormSubmit = useCallback( | ||
| async ({ | ||
| password, | ||
| passwordConfirmation, | ||
| }: { | ||
| password: string; | ||
| passwordConfirmation: string; | ||
| }) => { | ||
| try { | ||
| const res = await authenticationService.changePassword( | ||
| token, | ||
| password, | ||
| passwordConfirmation | ||
| ); | ||
|
|
||
| if (res?.status === 200) { | ||
| router.push('/auth/signin'); | ||
| } else { | ||
| throw new Error('Failed to change password'); | ||
| } | ||
| } catch (err) { | ||
| return { | ||
| [FORM_ERROR]: err instanceof Error ? err.message : 'An unexpected error occurred', | ||
| }; | ||
| } | ||
| }, | ||
| [router, token] | ||
| ); | ||
|
|
||
| return ( | ||
| <AuthWrapper> | ||
| <FormRFF | ||
| onSubmit={handleFormSubmit} | ||
| initialValues={{ password: '', passwordConfirmation: '' }} | ||
| > | ||
| {({ submitError, handleSubmit }) => ( | ||
| <form className="space-y-5" onSubmit={handleSubmit} autoComplete="off"> | ||
| <h2 className="text-3xl text-center font-normal">Change password</h2> | ||
| <div> | ||
| <label>New password</label> | ||
| <FieldRFF name="password" type="password"> | ||
| {({ input }) => <Input {...input} />} | ||
| </FieldRFF> | ||
| </div> | ||
| <div> | ||
| <label>Confirm password</label> | ||
| <FieldRFF name="passwordConfirmation" type="password"> | ||
| {({ input }) => <Input {...input} />} | ||
| </FieldRFF> | ||
| </div> | ||
| {submitError && <div className="text-red-0">{submitError}</div>} | ||
| <div className="flex justify-between gap-3"> | ||
| <LinkButton theme="outline" className="flex-1" href="/auth/signin"> | ||
| Cancel | ||
| </LinkButton> | ||
| <Button theme="green" size="base" className="flex-1" type="submit"> | ||
| <span>Reset password</span> | ||
| </Button> | ||
| </div> | ||
| </form> | ||
| )} | ||
| </FormRFF> | ||
| </AuthWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default ChangePassword; |
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.