removed xss

.woodpecker.yml

@@ -2,7 +2,7 @@ steps:
   build:
     image: plugins/kaniko
     settings:
-      repo: gitea.hottis.de/moerp/elo-rezept-rechner
+      repo: ${FORGE_NAME}/${CI_REPO}
       registry: 
         from_secret: container_registry
       tags: latest,${CI_COMMIT_SHA},${CI_COMMIT_TAG}
@@ -17,6 +17,11 @@ steps:
     when:
       - event: [push, tag]
 
+  scan_image:
+    image: aquasec/trivy
+    commands:
+      - trivy image $FORGE_NAME/$CI_REPO:$CI_COMMIT_SHA --quiet --exit-code 1
+
   deploytest:
     image: portainer/kubectl-shell:latest
     secrets:

Dockerfile

@@ -10,10 +10,12 @@ COPY start.sh ${APP_DIR}/
 WORKDIR ${APP_DIR}
 
 RUN \
-  apk add --no-cache build-base libpq-dev && \
+  apk add --no-cache build-base libpq-dev npm && \
+  pip install --upgrade pip && \
   pip install -r requirements.txt && \
   if [ "${VERSION_ID2}" != "" ]; then VERSION_ID=${VERSION_ID2}; else VERSION_ID=${VERSION_ID1}; fi && \
-  sed -i -e 's/VERSION_ID/'$VERSION_ID'/' ${APP_DIR}/templates/index.html 
+  sed -i -e 's/VERSION_ID/'$VERSION_ID'/' ${APP_DIR}/templates/index.html && \
+  sed -i -e 's/VERSION_ID/'"$VERSION_ID"'/' ${APP_DIR}/templates/nutrition.html
 
 EXPOSE 8080
 

deployment/deploy.sh

@@ -36,7 +36,7 @@ kubectl create secret generic nutri-secrets \
   --from-literal=CLIENT_SECRETS="$CLIENT_SECRETS" \
   --from-literal=PGUSER="$PGUSER" \
   --from-literal=PGPASSWORD="$PGPASSWORD" \
-  --from-literal=PGDATABASE="$PGDATABASE" \
+  --from-literal=PGDATABASE="$PGDATABASE$POSTFIX" \
   --from-literal=PGHOST="timescaledb.database.svc.cluster.local" \
   --from-literal=PGSSLMODE="require" | \
   kubectl apply -f - -n $NAMESPACE

src/Run.py

@@ -21,6 +21,8 @@ app.config.update({
 oidc = OpenIDConnect(app)
 app.logger.handlers = logging.getLogger('gunicorn.error').handlers
 
+datapw = 'dasrtwegdffgtewrt4335wferg'
+
 def calculate_nutrition(food, weight):
     try:
         conn = psycopg2.connect()
@@ -175,8 +177,30 @@ def get_database_entries():
         if conn:
             conn.close()
 
+
+@app.route('/delete_nutrition', methods=['POST'])
+@oidc.accept_token(['openid'])
+def delete_nutrition():
+    data = request.get_json()
+    foodNames = data['foodNames']
+
+    if not foodNames:
+        return jsonify({'error': 'Keine Lebensmittel zum Löschen angegeben'}), 400
+
+    try:
+        conn = psycopg2.connect()
+        with conn.cursor() as cursor:
+            query = "DELETE FROM nutrition_table WHERE name = ANY(%s)"
+            cursor.execute(query, (foodNames,))
+        conn.commit()
+        return jsonify({'message': 'Erfolgreich gelöscht'}), 200
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+    finally:
+        if conn:
+            conn.close()
+
+
 exposed_app = ProxyFix(app, x_for=1, x_host=1)
 
 
-
-

src/static/style.css

@@ -46,13 +46,30 @@ button#remove-button:not(:disabled):hover {
     background-color: #490000; /* Dunkleres Rot */
 }
 
-
-
 table {
     width: 100%;
-    border-collapse: collapse;
+    border-collapse: separate; /* Erlaubt die Anwendung von border-radius */
+    border-spacing: 0;
+    border-radius: 10px;
 }
 
+table th:first-child {
+    border-top-left-radius: 10px;
+}
+
+table th:last-child {
+    border-top-right-radius: 10px;
+}
+
+table tr:last-child td:first-child {
+    border-bottom-left-radius: 10px;
+}
+
+table tr:last-child td:last-child {
+    border-bottom-right-radius: 10px;
+}
+
+
 table, th, td {
     border: 1px solid #ddd;
 }
@@ -89,9 +106,20 @@ tr:hover:not(.selected) {
     border-radius: 10px;
 }
 
+#navbar .navbar-header {
+    display: flex;
+    align-items: center;
+}
+
 #navbar h1 {
     margin: 0;
     font-size: 24px;
