From 55202271c8ac64b470f6772be1c59176aae31381 Mon Sep 17 00:00:00 2001
From: AntoninoP <antoninopiraino70@gmail.com>
Date: Sat, 21 Sep 2024 10:08:01 +0200
Subject: [PATCH] setsubdomain page & fix scoll in dashboard

---
 src/components/serverCard/serverCard.jsx      | 14 +++-
 .../serverCard/serverCard.module.scss         | 14 ++--
 src/pages/CreateServer/bedrock/bedrock.jsx    |  2 +-
 src/pages/CreateServer/modpack/modpack.jsx    |  2 +-
 src/pages/DashboardPage/DashboardPage.jsx     | 80 ++++++++++++++-----
 .../DashboardPage/DashboardPage.module.scss   | 75 ++++++++++++++++-
 6 files changed, 155 insertions(+), 32 deletions(-)

diff --git a/src/components/serverCard/serverCard.jsx b/src/components/serverCard/serverCard.jsx
index 65231f1..91db2a2 100644
--- a/src/components/serverCard/serverCard.jsx
+++ b/src/components/serverCard/serverCard.jsx
@@ -1,6 +1,8 @@
 import { Link } from 'react-router-dom';
 import styles from './serverCard.module.scss';
 import paper from '../../assets/frameworks/paper.png';
+import fabric from '../../assets/frameworks/fabric.png';
+import forge from '../../assets/frameworks/forge.png';
 import PropTypes from "prop-types";
 import { FaTrash } from 'react-icons/fa';
 
@@ -8,6 +10,12 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
 
   const getFrameworkSource = () => {
     switch (framework) {
+      case 'frabric':
+        return fabric;
+      case 'forge':
+        return forge;
+      case 'bedrock':
+        return  paper;
       default:
         return paper;
     }
@@ -53,9 +61,6 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
             <div className={styles.version}>Version: {version}</div>
           </div>
         </div>
-        <div className={styles.status}>
-          {status ? `${countPlayers}/${maxPlayers} joueurs` : " "}
-        </div>
       </div>
       <div className={styles.actions}>
         <div>
@@ -77,6 +82,9 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
             </button>
           )}
         </div>
+        <div className={styles.status}>
+          {status ? `${countPlayers}/${maxPlayers} joueurs` : " "}
+        </div>
       </div>
       <FaTrash 
         className={styles.trashIcon} 
diff --git a/src/components/serverCard/serverCard.module.scss b/src/components/serverCard/serverCard.module.scss
index 2a73786..8f6ef1b 100644
--- a/src/components/serverCard/serverCard.module.scss
+++ b/src/components/serverCard/serverCard.module.scss
@@ -23,10 +23,10 @@
 .favoriteserverCard{
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 30rem;
-  padding: 3rem;
+  justify-content: space-around;
+  align-items: center;
+  width: 38.5rem;
+  padding: 3rem 0rem 3rem 3rem;
   border: 0.1rem solid black;
   border-radius: 0.8rem;
   margin-bottom: 3rem;
@@ -78,7 +78,7 @@
 }
 
 .serverName {
-  font-size: 1.6rem;
+  font-size: 1.5rem;
   font-weight: bold;
 }
 
