+
+
navigate(redirectTo || "/")} />
diff --git a/packages/dashboard-v2/src/pages/auth/reset-password.js b/packages/dashboard-v2/src/pages/auth/reset-password.js
new file mode 100644
index 00000000..8ecbfeaa
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/auth/reset-password.js
@@ -0,0 +1,48 @@
+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 (
+
+ setState(State.Success)} onFailure={() => setState(State.Failure)} />
+ )}
+
+ {state === State.Success && (
+
+ );
+};
+
+ResetPasswordPage.Layout = AuthLayout;
+
+export default ResetPasswordPage;
diff --git a/packages/dashboard-v2/src/pages/auth/signup.js b/packages/dashboard-v2/src/pages/auth/signup.js
new file mode 100644
index 00000000..4acbae85
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/auth/signup.js
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+
+import AuthLayout from "../../layouts/AuthLayout";
+
+import HighlightedLink from "../../components/HighlightedLink";
+import { SignUpForm } from "../../components/forms/SignUpForm";
+import { navigate } from "gatsby";
+
+const State = {
+ Pure: "PURE",
+ Success: "SUCCESS",
+ Failure: "FAILURE",
+};
+
+const SignUpPage = () => {
+ const [state, setState] = useState(State.Pure);
+
+ useEffect(() => {
+ if (state === State.Success) {
+ const timer = setTimeout(() => navigate("/"), 3000);
+
+ return () => clearTimeout(timer);
+ }
+ }, [state]);
+
+ return (
+
+
+
+ {state !== State.Success && (
+
+ Please check your inbox for further instructions.
+ )} + + {state === State.Failure && ( +Something went wrong, please try again later.
+ )} + +
+
+
+ Suddenly remembered your password?
+ Don't actually have an account?
+ setState(State.Success)} onFailure={() => setState(State.Failure)} />
+ )}
+
+ {state === State.Success && (
+
+ );
+};
+
+SignUpPage.Layout = AuthLayout;
+
+export default SignUpPage;
diff --git a/packages/dashboard-v2/src/pages/user/confirm.js b/packages/dashboard-v2/src/pages/user/confirm.js
new file mode 100644
index 00000000..9e95e3e3
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/user/confirm.js
@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import { navigate } from "gatsby";
+
+import { AllUsersAuthLayout } from "../../layouts/AuthLayout";
+
+import HighlightedLink from "../../components/HighlightedLink";
+import accountsService from "../../services/accountsService";
+
+const State = {
+ Pure: "PURE",
+ Success: "SUCCESS",
+ Failure: "FAILURE",
+};
+
+const EmailConfirmationPage = ({ location }) => {
+ const query = new URLSearchParams(location.search);
+ const token = query.get("token");
+
+ const [state, setState] = useState(State.Pure);
+
+ useEffect(() => {
+ const controller = new AbortController();
+ let timer;
+
+ async function confirm(token) {
+ try {
+ await accountsService.get("user/confirm", {
+ signal: controller.signal,
+ searchParams: { token },
+ });
+
+ timer = setTimeout(() => {
+ navigate("/");
+ }, 3000);
+ setState(State.Success);
+ } catch (err) {
+ // Don't show an error message if request was aborted due to `token` changing.
+ if (err.code !== DOMException.ABORT_ERR) {
+ setState(State.Failure);
+ }
+ }
+ }
+
+ if (token) {
+ confirm(token);
+ }
+
+ return () => {
+ controller.abort();
+ clearTimeout(timer);
+ };
+ }, [token]);
+
+ return (
+
+
+
+ {state !== State.Success && (
+
+
+ Click here to go there now.
+
+ )}
+
+ {state === State.Failure && (
+ Please check your inbox and confirm your email address.
+You will be redirected to your dashboard shortly.
+Something went wrong, please try again later.
+ )} + +
+ Already have an account?
+
+ );
+};
+
+EmailConfirmationPage.Layout = AllUsersAuthLayout;
+
+export default EmailConfirmationPage;
diff --git a/packages/dashboard-v2/src/pages/user/recover.js b/packages/dashboard-v2/src/pages/user/recover.js
new file mode 100644
index 00000000..686e677a
--- /dev/null
+++ b/packages/dashboard-v2/src/pages/user/recover.js
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { navigate } from "gatsby";
+
+import AuthLayout from "../../layouts/AuthLayout";
+
+import { ResetPasswordForm } from "../../components/forms/ResetPasswordForm";
+import HighlightedLink from "../../components/HighlightedLink";
+
+const State = {
+ Pure: "PURE",
+ Success: "SUCCESS",
+ Failure: "FAILURE",
+};
+
+const RecoverPage = ({ location }) => {
+ const query = new URLSearchParams(location.search);
+ const token = query.get("token");
+
+ const [state, setState] = useState(State.Pure);
+
+ return (
+
+
+
+
+
+ {state === State.Pure && Redirect now.
+
+ )}
+
+ {state === State.Failure &&
+ Please wait while we verify your account...
} + + {state === State.Success && ( + <> +All done!
+You will be redirected to your dashboard shortly.
+Something went wrong, please try again later.
} +
+ {
+ setState(State.Success);
+ navigate("/");
+ }}
+ onFailure={() => setState(State.Failure)}
+ />
+ )}
+
+ {state === State.Success && (
+
+ );
+};
+
+RecoverPage.Layout = AuthLayout;
+
+export default RecoverPage;
+
+
+ {state !== State.Success && (
+
+ + All done! You will be redirected to your dashboard shortly. +
+ )} + + {state === State.Failure && ( +Something went wrong, please try again later.
+ )} + +
+ Suddenly remembered your old password?