Resolved e-mail signup issue, improve email signup flow, loading stat…

…es and UI (#611)
kscalelabs · Nov 15, 2024 · 015f99a · 015f99a
1 parent 24c98d4
commit 015f99a
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 6 deletions.
diff --git a/frontend/src/components/auth/SignupForm.tsx b/frontend/src/components/auth/SignupForm.tsx
@@ -1,9 +1,11 @@
+import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
 
 import ErrorMessage from "@/components/ui/ErrorMessage";
 import { Input } from "@/components/ui/Input/Input";
 import PasswordInput from "@/components/ui/Input/PasswordInput";
+import Spinner from "@/components/ui/Spinner";
 import { Button } from "@/components/ui/button";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
@@ -20,6 +22,7 @@ const SignupForm: React.FC<SignupFormProps> = ({ signupTokenId }) => {
   const auth = useAuthentication();
   const { addAlert, addErrorAlert } = useAlertQueue();
   const navigate = useNavigate();
+  const [isValidating, setIsValidating] = useState(true);
 
   const {
     register,
@@ -34,6 +37,35 @@ const SignupForm: React.FC<SignupFormProps> = ({ signupTokenId }) => {
   const confirmPassword = watch("confirmPassword") || "";
   const passwordStrength = password.length > 0 ? zxcvbn(password).score : 0;
 
+  useEffect(() => {
+    const validateToken = async () => {
+      try {
+        const { error } = await auth.client.GET("/auth/email/signup/get/{id}", {
+          params: {
+            path: { id: signupTokenId },
+          },
+        });
+
+        if (error) {
+          addErrorAlert(error);
+          navigate(ROUTES.HOME.path);
+        }
+      } finally {
+        setIsValidating(false);
+      }
+    };
+
+    validateToken();
+  }, [signupTokenId]);
+
+  if (isValidating) {
+    return (
+      <div className="flex justify-center items-center min-h-[200px]">
+        <Spinner />
+      </div>
+    );
+  }
+
   const onSubmit: SubmitHandler<SignupType> = async (data: SignupType) => {
     // Exit account creation early if password too weak or not matching
     if (passwordStrength < 2) {
@@ -92,19 +124,22 @@ const SignupForm: React.FC<SignupFormProps> = ({ signupTokenId }) => {
         showStrength={false}
       />
       {/* TOS Text */}
-      <div className="text-xs text-center text-gray-11">
+      <div className="text-xs text-center text-gray-2">
         By signing up, you agree to our <br />
-        <Link to={ROUTES.TOS.path} className="text-accent underline">
+        <Link to={ROUTES.TOS.path} className="text-primary-9 underline ml-1">
           terms and conditions
         </Link>{" "}
         and{" "}
-        <Link to={ROUTES.PRIVACY.path} className="text-accent underline">
+        <Link
+          to={ROUTES.PRIVACY.path}
+          className="text-primary-9 underline ml-1"
+        >
           privacy policy
         </Link>
         .
       </div>
       {/* Signup Button */}
-      <Button variant="default">Sign up</Button>
+      <Button variant="outline">Sign up</Button>
     </form>
   );
 };

diff --git a/frontend/src/components/pages/EmailSignup.tsx b/frontend/src/components/pages/EmailSignup.tsx
@@ -5,6 +5,7 @@ import { useTypedParams } from "react-router-typesafe-routes/dom";
 import SignupForm from "@/components/auth/SignupForm";
 import { Card, CardContent, CardHeader } from "@/components/ui/Card";
 import Header from "@/components/ui/Header";
+import Spinner from "@/components/ui/Spinner";
 import { Button } from "@/components/ui/button";
 import { paths } from "@/gen/api";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
@@ -19,12 +20,14 @@ const EmailSignup = () => {
   const auth = useAuthentication();
   const { addErrorAlert } = useAlertQueue();
   const { id } = useTypedParams(ROUTES.SIGNUP.EMAIL);
+  const [isLoading, setIsLoading] = useState(true);
   const [signupToken, setSignupToken] =
     useState<GetEmailSignUpTokenResponse | null>(null);
 
   useEffect(() => {
     const fetchSignUpToken = async () => {
       if (id === undefined) {
+        setIsLoading(false);
         return;
       }
 
@@ -39,19 +42,40 @@ const EmailSignup = () => {
         );
         if (error) {
           addErrorAlert(error);
+          setSignupToken(null);
         } else {
           setSignupToken(data);
         }
       } catch (err) {
         addErrorAlert(err);
+        setSignupToken(null);
+      } finally {
+        setIsLoading(false);
       }
     };
     fetchSignUpToken();
   }, [id]);
 
+  if (isLoading) {
+    return (
+      <div className="flex flex-col items-center mt-20">
+        <Card className="w-[400px] shadow-md bg-gray-12 text-gray-2 rounded-lg">
+          <CardHeader>
+            <Header title="Sign Up" />
+          </CardHeader>
+          <CardContent>
+            <div className="flex justify-center">
+              <Spinner />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col items-center mt-20">
-      <Card className="w-[400px] shadow-md bg-gray-2 text-gray-12 rounded-lg">
+      <Card className="w-[400px] shadow-md bg-gray-12 text-gray-2 rounded-lg">
         <CardHeader>
           <Header title="Sign Up" />
         </CardHeader>
@@ -64,7 +88,7 @@ const EmailSignup = () => {
             <div className="text-center">
               <p className="text-lg mb-8">Invalid Sign Up Link</p>
               <Button
-                variant="default"
+                variant="outline"
                 onClick={() => {
                   navigate(ROUTES.LOGIN.path);
                 }}