diff --git a/app/layout/forgot-password/component.tsx b/app/layout/forgot-password/component.tsx new file mode 100644 index 0000000000..23e38c503c --- /dev/null +++ b/app/layout/forgot-password/component.tsx @@ -0,0 +1,126 @@ +import React, { useCallback, useState } from 'react'; +import Wrapper from 'layout/wrapper'; +import Button from 'components/button'; +import Loading from 'components/loading'; +import Icon from 'components/icon'; + +import { Form as FormRFF, Field as FieldRFF } from 'react-final-form'; +import Field from 'components/forms/field'; +import Label from 'components/forms/label'; +import Input from 'components/forms/input'; + +import { + composeValidators, +} from 'components/forms/validations'; + +import { useToasts } from 'hooks/toast'; + +import EMAIL_SVG from 'svgs/ui/email.svg?sprite'; +import CHECK_EMAIL_SVG from 'svgs/users/check-email.svg?sprite'; + +export interface ForgotPasswordProps { + +} + +export const ForgotPassword: React.FC = () => { + const [submitting, setSubmitting] = useState(false); + const [submitted, setSubmitted] = useState(false); + + const { addToast } = useToasts(); + + const handleSubmit = useCallback(async (data) => { + setSubmitting(true); + try { + // Forgot password mutation + console.info('FORGOT PASSWORD', data); + setSubmitting(false); + setSubmitted(true); + } catch (err) { + addToast('error-forgot-password', ( + <> +

Error!

+

Invalid username or password.

+ + ), { + level: 'error', + }); + + setSubmitting(false); + console.error(err); + } + }, [addToast]); + + return ( + + {!submitted && ( + + {(props) => ( +
+
+

Forgot Password

+

Enter the email associated with your account and we’ll send and email with instructions to reset your password.

+ + + + {/* EMAIL */} +
+ + {(fprops) => ( + + + + + )} + +
+ +
+ +
+
+ +
+ )} + + )} + + {submitted && ( +
+
+
+

Check your email

+ +

We have sent a password recover instructions to your email...

+
+
+

+ Did not receive the email? Check your spam filter, or + {' '} + setSubmitted(false)} + > + try another email address. + +

+
+
+
+ )} + + ); +}; + +export default ForgotPassword; diff --git a/app/layout/forgot-password/index.ts b/app/layout/forgot-password/index.ts new file mode 100644 index 0000000000..b404d7fd44 --- /dev/null +++ b/app/layout/forgot-password/index.ts @@ -0,0 +1 @@ +export { default } from './component'; diff --git a/app/layout/sign-in/component.tsx b/app/layout/sign-in/component.tsx index 7a60c94f3d..f43693de5d 100644 --- a/app/layout/sign-in/component.tsx +++ b/app/layout/sign-in/component.tsx @@ -90,6 +90,14 @@ export const SignIn: React.FC = () => { + + + + Forgot password? + + )} diff --git a/app/pages/auth/forgot-password.tsx b/app/pages/auth/forgot-password.tsx new file mode 100644 index 0000000000..96d20e2e93 --- /dev/null +++ b/app/pages/auth/forgot-password.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import Head from 'next/head'; + +import Header from 'layout/header'; +import ForgotPassword from 'layout/forgot-password'; + +import { withoutProtection } from 'hoc/auth'; + +export const getServerSideProps = withoutProtection(); + +const ForgotPasswordPage: React.FC = () => { + return ( + <> + + Forgot password + + + +
+
+ +
+
+ +
+
+
+ + ); +}; + +export default ForgotPasswordPage; diff --git a/app/svgs/users/check-email.svg b/app/svgs/users/check-email.svg new file mode 100644 index 0000000000..cbabd32b39 --- /dev/null +++ b/app/svgs/users/check-email.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + +