🎨 style & fix: Layout-Optimierung und Vorbereitung für Themes

- 📏 Abstände im gesamten Layout verbessert für konsistentere Darstellung - 📄 Automatischer Seitenumbruch bei Noten implementiert, wenn diese über das Seitenende hinausgehen - ⚠️ Hinweis: Manueller Seitenumbruch muss vor dem Titel eingefügt werden - 🎨 Template-CSS optimiert für einfachere Anpassbarkeit - 🔧 Vorbereitung für zukünftige Theme-Implementierung - 🔢 Abstände als Konstanten definiert für einheitliche und leicht änderbare Werte - Quickfix: Sessions laden - Server: Kontaktmail hinzugefügt für Homepage - Lizenz hinzugefügt
Revisor01 · Aug 8, 2024 · 8904868 · 8904868
1 parent 0a17b76
commit 8904868
Show file tree

Hide file tree

Showing 16 changed files with 1,394 additions and 280 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -1,18 +1,23 @@
 # HymnoScribe
-![Logo](https://github.com/Revisor01/HymnoScribe/blob/master/frontend/img/Logo-hymnoscribe.png)
 
+![Logo](https://github.com/Revisor01/HymnoScribe/blob/master/frontend/img/Logo-hymnoscribe.png)
+[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)
 [![Docker](https://github.com/Revisor01/HymnoScribe/actions/workflows/docker-publish.yml/badge.svg)](https://github.com/Revisor01/HymnoScribe/actions/workflows/docker-publish.yml)
 
 HymnoScribe ist ein umfassendes Tool zur Erstellung von Gottesdienst-Liedblättern. Es bietet eine benutzerfreundliche Oberfläche zum Erstellen, Bearbeiten und Verwalten von Gottesdienstobjekten sowie zur Generierung von PDF-Liedblättern.
 
 ## Inhaltsverzeichnis
 1. [Features](#features)
-2. [Installation und Nutzung](#installation-und-nutzung)
+2. [Nutzung und Lizenzierung](#nutzung-und-lizenzierung)
+3. [Installation](#installation)
    - [Docker Compose Setup](#docker-compose-setup)
    - [Reverse Proxy Setup](#reverse-proxy-setup)
-3. [Entwicklungsumgebung](#entwicklungsumgebung)
-4. [Benutzerrollen und Berechtigungen](#benutzerrollen-und-berechtigungen)
-5. [FAQ](#faq)
+4. [Entwicklungsumgebung](#entwicklungsumgebung)
+5. [Benutzerrollen und Berechtigungen](#benutzerrollen-und-berechtigungen)
+6. [FAQ](#faq)
+7. [Kontakt und Support](#kontakt-und-support)
+8. [Mitwirken](#mitwirken)
+9. [Lizenz](#lizenz)
 
 ## Features
 
@@ -25,11 +30,27 @@ HymnoScribe ist ein umfassendes Tool zur Erstellung von Gottesdienst-Liedblätte
 - Unterstützung für Noten-Bilder (mit und ohne Text)
 - Integration eigener Bilder und Logos
 - Responsives Design für Desktop- und mobile Nutzung
-- Benutzer- und Institutionsverwaltung
-- Rollenbasiertes Berechtigungssystem
+- Benutzer- und Institutionsverwaltung mit rollenbasiertem Berechtigungssystem
 - E-Mail-Verifizierung und Passwort-Zurücksetzung
+- Mehrere Ausgabeformate: A4, A3, DIN Lang (6er-Flyer)
+- Individuelle Anpassung des Layouts (Schriftart, -größe, Ausrichtung)
+- Möglichkeit zur Integration eines Kirchenlogos
+
+## Nutzung und Lizenzierung
+
+HymnoScribe ist ein Projekt, das die Arbeit von Gemeinden erleichtern und die Verkündigung des Evangeliums unterstützen soll. Wir bieten folgende Nutzungsmodelle an:
+
+- **Private Nutzung:** Kostenlos zum Selbsthosten oder über unsere Plattform (nach Anfrage).
+- **Gemeindliche Nutzung:** Für regelmäßige Nutzung auf unserer Plattform bitten wir um einen Beitrag von 5€ pro Monat.
+- **Organisationen/Unternehmen:** Bitte kontaktieren Sie uns für individuelle Lizenzvereinbarungen.
+
+Eine Testversion ist unter https://app.hymnoscribe.de verfügbar. Nutzen Sie die Zugangsdaten:
+- Admin (Passwort: demoAdmin)
+- User (Passwort: demoUser)
 
-## Installation und Nutzung
+Für die Selbsthosting-Option finden Sie alle Informationen in diesem Repository.
+
+## Installation
 
 ### Docker Compose Setup
 
@@ -76,6 +97,47 @@ server {
     }
 }
 ```
+```apache
+# HTTPS-Redirect
+RewriteEngine On
+RewriteCond %{HTTPS} off
+RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+
+# API-Anfragen
+<Location /api>
+# CORS-Header hinzufügen
+Header always set Access-Control-Allow-Origin "URL"
+Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
+Header always set Access-Control-Allow-Headers "Content-Type, Authorization"
+Header always set Access-Control-Allow-Credentials "true"
+
+# Präflug-Anfragen behandeln
+RewriteEngine On
+RewriteCond %{REQUEST_METHOD} OPTIONS
+RewriteRule ^(.*)$ $1 [R=200,L]
+
+ProxyPass http://127.0.0.1:9615/api
+ProxyPassReverse http://127.0.0.1:9615/api
+</Location>
+
+# Frontend und alle anderen Anfragen
+<Location />
+ProxyPass http://127.0.0.1:9615/
+ProxyPassReverse http://127.0.0.1:9615/
+</Location>
+
+# ACME-Challenge von Proxy ausschließen
+<Location /.well-known/acme-challenge/>
+RewriteEngine off
+ProxyPass !
+</Location>
+
+# Websocket-Unterstützung (falls benötigt)
+RewriteEngine On
+RewriteCond %{HTTP:Upgrade} websocket [NC]
+RewriteCond %{HTTP:Connection} upgrade [NC]
+RewriteRule ^/?(.*) "ws://127.0.0.1:9615/$1" [P,L]
+```
 
 Ersetzen Sie `hymnoscribe.your-domain.com` mit Ihrer tatsächlichen Domain und passen Sie die Pfade zu Ihren SSL-Zertifikaten an.
 
@@ -113,41 +175,26 @@ HymnoScribe verwendet ein rollenbasiertes Berechtigungssystem:
 2. **Kann ich HymnoScribe selbst hosten?**
    Ja, HymnoScribe kann auf Ihrem eigenen Server gehostet werden. Folgen Sie unserer Installationsanleitung.
 
-3. **Wie funktioniert die PDF-Generierung?**
-   HymnoScribe nutzt die PDFLib-Bibliothek, um PDFs direkt im Browser zu erstellen. Sie können verschiedene Formate wie A5, DIN Lang, A4 schmal und A3 schmal wählen.
-
-4. **Kann ich eigene Bilder und Logos hochladen?**
-   Ja, Sie können eigene Bilder und Logos hochladen und in Ihre Liedblätter integrieren.
-
-5. **Wie funktioniert das Session-Management?**
-   Sie können Ihre Arbeit als Session speichern und später fortsetzen. Sessions sind benutzerspezifisch und bleiben erhalten, bis Sie sie löschen.
-
-6. **Gibt es eine Begrenzung für die Anzahl der Objekte, die ich erstellen kann?**
-   Nein, es gibt keine feste Begrenzung. Die Kapazität hängt von Ihrem Hosting-Plan und den Serverressourcen ab.
+3. **Woher kommen die Noten?**
+   Sie können eigene Noten hochladen oder aus unserer Bibliothek wählen. Wir arbeiten mit verschiedenen Verlagen zusammen.
 
-7. **Wie sicher sind meine Daten?**
-   Wir setzen auf verschlüsselte Verbindungen (HTTPS) und sichere Passwort-Hashing-Methoden. Ihre Daten werden in einer sicheren Datenbank gespeichert.
+4. **Wo werden meine Daten gespeichert?**
+   Ihre Daten werden sicher auf Servern in Deutschland gespeichert und unterliegen den strengen europäischen Datenschutzrichtlinien.
 
-8. **Kann ich HymnoScribe offline nutzen?**
-   HymnoScribe ist eine webbasierte Anwendung und benötigt eine Internetverbindung. Eine Offline-Version ist derzeit nicht verfügbar.
+5. **Wie funktioniert die Benutzerverwaltung?**
+   Der Super-Admin kann Institutionen anlegen und hat vollen Zugriff auf alle Nutzer:innen. Der Super-Admin hat keinen Zugriff auf die Objekte innerhalb einer Institution. Administratoren können Benutzer innerhalb ihrer Institution erstellen und verwalten. Jeder Benutzer muss seine E-Mail-Adresse verifizieren.
 
-9. **Wie kann ich Fehler melden oder Verbesserungsvorschläge einreichen?**
-   Bitte nutzen Sie den Issues-Bereich auf GitHub, um Fehler zu melden oder Verbesserungsvorschläge einzureichen.
+6. **Was passiert mit den Objekten, wenn ein Benutzer gelöscht wird?**
+   Objekte bleiben der Institution erhalten, auch wenn der erstellende Benutzer gelöscht wird.
 
-10. **Gibt es eine mobile App für HymnoScribe?**
-    Aktuell gibt es keine separate mobile App. Die Webanwendung ist jedoch responsiv und kann auf mobilen Geräten genutzt werden.
+## Kontakt und Support
 
-11. **Wie oft werden Updates veröffentlicht?**
-    Wir streben regelmäßige Updates an, um neue Features hinzuzufügen und Fehler zu beheben. Die Häufigkeit variiert je nach Entwicklungsfortschritt.
+Für Fragen, Anregungen oder Unterstützung bei der Einrichtung kontaktieren Sie uns bitte über das [Kontaktformular auf unserer Website](https://hymnoscribe.de/#contact) oder erstellen Sie ein Issue in diesem GitHub-Repository.
 
-12. **Kann ich HymnoScribe in meine bestehende Webseite integrieren?**
-    Eine direkte Integration ist nicht vorgesehen. Sie können jedoch Links zu Ihrer HymnoScribe-Instanz auf Ihrer Webseite platzieren.
+## Mitwirken
 
-13. **Wie funktioniert die Benutzerverwaltung?**
-    Der Super-Admin kann Institutionen anlegen und hat vollen Zugriff auf alle Nutzer:innen. Der Super-Admin hat keinen Zugriff auf die Objekte innerhalb einer Institution. Administratoren können Benutzer innerhalb ihrer Institution erstellen und verwalten. Jeder Benutzer muss seine E-Mail-Adresse verifizieren.
+Wir freuen uns über Beiträge zur Weiterentwicklung von HymnoScribe. Wenn Sie Ideen haben oder mitentwickeln möchten, erstellen Sie bitte einen Pull Request oder kontaktieren Sie uns direkt.
 
-14. **Was passiert mit den Objekten, wenn ein Benutzer gelöscht wird?**
-    Objekte bleiben der Institution erhalten, auch wenn der erstellende Benutzer gelöscht wird.
+## Lizenz
 
-15. **Gibt es eine API für HymnoScribe?**
-    Aktuell bieten wir keine öffentliche API an. Bei Bedarf können Sie sich für zukünftige Entwicklungen an uns wenden.
+HymnoScribe ist unter der [GNU Affero General Public License v3.0 (AGPL-3.0)](https://www.gnu.org/licenses/agpl-3.0) lizenziert.
diff --git a/backend/contact-email-template.html b/backend/contact-email-template.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HymnoScribe Kontaktanfrage</title>
+    <style>
+        body {
+            font-family: 'Jost', Arial, sans-serif;
+            line-height: 1.6;
+            color: #333333;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f4f4f4;
+        }
+        .container {
+            background-color: #ffffff;
+            padding: 30px;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        .logo {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .logo img {
+            max-width: 200px;
+            height: auto;
+        }
+        h1 {
+            color: #1a5f7a;
+            font-size: 24px;
+            margin-bottom: 20px;
+        }
+        .content {
+            background-color: #f9f9f9;
+            padding: 15px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+        .button {
+            display: inline-block;
+            background-color: #1a5f7a;
+            color: #ffffff;
+            padding: 10px 20px;
+            text-decoration: none;
+            border-radius: 5px;
+        }
+        .button:hover {
+            background-color: #154c61;
+        }
+        .signature {
+            margin-top: 30px;
+            padding-top: 15px;
+            border-top: 1px solid #dddddd;
+            font-size: 14px;
+            color: #666666;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="logo">
+            <img src="[LOGO_URL]" alt="HymnoScribe Logo">
+        </div>
+
+        <h1>Neue Kontaktanfrage</h1>
+
+        <div class="content">
+            [Hauptinhalt]
+        </div>
+
+        <a href="[ButtonUrl]" class="button">[ButtonText]</a>
+
+        <div class="signature">
+            <p>
+                Mit freundlichen Grüßen,<br>
+                Ihr HymnoScribe Team
+            </p>
+            <p>
+                HymnoScribe - Der Liedblatt Generator<br>
+                © 2024 Pastor Simon Luthe. Alle Rechte vorbehalten.
+            </p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/backend/server.js b/backend/server.js
@@ -33,7 +33,7 @@ const PORT = process.env.PORT || 3000;
 
 app.use(express.json());
 app.use(cors({
-    origin: process.env.URL ? process.env.URL.split(',') : '*',
+    origin: process.env.URL ? process.env.URL.split(',') : ['*', 'https://hymnoscribe.de'],
     methods: ['GET', 'POST', 'PUT', 'DELETE'],
     allowedHeaders: ['Content-Type', 'Authorization']
 }));
@@ -154,10 +154,6 @@ app.use(express.urlencoded({ limit: '50mb', extended: true }));
 
 app.use(express.static(path.join(__dirname, '../frontend')));
 
-app.get('*', (req, res) => {
-    res.sendFile(path.join(__dirname, '../frontend/index.html'));
-});
-
 app.get('/admin.html', (req, res) => {
     res.sendFile(path.join(__dirname, '../frontend/admin.html'));
 });
@@ -166,6 +162,63 @@ app.get('/reset-password.html', (req, res) => {
     res.sendFile(path.join(__dirname, 'public', '../frontend/admin.html'));
 });
 
+apiRouter.post('/contact', async (req, res) => {
+    const { name, email, subject, message, inquiryType, institution, purpose } = req.body;
+
+    try {
+        let emailContent = `
+            <strong>Name:</strong> ${name}<br>
+            <strong>E-Mail:</strong> ${email}<br>
+            <strong>Anfragetyp:</strong> ${inquiryType}<br>
+            <strong>Betreff:</strong> ${subject}<br>
+            <strong>Nachricht:</strong> ${message}<br>
+        `;
+
+        if (inquiryType === 'usage-request') {
+            emailContent += `
+            <strong>Institution/Organisation:</strong> ${institution}<br>
+            <strong>Einsatzzweck:</strong> ${purpose}<br>
+            `;
+        }
+
+        await sendContactEmail(email, subject, emailContent);
+
+        res.status(200).json({ message: 'Nachricht erfolgreich gesendet' });
+    } catch (error) {
+        console.error('Fehler beim Senden der Kontaktnachricht:', error);
+        res.status(500).json({ error: 'Interner Serverfehler beim Senden der Nachricht' });
+    }
+});
+
+async function sendContactEmail(senderEmail, subject, content) {
+    const transporter = createTransporter();
+    const template = getContactEmailTemplate(); // Neue Funktion zum Laden des Kontakt-Templates
+
+    const renderedTemplate = renderEmailTemplate(template, {
+        Hauptinhalt: content,
+        ButtonText: 'Antworten',
+        ButtonUrl: `mailto:${senderEmail}`
+    });
+
+    try {
+        await transporter.sendMail({
+            from: process.env.EMAIL_FROM,
+            to: process.env.CONTACT_EMAIL || process.env.EMAIL_FROM,
+            subject: `Neue Kontaktanfrage: ${subject}`,
+            html: renderedTemplate,
+            replyTo: senderEmail
+        });
+        console.log('Contact email sent successfully');
+    } catch (error) {
+        console.error('Error sending contact email:', error);
+        throw error;
+    }
+}
+
+function getContactEmailTemplate() {
+    return fs.readFileSync(path.join(__dirname, 'contact-email-template.html'), 'utf8');
+}
+
 // Anforderung zum Zurücksetzen des Passworts
 apiRouter.post('/request-password-reset', async (req, res) => {
     const { email } = req.body;
@@ -1216,6 +1269,7 @@ function renderEmailTemplate(template, data) {
         const regex = new RegExp(`\\[${key}\\]`, 'g');
         renderedTemplate = renderedTemplate.replace(regex, data[key]);
     }
+
     return renderedTemplate.replace('[LOGO_URL]', process.env.LOGO_URL);
 }
 

diff --git a/frontend/admin.html b/frontend/admin.html
@@ -108,7 +108,7 @@
         <!--        <h1>HymnoScribe</h1>-->
 
         <div class="header-buttons">
-            <a href="dashboard.html" class="btn">Zurück zum Dashboard</a>
+            <a href="dashboard.html" id="dashboard-back" class="btn">Zurück zum Dashboard</a>
             <button id="logout-btn" class="btn">Abmelden</button>
         </div>
         <div class="hamburger-menu">