Code Rabbit fixes

Author: PinJinx

frontend/src/components/pages/ForgotPasswrdPage.tsx

@@ -66,7 +66,10 @@ export default function ForgotPasswrdPage() {
       const { error } = await supabase.auth.resetPasswordForEmail(email, { redirectTo });
       if (error) {
         console.error('resetPasswordForEmail failed', error);
+        toast.error(error.message || 'Could not send reset email.');
+        return;
       }
+      toast.success('Password reset email sent.');
       setMailPage(true);
     } catch (err) {
       console.error('resetPasswordForEmail unexpected error', err);

frontend/src/components/pages/ResetPasswordPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import type { ReactNode, FormEvent } from "react";
+import type { ReactNode, FormEvent, ComponentPropsWithoutRef, ElementType } from "react";
 import { motion } from "framer-motion";
 import { useNavigate } from 'react-router-dom';
 import { toast} from "react-hot-toast";
@@ -14,11 +14,10 @@ interface AuthLayoutProps {
   children: ReactNode;
 }
 
-interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  icon: React.ElementType;
+interface InputFieldProps extends ComponentPropsWithoutRef<'input'> {
+  icon: ElementType;
 }
 
-
 const AuthLayout = ({ children }: AuthLayoutProps) => (
   <div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
     <motion.div
@@ -32,14 +31,14 @@ const AuthLayout = ({ children }: AuthLayoutProps) => (
   </div>
 );
 
-const InputField = ({ icon: Icon, ...props }: InputFieldProps) => (
+const InputField = ({ icon: Icon, className, ...props }: InputFieldProps) => (
   <div className="relative">
     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
       <Icon className="h-5 w-5 text-gray-400" />
     </div>
     <input
-      {...props}
-      className="block w-full pl-10 pr-3 py-2 border border-gray-800 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+    {...props}
+      className={`block w-full pl-10 pr-3 py-2 border border-gray-800 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent ${className ?? ''}`}
     />
   </div>
 );
@@ -53,15 +52,16 @@ export default function ResetPasswordPage() {
 
 
   useEffect(() => {
-    const params = new URLSearchParams(window.location.hash.slice(1));
+    const paramsHash = new URLSearchParams(window.location.hash.slice(1));
+    const paramsSearch = new URLSearchParams(window.location.search);
 
-    const accessToken = params.get('access_token');
-    const refreshToken = params.get('refresh_token');
+    const accessToken = paramsHash.get('access_token');
+    const refreshToken = paramsHash.get('refresh_token');
+    const code = paramsSearch.get('code');
 
-    const clearUrlHash = () => {
-      if (window.location.hash) {
-        window.history.replaceState({}, document.title, window.location.pathname + window.location.search);
-      }
+    const clearUrl = () => {
+      const url = window.location.pathname;
+      window.history.replaceState({}, document.title, url);
     };
 
     if (accessToken && refreshToken) {
@@ -79,17 +79,33 @@ export default function ResetPasswordPage() {
           toast.error("Error setting session");
           navigate('/login', { replace: true });
         } finally {
-          clearUrlHash();
+          clearUrl();
+        }
+      })();
+    } else if (code) {
+      (async () => {
+        try {
+          const { error } = await supabase.auth.exchangeCodeForSession(code);
+          if (error) {
+            toast.error("Error exchanging code: " + error.message);
+            navigate('/login', { replace: true });
+          }
+        } catch {
+          toast.error("Error exchanging code");
+          navigate('/login', { replace: true });
+        } finally {
+          clearUrl();
         }
       })();
     } else {
       toast.error("Access denied");
       navigate('/login', { replace: true });
-      clearUrlHash();
+      clearUrl();
     }
   }, [navigate]);
 
 
+
   const handleAuth = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);

frontend/src/components/pages/SignUpPage.tsx

@@ -35,14 +35,14 @@ const AuthLayout = ({ children }: AuthLayoutProps) => (
   </div>
 );
 
-const InputField = ({ icon: Icon, ...props }: InputFieldProps) => (
+const InputField = ({ icon: Icon, className, ...props }: InputFieldProps) => (
   <div className="relative">
     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
       <Icon className="h-5 w-5 text-gray-400" />
     </div>
     <input
       {...props}
-      className="block w-full pl-10 pr-3 py-2 border border-gray-800 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+      className={`block w-full pl-10 pr-3 py-2 border border-gray-800 rounded-lg bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent ${className ?? ''}`}
     />
   </div>
 );
@@ -86,27 +86,29 @@ export default function SignUpPage() {
       return;
     }
     setIsLoading(true);
-    const { data, error } = await supabase.auth.signUp({
-      email: email,
-      password: password,
-      options: {
-        data: {
-          display_name: name
+    try {
+      const redirectTo = import.meta.env.VITE_BASE_URL || window.location.origin;
+      const { data, error } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          data: { display_name: name },
+          emailRedirectTo: redirectTo,
         },
-        emailRedirectTo: import.meta.env.VITE_BASE_URL,
-      },
-    })
-    setIsLoading(false);
-    // Email already confirmed
-    if (data?.user?.confirmed_at) {
-      toast.error("Email is already registered. Please log in.");
-      return;
-    }
-    if (error) {
-      toast.error(error.message || "An Unknown error occured!");
-      return;
+      });
+      if (error) {
+        const msg = /already|exist/i.test(error.message)
+          ? "Email is already registered. Please log in."
+          : (error.message || "An unknown error occurred!");
+        toast.error(msg);
+        return;
+      }
+      setMailPage(true);
+    } catch {
+      toast.error("Unexpected error during sign up.");
+    } finally {
+      setIsLoading(false);
     }
-    setMailPage(true);
   };
 
   return (