diff --git a/index.html b/index.html index e0a41e3..f4c043c 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,16 @@ Vite + React + + + +
+ + + - diff --git a/src/main.css b/src/main.css index 05c71f6..877b090 100644 --- a/src/main.css +++ b/src/main.css @@ -1,10 +1,12 @@ -html{ +/* index.css */ +html { font-size: 12px; + font-family: 'Poppins', sans-serif; } :root { --navbar-height: 5rem; - --navbar-background-color: #333; + --navbar-background-color: #100D25; --navbar-color: #fff; --profile-pic-size: 3rem; --logout-button-bg: #ff4b4b; @@ -12,9 +14,12 @@ html{ --card-width: 90%; --card-padding: 2.5rem; --card-border-color: #343947; - --card-bg-color: #1E2227; - --main-bg-color: #23272E; + --card-bg-color: #1D1836; + --main-bg-color: #050816; --text-color: white; --text-color-black: black; - +} + +body { + font-family: 'Poppins', sans-serif; } diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx index 92d7297..be67cf4 100644 --- a/src/pages/DashboardPage/DashboardPage.jsx +++ b/src/pages/DashboardPage/DashboardPage.jsx @@ -1,38 +1,16 @@ import React, { useEffect, useState } from 'react'; -import { getAuth } from 'firebase/auth'; import ServerCard from '../../components/serverCard/serverCard'; import Navbar from '../../components/navbar/Navbar'; import styles from './DashboardPage.module.scss'; +import NoServer from '../NoServer/NoServer'; +import { fetchServers, createServer, runServer, stopServer, deleteServer } from '../../serverService'; const DashboardPage = ({ user }) => { const [servers, setServers] = useState([]); - const auth = getAuth(); - const fetchServers = async () => { + const loadServers = async () => { try { - const currentUser = auth.currentUser; - if (!currentUser) { - console.error('No current user found'); - return; - } - const userId = currentUser.uid; - console.log('User ID:', userId); - - const response = await fetch('http://176.165.62.226:3000/FetchServers', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${userId}`, - }, - body: JSON.stringify({ token: userId }), - }); - if (!response.ok) { - const errorText = await response.text(); - console.error('Error response text:', errorText); - throw new Error(`Network response was not ok: ${response.statusText}`); - } - const data = await response.json(); - console.log('Data:', data); + const data = await fetchServers(); setServers(data); } catch (error) { console.error('Error fetching servers:', error); @@ -40,32 +18,23 @@ const DashboardPage = ({ user }) => { }; useEffect(() => { - fetchServers(); - }, [auth]); + loadServers(); + }, []); + + const handleCreateServer = async () => { + try { + const serverName = prompt('Enter the name for the new server:'); + if (!serverName) return; + await createServer(serverName); + loadServers(); + } catch (error) { + console.error('Error creating server:', error); + } + }; const handleRunServer = async (serverName) => { try { - const currentUser = auth.currentUser; - if (!currentUser) { - console.error('No current user found'); - return; - } - const userId = currentUser.uid; - console.log('Run server:', serverName); - - const response = await fetch('http://176.165.62.226:3000/ServerRun', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${userId}`, - }, - body: JSON.stringify({ name: serverName, token: userId }), - }); - if (!response.ok) { - const errorText = await response.text(); - console.error('Error response text:', errorText); - throw new Error(`Failed to start server: ${response.statusText}`); - } + await runServer(serverName); } catch (error) { console.error('Error starting server:', error); } @@ -73,27 +42,7 @@ const DashboardPage = ({ user }) => { const handleStopServer = async (serverName) => { try { - const currentUser = auth.currentUser; - if (!currentUser) { - console.error('No current user found'); - return; - } - const userId = currentUser.uid; - console.log('Stop server:', serverName); - - const response = await fetch('http://176.165.62.226:3000/ServerStop', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${userId}`, - }, - body: JSON.stringify({ name: serverName, token: userId }), - }); - if (!response.ok) { - const errorText = await response.text(); - console.error('Error response text:', errorText); - throw new Error(`Failed to stop server: ${response.statusText}`); - } + await stopServer(serverName); } catch (error) { console.error('Error stopping server:', error); } @@ -101,86 +50,34 @@ const DashboardPage = ({ user }) => { const handleDeleteServer = async (serverName) => { try { - const currentUser = auth.currentUser; - if (!currentUser) { - console.error('No current user found'); - return; - } - const userId = currentUser.uid; - console.log('Delete server:', serverName); - - const response = await fetch('http://176.165.62.226:3000/ServerDelete', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${userId}`, - }, - body: JSON.stringify({ name: serverName, token: userId }), - }); - if (!response.ok) { - const errorText = await response.text(); - console.error('Error response text:', errorText); - throw new Error(`Failed to delete server: ${response.statusText}`); - } else { - // Fetch the updated list of servers - fetchServers(); - } + await deleteServer(serverName); + loadServers(); } catch (error) { console.error('Error deleting server:', error); } }; - const handleCreateServer = async () => { - try { - const currentUser = auth.currentUser; - if (!currentUser) { - console.error('No current user found'); - return; - } - const userId = currentUser.uid; - const serverName = prompt('Enter server name:'); - const serverVersion = prompt('Enter server version:'); - console.log('Create server:', serverName); - - const response = await fetch('http://176.165.62.226:3000/ServerCreate', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${userId}`, - }, - body: JSON.stringify({ name: serverName, version: serverVersion, token: userId , framework: "paper"}), - }); - if (!response.ok) { - const errorText = await response.text(); - console.error('Error response text:', errorText); - throw new Error(`Failed to create server: ${response.statusText}`); - } else { - // Fetch the updated list of servers - fetchServers(); - } - } catch (error) { - console.error('Error creating server:', error); - } - }; - return (
- - {servers.map((server, index) => ( - - ))} + {servers.length === 0 ? ( + + ) : ( + servers.map((server, index) => ( + handleRunServer(server.name)} + onStopClick={() => handleStopServer(server.name)} + onDeleteClick={() => handleDeleteServer(server.name)} + /> + )) + )}
); diff --git a/src/pages/NoServer/NoServer.jsx b/src/pages/NoServer/NoServer.jsx new file mode 100644 index 0000000..4a54e48 --- /dev/null +++ b/src/pages/NoServer/NoServer.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import styles from './NoServer.module.scss'; + +const NoServer = ({ onCreateServer }) => { + return ( +
+
+
Erreur
+
Aucun serveur possédé
+ +
+
+ ); +}; + +export default NoServer; diff --git a/src/pages/NoServer/NoServer.module.scss b/src/pages/NoServer/NoServer.module.scss new file mode 100644 index 0000000..0b593a3 --- /dev/null +++ b/src/pages/NoServer/NoServer.module.scss @@ -0,0 +1,45 @@ +.container{ + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} + +.mainCard{ + display: flex; + justify-content: start; + align-items: start; + flex-direction: column; + width: 75rem; + padding: 4rem 5rem 3rem 5rem; + background-color: #1D1836; + border-radius: 1.5rem; +} + +.nsTitle{ + font-size: 3.5rem; + color: #F2F2F2; + font-weight: 900; +} + +.nsSubTitle{ + font-size: 1.8rem; + color: #AAA6C3; + font-weight: 300; +} + +.btnServCreate{ + display: flex; + justify-content: center; + align-items: center; + background-color: #090325; + width: 40rem; + height: 5rem; + color: white; + margin-top: 5rem; + border: solid 0.1rem #090325; + cursor: pointer; + font-size: 2rem; + font-weight: 900; + border-radius: 1rem; +} \ No newline at end of file diff --git a/src/serverService.jsx b/src/serverService.jsx new file mode 100644 index 0000000..860fee6 --- /dev/null +++ b/src/serverService.jsx @@ -0,0 +1,123 @@ +// src/services/serverService.js +import { getAuth } from 'firebase/auth'; + +const apiUrl = 'http://176.165.62.226:3000'; + +const fetchServers = async () => { + const auth = getAuth(); + const currentUser = auth.currentUser; + if (!currentUser) { + throw new Error('No current user found'); + } + const userId = currentUser.uid; + + const response = await fetch(`${apiUrl}/FetchServers`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${userId}`, + }, + body: JSON.stringify({ token: userId }), + }); + + if (!response.ok) { + const errorText = await response.text(); + throw new Error(`Network response was not ok: ${errorText}`); + } + + return await response.json(); +}; + +const createServer = async (serverName) => { + const auth = getAuth(); + const currentUser = auth.currentUser; + if (!currentUser) { + throw new Error('No current user found'); + } + const userId = currentUser.uid; + + const response = await fetch(`${apiUrl}/CreateServer`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${userId}`, + }, + body: JSON.stringify({ name: serverName, token: userId }), + }); + + if (!response.ok) { + const errorText = await response.text(); + throw new Error(`Failed to create server: ${errorText}`); + } +}; + +const runServer = async (serverName) => { + const auth = getAuth(); + const currentUser = auth.currentUser; + if (!currentUser) { + throw new Error('No current user found'); + } + const userId = currentUser.uid; + + const response = await fetch(`${apiUrl}/ServerRun`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${userId}`, + }, + body: JSON.stringify({ name: serverName, token: userId }), + }); + + if (!response.ok) { + const errorText = await response.text(); + throw new Error(`Failed to start server: ${errorText}`); + } +}; + +const stopServer = async (serverName) => { + const auth = getAuth(); + const currentUser = auth.currentUser; + if (!currentUser) { + throw new Error('No current user found'); + } + const userId = currentUser.uid; + + const response = await fetch(`${apiUrl}/ServerStop`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${userId}`, + }, + body: JSON.stringify({ name: serverName, token: userId }), + }); + + if (!response.ok) { + const errorText = await response.text(); + throw new Error(`Failed to stop server: ${errorText}`); + } +}; + +const deleteServer = async (serverName) => { + const auth = getAuth(); + const currentUser = auth.currentUser; + if (!currentUser) { + throw new Error('No current user found'); + } + const userId = currentUser.uid; + + const response = await fetch(`${apiUrl}/ServerDelete`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${userId}`, + }, + body: JSON.stringify({ name: serverName, token: userId }), + }); + + if (!response.ok) { + const errorText = await response.text(); + throw new Error(`Failed to delete server: ${errorText}`); + } +}; + +export { fetchServers, createServer, runServer, stopServer, deleteServer };