This repository has no description
1// src/components/Admin/AdminRoute.jsx
2import React, { useState, useEffect } from 'react';
3import { supabase } from '../../lib/supabase';
4import AdminPanel from './AdminPanel';
5
6const AdminRoute = () => {
7 const [isAuthenticated, setIsAuthenticated] = useState(null);
8 const [isLoading, setIsLoading] = useState(true);
9 const [email, setEmail] = useState('');
10 const [password, setPassword] = useState('');
11 const [authError, setAuthError] = useState(null);
12
13 useEffect(() => {
14 const checkAuth = async () => {
15 try {
16 const { data: { session } } = await supabase.auth.getSession();
17 setIsAuthenticated(!!session);
18 } catch (error) {
19 console.error('Error checking auth status:', error);
20 setIsAuthenticated(false);
21 } finally {
22 setIsLoading(false);
23 }
24 };
25
26 checkAuth();
27
28 // Listen for auth changes
29 const { data: { subscription } } = supabase.auth.onAuthStateChange(
30 (_event, session) => {
31 setIsAuthenticated(!!session);
32 }
33 );
34
35 return () => {
36 subscription.unsubscribe();
37 };
38 }, []);
39
40 const handleLogin = async (e) => {
41 e.preventDefault();
42 setIsLoading(true);
43 setAuthError(null);
44
45 try {
46 const { data, error } = await supabase.auth.signInWithPassword({
47 email,
48 password
49 });
50
51 if (error) throw error;
52
53 setIsAuthenticated(true);
54 } catch (error) {
55 console.error('Error logging in:', error);
56 setAuthError(error.message);
57 } finally {
58 setIsLoading(false);
59 }
60 };
61
62 if (isLoading) {
63 return (
64 <div className="admin-loading">
65 <div className="loading-spinner"></div>
66 <p>Loading...</p>
67 </div>
68 );
69 }
70
71 // If not authenticated, show login form
72 if (!isAuthenticated) {
73 return (
74 <div className="admin-login-container">
75 <div className="admin-login-card">
76 <h2>Admin Login</h2>
77 {authError && <div className="auth-error">{authError}</div>}
78 <form onSubmit={handleLogin}>
79 <div className="form-group">
80 <label htmlFor="email">Email</label>
81 <input
82 type="email"
83 id="email"
84 value={email}
85 onChange={(e) => setEmail(e.target.value)}
86 required
87 />
88 </div>
89 <div className="form-group">
90 <label htmlFor="password">Password</label>
91 <input
92 type="password"
93 id="password"
94 value={password}
95 onChange={(e) => setPassword(e.target.value)}
96 required
97 />
98 </div>
99 <button type="submit" className="login-button">Login</button>
100 </form>
101 </div>
102 </div>
103 );
104 }
105
106 // If authenticated, render the admin panel
107 return <AdminPanel />;
108};
109
110export default AdminRoute;