49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import { useState } from "react";
|
|
|
|
import AuthLayout from "../../layouts/AuthLayout";
|
|
|
|
import { RecoveryForm } from "../../components/forms/RecoveryForm";
|
|
import HighlightedLink from "../../components/HighlightedLink";
|
|
|
|
const State = {
|
|
Pure: "PURE",
|
|
Success: "SUCCESS",
|
|
Failure: "FAILURE",
|
|
};
|
|
|
|
const ResetPasswordPage = () => {
|
|
const [state, setState] = useState(State.Pure);
|
|
|
|
return (
|
|
<div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
|
|
<div className="mb-4 md:mb-16">
|
|
<img src="/images/logo-black-text.svg" alt="Skynet" />
|
|
</div>
|
|
{state !== State.Success && (
|
|
<RecoveryForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
|
|
)}
|
|
|
|
{state === State.Success && (
|
|
<p className="text-primary text-center font-semibold">Please check your inbox for further instructions.</p>
|
|
)}
|
|
|
|
{state === State.Failure && (
|
|
<p className="text-error text-center">Something went wrong, please try again later.</p>
|
|
)}
|
|
|
|
<div className="text-sm text-center mt-8">
|
|
<p>
|
|
Suddenly remembered your password? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
|
|
</p>
|
|
<p>
|
|
Don't actually have an account? <HighlightedLink to="/auth/signup">Create one!</HighlightedLink>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ResetPasswordPage.Layout = AuthLayout;
|
|
|
|
export default ResetPasswordPage;
|