Fix: Ensure email change request is sent.

The email change request was failing with a 400 error. This commit addresses the issue by ensuring the email change request is correctly sent when a user updates their email in the profile dashboard.

application/src/components/profile/ProfileContent.tsx

@@ -1,5 +1,5 @@
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { User } from "@/services/userService";
 import { UserProfileDetails } from "./UserProfileDetails";
@@ -9,11 +9,19 @@ import { UpdateProfileForm } from "./UpdateProfileForm";
 
 interface ProfileContentProps {
   currentUser: User | null;
+  onUserUpdated?: () => Promise<void>;
 }
 
-export function ProfileContent({ currentUser }: ProfileContentProps) {
+export function ProfileContent({ currentUser, onUserUpdated }: ProfileContentProps) {
   const [activeTab, setActiveTab] = useState("details");
 
+  // When active tab changes, refresh user data if needed
+  useEffect(() => {
+    if (activeTab === "details" && onUserUpdated) {
+      onUserUpdated();
+    }
+  }, [activeTab, onUserUpdated]);
+
   if (!currentUser) {
     return (
       <Card>
@@ -71,4 +79,4 @@ export function ProfileContent({ currentUser }: ProfileContentProps) {
       </div>
     </div>
   );
-}
+}

application/src/components/profile/UpdateProfileForm.tsx

@@ -9,7 +9,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Input } from "@/components/ui/input";
 import { useToast } from "@/hooks/use-toast";
 import { authService } from "@/services/authService";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, CheckCircle } from "lucide-react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 
 // Profile update form schema
@@ -35,6 +35,7 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [emailChangeRequested, setEmailChangeRequested] = useState(false);
   const [updateError, setUpdateError] = useState<string | null>(null);
+  const [updateSuccess, setUpdateSuccess] = useState<string | null>(null);
   const { toast } = useToast();
   
   // Initialize the form with current user data
@@ -50,6 +51,7 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
   async function onSubmit(data: ProfileFormValues) {
     setIsSubmitting(true);
     setUpdateError(null);
+    setUpdateSuccess(null);
     setEmailChangeRequested(false);
     
     try {
@@ -62,8 +64,9 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
       const updateData = {
         full_name: data.full_name,
         username: data.username,
+        // Only include email if it's changed
         email: isEmailChanged ? data.email : undefined,
-        // Only set emailVisibility if email is being changed
+        // Always set emailVisibility to true if email is changing
         emailVisibility: isEmailChanged ? true : undefined
       };
       
@@ -78,11 +81,14 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
       // If email was changed, show a specific message
       if (isEmailChanged) {
         setEmailChangeRequested(true);
+        setUpdateSuccess("A verification email has been sent to your new email address. Please check your inbox to complete the change.");
         toast({
-          title: "Email change requested",
+          title: "Email verification sent",
           description: "A verification email has been sent to your new email address. Please check your inbox and follow the instructions to complete the change.",
+          variant: "default",
         });
       } else {
+        setUpdateSuccess("Your profile information has been updated successfully.");
         toast({
           title: "Profile updated",
           description: "Your profile information has been updated successfully.",
@@ -118,6 +124,15 @@ export function UpdateProfileForm({ user }: UpdateProfileFormProps) {
           </Alert>
         )}
         
+        {updateSuccess && (
+          <Alert className="bg-green-50 border-green-200 text-green-800">
+            <CheckCircle className="h-4 w-4 text-green-600" />
+            <AlertDescription>
+              {updateSuccess}
+            </AlertDescription>
+          </Alert>
+        )}
+        
         {emailChangeRequested && (
           <Alert className="bg-yellow-50 border-yellow-200 text-yellow-800">
             <AlertCircle className="h-4 w-4 text-yellow-600" />