Admin/ocean-cleanup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move Sign Out button to profile page

Browse Source 
- Remove Sign Out button from UserProfile component in header
- Add Sign Out button to UserProfilePage next to Edit Profile
- Sign Out button only visible on user's own profile page
- Styled with red background to indicate destructive action
This commit is contained in:
Paul Bailey
2025-11-16 23:01:36 +00:00
parent 0212e67052
commit 1e1e54e7ff
2 changed files with 40 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/auth/UserProfile.tsx
View File

@@ -1,4 +1,4 @@
import { useUser, useClerk } from '@clerk/clerk-react'; import { useUser } from '@clerk/clerk-react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
/** /**
@@ -6,14 +6,8 @@ import { useNavigate } from 'react-router-dom';
*/ */
export function UserProfile() { export function UserProfile() {
const { user, isLoaded } = useUser(); const { user, isLoaded } = useUser();
const { signOut } = useClerk();
const navigate = useNavigate(); const navigate = useNavigate();
const handleSignOut = async () => {
await signOut();
navigate('/');
};
const handleViewProfile = () => { const handleViewProfile = () => {
if (user?.id) { if (user?.id) {
navigate(`/profile/${user.id}`); navigate(`/profile/${user.id}`);
@@ -35,33 +29,25 @@ export function UserProfile() {
} }
return ( return (
<div className="flex items-center space-x-4"> <button
<button onClick={handleViewProfile}
onClick={handleViewProfile} className="flex items-center space-x-3 hover:opacity-80 transition-opacity"
className="flex items-center space-x-3 hover:opacity-80 transition-opacity" >
> {user.imageUrl && (
{user.imageUrl && ( <img
<img src={user.imageUrl}
src={user.imageUrl} alt={user.fullName || user.username || 'User'}
alt={user.fullName || user.username || 'User'} className="h-10 w-10 rounded-full object-cover border-2 border-gray-200"
className="h-10 w-10 rounded-full object-cover border-2 border-gray-200" />
/> )}
)} <div className="hidden md:block text-left">
<div className="hidden md:block text-left"> <p className="text-sm font-medium text-gray-900">
<p className="text-sm font-medium text-gray-900"> {user.fullName || user.username || 'User'}
{user.fullName || user.username || 'User'} </p>
</p> <p className="text-xs text-gray-500">
<p className="text-xs text-gray-500"> {user.primaryEmailAddress?.emailAddress}
{user.primaryEmailAddress?.emailAddress} </p>
</p> </div>
</div> </button>
</button>
<button
onClick={handleSignOut}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Sign Out
</button>
</div>
); );
} }

25
src/pages/UserProfilePage.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { useClerk } from '@clerk/clerk-react';
import { userService, type UserProfile, type UserActivity } from '@/services/userService'; import { userService, type UserProfile, type UserActivity } from '@/services/userService';
import type { Report, CleanupEvent } from '@/types'; import type { Report, CleanupEvent } from '@/types';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
@@ -23,6 +24,7 @@ L.Icon.Default.mergeOptions({
export function UserProfilePage() { export function UserProfilePage() {
const { userId } = useParams<{ userId: string }>(); const { userId } = useParams<{ userId: string }>();
const { user: currentUser } = useAuth(); const { user: currentUser } = useAuth();
const { signOut } = useClerk();
const navigate = useNavigate(); const navigate = useNavigate();
const [profile, setProfile] = useState<UserProfile | null>(null); const [profile, setProfile] = useState<UserProfile | null>(null);
@@ -264,12 +266,23 @@ export function UserProfilePage() {
</button> </button>
</> </>
) : ( ) : (
<button <>
onClick={handleEditProfile} <button
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" onClick={handleEditProfile}
> className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
Edit Profile >
</button> Edit Profile
</button>
<button
onClick={async () => {
await signOut();
navigate('/');
}}
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
>
Sign Out
</button>
</>
)} )}
</div> </div>
)} )}