+    display: inline-block;
+}
+
+#navbar .versionid {
+    margin-left: 20px;
+    display: inline-block;
 }
 
 #navbar ul {
@@ -113,13 +141,10 @@ tr:hover:not(.selected) {
     transition: background-color 0.3s;
 }
 
-#navbar a:hover {
+#navbar a:hover, #navbar a.active {
     background-color: #007344; /* Etwas helleres Grün */
 }
 
-#navbar a.active {
-    background-color: #008C50; /* Mittleres Grün */
-}
 
 
 .content {
@@ -130,10 +155,8 @@ tr:hover:not(.selected) {
 }
 
 
-#nutrition-input-table {
-    width: 100%; /* Tabelle nimmt die volle Breite ein */
-    border-collapse: collapse; /* Entfernt doppelte Ränder */
-}
+
+
 
 #nutrition-input-table th, #nutrition-input-table td {
     border: 1px solid #ddd; /* Fügt Ränder hinzu */
@@ -153,16 +176,17 @@ tr:hover:not(.selected) {
     }
 }
 
-#table-container {
+.table-container {
     overflow-y: auto;
-    max-height: 400px; /* Passen Sie die Höhe nach Bedarf an */
+    max-height: 500px; /* Passen Sie die Höhe nach Bedarf an */
     border-radius: 10px;
     margin-top: 20px;
 }
 
 #database-nutrition-table {
     width: 100%;
-    border-collapse: collapse;
+    border-collapse: separate; /* Erlaubt die Anwendung von border-radius */
+    border-spacing: 0;
 }
 
 #database-nutrition-table th, #database-nutrition-table td {
@@ -183,34 +207,28 @@ tr:hover:not(.selected) {
     justify-content: center;
 }
 
-#password-prompt input[type="password"] {
-    padding: 8px;
-    margin-right: 10px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-#password-prompt button {
-    padding: 8px 15px;
-    margin-right: 10px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    color: white;
-}
-
-#password-prompt button[type="submit"] {
-    background-color: #008C50; /* Helles Grün */
-}
-
-#password-prompt button[type="submit"]:hover {
-    background-color: #007344; /* Dunkleres Grün */
-}
-
-#password-prompt button[type="button"] {
+button#delete-row-button {
     background-color: #640000; /* Helles Rot */
 }
 
-#password-prompt button[type="button"]:hover {
+button#delete-row-button:disabled {
+    background-color: #cccccc;
+    color: #666666;
+}
+
+button#delete-row-button:not(:disabled):hover {
     background-color: #490000; /* Dunkleres Rot */
 }
+
+button#cancel-button {
+    background-color: #640000; /* Helles Rot */
+}
+
+button#cancel-button:disabled {
+    background-color: #cccccc;
+    color: #666666;
+}
+
+button#cancel-button:not(:disabled):hover {
+    background-color: #490000; /* Dunkleres Rot */
+}

src/templates/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Nährwertberechnungs-App</title>
+    <title>Elo's Rezept Rechner</title>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
     <link rel="shortcut icon" href="../static/images/favicon.ico">
 
@@ -49,14 +49,14 @@
             const table = document.getElementById('nutrition-table');
             const row = table.insertRow();
 
-            row.insertCell(0).innerHTML = food;
-            row.insertCell(1).innerHTML = weight;
-            row.insertCell(2).innerHTML = nutritionData.kcal;
-            row.insertCell(3).innerHTML = nutritionData.ew;
-            row.insertCell(4).innerHTML = nutritionData.fett;
-            row.insertCell(5).innerHTML = nutritionData.kh;
-            row.insertCell(6).innerHTML = nutritionData.bst;
-            row.insertCell(7).innerHTML = nutritionData.ca;
+            row.insertCell(0).innerText = food;
+            row.insertCell(1).innerText = weight;
+            row.insertCell(2).innerText = nutritionData.kcal;
+            row.insertCell(3).innerText = nutritionData.ew;
+            row.insertCell(4).innerText = nutritionData.fett;
+            row.insertCell(5).innerText = nutritionData.kh;
+            row.insertCell(6).innerText = nutritionData.bst;
+            row.insertCell(7).innerText = nutritionData.ca;
         }
 
 
@@ -124,14 +124,14 @@
                     const table = document.getElementById('nutrition-table');
                     const row = table.insertRow();
                     // Fügt die einzelnen Nährwerte zur neuen Zeile hinzu
