Add product uploads and admin refinements

AsteroidusTv · AsteroidusTv · commit ad8aae0906d1 · 2026-04-11T14:59:09.000+02:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,51 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+concurrency:
+  group: deploy-production
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Configure SSH
+        run: |
+          mkdir -p ~/.ssh
+          printf '%s\n' "${{ secrets.DEPLOY_SSH_KEY }}" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          ssh-keyscan -p "${{ secrets.DEPLOY_PORT || 22 }}" -H "${{ secrets.DEPLOY_HOST }}" >> ~/.ssh/known_hosts
+
+      - name: Upload application files
+        run: |
+          rsync -az --delete \
+            --exclude '.git/' \
+            --exclude '.github/' \
+            --exclude '.env' \
+            --exclude 'node_modules/' \
+            --exclude 'storage/' \
+            --exclude 'public/uploads/' \
+            -e "ssh -i ~/.ssh/deploy_key -p ${{ secrets.DEPLOY_PORT || 22 }}" \
+            ./ "${{ secrets.DEPLOY_USER }}@${{ secrets.DEPLOY_HOST }}:${{ secrets.DEPLOY_PATH }}/"
+
+      - name: Install dependencies and restart
+        run: |
+          ssh -i ~/.ssh/deploy_key -p "${{ secrets.DEPLOY_PORT || 22 }}" "${{ secrets.DEPLOY_USER }}@${{ secrets.DEPLOY_HOST }}" <<'EOF'
+            set -euo pipefail
+            cd "${{ secrets.DEPLOY_PATH }}"
+            mkdir -p storage public/uploads/products
+            npm ci --omit=dev
+            sudo systemctl restart shopsite
+            sleep 2
+            curl -fsS http://127.0.0.1:3001/ >/dev/null
+          EOF
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 node_modules/
 .env
