From 7dfbe0f363a434cfda5f9be996d194f03c36879c Mon Sep 17 00:00:00 2001 From: Biswakalyan Bhuyan Date: Wed, 31 Jul 2024 12:16:49 +0530 Subject: new project --- panel/src/App.css | 42 +++++++++++++++++++++ panel/src/App.jsx | 33 +++++++++++++++++ panel/src/assets/react.svg | 1 + panel/src/components/PrivateRoute.jsx | 10 +++++ panel/src/contexts/AuthContext.jsx | 27 ++++++++++++++ panel/src/firebase.js | 20 ++++++++++ panel/src/index.css | 3 ++ panel/src/main.jsx | 12 ++++++ panel/src/pages/Dashboard.jsx | 33 +++++++++++++++++ panel/src/pages/LoginPage.jsx | 52 ++++++++++++++++++++++++++ panel/src/pages/ManageAds.jsx | 70 +++++++++++++++++++++++++++++++++++ panel/src/pages/RegisterPage.jsx | 47 +++++++++++++++++++++++ panel/src/pages/ResetPage.jsx | 41 ++++++++++++++++++++ panel/src/pages/Roles.jsx | 51 +++++++++++++++++++++++++ panel/src/tailwind.css | 3 ++ 15 files changed, 445 insertions(+) create mode 100644 panel/src/App.css create mode 100644 panel/src/App.jsx create mode 100644 panel/src/assets/react.svg create mode 100644 panel/src/components/PrivateRoute.jsx create mode 100644 panel/src/contexts/AuthContext.jsx create mode 100644 panel/src/firebase.js create mode 100644 panel/src/index.css create mode 100644 panel/src/main.jsx create mode 100644 panel/src/pages/Dashboard.jsx create mode 100644 panel/src/pages/LoginPage.jsx create mode 100644 panel/src/pages/ManageAds.jsx create mode 100644 panel/src/pages/RegisterPage.jsx create mode 100644 panel/src/pages/ResetPage.jsx create mode 100644 panel/src/pages/Roles.jsx create mode 100644 panel/src/tailwind.css (limited to 'panel/src') diff --git a/panel/src/App.css b/panel/src/App.css new file mode 100644 index 0000000..b9d355d --- /dev/null +++ b/panel/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/panel/src/App.jsx b/panel/src/App.jsx new file mode 100644 index 0000000..906f859 --- /dev/null +++ b/panel/src/App.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; +import LoginPage from './pages/LoginPage'; +import RegisterPage from './pages/RegisterPage'; +import ResetPage from './pages/ResetPage'; +import Dashboard from './pages/Dashboard'; +import ManageAds from './pages/ManageAds'; +import Roles from './pages/Roles'; +import PrivateRoute from './components/PrivateRoute'; +import { AuthProvider } from './contexts/AuthContext'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import './tailwind.css'; + +function App() { + return ( + + + + } /> + } /> + } /> + }> + } /> + } /> + } /> + + + + + ); +} + +export default App; diff --git a/panel/src/assets/react.svg b/panel/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/panel/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/panel/src/components/PrivateRoute.jsx b/panel/src/components/PrivateRoute.jsx new file mode 100644 index 0000000..04e00f7 --- /dev/null +++ b/panel/src/components/PrivateRoute.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Navigate, Outlet } from 'react-router-dom'; +import { useAuth } from '../contexts/AuthContext'; + +const PrivateRoute = () => { + const { currentUser } = useAuth(); + return currentUser ? : ; +}; + +export default PrivateRoute; diff --git a/panel/src/contexts/AuthContext.jsx b/panel/src/contexts/AuthContext.jsx new file mode 100644 index 0000000..cf8c7b5 --- /dev/null +++ b/panel/src/contexts/AuthContext.jsx @@ -0,0 +1,27 @@ +import React, { createContext, useContext, useEffect, useState } from 'react'; +import { auth } from '../firebase'; +import { onAuthStateChanged } from 'firebase/auth'; + +const AuthContext = createContext(); + +export const useAuth = () => { + return useContext(AuthContext); +}; + +export const AuthProvider = ({ children }) => { + const [currentUser, setCurrentUser] = useState(null); + + useEffect(() => { + const unsubscribe = onAuthStateChanged(auth, (user) => { + setCurrentUser(user); + }); + + return unsubscribe; + }, []); + + const value = { + currentUser, + }; + + return {children}; +}; diff --git a/panel/src/firebase.js b/panel/src/firebase.js new file mode 100644 index 0000000..c56f4e0 --- /dev/null +++ b/panel/src/firebase.js @@ -0,0 +1,20 @@ +import { initializeApp } from 'firebase/app'; +import { getAuth } from 'firebase/auth'; +import { getFirestore } from 'firebase/firestore'; +import { getStorage } from 'firebase/storage'; + +const firebaseConfig = { + apiKey: import.meta.env.VITE_FIREBASE_API_KEY, + authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN, + projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID, + storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET, + messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID, + appId: import.meta.env.VITE_FIREBASE_APP_ID, +}; + +const app = initializeApp(firebaseConfig); +const auth = getAuth(app); +const db = getFirestore(app); +const storage = getStorage(app); + +export { auth, db, storage }; diff --git a/panel/src/index.css b/panel/src/index.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/panel/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/panel/src/main.jsx b/panel/src/main.jsx new file mode 100644 index 0000000..881e61b --- /dev/null +++ b/panel/src/main.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import './index.css'; +import './tailwind.css'; +import 'bootstrap/dist/css/bootstrap.min.css'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + +); diff --git a/panel/src/pages/Dashboard.jsx b/panel/src/pages/Dashboard.jsx new file mode 100644 index 0000000..5aa2b0c --- /dev/null +++ b/panel/src/pages/Dashboard.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Bar } from 'react-chartjs-2'; + +const Dashboard = () => { + const userStats = { totalUsers: 100, totalAds: 50, totalRevenue: 5000 }; + + const chartData = { + labels: ['Users', 'Revenue'], + datasets: [ + { + label: 'Statistics', + data: [userStats.totalUsers, userStats.totalRevenue], + backgroundColor: ['rgba(75,192,192,0.6)', 'rgba(153,102,255,0.6)'], + }, + ], + }; + + return ( +
+

Dashboard

+
+
Total Users: {userStats.totalUsers}
+
Total Ads: {userStats.totalAds}
+
Total Revenue: {userStats.totalRevenue}
+
+
+ +
+
+ ); +}; + +export default Dashboard; diff --git a/panel/src/pages/LoginPage.jsx b/panel/src/pages/LoginPage.jsx new file mode 100644 index 0000000..37ce32f --- /dev/null +++ b/panel/src/pages/LoginPage.jsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; +import { signInWithEmailAndPassword } from 'firebase/auth'; +import { auth } from '../firebase'; + +const LoginPage = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(''); + + const handleLogin = async () => { + if (password.length < 8) { + setError('The password should be minimum 8 digits'); + return; + } + + try { + await signInWithEmailAndPassword(auth, email, password); + } catch (error) { + setError(error.message); + } + }; + + return ( +
+
+

Login

+
+ + setEmail(e.target.value)} + className="form-control" + /> +
+
+ + setPassword(e.target.value)} + className="form-control" + /> +
+ {error &&

{error}

} + +
+
+ ); +}; + +export default LoginPage; diff --git a/panel/src/pages/ManageAds.jsx b/panel/src/pages/ManageAds.jsx new file mode 100644 index 0000000..4ec0b36 --- /dev/null +++ b/panel/src/pages/ManageAds.jsx @@ -0,0 +1,70 @@ +import React, { useState, useEffect } from 'react'; +import { db } from '../firebase'; +import { collection, addDoc, getDocs } from 'firebase/firestore'; + +const ManageAds = () => { + const [ads, setAds] = useState([]); + const [newAd, setNewAd] = useState({ title: '', description: '', imageUrl: '' }); + + useEffect(() => { + fetchAds(); + }, []); + + const fetchAds = async () => { + const querySnapshot = await getDocs(collection(db, 'ads')); + const adsData = querySnapshot.docs.map(doc => doc.data()); + setAds(adsData); + }; + + const handleAddAd = async () => { + await addDoc(collection(db, 'ads'), newAd); + fetchAds(); + }; + + return ( +
+

Manage Ads

+
+
+ + setNewAd({ ...newAd, title: e.target.value })} + className="form-control" + /> +
+
+ + setNewAd({ ...newAd, description: e.target.value })} + className="form-control" + /> +
+
+ + setNewAd({ ...newAd, imageUrl: e.target.value })} + className="form-control" + /> +
+ +
+
+ {ads.map((ad, index) => ( +
+
{ad.title}
+

{ad.description}

+ {ad.title} +
+ ))} +
+
+ ); +}; + +export default ManageAds; diff --git a/panel/src/pages/RegisterPage.jsx b/panel/src/pages/RegisterPage.jsx new file mode 100644 index 0000000..f0b2bba --- /dev/null +++ b/panel/src/pages/RegisterPage.jsx @@ -0,0 +1,47 @@ +import React, { useState } from 'react'; +import { TextField, Button, Container, Typography } from '@mui/material'; +import { createUserWithEmailAndPassword } from 'firebase/auth'; +import { auth } from '../firebase'; + +const RegisterPage = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(''); + + const handleRegister = async () => { + if (password.length < 8) { + setError('The password should be minimum 8 digits'); + return; + } + + try { + await createUserWithEmailAndPassword(auth, email, password); + } catch (error) { + setError(error.message); + } + }; + + return ( + + Register + setEmail(e.target.value)} + fullWidth + /> + setPassword(e.target.value)} + fullWidth + /> + {error && {error}} + + + ); +}; + +export default RegisterPage; diff --git a/panel/src/pages/ResetPage.jsx b/panel/src/pages/ResetPage.jsx new file mode 100644 index 0000000..c1750dc --- /dev/null +++ b/panel/src/pages/ResetPage.jsx @@ -0,0 +1,41 @@ + +import React, { useState } from 'react'; +import { sendPasswordResetEmail } from 'firebase/auth'; +import { auth } from '../firebase'; + +const ResetPage = () => { + const [email, setEmail] = useState(''); + const [message, setMessage] = useState(''); + const [error, setError] = useState(''); + + const handleReset = async () => { + try { + await sendPasswordResetEmail(auth, email); + setMessage('Reset link sent to your email'); + } catch (error) { + setError(error.message); + } + }; + + return ( +
+
+

Reset Password

+
+ + setEmail(e.target.value)} + className="form-control" + /> +
+ {error &&

{error}

} + {message &&

{message}

} + +
+
+ ); +}; + +export default ResetPage; diff --git a/panel/src/pages/Roles.jsx b/panel/src/pages/Roles.jsx new file mode 100644 index 0000000..05f73b6 --- /dev/null +++ b/panel/src/pages/Roles.jsx @@ -0,0 +1,51 @@ +import React, { useState, useEffect } from 'react'; +import { db, auth } from '../firebase'; +import { collection, getDocs } from 'firebase/firestore'; +import { httpsCallable } from 'firebase/functions'; + +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

Loading...

; + } + + return ( +
+

Manage Roles

+
+ {users.map((user, index) => ( +
+

{user.email}

+ + +
+ ))} +
+
+ ); +}; + +export default Roles; diff --git a/panel/src/tailwind.css b/panel/src/tailwind.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/panel/src/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; -- cgit v1.2.3-59-g8ed1b