diff --git a/src/auth/hooks/mutations/useRegister.ts b/src/auth/hooks/mutations/useRegister.ts
index efad86cf..baf7a04c 100644
--- a/src/auth/hooks/mutations/useRegister.ts
+++ b/src/auth/hooks/mutations/useRegister.ts
@@ -1,6 +1,7 @@
import { useCallback, useState } from "react";
import { RegistrationForm } from "auth/registration/types";
import { submitRegistration } from "auth/lib";
+import { clearRegistrationValues } from "form/PersistRegistrationValues";
export function useRegister() {
const [hasRegistered, setHasRegistered] = useState(false);
@@ -10,7 +11,10 @@ export function useRegister() {
const register = useCallback((form: RegistrationForm) => {
setLoading(true);
submitRegistration(form)
- .then(() => setHasRegistered(true))
+ .then(() => {
+ setHasRegistered(true);
+ clearRegistrationValues();
+ })
.catch((e) => {
setError(e.message);
})
diff --git a/src/auth/registration/Register.tsx b/src/auth/registration/Register.tsx
index 6dea71ee..6b7f577f 100644
--- a/src/auth/registration/Register.tsx
+++ b/src/auth/registration/Register.tsx
@@ -13,6 +13,7 @@ import { Box, Toolbar, Typography } from "@mui/material";
import { Background } from "components/Background/Background";
import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar";
import { PaddedCardContainer } from "components/Card/PaddedCardContainer";
+import { PersistRegistrationValues } from "form/PersistRegistrationValues";
export function Register() {
const [activeStep, setActiveStep] = useState(0);
@@ -66,6 +67,8 @@ export function Register() {
/>
}
/>
+
+
diff --git a/src/form/PersistRegistrationValues.tsx b/src/form/PersistRegistrationValues.tsx
new file mode 100644
index 00000000..44816233
--- /dev/null
+++ b/src/form/PersistRegistrationValues.tsx
@@ -0,0 +1,29 @@
+import { useFormikContext } from "formik";
+import React, { useEffect } from "react";
+import { RegistrationForm } from "auth/registration/types";
+import _ from "lodash";
+
+export const PersistRegistrationValues = () => {
+ const { values, setValues, dirty } = useFormikContext();
+
+ // read the values from localStorage on load
+ useEffect(() => {
+ const form = localStorage.getItem("registerInProgress");
+ if (form) {
+ setValues(JSON.parse(form));
+ }
+ }, []);
+
+ // save the values to localStorage on update
+ useEffect(() => {
+ if (!_.isEmpty(values) && dirty) {
+ localStorage.setItem("registerInProgress", JSON.stringify(values));
+ }
+ }, [values, dirty]);
+
+ return null;
+};
+
+export const clearRegistrationValues = () => {
+ localStorage.removeItem("registerInProgress");
+};