Improved registration flow

src/Components/API/API.tsx

@@ -5,6 +5,7 @@ import { ActivationType, LoginType, RegisterType } from "../Types/Types";
 const instance = axios.create({
   baseURL: "http://localhost:8000/",
 });
+
 // Token Handling
 export async function getAccessToken() {
   const accessToken = await localStorage.getItem("access_token");
@@ -36,6 +37,25 @@ export async function GetConfig() {
   };
 }
 
+export function ParseError(error: { response: { data: string } }) {
+  if (error.response && error.response.data) {
+    if (error.response.data.length > 50) {
+      return "Error truncated (too long)";
+    }
+    return JSON.stringify(error.response.data)
+      .replace(/[{}]/g, " ")
+      .replace(/\(/g, " ")
+      .replace(/\)/g, " ")
+      .replace(/"/g, " ")
+      .replace(/,/g, " ")
+      .replace(/\[/g, "")
+      .replace(/\]/g, "")
+      .replace(/\./g, "")
+      .replace(/non_field_errors/g, "")
+      .trim();
+  }
+  return "Unable to reach server";
+}
 // User APIs
 
 export function RegisterAPI(register: RegisterType) {
@@ -47,7 +67,7 @@ export function RegisterAPI(register: RegisterType) {
     })
     .catch((error) => {
       console.log("Registration failed");
-      return [false, error.response];
+      return [false, ParseError(error)];
     });
 }
 

src/Components/RegisterModal/RegisterModal.tsx

@@ -10,6 +10,7 @@ import { AppRegistration } from "@mui/icons-material";
 import Button from "../Button/Button";
 import { useNavigate } from "react-router-dom";
 import { RegisterAPI } from "../API/API";
+import { toast } from "react-toastify";
 export default function RegisterModal() {
   const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(false);
@@ -63,6 +64,16 @@ export default function RegisterModal() {
           value={user.last_name}
           placeholder={"Enter your last name"}
         />
+        <TextField
+          id="outlined-helperText"
+          label="Email"
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, email: e.target.value })
+          }
+          value={user.email}
+          placeholder={"Enter your email"}
+        />
         <TextField
           id="outlined-helperText"
           label="Username"
@@ -143,9 +154,32 @@ export default function RegisterModal() {
           } else {
             const status = await RegisterAPI(user);
             if (status[0]) {
-              navigate("/");
+              setError(
+                "Registration successful. Please activate your account using the email provided"
+              );
+              toast("Registration successful", {
+                position: "top-right",
+                autoClose: 2000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                theme: "light",
+              });
+              setTimeout(() => {
+                navigate(0);
+              }, 3000);
+              setUser({
+                first_name: "",
+                last_name: "",
+                username: "",
+                email: "",
+                password: "",
+                confirm_password: "",
+              });
             } else {
-              setError(status[1]);
+              setError(JSON.stringify(status[1]));
             }
           }
         }}