andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Add 404 page and invitation success screen

Browse Source 
- Created NotFound component with proper error messaging and navigation
- Added catch-all route (*) in App.js for undefined routes
- Added success state in AcceptInvitation with user info display
- Auto-redirect after 3 seconds with manual continue button option
- Improved UX with animated success indicator
This commit is contained in:
Koncept Kit
2026-01-05 14:51:39 +07:00
parent 48802fe0c6
commit fa9a1d1d1d
3 changed files with 176 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/pages/AcceptInvitation.js
View File

@@ -19,6 +19,8 @@ const AcceptInvitation = () => {
const [invitation, setInvitation] = useState(null);
const [loading, setLoading] = useState(true);
const [submitting, setSubmitting] = useState(false);
const [success, setSuccess] = useState(false);
const [successUser, setSuccessUser] = useState(null);
const [error, setError] = useState(null);
const [formData, setFormData] = useState({
password: '',
@@ -134,19 +136,23 @@ const AcceptInvitation = () => {
const { access_token, user } = response.data;
localStorage.setItem('token', access_token);
toast.success('Welcome to LOAF! Your account has been created successfully.');
// Call login to update auth context
if (login) {
await login(invitation.email, formData.password);
}
// Redirect based on role
if (user.role === 'admin' || user.role === 'superadmin') {
navigate('/admin');
} else {
navigate('/dashboard');
}
// Show success state
setSuccessUser(user);
setSuccess(true);
// Auto-redirect after 3 seconds
setTimeout(() => {
if (user.role === 'admin' || user.role === 'superadmin') {
navigate('/admin');
} else {
navigate('/dashboard');
}
}, 3000);
} catch (error) {
const errorMessage = error.response?.data?.detail || 'Failed to accept invitation';
toast.error(errorMessage);
@@ -206,6 +212,83 @@ const AcceptInvitation = () => {
);
}
if (success) {
const redirectPath = successUser?.role === 'admin' || successUser?.role === 'superadmin' ? '/admin' : '/dashboard';
return (
<div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
<Card className="w-full max-w-2xl p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
{/* Success Animation */}
<div className="mb-8">
<div className="h-24 w-24 mx-auto rounded-full bg-gradient-to-br from-[#81B29A] to-[#6DA085] flex items-center justify-center animate-bounce">
<CheckCircle className="h-12 w-12 text-white" />
</div>
</div>
{/* Success Message */}
<h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Welcome to LOAF! 🎉
</h1>
<p className="text-xl text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your account has been created successfully.
</p>
{/* User Info Card */}
<div className="mb-8 p-6 bg-gradient-to-r from-[#DDD8EB] to-[#F9F8FB] rounded-xl">
<div className="grid md:grid-cols-2 gap-4 text-left">
<div>
<p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Name
</p>
<p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{successUser?.first_name} {successUser?.last_name}
</p>
</div>
<div>
<p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Email
</p>
<p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{successUser?.email}
</p>
</div>
<div>
<p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Role
</p>
<div>{getRoleBadge(successUser?.role)}</div>
</div>
<div>
<p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Status
</p>
<Badge className="bg-[#81B29A] text-white px-4 py-2 rounded-full text-sm">
{successUser?.status}
</Badge>
</div>
</div>
</div>
{/* Redirect Info */}
<div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-xl">
<p className="text-sm text-blue-800" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Loader2 className="h-4 w-4 inline mr-2 animate-spin" />
Redirecting you to your dashboard in 3 seconds...
</p>
</div>
{/* Manual Continue Button */}
<Button
onClick={() => navigate(redirectPath)}
className="w-full h-14 rounded-xl bg-gradient-to-r from-[#81B29A] to-[#6DA085] hover:from-[#6DA085] hover:to-[#5A8F72] text-white text-lg font-semibold"
>
Continue to Dashboard
</Button>
</Card>
</div>
);
}
return (
<div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
<Card className="w-full max-w-3xl p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb]">