diff options
Diffstat (limited to 'panel/src/pages/Roles.jsx')
-rw-r--r-- | panel/src/pages/Roles.jsx | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/panel/src/pages/Roles.jsx b/panel/src/pages/Roles.jsx new file mode 100644 index 0000000..5b18ace --- /dev/null +++ b/panel/src/pages/Roles.jsx @@ -0,0 +1,57 @@ +import React, { useState, useEffect } from 'react'; +import { db, auth } from '../firebase'; +import { collection, getDocs } from 'firebase/firestore'; +import { httpsCallable } from 'firebase/functions'; +import Navbar from '../components/Navbar'; + +const Roles = () => { + const [users, setUsers] = useState([]); + const [loading, setLoading] = useState(true); + + const fetchUsers = async () => { + const querySnapshot = await getDocs(collection(db, 'users')); + const usersData = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); + setUsers(usersData); + setLoading(false); + }; + + const handleRoleChange = async (email, newRole) => { + const addUserRole = httpsCallable(auth, 'addUserRole'); + try { + await addUserRole({ email: email, role: newRole }); + fetchUsers(); + } catch (error) { + console.error('Error updating role:', error); + } + }; + + useEffect(() => { + fetchUsers(); + }, []); + + if (loading) { + return <p>Loading...</p>; + } + + return ( + <div> + <Navbar /> + <div className="container mt-5"> + <h4>Manage Roles</h4> + <div className="list-group"> + {users.map((user, index) => ( + <div key={index} className="list-group-item d-flex justify-content-between align-items-center"> + <p className="mb-0">{user.email}</p> + <div> + <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary btn-sm mr-2">Make Admin</button> + <button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary btn-sm">Make User</button> + </div> + </div> + ))} + </div> + </div> + </div> + ); +}; + +export default Roles; |