Skip to content

Commit 28165f8

Browse files
AnujaKalahara99AnujaKalahara99
committed
Updated accept invite
1 parent e9ed898 commit 28165f8

File tree

1 file changed

+73
-87
lines changed

1 file changed

+73
-87
lines changed

‎Frontend/src/App/Dashboard/AcceptInvite.tsx‎

Lines changed: 73 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import { useNavigate, useParams } from "react-router";
3+
import { Users, AlertCircle, ArrowRight, Info } from "lucide-react";
34
import ThemeToggleButton from "../../components/ThemeToggleBtn";
45
import { useTheme } from "../../Contexts/ThemeProvider";
56

@@ -49,6 +50,14 @@ const CollaboratePage: React.FC = () => {
4950
}
5051
);
5152

53+
if (response.status === 401) {
54+
localStorage.setItem("invitationId", invitationId);
55+
console.warn("Unauthorized! Redirecting to login.");
56+
navigate("/login", { state: { invitationId } });
57+
58+
return;
59+
}
60+
5261
if (!response.ok) {
5362
const errorData = await response.json();
5463
throw new Error(errorData.message || "Failed to accept invitation");
@@ -75,133 +84,107 @@ const CollaboratePage: React.FC = () => {
7584

7685
return (
7786
<div
78-
className={`min-h-screen flex items-center justify-center p-4 ${theme.surface} relative overflow-hidden`}
87+
className={`min-h-screen flex items-center justify-center p-4 ${theme.surface}`}
7988
>
80-
{/* Background decoration */}
81-
<div className="absolute inset-0 opacity-5">
82-
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
83-
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500 rounded-full blur-3xl"></div>
84-
</div>
85-
8689
<div
87-
className={`w-full max-w-lg relative z-10 transform transition-all duration-700 ease-out ${
90+
className={`w-full max-w-lg transform transition-all duration-700 ease-out ${
8891
showContent ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
8992
}`}
9093
>
9194
{/* Main Card */}
9295
<div
93-
className={`rounded-2xl p-8 shadow-2xl backdrop-blur-sm border text-center relative overflow-hidden ${theme.surfaceSecondary} ${theme.border}`}
94-
style={{
95-
background: `linear-gradient(135deg, ${theme.surfaceSecondary} 0%, ${theme.surface} 100%)`,
96-
}}
96+
className={`rounded-lg p-6 shadow-lg border ${theme.surfaceSecondary} ${theme.border}`}
9797
>
9898
{/* Header */}
99-
<div className="flex items-center justify-between mb-8">
99+
<div className="flex items-center justify-between mb-6">
100100
<div className="flex items-center gap-3">
101-
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
102-
<h1 className={`text-2xl font-bold ${theme.text} tracking-tight`}>
103-
Ready to Collaborate?
101+
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
102+
<h1 className={`text-xl font-semibold ${theme.text}`}>
103+
Accept Invitation
104104
</h1>
105105
</div>
106106
<ThemeToggleButton size="small" />
107107
</div>
108108

109109
{/* Collaboration Icon */}
110-
<div className="mb-6 relative">
111-
<div className="w-20 h-20 mx-auto mb-4 relative">
112-
<div className="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl rotate-12 opacity-20 animate-pulse"></div>
113-
<div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700 rounded-2xl flex items-center justify-center">
114-
<svg
115-
className="w-10 h-10 text-white"
116-
fill="none"
117-
stroke="currentColor"
118-
viewBox="0 0 24 24"
119-
>
120-
<path
121-
strokeLinecap="round"
122-
strokeLinejoin="round"
123-
strokeWidth={2}
124-
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
125-
/>
126-
</svg>
127-
</div>
110+
<div className="mb-6 flex justify-center">
111+
<div
112+
className={`w-16 h-16 ${theme.surface} border ${theme.border} rounded-lg flex items-center justify-center`}
113+
>
114+
<Users className={`w-8 h-8 ${theme.text}`} />
128115
</div>
129116
</div>
130117

131118
{/* Error Message */}
132119
{error && (
133-
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
120+
<div
121+
className={`mb-4 p-3 ${theme.surface} border border-red-500 rounded-md`}
122+
>
134123
<div className="flex items-center gap-2">
135-
<svg
136-
className="w-5 h-5 text-red-500"
137-
fill="none"
138-
stroke="currentColor"
139-
viewBox="0 0 24 24"
140-
>
141-
<path
142-
strokeLinecap="round"
143-
strokeLinejoin="round"
144-
strokeWidth={2}
145-
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
146-
/>
147-
</svg>
148-
<p className="text-red-700 dark:text-red-300 text-sm font-medium">
149-
{error}
150-
</p>
124+
<AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
125+
<p className="text-red-500 text-sm">{error}</p>
151126
</div>
152127
</div>
153128
)}
154129

155130
{/* Description */}
156-
<div className="mb-8">
157-
<p className={`text-lg ${theme.textSecondary} leading-relaxed`}>
131+
<div className="mb-6">
132+
<p
133+
className={`text-sm ${theme.textSecondary} leading-relaxed mb-4`}
134+
>
158135
You've been invited to collaborate on a codespace. Click the
159136
button below to join the workspace and start coding together.
160137
</p>
161138

162139
{invitationId && (
163-
<div className="mt-4 p-3 dark:bg-gray-800/50 rounded-lg">
164-
<p className={`text-xs ${theme.textSecondary} mb-1`}>
165-
Invitation ID:
140+
<div
141+
className={`p-3 ${theme.surface} border ${theme.border} rounded-md`}
142+
>
143+
<p
144+
className={`text-xs ${theme.textSecondary} mb-2 uppercase tracking-wide`}
145+
>
146+
Invitation ID
166147
</p>
167-
<code className={`text-sm font-mono ${theme.text} break-all`}>
148+
<code
149+
className={`text-sm font-mono ${theme.text} block break-all`}
150+
>
168151
{invitationId}
169152
</code>
170153
</div>
171154
)}
172155
</div>
173156

174157
{/* Action Buttons */}
175-
<div className="space-y-4">
158+
<div className="space-y-3">
176159
<button
177160
onClick={handleProceed}
178161
disabled={isLoading || !invitationId}
179162
className={`
180-
w-full px-8 py-4 rounded-xl font-semibold text-white
181-
bg-gradient-to-r from-blue-600 to-purple-600
182-
hover:from-blue-700 hover:to-purple-700
183-
transform transition-all duration-200
184-
hover:scale-[1.02] hover:shadow-xl
185-
active:scale-[0.98]
186-
disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none
187-
relative overflow-hidden
188-
${isLoading ? "animate-pulse" : ""}
189-
`}
163+
w-full px-4 py-2 rounded-md text-sm font-medium
164+
text-white bg-blue-600 hover:bg-blue-700
165+
disabled:opacity-50 disabled:cursor-not-allowed
166+
transition-colors duration-200
167+
flex items-center justify-center gap-2
168+
${isLoading ? "cursor-wait" : ""}
169+
`}
190170
>
191-
{isLoading && (
192-
<div className="absolute inset-0 bg-white/20 flex items-center justify-center">
193-
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
194-
</div>
171+
{isLoading ? (
172+
<>
173+
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
174+
Processing...
175+
</>
176+
) : (
177+
<>
178+
<ArrowRight className="w-4 h-4" />
179+
Accept Invitation
180+
</>
195181
)}
196-
<span className={isLoading ? "opacity-50" : ""}>
197-
{isLoading ? "Processing..." : "🚀 Start Collaborating"}
198-
</span>
199182
</button>
200183
</div>
201184

202185
{/* Status indicator */}
203-
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
204-
<div className="flex items-center justify-center gap-2 text-sm">
186+
<div className={`mt-4 pt-4 border-t ${theme.border}`}>
187+
<div className="flex items-center gap-2 text-xs">
205188
<div
206189
className={`w-2 h-2 rounded-full ${
207190
invitationId ? "bg-green-500" : "bg-red-500"
@@ -218,18 +201,21 @@ const CollaboratePage: React.FC = () => {
218201

219202
{/* Additional Info Card */}
220203
<div
221-
className={`mt-4 p-4 rounded-xl ${theme.surfaceSecondary} ${
204+
className={`mt-3 p-3 rounded-lg ${theme.surface} border ${
222205
theme.border
223-
} border text-center transform transition-all duration-700 delay-200 ${
224-
showContent
225-
? "translate-y-0 opacity-100"
226-
: "translate-y-4 opacity-0"
227-
}`}
206+
}
207+
transform transition-all duration-700 delay-200 ${
208+
showContent ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
209+
}`}
228210
>
229-
<p className={`text-sm ${theme.textSecondary}`}>
230-
💡 <strong>Tip:</strong> Make sure you're logged in to access the
231-
collaborative workspace
232-
</p>
211+
<div className="flex items-start gap-2">
212+
<Info
213+
className={`w-4 h-4 ${theme.textSecondary} mt-0.5 flex-shrink-0`}
214+
/>
215+
<p className={`text-xs ${theme.textSecondary}`}>
216+
Make sure you're logged in to access the collaborative workspace
217+
</p>
218+
</div>
233219
</div>
234220
</div>
235221
</div>

0 commit comments

Comments
 (0)