Staging

.github/workflows/deploy.yml

@@ -19,12 +19,18 @@ jobs:
         with:
           ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
 
+      - name: Setup known_hosts
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.VPS_KNOWN_HOST }}" > ~/.ssh/known_hosts
+          chmod 644 ~/.ssh/known_hosts
+
       - name: Deploy
         run: |
           if [ "${{ github.ref }}" = "refs/heads/main" ]; then
             echo "🚀 Deploying PRODUCTION"
-            ssh -o StrictHostKeyChecking=no ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }} "bash /home/ubuntu/deploy-triptogether.sh"
+            ssh ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }} "bash /home/ubuntu/deploy-triptogether.sh"
           else
             echo "🧪 Deploying STAGING"
-            ssh -o StrictHostKeyChecking=no ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }} "bash /home/ubuntu/deploy-triptogether-staging.sh"
+            ssh ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }} "bash /home/ubuntu/deploy-triptogether-staging.sh"
           fi

client/src/components/Navbar.tsx

@@ -56,15 +56,11 @@ export default function Navbar() {
             className="navbar-cta"
             onClick={navigateToCreateTrip}
           >
-            Crée ton voyage !
+            Créer un voyage
           </button>
         )}
 
-        <div
-          className="navbar-profile"
-          onMouseEnter={() => setOpenNavBar(true)}
-          onMouseLeave={() => setOpenNavBar(false)}
-        >
+        <div className="navbar-profile">
           {auth ? (
             <div>
               <button

client/src/pages/CreateTrip.tsx

@@ -32,7 +32,7 @@ export default function CreateTrip() {
 
   const titleRef = useRef<HTMLInputElement>(null);
   const descriptionRef = useRef<HTMLInputElement>(null);
-  const startAtRef = useRef<HTMLInputElement>(null);
+  const [startDate, setStartDate] = useState("");
 
   const today = new Date();
   today.setHours(0, 0, 0, 0);
@@ -116,7 +116,7 @@ export default function CreateTrip() {
       return;
     }
 
-    if (!titleRef.current || !descriptionRef.current || !startAtRef.current) {
+    if (!titleRef.current || !descriptionRef.current || !startDate) {
       toast.error("Formulaire incomplet");
       return;
     }
@@ -137,7 +137,7 @@ export default function CreateTrip() {
       }
     }
 
-    const departureDate = new Date(startAtRef.current.value);
+    const departureDate = new Date(startDate);
     const returnDate = new Date(endOfTrip.end_at);
 
     if (departureDate < today) {
@@ -158,7 +158,7 @@ export default function CreateTrip() {
     const newTrip = {
       title: titleRef.current.value,
       description: descriptionRef.current.value,
-      start_at: startAtRef.current.value,
+      start_at: startDate,
       end_at: endOfTrip.end_at,
       city: currentCity,
       country: currentCountry,
@@ -244,7 +244,15 @@ export default function CreateTrip() {
             <input
               type="date"
               id="start-date"
-              ref={startAtRef}
+              value={startDate}
+              onChange={(e) => {
+                setStartDate(e.target.value);
+
+                // Reset date de fin si invalide
+                if (endOfTrip.end_at && e.target.value >= endOfTrip.end_at) {
+                  setEndOfTrip({ end_at: "" });
+                }
+              }}
               min={todayString}
               required
               className={!endOfTrip.end_at ? "date-empty" : ""}
@@ -258,9 +266,10 @@ export default function CreateTrip() {
               id="end-date"
               value={endOfTrip.end_at}
               onChange={(e) => setEndOfTrip({ end_at: e.target.value })}
-              min={todayString}
+              min={startDate || todayString}
               required
               className={!endOfTrip.end_at ? "date-empty" : ""}
+              disabled={!startDate}
             />
           </div>
         </div>

client/src/pages/Home.tsx

@@ -6,20 +6,25 @@ function Home() {
   const [countTrip, setCountTrip] = useState<number | null>(null);
 
   useEffect(() => {
-    fetch(`${import.meta.env.VITE_API_URL}/api/trips/count`).then(
-      async (response) => {
+    const fetchTripCount = async () => {
+      try {
+        const response = await fetch(
+          `${import.meta.env.VITE_API_URL}/api/trips/count`,
+        );
+
         if (!response.ok) {
-          console.error(
-            "Backend erreur:",
-            response.status,
-            await response.json(),
-          );
           throw new Error(`Erreur ${response.status}`);
         }
+
         const count = await response.json();
         setCountTrip(count);
-      },
-    );
+      } catch (error) {
+        console.error("Erreur récupération nombre de voyages:", error);
+        setCountTrip(0);
+      }
+    };
+
+    fetchTripCount();
   }, []);
 
   return (
@@ -35,10 +40,10 @@ function Home() {
           préférées et partagez les dépenses. Tout ça au même endroit.
         </p>
         <div className="hero-cta">
-          <Link to="/create-trip" className="btn-cta btn-primairy">
-            Commencer maintenant
+          <Link to="/create-trip" className="btn-cta btn-primary">
+            Créer un voyage
           </Link>
-          <Link to="/my-trips" className="btn-cta btn-secondairy">
+          <Link to="/my-trips" className="btn-cta btn-secondary">
             Voir mes voyages
           </Link>
         </div>
@@ -87,7 +92,7 @@ function Home() {
             <span className="badge-text">
               {countTrip !== null
                 ? `${countTrip} voyages ont déjà été créés`
-                : "0"}
+                : "—"}
             </span>
           </div>
         </div>
@@ -108,7 +113,6 @@ function Home() {
                 className="feature-icon-img"
                 width="40"
                 height="40"
-                aria-label="Voyager en groupe"
               />
             </div>
             <h3 className="feature-card-title">Voyager en groupe</h3>
@@ -125,7 +129,6 @@ function Home() {
                 className="feature-icon-img"
                 width="40"
                 height="40"
-                aria-label="Voter pour les destinations"
               />
             </div>
             <h3 className="feature-card-title">Voter pour les destinations</h3>
@@ -142,7 +145,6 @@ function Home() {
                 className="feature-icon-img"
                 width="40"
                 height="40"
-                aria-label="Gérer les dépenses"
               />
             </div>
             <h3 className="feature-card-title">Gérez les dépenses</h3>

client/src/pages/styles/CreateTrip.css

@@ -77,8 +77,11 @@
   background-color: #ffffff;
   padding: 2rem;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
+  transition: box-shadow 0.3s ease;
+}
+.create-trip-form:hover {
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
 }
-
 .form-group {
   display: flex;
   flex-direction: column;
@@ -175,27 +178,20 @@
   flex: 1;
 }
 
-#start-date {
-  color: #999;
-}
-
-#end-date {
-  color: #999;
+input[type="date"]:not(:placeholder-shown) {
+  color: var(--black);
 }
 
 .astuces-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 25vw;
-  height: 9vh;
+  width: 100%;
+  max-width: 480px;
   background-color: rgba(217, 217, 217, 0.3);
   border: 1px solid rgba(217, 217, 217, 0.5);
   border-radius: 8px;
   padding: 1rem;
-  margin-top: 2.5rem;
+  margin-top: 2rem;
   font-family: var(--body-text);
-  font-size: 1rem;
+  font-size: 0.95rem;
   color: var(--black);
   text-align: center;
 }
@@ -218,6 +214,8 @@
   cursor: pointer;
   border: none;
   transition: all 0.2s ease;
+  flex: 1;
+  max-width: 200px;
 }
 
 .button-container button[type="submit"] {

client/src/pages/styles/Footer.css

@@ -15,13 +15,15 @@
   align-items: center;
   justify-content: space-between;
   gap: 20px;
-  height: 100px;
+  min-height: 100px;
+  padding: 20px 0;
 }
 
 .footer-left {
   display: flex;
   align-items: center;
   font-size: 18px;
+  font-weight: 500;
   cursor: pointer;
 }
 
@@ -57,4 +59,4 @@
     text-align: center;
     justify-content: center;
   }
-}
+}

client/src/pages/styles/Guests.css

@@ -117,7 +117,7 @@ li:last-child {
   color: #b91c1c;
 }
 
-.btn-primary,
+/* .btn-primary, */
 .btn-danger,
 .btn-role {
   border-radius: 10px;
@@ -130,14 +130,14 @@ li:last-child {
   min-height: 14px;
 }
 
-.btn-primary {
+/* .btn-primary {
   background-color: var(--primary-button);
   color: #ffffff;
 }
 
 .btn-primary:hover {
   background-color: var(--primary-button);
-}
+} */
 
 .btn-danger {
   background-color: #b91c1c;
@@ -195,7 +195,7 @@ li:last-child {
     padding: 3px 8px;
   }
 
-  .btn-primary,
+  .btn-primairy,
   .btn-danger,
   .btn-role {
     padding: 6px 10px;