mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-23 01:17:56 +00:00
467 lines
13 KiB
TypeScript
467 lines
13 KiB
TypeScript
// ========================================
|
|
// Route Guard Components
|
|
// ========================================
|
|
// Protected route wrappers that check user permissions
|
|
|
|
import React, { useEffect, useState, ReactNode } from 'react';
|
|
import { Navigate } from 'react-router-dom';
|
|
import { usePezkuwi } from '@/contexts/PezkuwiContext';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import {
|
|
checkCitizenStatus,
|
|
checkValidatorStatus,
|
|
checkEducatorRole,
|
|
checkModeratorRole,
|
|
} from '@pezkuwi/lib/guards';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
import { Loader2, AlertCircle, Users, GraduationCap, Shield } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface RouteGuardProps {
|
|
children: ReactNode;
|
|
fallbackPath?: string;
|
|
}
|
|
|
|
// ========================================
|
|
// LOADING COMPONENT
|
|
// ========================================
|
|
|
|
const LoadingGuard: React.FC = () => {
|
|
return (
|
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center">
|
|
<Card className="bg-gray-900 border-gray-800 p-8">
|
|
<CardContent className="flex flex-col items-center gap-4">
|
|
<Loader2 className="w-12 h-12 text-green-500 animate-spin" />
|
|
<p className="text-gray-400">Checking permissions...</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ========================================
|
|
// CITIZEN ROUTE GUARD
|
|
// ========================================
|
|
|
|
/**
|
|
* CitizenRoute - Requires approved KYC (citizenship)
|
|
* Use for: Voting, Education, Elections, etc.
|
|
*
|
|
* @example
|
|
* <Route path="/vote" element={
|
|
* <CitizenRoute>
|
|
* <VotingPage />
|
|
* </CitizenRoute>
|
|
* } />
|
|
*/
|
|
export const CitizenRoute: React.FC<RouteGuardProps> = ({
|
|
children,
|
|
fallbackPath = '/be-citizen',
|
|
}) => {
|
|
const { api, isApiReady, selectedAccount } = usePezkuwi();
|
|
const {} = useAuth();
|
|
const [isCitizen, setIsCitizen] = useState<boolean | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const checkPermission = async () => {
|
|
if (!isApiReady || !api) {
|
|
setLoading(true);
|
|
return;
|
|
}
|
|
|
|
if (!selectedAccount?.address) {
|
|
setIsCitizen(false);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const citizenStatus = await checkCitizenStatus(api, selectedAccount.address);
|
|
setIsCitizen(citizenStatus);
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) console.error('Citizen check failed:', error);
|
|
setIsCitizen(false);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
checkPermission();
|
|
}, [api, isApiReady, selectedAccount]);
|
|
|
|
// Loading state
|
|
if (loading || !isApiReady) {
|
|
return <LoadingGuard />;
|
|
}
|
|
|
|
// Not connected to wallet
|
|
if (!selectedAccount) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
|
<CardContent className="p-8">
|
|
<div className="flex flex-col items-center gap-4 text-center">
|
|
<Users className="w-16 h-16 text-yellow-500" />
|
|
<h2 className="text-2xl font-bold text-white">Wallet Not Connected</h2>
|
|
<p className="text-gray-400">
|
|
Please connect your Pezkuwi wallet to access this feature.
|
|
</p>
|
|
<Button
|
|
onClick={() => window.location.href = '/'}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
>
|
|
Go to Home
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Not a citizen
|
|
if (isCitizen === false) {
|
|
return <Navigate to={fallbackPath} replace />;
|
|
}
|
|
|
|
// Authorized
|
|
return <>{children}</>;
|
|
};
|
|
|
|
// ========================================
|
|
// VALIDATOR ROUTE GUARD
|
|
// ========================================
|
|
|
|
/**
|
|
* ValidatorRoute - Requires validator pool membership
|
|
* Use for: Validator pool dashboard, validator settings
|
|
*
|
|
* @example
|
|
* <Route path="/validator-pool" element={
|
|
* <ValidatorRoute>
|
|
* <ValidatorPoolDashboard />
|
|
* </ValidatorRoute>
|
|
* } />
|
|
*/
|
|
export const ValidatorRoute: React.FC<RouteGuardProps> = ({
|
|
children,
|
|
fallbackPath = '/staking',
|
|
}) => {
|
|
const { api, isApiReady, selectedAccount } = usePezkuwi();
|
|
const [isValidator, setIsValidator] = useState<boolean | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const checkPermission = async () => {
|
|
if (!isApiReady || !api) {
|
|
setLoading(true);
|
|
return;
|
|
}
|
|
|
|
if (!selectedAccount?.address) {
|
|
setIsValidator(false);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const validatorStatus = await checkValidatorStatus(api, selectedAccount.address);
|
|
setIsValidator(validatorStatus);
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) console.error('Validator check failed:', error);
|
|
setIsValidator(false);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
checkPermission();
|
|
}, [api, isApiReady, selectedAccount]);
|
|
|
|
// Loading state
|
|
if (loading || !isApiReady) {
|
|
return <LoadingGuard />;
|
|
}
|
|
|
|
// Not connected to wallet
|
|
if (!selectedAccount) {
|
|
return <Navigate to="/" replace />;
|
|
}
|
|
|
|
// Not in validator pool
|
|
if (isValidator === false) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
|
<CardContent className="p-8">
|
|
<Alert className="bg-red-900/20 border-red-500">
|
|
<AlertCircle className="h-5 w-5 text-red-400" />
|
|
<AlertDescription className="text-gray-300">
|
|
<strong className="block mb-2">Validator Access Required</strong>
|
|
You must be registered in the Validator Pool to access this feature.
|
|
<div className="mt-4">
|
|
<Button
|
|
onClick={() => window.location.href = fallbackPath}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
>
|
|
Go to Staking
|
|
</Button>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Authorized
|
|
return <>{children}</>;
|
|
};
|
|
|
|
// ========================================
|
|
// EDUCATOR ROUTE GUARD
|
|
// ========================================
|
|
|
|
/**
|
|
* EducatorRoute - Requires educator Tiki role
|
|
* Use for: Creating courses in Perwerde (Education platform)
|
|
*
|
|
* @example
|
|
* <Route path="/education/create-course" element={
|
|
* <EducatorRoute>
|
|
* <CourseCreator />
|
|
* </EducatorRoute>
|
|
* } />
|
|
*/
|
|
export const EducatorRoute: React.FC<RouteGuardProps> = ({
|
|
children,
|
|
fallbackPath = '/education',
|
|
}) => {
|
|
const { api, isApiReady, selectedAccount } = usePezkuwi();
|
|
const [isEducator, setIsEducator] = useState<boolean | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const checkPermission = async () => {
|
|
if (!isApiReady || !api) {
|
|
setLoading(true);
|
|
return;
|
|
}
|
|
|
|
if (!selectedAccount?.address) {
|
|
setIsEducator(false);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const educatorStatus = await checkEducatorRole(api, selectedAccount.address);
|
|
setIsEducator(educatorStatus);
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) console.error('Educator check failed:', error);
|
|
setIsEducator(false);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
checkPermission();
|
|
}, [api, isApiReady, selectedAccount]);
|
|
|
|
// Loading state
|
|
if (loading || !isApiReady) {
|
|
return <LoadingGuard />;
|
|
}
|
|
|
|
// Not connected to wallet
|
|
if (!selectedAccount) {
|
|
return <Navigate to="/" replace />;
|
|
}
|
|
|
|
// Not an educator
|
|
if (isEducator === false) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
|
<CardContent className="p-8">
|
|
<Alert className="bg-red-900/20 border-red-500">
|
|
<GraduationCap className="h-5 w-5 text-red-400" />
|
|
<AlertDescription className="text-gray-300">
|
|
<strong className="block mb-2">Educator Role Required</strong>
|
|
You need one of these Tiki roles to create courses:
|
|
<ul className="list-disc list-inside mt-2 text-sm">
|
|
<li>Perwerdekar (Educator)</li>
|
|
<li>Mamoste (Teacher)</li>
|
|
<li>WezireCand (Education Minister)</li>
|
|
<li>Rewsenbîr (Intellectual)</li>
|
|
</ul>
|
|
<div className="mt-4">
|
|
<Button
|
|
onClick={() => window.location.href = fallbackPath}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
>
|
|
Browse Courses
|
|
</Button>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Authorized
|
|
return <>{children}</>;
|
|
};
|
|
|
|
// ========================================
|
|
// MODERATOR ROUTE GUARD
|
|
// ========================================
|
|
|
|
/**
|
|
* ModeratorRoute - Requires moderator Tiki role
|
|
* Use for: Forum moderation, governance moderation
|
|
*
|
|
* @example
|
|
* <Route path="/moderate" element={
|
|
* <ModeratorRoute>
|
|
* <ModerationPanel />
|
|
* </ModeratorRoute>
|
|
* } />
|
|
*/
|
|
export const ModeratorRoute: React.FC<RouteGuardProps> = ({
|
|
children,
|
|
fallbackPath = '/',
|
|
}) => {
|
|
const { api, isApiReady, selectedAccount } = usePezkuwi();
|
|
const [isModerator, setIsModerator] = useState<boolean | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const checkPermission = async () => {
|
|
if (!isApiReady || !api) {
|
|
setLoading(true);
|
|
return;
|
|
}
|
|
|
|
if (!selectedAccount?.address) {
|
|
setIsModerator(false);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const moderatorStatus = await checkModeratorRole(api, selectedAccount.address);
|
|
setIsModerator(moderatorStatus);
|
|
} catch (error) {
|
|
if (import.meta.env.DEV) console.error('Moderator check failed:', error);
|
|
setIsModerator(false);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
checkPermission();
|
|
}, [api, isApiReady, selectedAccount]);
|
|
|
|
// Loading state
|
|
if (loading || !isApiReady) {
|
|
return <LoadingGuard />;
|
|
}
|
|
|
|
// Not connected to wallet
|
|
if (!selectedAccount) {
|
|
return <Navigate to="/" replace />;
|
|
}
|
|
|
|
// Not a moderator
|
|
if (isModerator === false) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
|
<CardContent className="p-8">
|
|
<Alert className="bg-red-900/20 border-red-500">
|
|
<Shield className="h-5 w-5 text-red-400" />
|
|
<AlertDescription className="text-gray-300">
|
|
<strong className="block mb-2">Moderator Access Required</strong>
|
|
You need moderator privileges to access this feature.
|
|
<div className="mt-4">
|
|
<Button
|
|
onClick={() => window.location.href = fallbackPath}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
>
|
|
Go to Home
|
|
</Button>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Authorized
|
|
return <>{children}</>;
|
|
};
|
|
|
|
// ========================================
|
|
// ADMIN ROUTE GUARD (Supabase-based)
|
|
// ========================================
|
|
|
|
/**
|
|
* AdminRoute - Requires Supabase admin role
|
|
* Use for: Admin panel, system settings
|
|
* Note: This is separate from blockchain permissions
|
|
*/
|
|
export const AdminRoute: React.FC<RouteGuardProps> = ({
|
|
children,
|
|
fallbackPath = '/',
|
|
}) => {
|
|
const { user, isAdmin, loading } = useAuth();
|
|
|
|
// Loading state
|
|
if (loading) {
|
|
return <LoadingGuard />;
|
|
}
|
|
|
|
// Not logged in
|
|
if (!user) {
|
|
return <Navigate to="/login" replace />;
|
|
}
|
|
|
|
// Not admin
|
|
if (!isAdmin) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
|
|
<Card className="bg-gray-900 border-gray-800 max-w-md">
|
|
<CardContent className="p-8">
|
|
<Alert className="bg-red-900/20 border-red-500">
|
|
<AlertCircle className="h-5 w-5 text-red-400" />
|
|
<AlertDescription className="text-gray-300">
|
|
<strong className="block mb-2">Admin Access Required</strong>
|
|
You do not have permission to access the admin panel.
|
|
<div className="mt-4">
|
|
<Button
|
|
onClick={() => window.location.href = fallbackPath}
|
|
className="bg-green-600 hover:bg-green-700"
|
|
>
|
|
Go to Home
|
|
</Button>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Authorized
|
|
return <>{children}</>;
|
|
};
|