@@ -103,8 +103,8 @@
 }
 
 .startStopButton {
-  padding: 1rem 1.8rem;
-  border-radius: 0.6rem;
+  padding: 1rem 1.5rem;
+  border-radius: 0.5rem;
   border: none;
   color: white;
   cursor: pointer;
diff --git a/src/pages/CreateServer/bedrock/bedrock.jsx b/src/pages/CreateServer/bedrock/bedrock.jsx
index f5c413f..fc05733 100644
--- a/src/pages/CreateServer/bedrock/bedrock.jsx
+++ b/src/pages/CreateServer/bedrock/bedrock.jsx
@@ -18,7 +18,7 @@ const Bedrock = ({ user }) => {
         onBackClick={() => navigate('/CreateServer')}
       />
         <div className={styles.hey}>
-            <h1> bedrock</h1>
+            <h1> Prochainement disponible</h1>
         </div>
     </div>
   );
diff --git a/src/pages/CreateServer/modpack/modpack.jsx b/src/pages/CreateServer/modpack/modpack.jsx
index d7e6764..b526f85 100644
--- a/src/pages/CreateServer/modpack/modpack.jsx
+++ b/src/pages/CreateServer/modpack/modpack.jsx
@@ -18,7 +18,7 @@ const Modpack = ({ user }) => {
         onBackClick={() => navigate('/CreateServer')}
       />
         <div className={styles.hey}>
-            <h1> modpack</h1>
+            <h1>Prochainement disponible</h1>
         </div>
     </div>
   );
diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx
index cc08d1c..b87ca63 100644
--- a/src/pages/DashboardPage/DashboardPage.jsx
+++ b/src/pages/DashboardPage/DashboardPage.jsx
@@ -14,8 +14,8 @@ const DashboardPage = ({ user }) => {
   const [servers, setServers] = useState([]);
   const [subdomain, setSubdomain] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [showCreateServer, setShowCreateServer] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
+  const [newSubdomain, setNewSubdomain] = useState('');
 
   const loadServers = useCallback(async () => {
     try {
@@ -39,7 +39,7 @@ const DashboardPage = ({ user }) => {
     loadServers();
   }, [loadServers]);
 
-  const handleCreateServerPage = () => setShowCreateServer(true);
+  const handleCreateServer = () => navigate('/CreateServer');
 
   const handleRunServer = async (serverName) => {
     try {
@@ -73,8 +73,21 @@ const DashboardPage = ({ user }) => {
     navigator.clipboard.writeText(address);
   };
 
+  const handleSaveSubdomain = async () => {
+    try {
+      const response = await serviiApi.setSubdomain(newSubdomain);
+      if (response.success) {
+        setSubdomain(newSubdomain); 
+        loadServers(); 
+      } else {
+        console.error('Erreur lors de la création du sous-domaine');
+      }
+    } catch (error) {
+      console.error('Erreur lors de la création du sous-domaine:', error);
+    }
+  };
+  
   const favoriteServer = servers[0] || null;
-
   const serversWithoutFavorite = servers.filter(server => server !== favoriteServer);
 
   if (loading) {
@@ -86,21 +99,58 @@ const DashboardPage = ({ user }) => {
     );
   }
 
+  if (!subdomain) {
+    return (
+      <div className={styles.welcomeContainer}>
+          <h1 className={styles.welcomeMessage}>
+            Bienvenue, {user?.displayName || ' '} !
+          </h1>
+          <p className={styles.subdomainMessage}>
+            Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur. Choisissez-le bien, car il n'est pas facilement modifiable !
+          </p>
+          <div className={styles.subdomainInputContainer}>
+            <input
+              type="text"
+              placeholder="Saisissez un nom de domaine"
+              value={newSubdomain}
+              onChange={(e) => setNewSubdomain(e.target.value)}
+              className={styles.subdomainInput}
+              onKeyPress={(e) => e.key === 'Enter' && handleSaveSubdomain()} 
+            />
+            <button className={styles.btnCreate} onClick={handleSaveSubdomain}>
+              Envoyer
+            </button>
+          </div>
+        </div>
+    );
+  }
+  
+
+  if (servers.length === 0) {
+    return (
+      <div className={styles.dashboardContainer}>
+        <Navbar user={user} />
+        <div className={styles.mainContent}>
+          <button className={styles.btnCreate} onClick={handleCreateServer}>
+            <div className={styles.plusIcon}>+</div>
+            Créer un nouveau serveur
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.dashboardContainer}>
       <Navbar user={user} />
-      {showCreateServer ? (
-        navigate('/CreateServer')
-      ) : (
         <div className={styles.mainContent}>
-
           <div className={styles.iptitle}>
             Adresse de connexion à vos serveurs : 
             <span onClick={handleCopyAddress} className={styles.subdomain}>
               {" " + subdomain}.servii.fr
             </span>
           </div>
-          
+
           <div className={styles.headerContainer}>
             <input
               type="text"
@@ -109,7 +159,7 @@ const DashboardPage = ({ user }) => {
               onChange={(e) => setSearchTerm(e.target.value)}
               className={styles.searchInput}
             />
-            <button className={styles.btnCreate} onClick={handleCreateServerPage}>
+            <button className={styles.btnCreate} onClick={handleCreateServer}>
               <div className={styles.plusIcon}>+</div>
               <div>Créer un nouveau serveur</div>
             </button>
@@ -133,10 +183,9 @@ const DashboardPage = ({ user }) => {
                   favoriteServer={true}
                 />
               </div>
-            ) : (
-              <p className={styles.AllserversTitle}>Aucun serveur disponible</p>
-            )}
+            ) : null}
           </div>
+          
           <div className={styles.cardsContainer}>
             {serversWithoutFavorite.length > 0 ? (
               serversWithoutFavorite.filter(server => 
@@ -156,18 +205,13 @@ const DashboardPage = ({ user }) => {
                   subdomain={subdomain}
                 />
               ))
-            ) : (
-              <p className={styles.noServerText}>Aucun serveur trouvé</p>
-            )}
+            ) : null}
           </div>
         </div>
-      )}
     </div>
   );
 };
 
-
-
 DashboardPage.propTypes = {
   user: PropTypes.shape({
     uid: PropTypes.string.isRequired,
diff --git a/src/pages/DashboardPage/DashboardPage.module.scss b/src/pages/DashboardPage/DashboardPage.module.scss
index 692cfd2..aa20c2f 100644
--- a/src/pages/DashboardPage/DashboardPage.module.scss
+++ b/src/pages/DashboardPage/DashboardPage.module.scss
@@ -15,7 +15,7 @@ html, body {
 }
 
 .mainContent {
-  width: 100%;
+  width: 90%;
   padding: 2.5rem;
   display: flex;
   flex-direction: column;
@@ -35,7 +35,7 @@ html, body {
   border-radius: 8px;
   padding: .8rem 1rem;
   font-size: 1.25rem;
-  width: 10rem; 
+  width: 16rem; 
   flex: none;
 }
 
@@ -85,3 +85,74 @@ html, body {
   color: var(--text-color);
   margin: 1rem 0;
 }
+
+.welcomeContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4rem;
+  padding: 2rem;
+  background-color: #f7f7f7;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.welcomeMessage {
+  font-size: 2.5rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 1rem;
+}
+
+.subdomainMessage {
+  font-size: 1.2rem;
+  color: #666;
+  margin-bottom: 2rem;
+  text-align: center;
+  max-width: 50rem;
+}
+
+.subdomainInputContainer {
+  display: flex;
+  flex-direction: row; 
+  justify-content: center;
+  align-items: center;
+  gap: .25rem; 
+}
+
+.subdomainInput {
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid #ccc;
+  font-size: 1.25rem;
+  width: 20rem;
+}
+
+.btnCreateSubdomain {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #2f2f2f; 
+  border: none;
+  padding: .5rem 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 0.5rem;
+  color: white;
+  transition: background-color 0.3s ease;
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #2f2f2f; 
+  border: none;
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 0.5rem;
+  color: white;
+  transition: background-color 0.3s ease;
+}