c48cd87d16
Some checks failed
Build Multi-Arch Container Image / test (push) Has been cancelled
Build Multi-Arch Container Image / build-and-push (push) Has been cancelled
Build Multi-Arch Container Image / security-scan (push) Has been cancelled
Build Multi-Arch Container Image / deploy-staging (push) Has been cancelled
Build Multi-Arch Container Image / deploy-production (push) Has been cancelled
Nightly Build / notify-results (push) Has been cancelled
Nightly Build / check-changes (push) Has been cancelled
Nightly Build / nightly-tests (3.10) (push) Has been cancelled
Nightly Build / nightly-tests (3.11) (push) Has been cancelled
Nightly Build / nightly-tests (3.12) (push) Has been cancelled
Nightly Build / nightly-tests (3.8) (push) Has been cancelled
Nightly Build / nightly-tests (3.9) (push) Has been cancelled
Nightly Build / build-nightly (push) Has been cancelled
Nightly Build / performance-test (push) Has been cancelled
Nightly Build / security-scan-nightly (push) Has been cancelled
Nightly Build / cleanup-old-nightlies (push) Has been cancelled
451 lines
23 KiB
HTML
451 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="{{ app_name }} Editor — create, validate, and download systemd unit files with a visual editor and real-time checks.">
|
|
<title>Editor - {{ app_name }}</title>
|
|
<link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg">
|
|
<link rel="icon" type="image/svg+xml" sizes="16x16" href="/static/img/favicon-16x16.svg">
|
|
<link rel="alternate icon" href="/static/img/favicon.svg">
|
|
<link rel="apple-touch-icon" href="/static/img/icon-192x192.svg">
|
|
<link rel="manifest" href="/static/img/site.webmanifest">
|
|
<meta name="theme-color" content="#0d6efd">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="{{ app_name }}">
|
|
<script>
|
|
(function () {
|
|
const storageKey = 'unitforge-theme';
|
|
try {
|
|
const stored = localStorage.getItem(storageKey);
|
|
const theme = stored === 'light' || stored === 'dark' ? stored : 'system';
|
|
const root = document.documentElement;
|
|
root.setAttribute('data-theme-preference', theme);
|
|
|
|
if (theme === 'light' || theme === 'dark') {
|
|
root.setAttribute('data-theme', theme);
|
|
} else {
|
|
root.removeAttribute('data-theme');
|
|
}
|
|
|
|
const meta = document.querySelector('meta[name="theme-color"]');
|
|
if (meta) {
|
|
const prefersDark = typeof window !== 'undefined' &&
|
|
window.matchMedia &&
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const appliedTheme = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
|
|
meta.setAttribute('content', appliedTheme === 'dark' ? '#0b1120' : '#0d6efd');
|
|
}
|
|
} catch (error) {
|
|
console.warn('Theme bootstrap failed:', error);
|
|
}
|
|
})();
|
|
</script>
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
|
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
|
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/vendor/fontawesome/css/all.min.css">
|
|
<link href="/static/css/style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="fas fa-cogs me-2"></i>{{ app_name }}
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/editor">Editor</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/templates">Templates</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/cli">CLI</a>
|
|
</li>
|
|
</ul>
|
|
<div class="navbar-nav ms-auto align-items-lg-center gap-2 mt-3 mt-lg-0">
|
|
<div class="nav-item dropdown w-100 w-lg-auto">
|
|
<button
|
|
class="btn btn-outline-light dropdown-toggle w-100 w-lg-auto"
|
|
id="themeDropdown"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
data-theme-toggle
|
|
>
|
|
<i class="fas fa-circle-half-stroke me-2" data-theme-icon></i>
|
|
<span data-theme-label>System</span>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
|
|
<li>
|
|
<button
|
|
class="dropdown-item d-flex align-items-center"
|
|
type="button"
|
|
data-theme-option="light"
|
|
role="menuitemradio"
|
|
aria-checked="false"
|
|
>
|
|
<i class="fas fa-sun me-2 text-warning"></i>
|
|
Light
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
class="dropdown-item d-flex align-items-center"
|
|
type="button"
|
|
data-theme-option="dark"
|
|
role="menuitemradio"
|
|
aria-checked="false"
|
|
>
|
|
<i class="fas fa-moon me-2 text-info"></i>
|
|
Dark
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
class="dropdown-item d-flex align-items-center"
|
|
type="button"
|
|
data-theme-option="system"
|
|
role="menuitemradio"
|
|
aria-checked="true"
|
|
>
|
|
<i class="fas fa-circle-half-stroke me-2 text-secondary"></i>
|
|
System
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="btn btn-light btn-sm w-100 w-lg-auto" onclick="downloadFile()">
|
|
<i class="fas fa-download me-1"></i>Download
|
|
</button>
|
|
<button class="btn btn-light btn-sm w-100 w-lg-auto" onclick="showUploadModal()">
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid py-4">
|
|
<div class="row">
|
|
<!-- Editor Configuration Panel -->
|
|
<div class="col-lg-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-light">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fas fa-cog me-2"></i>Configuration
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Basic Settings -->
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">Basic Settings</h6>
|
|
|
|
<div class="mb-3">
|
|
<label for="unitType" class="form-label">Unit Type</label>
|
|
<select class="form-select" id="unitType" onchange="changeUnitType()">
|
|
<option value="service">Service</option>
|
|
<option value="timer">Timer</option>
|
|
<option value="socket">Socket</option>
|
|
<option value="mount">Mount</option>
|
|
<option value="target">Target</option>
|
|
<option value="path">Path</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="unitName" class="form-label">Unit Name</label>
|
|
<input type="text" class="form-control" id="unitName" placeholder="myservice" oninput="updateFilename()">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="unitDescription" class="form-label">Description</label>
|
|
<input type="text" class="form-control" id="unitDescription" placeholder="My Service Description" oninput="updateField('Unit', 'Description', this.value)">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service-specific fields -->
|
|
<div id="serviceFields" class="unit-type-fields">
|
|
<h6 class="text-muted mb-3">Service Configuration</h6>
|
|
|
|
<div class="mb-3">
|
|
<label for="serviceType" class="form-label">Service Type</label>
|
|
<select class="form-select" id="serviceType" onchange="updateField('Service', 'Type', this.value)">
|
|
<option value="simple">Simple</option>
|
|
<option value="exec">Exec</option>
|
|
<option value="forking">Forking</option>
|
|
<option value="oneshot">Oneshot</option>
|
|
<option value="dbus">D-Bus</option>
|
|
<option value="notify">Notify</option>
|
|
<option value="idle">Idle</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="execStart" class="form-label">Exec Start</label>
|
|
<input type="text" class="form-control" id="execStart" placeholder="/usr/bin/myapp" oninput="updateField('Service', 'ExecStart', this.value)">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="user" class="form-label">User</label>
|
|
<input type="text" class="form-control" id="user" placeholder="www-data" oninput="updateField('Service', 'User', this.value)">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="workingDirectory" class="form-label">Working Directory</label>
|
|
<input type="text" class="form-control" id="workingDirectory" placeholder="/opt/myapp" oninput="updateField('Service', 'WorkingDirectory', this.value)">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="restart" class="form-label">Restart Policy</label>
|
|
<select class="form-select" id="restart" onchange="updateField('Service', 'Restart', this.value)">
|
|
<option value="no">No</option>
|
|
<option value="always">Always</option>
|
|
<option value="on-success">On Success</option>
|
|
<option value="on-failure" selected>On Failure</option>
|
|
<option value="on-abnormal">On Abnormal</option>
|
|
<option value="on-abort">On Abort</option>
|
|
<option value="on-watchdog">On Watchdog</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timer-specific fields -->
|
|
<div id="timerFields" class="unit-type-fields d-none">
|
|
<h6 class="text-muted mb-3">Timer Configuration</h6>
|
|
|
|
<div class="mb-3">
|
|
<label for="onCalendar" class="form-label">On Calendar</label>
|
|
<input type="text" class="form-control" id="onCalendar" placeholder="daily" oninput="updateField('Timer', 'OnCalendar', this.value)">
|
|
<div class="form-text">Examples: daily, weekly, monthly, *-*-* 02:00:00</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="persistent" class="form-label">Persistent</label>
|
|
<select class="form-select" id="persistent" onchange="updateField('Timer', 'Persistent', this.value)">
|
|
<option value="true" selected>True</option>
|
|
<option value="false">False</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Socket-specific fields -->
|
|
<div id="socketFields" class="unit-type-fields d-none">
|
|
<h6 class="text-muted mb-3">Socket Configuration</h6>
|
|
|
|
<div class="mb-3">
|
|
<label for="listenStream" class="form-label">Listen Stream</label>
|
|
<input type="text" class="form-control" id="listenStream" placeholder="127.0.0.1:8080" oninput="updateField('Socket', 'ListenStream', this.value)">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="socketUser" class="form-label">Socket User</label>
|
|
<input type="text" class="form-control" id="socketUser" placeholder="www-data" oninput="updateField('Socket', 'SocketUser', this.value)">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Install section -->
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">Install Configuration</h6>
|
|
|
|
<div class="mb-3">
|
|
<label for="wantedBy" class="form-label">Wanted By</label>
|
|
<input type="text" class="form-control" id="wantedBy" value="multi-user.target" oninput="updateField('Install', 'WantedBy', this.value)">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-success" onclick="validateUnit()">
|
|
<i class="fas fa-check me-2"></i>Validate
|
|
</button>
|
|
<button class="btn btn-outline-primary" onclick="resetEditor()">
|
|
<i class="fas fa-refresh me-2"></i>Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Editor Area -->
|
|
<div class="col-lg-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title mb-0">
|
|
<i class="fas fa-file-code me-2"></i>
|
|
<span id="filename">myservice.service</span>
|
|
</h6>
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button class="btn btn-outline-secondary" onclick="formatUnit()" title="Format">
|
|
<i class="fas fa-indent"></i>
|
|
</button>
|
|
<button class="btn btn-outline-secondary" onclick="copyToClipboard()" title="Copy">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<label for="editor" class="visually-hidden">Unit file editor</label>
|
|
<textarea id="editor" class="form-control border-0" aria-label="Unit file content" rows="25" style="font-family: 'Courier New', monospace; resize: none; color: white; background-color: #2d3748;">[Unit]
|
|
Description=My Service Description
|
|
After=network.target
|
|
|
|
[Service]
|
|
Type=simple
|
|
ExecStart=/usr/bin/myapp
|
|
User=www-data
|
|
Restart=on-failure
|
|
|
|
[Install]
|
|
WantedBy=multi-user.target</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Validation & Preview Panel -->
|
|
<div class="col-lg-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-light">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fas fa-clipboard-check me-2"></i>Validation & Info
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Validation Results -->
|
|
<div id="validationResults" class="mb-4">
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Click "Validate" to check your unit file.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Unit File Info -->
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">Unit Information</h6>
|
|
<div id="unitInfo">
|
|
<div class="info-item">
|
|
<strong>Type:</strong> <span id="infoType">service</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>Sections:</strong> <span id="infoSections">3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Help -->
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">Quick Help</h6>
|
|
<div class="help-content">
|
|
<div class="help-item mb-2">
|
|
<small></small><strong>[Unit]</strong> - Basic metadata and dependencies</small>
|
|
</div>
|
|
<div class="help-item mb-2">
|
|
<small><strong>[Service]</strong> - Service-specific configuration</small>
|
|
</div>
|
|
<div class="help-item mb-2">
|
|
<small><strong>[Install]</strong> - Installation and enabling info</small>
|
|
</div>
|
|
<div class="help-item">
|
|
<small><a class="link-contrast" href="https://www.freedesktop.org/software/systemd/man/systemd.unit.html" target="_blank">systemd documentation <i class="fas fa-external-link-alt"></i></a></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Common Patterns -->
|
|
<div>
|
|
<h6 class="text-muted mb-3">Common Patterns</h6>
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-outline-secondary btn-sm" onclick="insertPattern('web-service')">
|
|
Web Service
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm" onclick="insertPattern('background-job')">
|
|
Background Job
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm" onclick="insertPattern('database')">
|
|
Database Service
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Modal -->
|
|
<div class="modal fade" id="uploadModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-upload me-2"></i>Upload Unit File
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="fileInput" class="form-label">Select unit file:</label>
|
|
<input type="file" class="form-control" id="fileInput" accept=".service,.timer,.socket,.mount,.target,.path">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="loadFile()">
|
|
<i class="fas fa-upload me-2"></i>Load
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<footer class="bg-dark text-light py-4 mt-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="fw-bold mb-0"><i class="fas fa-cogs me-2"></i>{{ app_name }}</p>
|
|
<p class="text-muted small">{{ app_description }}.</p>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<div class="d-flex justify-content-md-end gap-3">
|
|
<a href="{{ api_docs_url }}" class="text-light text-decoration-none">
|
|
<i class="fas fa-book me-1"></i>API Docs
|
|
</a>
|
|
<a href="{{ github_url }}" class="text-light text-decoration-none">
|
|
<i class="fab fa-github me-1"></i>GitHub
|
|
</a>
|
|
</div>
|
|
<div class="mt-2 small">
|
|
<span class="me-2">
|
|
<i class="fas fa-code-branch me-1"></i>Open Source
|
|
<span class="badge bg-success ms-2">OSI</span>
|
|
</span>
|
|
<span>
|
|
Licensed under
|
|
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank" rel="noopener" class="text-decoration-underline text-light">GPL-3.0-or-later</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/main.js"></script>
|
|
<script src="/static/js/editor.js"></script>
|
|
</body>
|
|
</html>
|