restructuration dossiers

src/App.jsx

@@ -5,7 +5,7 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import LoginPage from './pages/LoginPage/LoginPage';
 import DashboardPage from './pages/DashboardPage/DashboardPage';
-import { auth } from './pages/LoginPage/firebase';
+import { auth } from './service/firebase';
 import styles from './App.module.scss';
 
 const Loading = () => (

src/components/CreateServer/CreateServer.jsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import styles from './CreateServer.module.scss';
+
+const CreateServer  = ({ onCreateServer }) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.mainCard}>
+        <div className={styles.SubTitle}>Création du serveur</div>
+        <input className={styles.Input} type="text" placeholder="Nom du serveur" />
+        <button className={styles.btnServCreate} onClick={() => onCreateServer()}>Créer</button>
+      </div>
+    </div>
+  );
+};
+
+export default CreateServer ;

src/components/CreateServer/CreateServer.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;
+}
+
+.Title{
+    font-size: 3.5rem;
+    color: #F2F2F2;
+    font-weight: 900;
+}
+
+.SubTitle{
+    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;
+}

src/components/navbar/Navbar.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { auth } from '../../pages/LoginPage/firebase';
+import { auth } from '../../service/firebase';
 import styles from './Navbar.module.scss';
 
 const Navbar = ({ user }) => {

src/pages/DashboardPage/DashboardPage.jsx

@@ -3,17 +3,22 @@ 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';
+import {getUserSubdomain} from "../../service/firebase";
+import { fetchServers, createServer, runServer, stopServer, deleteServer } from '../../service/serverService';
 
 const DashboardPage = ({ user }) => {
   const [servers, setServers] = useState([]);
+  const [subdomain, setSubdomain] = useState("");
 
   const loadServers = async () => {
     try {
       const data = await fetchServers();
       setServers(data);
+      const subdomain = await getUserSubdomain(user.uid);
+      setSubdomain(subdomain);
+      console.log(subdomain);
     } catch (error) {
-      console.error('Error fetching servers:', error);
+      console.error('Error fetching data:', error);
     }
   };
 

src/pages/LoginPage/LoginPage.jsx

@@ -1,7 +1,7 @@
 // src/pages/LoginPage/LoginPage.js
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { auth, googleProvider, signInWithPopup } from './firebase';
+import { auth, googleProvider, signInWithPopup } from '../../service/firebase';
 import styles from './LoginPage.module.scss';
 
 const LoginPage = () => {

src/pages/LoginPage/firebase.js

@@ -1,19 +0,0 @@
-// src/firebase.js
-import { initializeApp } from 'firebase/app';
-import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
-
-const firebaseConfig = {
-  apiKey: "AIzaSyAmIEy4uzsBTzQGhGkn7srDONu8QUoUVHs",
-  authDomain: "app.servii.fr",
-  projectId: "servi-e6705",
-  storageBucket: "servi-e6705.appspot.com",
-  messagingSenderId: "201267205657",
-  appId: "1:201267205657:web:f38e37d16f376d68b73c88"
-};
-
-const app = initializeApp(firebaseConfig);
-
-const auth = getAuth(app);
-const googleProvider = new GoogleAuthProvider();
-
-export { auth, googleProvider, signInWithPopup };

src/pages/NoServer/NoServer.jsx

@@ -1,13 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './NoServer.module.scss';
+import CreateServer from '../../components/CreateServer/CreateServer';
 
 const NoServer = ({ onCreateServer }) => {
+  const [isCreating, setIsCreating] = useState(false);
+
   return (
     <div className={styles.container}>
       <div className={styles.mainCard}>
+        { isCreating === false ? (
+          <>
             <div className={styles.nsSubTitle}>Erreur </div>
             <div className={styles.nsTitle}>Aucun serveur possédé</div>
-        <button className={styles.btnServCreate} onClick={onCreateServer}>Créer un nouveau serveur</button>
+            <button className={styles.btnServCreate} onClick={() => setIsCreating(true)}>Créer un nouveau serveur</button>
+          </>
+        ) : (
+            <>
+                <CreateServer></CreateServer>
+            </>
+        )}
       </div>
     </div>
   );

src/service/firebase.jsx

@@ -0,0 +1,37 @@
+// src/firebase.js
+import { initializeApp } from 'firebase/app';
+import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+import { getFirestore, doc, getDoc } from 'firebase/firestore';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyAmIEy4uzsBTzQGhGkn7srDONu8QUoUVHs",
+  authDomain: "app.servii.fr",
+  projectId: "servi-e6705",
+  storageBucket: "servi-e6705.appspot.com",
+  messagingSenderId: "201267205657",
+  appId: "1:201267205657:web:f38e37d16f376d68b73c88"
+};
+
+const app = initializeApp(firebaseConfig);
+
+const auth = getAuth(app);
+const googleProvider = new GoogleAuthProvider();
+const db = getFirestore(app);
+
+/**
+ * Récupère le sous-domaine de l'utilisateur
+ * @param {string} userId - ID de l'utilisateur
+ * @returns {Promise<string>} - Sous-domaine de l'utilisateur
+ */
+const getUserSubdomain = async (userId) => {
+  const userDocRef = doc(db, 'users', userId);
+  const userDocSnap = await getDoc(userDocRef);
+  if (userDocSnap.exists()) {
+    const userData = userDocSnap.data();
+    return userData.subdomain;
+  } else {
+    throw new Error("No such document!");
+  }
+};
+
+export { auth, googleProvider, signInWithPopup, getUserSubdomain };