+.codex
 storage/*.db
 storage/*.db-*
+public/uploads/
 *.log
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "ejs": "^3.1.10",
     "express": "^4.21.2",
     "express-session": "^1.18.1",
+    "multer": "^2.1.1",
     "nodemailer": "^8.0.5",
     "stripe": "^17.6.0"
   }
diff --git a/public/scripts/main.js b/public/scripts/main.js
@@ -382,7 +382,7 @@ async function ensureStripeClient() {
         throw new Error("Stripe n'a pas pu se charger.");
     }
 
-    stripeClient = window.Stripe(getStripeKey());
+    stripeClient = window.Stripe(getStripeKey(), { locale: "fr" });
     return stripeClient;
 }
 
diff --git a/public/styles/main.css b/public/styles/main.css
@@ -654,6 +654,10 @@ button,
     align-items: center;
 }
 
+.summary-card > .button-block {
+    margin-top: 1rem;
+}
+
 .product-meta {
     margin-bottom: 0.9rem;
 }
@@ -965,6 +969,10 @@ button,
     margin: 0.05rem 0 0;
 }
 
+.product-admin-actions {
+    margin: -0.1rem 0 0.25rem;
+}
+
 .price-large {
     margin: -0.15rem 0 0;
     font-size: 2rem;
@@ -1454,7 +1462,7 @@ button,
 .cart-item-actions {
     flex-direction: column;
     align-items: stretch;
-    gap: 0.65rem;
+    gap: 0.45rem;
 }
 
 .cart-item-actions form {
diff --git a/server.js b/server.js
@@ -4,6 +4,7 @@ const path = require("path");
 const crypto = require("crypto");
 const express = require("express");
 const session = require("express-session");
+const multer = require("multer");
 const nodemailer = require("nodemailer");
 const Stripe = require("stripe");
 const { verifyPassword } = require("./lib/auth");
@@ -50,6 +51,7 @@ const env = process.env;
 const app = express();
 const databasePath = path.join(__dirname, "storage", "shop.db");
 const db = initializeDatabase(databasePath, env);
+const productUploadDir = path.join(__dirname, "public", "uploads", "products");
 const stripe = env.STRIPE_SECRET_KEY ? new Stripe(env.STRIPE_SECRET_KEY) : null;
 const stripePublishableKey = env.STRIPE_PUBLISHABLE_KEY || "";
 const swissBitcoinPayApiUrl = (env.SWISS_BITCOIN_PAY_API_URL || "https://api.swiss-bitcoin-pay.ch").replace(/\/$/, "");
@@ -69,6 +71,35 @@ app.set("view engine", "ejs");
 app.set("views", path.join(__dirname, "views"));
 app.use("/static", express.static(path.join(__dirname, "public")));
 
+const productImageUpload = multer({
+    storage: multer.diskStorage({
+        destination: (req, file, callback) => {
+            callback(null, productUploadDir);
+        },
+        filename: (req, file, callback) => {
+            const extensionByMimeType = {
+                "image/jpeg": ".jpg",
+                "image/png": ".png",
+                "image/webp": ".webp",
+                "image/gif": ".gif",
+            };
+            const extension = extensionByMimeType[file.mimetype] || ".img";
+            callback(null, `${Date.now()}-${crypto.randomBytes(8).toString("hex")}${extension}`);
+        },
+    }),
+    limits: {
+        fileSize: 8 * 1024 * 1024,
+        files: 13,
+    },
+    fileFilter: (req, file, callback) => {
+        if (!["image/jpeg", "image/png", "image/webp", "image/gif"].includes(file.mimetype)) {
+            return callback(new Error("Seules les images JPG, PNG, WebP ou GIF peuvent être importées."));
+        }
+
+        callback(null, true);
+    },
+});
+
 function formatMoney(cents, currency = "CHF") {
     return new Intl.NumberFormat("fr-CH", {
         style: "currency",
@@ -397,6 +428,53 @@ function absoluteUrl(req, value) {
     return `${origin}${input.startsWith("/") ? "" : "/"}${input}`;
 }
 
+function productUploadUrl(file) {
+    if (!file?.filename) {
+        return "";
+    }
+
+    return `/static/uploads/products/${file.filename}`;
+}
+
+function withProductUploads(req, res, next) {
+    fs.mkdirSync(productUploadDir, { recursive: true });
+
+    productImageUpload.fields([
+        { name: "image_file", maxCount: 1 },
+        { name: "gallery_files", maxCount: 12 },
+    ])(req, res, (error) => {
+        if (error) {
+            setFlash(req, "error", error.message || "L'import des images a échoué.");
+            return saveSessionAndRedirect(req, res, req.originalUrl);
+        }
+
+        return next();
+    });
+}
+
+function productInputWithUploads(req) {
+    const input = { ...req.body };
+    const primaryUpload = productUploadUrl(req.files?.image_file?.[0]);
+    const galleryUploads = (req.files?.gallery_files || []).map(productUploadUrl).filter(Boolean);
+    const existingGalleryUrls = String(input.image_gallery_urls || "").trim();
+
+    if (primaryUpload) {
+        input.image_url = primaryUpload;
+    }
+
+    if (!input.image_url && galleryUploads.length) {
+        input.image_url = galleryUploads.shift();
+    }
+
+    if (galleryUploads.length) {
+        input.image_gallery_urls = [existingGalleryUrls, ...galleryUploads]
+            .filter(Boolean)
+            .join("\n");
+    }
+
+    return input;
+}
+
 function setPublicApiHeaders(res) {
     res.set("Access-Control-Allow-Origin", "*");
     res.set("Access-Control-Allow-Methods", "GET, OPTIONS");
@@ -2780,8 +2858,8 @@ app.get("/admin/products/new", requireAdmin, (req, res) => {
     });
 });
 
-app.post("/admin/products/new", requireAdmin, (req, res) => {
-    createProduct(db, req.body);
+app.post("/admin/products/new", requireAdmin, withProductUploads, (req, res) => {
+    createProduct(db, productInputWithUploads(req));
     setFlash(req, "success", "Produit créé.");
     saveSessionAndRedirect(req, res, "/admin");
 });
@@ -2799,8 +2877,8 @@ app.get("/admin/products/:id/edit", requireAdmin, (req, res) => {
     });
 });
 
-app.post("/admin/products/:id/edit", requireAdmin, (req, res) => {
-    const product = updateProduct(db, Number.parseInt(req.params.id, 10), req.body);
+app.post("/admin/products/:id/edit", requireAdmin, withProductUploads, (req, res) => {
+    const product = updateProduct(db, Number.parseInt(req.params.id, 10), productInputWithUploads(req));
     if (!product) {
         return res.status(404).render("not-found", { title: "Produit introuvable" });
     }
diff --git a/views/admin/product-form.ejs b/views/admin/product-form.ejs
@@ -12,7 +12,7 @@
             <a href="/admin" class="button button-secondary">Retour</a>
         </div>
 
-        <form action="<%= formAction %>" method="post" class="admin-form-grid">
+        <form action="<%= formAction %>" method="post" class="admin-form-grid" enctype="multipart/form-data">
             <label>
                 Nom du produit
                 <input type="text" name="name" value="<%= product?.name || '' %>" required>
@@ -33,12 +33,24 @@
                 <input type="url" name="image_url" value="<%= product?.image_url || '' %>">
             </label>
 
+            <label>
+                Importer l'image principale
+                <input type="file" name="image_file" accept="image/*">
+                <small>Remplace l'URL ci-dessus si une image est sélectionnée.</small>
+            </label>
+
             <label class="full-span">
                 Galerie photos
                 <textarea name="image_gallery_urls" rows="5" placeholder="https://.../photo-2.jpg&#10;https://.../photo-3.jpg"><%= product?.image_gallery_text || '' %></textarea>
                 <small>Une URL par ligne. L'image principale ci-dessus reste la photo d'ouverture.</small>
             </label>
 
+            <label class="full-span">
+                Importer des photos de galerie
+                <input type="file" name="gallery_files" accept="image/*" multiple>
+                <small>Les images importées seront ajoutées à la galerie existante.</small>
+            </label>
+
             <label class="full-span">
                 Résumé court
                 <input type="text" name="short_description" value="<%= product?.short_description || '' %>" required>
diff --git a/views/checkout.ejs b/views/checkout.ejs
@@ -196,7 +196,6 @@
                             <div class="stripe-card-panel">
                                 <div class="stripe-card-copy">
                                     <strong>Paiement sécurisé par Stripe</strong>
-                                    <p>Saisissez votre carte directement ici, sans quitter la page.</p>
                                 </div>
                                 <div id="stripe-payment-message" class="stripe-payment-message" hidden></div>
                                 <div id="stripe-payment-element" class="stripe-payment-element">
diff --git a/views/product.ejs b/views/product.ejs

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`"ejs": "^3.1.10",`
`15`	`15`	`"express": "^4.21.2",`
`16`	`16`	`"express-session": "^1.18.1",`
	`17`	`+ "multer": "^2.1.1",`
`17`	`18`	`"nodemailer": "^8.0.5",`
`18`	`19`	`"stripe": "^17.6.0"`
`19`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -382,7 +382,7 @@ async function ensureStripeClient() {`
`382`	`382`	`throw new Error("Stripe n'a pas pu se charger.");`
`383`	`383`	`}`
`384`	`384`
`385`		`- stripeClient = window.Stripe(getStripeKey());`
	`385`	`+ stripeClient = window.Stripe(getStripeKey(), { locale: "fr" });`
`386`	`386`	`return stripeClient;`
`387`	`387`	`}`
`388`	`388`