-                    row.insertCell(0).innerHTML = food;
-                    row.insertCell(1).innerHTML = weight;
-                    row.insertCell(2).innerHTML = data.kcal;
-                    row.insertCell(3).innerHTML = data.ew;
-                    row.insertCell(4).innerHTML = data.fett;
-                    row.insertCell(5).innerHTML = data.kh;
-                    row.insertCell(6).innerHTML = data.bst;
-                    row.insertCell(7).innerHTML = data.ca;
+                    row.insertCell(0).innerText = food;
+                    row.insertCell(1).innerText = weight;
+                    row.insertCell(2).innerText = data.kcal;
+                    row.insertCell(3).innerText = data.ew;
+                    row.insertCell(4).innerText = data.fett;
+                    row.insertCell(5).innerText = data.kh;
+                    row.insertCell(6).innerText = data.bst;
+                    row.insertCell(7).innerText = data.ca;
 
                     foodInput.value = ''; // Zurücksetzen des Lebensmittel-Eingabefeldes
                     weightInput.value = ''; // Zurücksetzen des Gewicht-Eingabefeldes
@@ -175,9 +175,11 @@ function updateTotalNutrition() {
 </head>
 <body>
     <nav id="navbar">
-        <h1>Elo's Rezept Rechner</h1>
+        <div class="navbar-header">
+            <h1>Elo's Rezept Rechner</h1>
+            <li class="versionid">VERSION_ID</li>
+        </div>
         <ul>
-	    <li class="versionid">VERSION_ID</li>
             <li><a href="/" class="active">Rechner</a></li>
             <li><a href="/nutrition">Neue Lebensmittel</a></li>
         </ul>

src/templates/nutrition.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Neue Lebensmittel hinzufügen</title>
+    <title>Elo's Rezept Rechner</title>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
     <link rel="shortcut icon" href="../static/images/favicon.ico">
     
@@ -70,14 +70,34 @@
 
         function deleteSelectedRows() {
             const table = document.getElementById('database-nutrition-table');
-            Array.from(table.rows).forEach(row => {
-                if (row.classList.contains('selected')) {
-                    // Logik zum Löschen der Zeile aus der Datenbank
-                    table.deleteRow(row.rowIndex);
-                }
-            });
+            const selectedRows = Array.from(table.querySelectorAll('tr.selected'));
+            const foodNames = selectedRows.map(row => row.cells[0].innerText); // Annahme, der Name des Lebensmittels befindet sich in der ersten Zelle
+
+            if (foodNames.length > 0) {
+                // Holen des Tokens und Senden einer Anfrage an das Backend, um die Einträge zu löschen
+                getBearerToken(token => {
+                    fetch('/delete_nutrition', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Authorization': 'Bearer ' + token
+                        },
+                        body: JSON.stringify({foodNames: foodNames})
+                    }).then(response => {
+                        if (response.ok) {
+                            // Erfolgreich gelöscht, entferne Zeilen aus der Tabelle
+                            selectedRows.forEach(row => {
+                                table.deleteRow(row.rowIndex);
+                            });
+                        } else {
+                            console.error('Fehler beim Löschen der Datenbank-Einträge');
+                        }
+                    }).catch(error => console.error('Fehler:', error));
+                });
+            }
         }
 
