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

Merge from Dev #8

Merged
andika merged 5 commits from dev into loaf-prod 2026-01-05 08:49:43 +00:00
Conversation 0 Commits 5 Files Changed 5 +176 -8
3 changed files with 176 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fa9a1d1d1d - Show all commits

4
src/App.js
View File

@@ -51,6 +51,7 @@ import ContactUs from './pages/ContactUs';
import TermsOfService from './pages/TermsOfService';
import PrivacyPolicy from './pages/PrivacyPolicy';
import AcceptInvitation from './pages/AcceptInvitation';
import NotFound from './pages/NotFound';
const PrivateRoute = ({ children, adminOnly = false }) => {
const { user, loading } = useAuth();
@@ -280,6 +281,9 @@ function App() {
</AdminLayout>
</PrivateRoute>
} />
{/* 404 - Catch all undefined routes */}
<Route path="*" element={<NotFound />} />
</Routes>
<Toaster position="top-right" />
</BrowserRouter>

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]">

81
src/pages/NotFound.js Normal file
View File

@@ -0,0 +1,81 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { Home, ArrowLeft, Search } from 'lucide-react';
const NotFound = () => {
const navigate = useNavigate();
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">
{/* 404 Illustration */}
<div className="mb-8">
<div className="relative">
<h1
className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-[#ddd8eb] to-[#f9f8fb] leading-none"
style={{ fontFamily: "'Inter', sans-serif" }}
>
404
</h1>
<div className="absolute inset-0 flex items-center justify-center">
<Search className="h-24 w-24 text-[#664fa3] opacity-30" />
</div>
</div>
</div>
{/* Message */}
<h2
className="text-3xl font-semibold text-[#422268] mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Page Not Found
</h2>
<p
className="text-lg text-[#664fa3] mb-8 max-w-md mx-auto"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
</p>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
onClick={() => navigate(-1)}
variant="outline"
className="rounded-xl border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f9f8fb] px-6 py-6"
>
<ArrowLeft className="h-5 w-5 mr-2" />
Go Back
</Button>
<Button
onClick={() => navigate('/')}
className="rounded-xl bg-gradient-to-r from-[#664fa3] to-[#422268] hover:from-[#422268] hover:to-[#664fa3] text-white px-6 py-6"
>
<Home className="h-5 w-5 mr-2" />
Back to Home
</Button>
</div>
{/* Help Text */}
<div className="mt-8 pt-8 border-t border-[#ddd8eb]">
<p
className="text-sm text-[#664fa3]"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Need help? Contact us at{' '}
<a
href="mailto:support@loaftx.org"
className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
>
support@loaftx.org
</a>
</p>
</div>
</Card>
</div>
);
};
export default NotFound;