fix(web): Adjust invite page height and padding

brandonkachen · codebuff-team · brandonkachen · commit 0cb9e6a6b3b7 · 2025-06-04T20:51:44.000-07:00
Generated with Codebuff 🤖
Co-Authored-By: Codebuff &lt;noreply@codebuff.com&gt;
diff --git a/web/src/app/invites/[token]/page.tsx b/web/src/app/invites/[token]/page.tsx
@@ -4,7 +4,13 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { CheckCircle, XCircle, Clock, Users } from 'lucide-react'
 
@@ -54,7 +60,9 @@ export default function InvitationPage({ params }: PageProps) {
 
   const acceptInvitation = async () => {
     if (!session) {
-      router.push(`/login?callbackUrl=${encodeURIComponent(window.location.href)}`)
+      router.push(
+        `/login?callbackUrl=${encodeURIComponent(window.location.href)}`
+      )
       return
     }
 
@@ -85,7 +93,7 @@ export default function InvitationPage({ params }: PageProps) {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-black text-white">
+      <div className="flex items-center justify-center bg-black text-white">
         <Card className="w-full max-w-md bg-gray-900 border border-gray-700 shadow-xl">
           <CardHeader>
             <Skeleton className="h-6 w-3/4 bg-gray-700" />
@@ -101,7 +109,7 @@ export default function InvitationPage({ params }: PageProps) {
 
   if (error) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-black text-white">
+      <div className="flex items-center justify-center bg-black text-white">
         <Card className="w-full max-w-md bg-gray-900 border border-red-500 shadow-xl">
           <CardHeader>
             <div className="flex items-center gap-2">
@@ -111,9 +119,9 @@ export default function InvitationPage({ params }: PageProps) {
             <CardDescription className="text-gray-400">{error}</CardDescription>
           </CardHeader>
           <CardContent>
-            <Button 
-              onClick={() => router.push('/')} 
-              variant="outline" 
+            <Button
+              onClick={() => router.push('/')}
+              variant="outline"
               className="w-full border-gray-600 hover:bg-gray-700 text-white"
             >
               Go to Homepage
@@ -126,12 +134,14 @@ export default function InvitationPage({ params }: PageProps) {
 
   if (success) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-black text-white">
+      <div className="flex items-center justify-center bg-black text-white">
         <Card className="w-full max-w-md bg-gray-900 border border-green-500 shadow-xl">
           <CardHeader>
             <div className="flex items-center gap-2">
               <CheckCircle className="h-5 w-5 text-green-400" />
-              <CardTitle className="text-green-400">Welcome to {invitation?.organization_name}!</CardTitle>
+              <CardTitle className="text-green-400">
+                Welcome to {invitation?.organization_name}!
+              </CardTitle>
             </div>
             <CardDescription className="text-gray-400">
               You've successfully joined the organization. Redirecting...
@@ -149,15 +159,16 @@ export default function InvitationPage({ params }: PageProps) {
   const isExpired = new Date(invitation.expires_at) < new Date()
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-black text-white relative overflow-hidden">
+    <div className="flex items-center justify-center bg-black text-white relative overflow-hidden py-12">
       <Card className="w-full max-w-md bg-gray-900 border border-gray-700 shadow-xl z-10">
         <CardHeader>
           <div className="flex items-center gap-2">
             <Users className="h-5 w-5 text-blue-400" />
             <CardTitle>Organization Invitation</CardTitle>
           </div>
           <CardDescription className="text-gray-400">
-            {invitation.inviter_name} has invited you to join {invitation.organization_name}
+            {invitation.inviter_name} has invited you to join{' '}
+            {invitation.organization_name}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -182,9 +193,9 @@ export default function InvitationPage({ params }: PageProps) {
           {isExpired ? (
             <div className="text-center">
               <p className="text-red-400 mb-4">This invitation has expired.</p>
-              <Button 
-                onClick={() => router.push('/')} 
-                variant="outline" 
+              <Button
+                onClick={() => router.push('/')}
+                variant="outline"
                 className="w-full border-gray-600 hover:bg-gray-700 text-white"
               >
                 Go to Homepage
@@ -199,28 +210,33 @@ export default function InvitationPage({ params }: PageProps) {
                   <p className="text-gray-400 mb-4">
                     Please sign in to accept this invitation.
                   </p>
-                  <Button 
-                    onClick={() => router.push(`/login?callbackUrl=${encodeURIComponent(window.location.href)}`)}
+                  <Button
+                    onClick={() =>
+                      router.push(
+                        `/login?callbackUrl=${encodeURIComponent(window.location.href)}`
+                      )
+                    }
                     className="w-full bg-blue-600 hover:bg-blue-700 text-white"
                   >
                     Sign In to Accept
                   </Button>
                 </div>
               ) : session.user?.email !== invitation.email ? (
-                <div className="text-center">
+                <div className="text-left">
                   <p className="text-red-400 mb-4">
-                    This invitation is for {invitation.email}, but you're signed in as {session.user?.email}.
+                    This invitation is for {invitation.email}, but you're signed
+                    in as {session.user?.email}.
                   </p>
-                  <Button 
+                  <Button
                     onClick={() => router.push('/login')}
-                    variant="outline" 
+                    variant="outline"
                     className="w-full border-gray-600 hover:bg-gray-700 text-white"
                   >
                     Sign in with correct account
                   </Button>
                 </div>
               ) : (
-                <Button 
+                <Button
                   onClick={acceptInvitation}
                   disabled={accepting}
                   className="w-full bg-green-600 hover:bg-green-700 text-white"
@@ -234,4 +250,4 @@ export default function InvitationPage({ params }: PageProps) {
       </Card>
     </div>
   )
-}
+}
diff --git a/web/src/components/organization/team-management.tsx b/web/src/components/organization/team-management.tsx
@@ -97,8 +97,12 @@ export function TeamManagement({
     new Set()
   )
   const [refreshing, setRefreshing] = useState(false)
-  const [confirmResendDialogOpen, setConfirmResendDialogOpen] = useState(false);
-  const [currentInvitationToResend, setCurrentInvitationToResend] = useState<Invitation | null>(null);
+  const [confirmResendDialogOpen, setConfirmResendDialogOpen] = useState(false)
+  const [currentInvitationToResend, setCurrentInvitationToResend] =
+    useState<Invitation | null>(null)
+  const [confirmCancelDialogOpen, setConfirmCancelDialogOpen] = useState(false)
+  const [currentInvitationToCancel, setCurrentInvitationToCancel] =
+    useState<Invitation | null>(null)
 
   const canManageTeam = userRole === 'owner' || userRole === 'admin'
   const isMobile = useIsMobile()
@@ -157,10 +161,6 @@ export function TeamManagement({
     }
   }
 
-  const handleRefresh = () => {
-    fetchTeamData(false)
-  }
-
   const handleInviteMember = async () => {
     if (!inviteForm.email.trim()) {
       toast({
@@ -346,16 +346,16 @@ export function TeamManagement({
   }
 
   const handleInitiateResend = (invitation: Invitation) => {
-    setCurrentInvitationToResend(invitation);
-    setConfirmResendDialogOpen(true);
-  };
+    setCurrentInvitationToResend(invitation)
+    setConfirmResendDialogOpen(true)
+  }
 
   const handleConfirmResend = async () => {
-    if (!currentInvitationToResend) return;
+    if (!currentInvitationToResend) return
 
-    const email = currentInvitationToResend.email;
-    setResendingInvites((prev) => new Set(prev).add(email));
-    setConfirmResendDialogOpen(false); // Close dialog
+    const email = currentInvitationToResend.email
+    setResendingInvites((prev) => new Set(prev).add(email))
+    setConfirmResendDialogOpen(false) // Close dialog
 
     try {
       const response = await fetch(
@@ -392,18 +392,48 @@ export function TeamManagement({
         newSet.delete(email)
         return newSet
       })
-      setCurrentInvitationToResend(null);
+      setCurrentInvitationToResend(null)
     }
   }
 
   const handleCancelInvitation = async (email: string) => {
-    if (
-      !confirm(
-        `Are you sure you want to remove ${email} from the organization?`
+    try {
+      const response = await fetch(
+        `/api/orgs/${organizationId}/invitations/${encodeURIComponent(email)}`,
+        {
+          method: 'DELETE',
+        }
       )
-    ) {
-      return
+
+      if (!response.ok) {
+        const data = await response.json()
+        throw new Error(data.error || 'Failed to cancel invitation')
+      }
+
+      toast({
+        title: 'Success',
+        description: 'Invitation cancelled',
+      })
+
+      fetchTeamData(false) // Refresh without showing skeleton
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description:
+          error instanceof Error
+            ? error.message
+            : 'Failed to cancel invitation',
+        variant: 'destructive',
+      })
     }
+  }
+
+  const handleConfirmCancel = async () => {
+    if (!currentInvitationToCancel) return
+
+    const email = currentInvitationToCancel.email
+    // We can add a loading state for cancelling if needed, similar to resending
+    setConfirmCancelDialogOpen(false) // Close dialog
 
     try {
       const response = await fetch(
@@ -433,6 +463,8 @@ export function TeamManagement({
             : 'Failed to cancel invitation',
         variant: 'destructive',
       })
+    } finally {
+      setCurrentInvitationToCancel(null)
     }
   }
 
@@ -969,7 +1001,10 @@ export function TeamManagement({
       )}
 
       {/* Confirmation Dialog for Resend */}
-      <Dialog open={confirmResendDialogOpen} onOpenChange={setConfirmResendDialogOpen}>
+      <Dialog
+        open={confirmResendDialogOpen}
+        onOpenChange={setConfirmResendDialogOpen}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Confirm Resend Invitation</DialogTitle>
@@ -980,12 +1015,52 @@ export function TeamManagement({
           </DialogHeader>
           <DialogFooter className="gap-2 sm:gap-0">
             <DialogClose asChild>
-              <Button variant="destructive" onClick={() => setCurrentInvitationToResend(null)}>
+              <Button
+                variant="destructive"
+                onClick={() => setCurrentInvitationToResend(null)}
+              >
                 Cancel
               </Button>
             </DialogClose>
-            <Button onClick={handleConfirmResend} disabled={resendingInvites.has(currentInvitationToResend?.email || '')}>
-              {resendingInvites.has(currentInvitationToResend?.email || '') ? 'Resending...' : 'Confirm Resend'}
+            <Button
+              onClick={handleConfirmResend}
+              disabled={resendingInvites.has(
+                currentInvitationToResend?.email || ''
+              )}
+            >
+              {resendingInvites.has(currentInvitationToResend?.email || '')
+                ? 'Resending...'
+                : 'Confirm Resend'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Confirmation Dialog for Cancel Invitation */}
+      <Dialog
+        open={confirmCancelDialogOpen}
+        onOpenChange={setConfirmCancelDialogOpen}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Confirm Cancel Invitation</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to cancel the invitation for{' '}
+              <strong>{currentInvitationToCancel?.email}</strong>? This action
+              cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <DialogClose asChild>
+              <Button
+                variant="outline"
+                onClick={() => setCurrentInvitationToCancel(null)}
+              >
+                Back
+              </Button>
+            </DialogClose>
+            <Button variant="destructive" onClick={handleConfirmCancel}>
+              Confirm Cancel
             </Button>
           </DialogFooter>
         </DialogContent>