+
         function showPasswordPrompt() {
             document.getElementById('delete-row-button').style.display = 'none';
             document.getElementById('password-prompt').style.display = 'block';
@@ -90,7 +110,7 @@
 
         function deleteRowsIfPasswordCorrect() {
             const password = document.getElementById('password-input').value;
-            if (password === 'wowmuchsecurity') {
+            if (password === 'geheim') {
                 deleteSelectedRows();  // Funktion, die die ausgewählten Zeilen löscht
                 hidePasswordPrompt();
             } else {
@@ -117,13 +137,13 @@
                     tableBody.innerHTML = '';
                     data.forEach(entry => {
                         const row = tableBody.insertRow();
-                        row.insertCell(0).innerHTML = entry.food;
-                        row.insertCell(1).innerHTML = entry.kcal;
-                        row.insertCell(2).innerHTML = entry.ew;
-                        row.insertCell(3).innerHTML = entry.fett;
-                        row.insertCell(4).innerHTML = entry.kh;
-                        row.insertCell(5).innerHTML = entry.bst;
-                        row.insertCell(6).innerHTML = entry.ca;
+                        row.insertCell(0).innerText = entry.food;
+                        row.insertCell(1).innerText = entry.kcal;
+                        row.insertCell(2).innerText = entry.ew;
+                        row.insertCell(3).innerText = entry.fett;
+                        row.insertCell(4).innerText = entry.kh;
+                        row.insertCell(5).innerText = entry.bst;
+                        row.insertCell(6).innerText = entry.ca;
 
                         // ... Fügen Sie weitere Zellen für die anderen Werte hinzu ...
                     });
@@ -131,46 +151,74 @@
                 .catch(error => console.error('Fehler:', error));
         }
 
-document.addEventListener('DOMContentLoaded', loadDatabaseEntries);
+    document.addEventListener('DOMContentLoaded', loadDatabaseEntries);
+
+    function filterTable() {
+        const searchInput = document.getElementById('search-input');
+        const filterText = searchInput.value.toUpperCase();
+        const table = document.getElementById('database-nutrition-table');
+        const rows = table.getElementsByTagName('tr');
+
+        for (let i = 1; i < rows.length; i++) { // Beginnen bei 1, um die Kopfzeile auszulassen
+            const cell = rows[i].getElementsByTagName('td')[0]; // Angenommen, der zu suchende Text befindet sich in der ersten Spalte
+            if (cell) {
+                const textValue = cell.textContent || cell.innerText;
+                if (textValue.toUpperCase().indexOf(filterText) > -1) {
+                    rows[i].style.display = ""; // Zeile anzeigen
+                } else {
+                    rows[i].style.display = "none"; // Zeile verstecken
+                }
+            }
+        }
+    }
 
 
     </script>
 </head>
 <body>
     <nav id="navbar">
-        <h1>Elo's Rezept Rechner</h1>
+        <div class="navbar-header">
+            <h1>Elo's Rezept Rechner</h1>
+            <li class="versionid">VERSION_ID</li>
+        </div>
         <ul>
             <li><a href="/">Rechner</a></li>
             <li><a href="/nutrition" class="active">Neue Lebensmittel</a></li>
         </ul>
     </nav>
     
+    
     <div class="content">
         <form onsubmit="event.preventDefault(); addNutritionEntry();" method="POST" id="nutrition-form">
-            <table id="nutrition-input-table">
-                <tr>
-                    <th>Lebensmittel</th>
-                    <th>kcal</th>
-                    <th>EW</th>
-                    <th>Fett</th>
-                    <th>KH</th>
-                    <th>BST</th>
-                    <th>CA</th>
-                </tr>
-                <tr>
-                    <td><input type="text" name="food" placeholder="Lebensmittel" oninput="updateSubmitButtonState()"></td>
-                    <td><input <input type="text" name="kcal" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
-                    <td><input <input type="text" name="ew" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
-                    <td><input <input type="text" name="fett" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
-                    <td><input <input type="text" name="kh" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
-                    <td><input <input type="text" name="bst" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
-                    <td><input <input type="text" name="ca" pattern="\d+([.,]\d{1,2})?" placeholder="mg" oninput="updateSubmitButtonState()"></td>
-                </tr>
-            </table>
+                <table id="nutrition-input-table">
+                    <tr>
+                        <th>Lebensmittel</th>
+                        <th>kcal</th>
+                        <th>EW</th>
+                        <th>Fett</th>
+                        <th>KH</th>
+                        <th>BST</th>
+                        <th>CA</th>
+                    </tr>
+                    <tr>
+                        <td><input type="text" name="food" placeholder="Lebensmittel" oninput="updateSubmitButtonState()"></td>
+                        <td><input <input type="text" name="kcal" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
+                        <td><input <input type="text" name="ew" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
+                        <td><input <input type="text" name="fett" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
+                        <td><input <input type="text" name="kh" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
+                        <td><input <input type="text" name="bst" pattern="\d+([.,]\d{1,2})?" placeholder="g" oninput="updateSubmitButtonState()"></td>
+                        <td><input <input type="text" name="ca" pattern="\d+([.,]\d{1,2})?" placeholder="mg" oninput="updateSubmitButtonState()"></td>
+                    </tr>
+                </table>
             <button type="submit" id="submit-button" disabled>Hinzufügen</button>
         </form>
 
-        <div id="table-container">
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Lebensmittel suchen..." oninput="filterTable()">
+        </div>
+        
+
+        <div class="table-container">
             <table id="database-nutrition-table">
                 <thead>
                     <tr>
@@ -192,8 +240,8 @@ document.addEventListener('DOMContentLoaded', loadDatabaseEntries);
 
         <div id="password-prompt" style="display: none;">
             <input type="password" id="password-input" placeholder="Passwort">
-            <button onclick="deleteRowsIfPasswordCorrect()">OK</button>
-            <button onclick="hidePasswordPrompt()">Abbrechen</button>
+            <button id="ok-button" onclick="deleteRowsIfPasswordCorrect()">OK</button>
+            <button id="cancel-button" onclick="hidePasswordPrompt()">Abbrechen</button>
         </div>