Add version display and issue reporting to footer

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,75 @@
+name: Bug Report
+description: Report a bug in the opensource-server application
+title: "[Bug]: "
+labels: ["bug", "triage"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+  - type: input
+    id: url
+    attributes:
+      label: Current URL
+      description: What page were you on when the bug occurred?
+      placeholder: e.g., /sites/1/containers
+    validations:
+      required: false
+
+  - type: input
+    id: username
+    attributes:
+      label: Username
+      description: Your username (if logged in)
+      placeholder: e.g., testuser
+    validations:
+      required: false
+
+  - type: input
+    id: version
+    attributes:
+      label: Version
+      description: Application version/commit hash
+      placeholder: e.g., 0c6c7d0
+    validations:
+      required: false
+
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to reproduce
+      description: How can we reproduce this issue?
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: What did you expect to happen?
+      placeholder: Describe the expected behavior
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual-behavior
+    attributes:
+      label: Actual behavior
+      description: What actually happened?
+      placeholder: Describe what actually happened
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here (screenshots, logs, etc.)
+    validations:
+      required: false

create-a-container/.gitignore

@@ -1,2 +1,3 @@
 .env
 node_modules
+data/

create-a-container/public/style.css

@@ -404,3 +404,80 @@ main {
   margin: 0.5rem 0 0 0;
   font-size: 0.9em;
 }
+
+/* Footer with version info */
+.version-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #1a252f;
+  color: #adb5bd;
+  padding: 0.5rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.85rem;
+  z-index: 1000;
+  border-top: 1px solid #2c3e50;
+}
+
+.version-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.version-label {
+  font-weight: 600;
+  color: #6c757d;
+}
+
+.version-link {
+  color: #3498db;
+  text-decoration: none;
+  font-family: 'Courier New', monospace;
+  transition: color 0.2s;
+}
+
+.version-link:hover {
+  color: #5dade2;
+  text-decoration: underline;
+}
+
+.version-date {
+  color: #6c757d;
+  font-size: 0.8rem;
+}
+
+.issue-report {
+  display: flex;
+  align-items: center;
+}
+
+.report-issue-link {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #adb5bd;
+  text-decoration: none;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  background-color: #2c3e50;
+  transition: all 0.2s;
+  font-size: 0.85rem;
+}
+
+.report-issue-link:hover {
+  background-color: #3498db;
+  color: #fff;
+}
+
+.report-issue-link i {
+  font-size: 1rem;
+}
+
+/* Add padding to main content to prevent footer overlap */
+main {
+  padding-bottom: 3rem;
+}

create-a-container/server.js

@@ -92,6 +92,11 @@ async function main() {
     max: 100, // limit each IP to 100 requests per windowMs
   }));
 
+  // Set version info once at startup in app.locals
+  // Note: Version info is cached at startup. Server restart required to update version.
+  const { getVersionInfo } = require('./utils');
+  app.locals.versionInfo = getVersionInfo();
+
   // Middleware to load sites for authenticated users
   app.use((req, res, next) => {
     if (req.session && req.session.user) {

create-a-container/utils/index.js

@@ -1,4 +1,4 @@
-const { spawn } = require('child_process');
+const { spawn, execSync } = require('child_process');
 const ProxmoxApi = require('./proxmox-api');
 
 function run(cmd, args, opts) {
@@ -26,6 +26,35 @@ function run(cmd, args, opts) {
   });
 }
 
+/**
+ * Get version information from git
+ * @returns {Object} Version information with hash, date, and tag
+ */
+function getVersionInfo() {
+  try {
+    const commitHash = execSync('git rev-parse --short HEAD', { encoding: 'utf8', shell: true }).trim();
+    const commitDate = execSync('git log -1 --format=%ad --date=short', { encoding: 'utf8', shell: true }).trim();
+    const tag = execSync('git describe --tags --exact-match 2>/dev/null || echo ""', { encoding: 'utf8', shell: true }).trim();
+
+    return {
+      hash: commitHash,
+      date: commitDate,
+      tag: tag || null,
+      display: tag ? `${tag} (${commitHash})` : commitHash,
+      url: `https://github.com/mieweb/opensource-server/commit/${commitHash}`
+    };
+  } catch (error) {
+    console.error('Error getting version info:', error);
+    return {
+      hash: 'unknown',
+      date: new Date().toISOString().split('T')[0],
+      tag: null,
+      display: 'development',
+      url: 'https://github.com/mieweb/opensource-server'
+    };
+  }
+}
+
 /**
  * Helper to validate that a redirect URL is a safe relative path.
  * @param {string} url - the URL to validate
@@ -45,5 +74,6 @@ function isSafeRelativeUrl(url) {
 module.exports = {
   ProxmoxApi,
   run,
-  isSafeRelativeUrl
+  isSafeRelativeUrl,
+  getVersionInfo
 };

create-a-container/views/layouts/footer.ejs

@@ -2,6 +2,26 @@
     </div>
   </div>
 
+  <!-- Footer with version and issue reporting -->
+  <footer class="version-footer">
+    <div class="version-info">
+      <span class="version-label">Version:</span>
+      <a href="<%= versionInfo.url %>" target="_blank" rel="noopener noreferrer" class="version-link">
+        <%= versionInfo.display %>
+      </a>
+      <span class="version-date">(<%= versionInfo.date %>)</span>
+    </div>
+    <div class="issue-report">
+      <a href="https://github.com/mieweb/opensource-server/issues/new?template=bug_report.yml&url=<%- encodeURIComponent(req.originalUrl || '/') %>&username=<%- encodeURIComponent(req?.session?.user || 'Not logged in') %>&version=<%- encodeURIComponent(versionInfo.display) %>" 
+         target="_blank" 
+         rel="noopener noreferrer" 
+         class="report-issue-link"
+         aria-label="Report an issue on GitHub">
+        <i class="bi bi-bug"></i> Report Issue
+      </a>
+    </div>
+  </footer>
+
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
   <script>
     const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');