400 lines
23 KiB
Plaintext
400 lines
23 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Parameter Admin</title>
|
|
|
|
<link rel="icon" href="/public/assets/homelab_logo.png" />
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<link rel="stylesheet" href="/public/css/paramadminsettingsetup.styles.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
|
|
|
<style>
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
background-image: url('<%= user.wallpaper %>');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="animate">
|
|
<div id="app" class="min-h-screen">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-semibold mb-2">Gestion de la configuration</h1>
|
|
<p class="text-gray-500">Gérez les paramètres et la configuration de votre application</p>
|
|
</div>
|
|
|
|
<!-- Tabs Navigation -->
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="general">
|
|
<i class="fas fa-cog"></i>
|
|
<span>Général</span>
|
|
</button>
|
|
<button class="tab" data-tab="authentication">
|
|
<i class="fas fa-lock"></i>
|
|
<span>Authentification</span>
|
|
</button>
|
|
<button class="tab" data-tab="services">
|
|
<i class="fas fa-server"></i>
|
|
<span>Services</span>
|
|
</button>
|
|
<button class="tab" data-tab="security">
|
|
<i class="fas fa-shield-alt"></i>
|
|
<span>Sécurité</span>
|
|
</button>
|
|
<button class="tab" data-tab="logs">
|
|
<i class="fas fa-list"></i>
|
|
<span>Logs</span>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="setupForm" action="/api/dpanel/dashboard/admin/update-setup" method="POST">
|
|
<!-- General Tab -->
|
|
<div class="tab-content active" data-tab-content="general">
|
|
<div class="settings-card">
|
|
<div class="settings-card-header">
|
|
<i class="fas fa-globe text-xl"></i>
|
|
<h2 class="settings-card-title">Configuration du domaine</h2>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="domain" class="block mb-2">Domaine :</label>
|
|
<input type="text" id="domain" name="domain" class="form-control" value="<%= setup.domain %>">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="webhooksDiscord" class="block mb-2">Webhooks Discord :</label>
|
|
<input type="text" id="webhooksDiscord" name="webhooks_discord" class="form-control" value="<%= setup.webhooks_discord %>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Authentication Tab -->
|
|
<div class="tab-content" data-tab-content="authentication">
|
|
<!-- LDAP Section -->
|
|
<div class="settings-card">
|
|
<div class="settings-card-header">
|
|
<i class="fas fa-database text-xl"></i>
|
|
<h2 class="settings-card-title">Configuration LDAP</h2>
|
|
</div>
|
|
<div class="form-group flex items-center justify-between">
|
|
<label for="ldapEnabled">Activer LDAP :</label>
|
|
<label class="switch">
|
|
<input type="checkbox" id="ldapEnabled" name="ldap[enabled]"
|
|
<%= setup.ldap?.enabled === 'on' ? 'checked' : '' %>
|
|
onchange="toggleSection('ldapForm', this)">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div id="ldapForm" class="nested-settings" style="display: <%= setup.ldap?.enabled === 'on' ? 'block' : 'none' %>">
|
|
<div class="form-group">
|
|
<label for="ldapUrl">URL :</label>
|
|
<input type="text" id="ldapUrl" name="ldap[url]" class="form-control" value="<%= setup.ldap?.url %>">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ldapBaseDN">Base DN :</label>
|
|
<input type="text" id="ldapBaseDN" name="ldap[baseDN]" class="form-control" value="<%= setup.ldap?.baseDN %>">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ldapUsername">Nom d'utilisateur :</label>
|
|
<input type="text" id="ldapUsername" name="ldap[username]" class="form-control" value="<%= setup.ldap?.username %>">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ldapPassword">Mot de passe :</label>
|
|
<input type="password" id="ldapPassword" name="ldap[password]" class="form-control" value="<%= setup.ldap?.password %>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Discord Section -->
|
|
<div class="settings-card">
|
|
<div class="settings-card-header">
|
|
<i class="fab fa-discord text-xl"></i>
|
|
<h2 class="settings-card-title">Configuration Discord</h2>
|
|
</div>
|
|
<div class="form-group flex items-center justify-between">
|
|
<label for="discordEnabled">Activer Discord :</label>
|
|
<label class="switch">
|
|
<input type="checkbox" id="discordEnabled" name="discord[enabled]"
|
|
<%= setup.discord?.enabled === 'on' ? 'checked' : '' %>
|
|
onchange="toggleSection('discordForm', this)">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div id="discordForm" class="nested-settings" style="display: <%= setup.discord?.enabled === 'on' ? 'block' : 'none' %>">
|
|
<div class="form-group">
|
|
<label for="discordClientID">ID Client :</label>
|
|
<input type="text" id="discordClientID" name="discord[clientID]" class="form-control" value="<%= setup.discord?.clientID %>">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="discordClientSecret">Secret Client :</label>
|
|
<input type="password" id="discordClientSecret" name="discord[clientSecret]" class="form-control" value="<%= setup.discord?.clientSecret %>">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="discordAuthorizedIDs">IDs Autorisés :</label>
|
|
<input type="text" id="discordAuthorizedIDs" name="discord[authorizedIDs]" class="form-control" value="<%= setup.discord?.authorizedIDs %>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Tab -->
|
|
<div class="tab-content" data-tab-content="services">
|
|
<!-- Services Configuration -->
|
|
<div class="settings-card">
|
|
<div class="settings-card-header">
|
|
<i class="fas fa-broom text-xl"></i>
|
|
<h2 class="settings-card-title">Service de nettoyage des fichiers</h2>
|
|
</div>
|
|
<div class="form-group flex items-center justify-between">
|
|
<div>
|
|
<label>Service de nettoyage :</label>
|
|
<p class="text-sm text-gray-500">Nettoie automatiquement les fichiers temporaires</p>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox"
|
|
name="services[fileCleanup][enabled]"
|
|
<%= setup.services?.fileCleanup?.enabled === 'on' ? 'checked' : '' %>
|
|
onchange="toggleSection('fileCleanupConfig', this)">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div id="fileCleanupConfig" class="nested-settings" style="display: <%= setup.services?.fileCleanup?.enabled === 'on' ? 'block' : 'none' %>">
|
|
<div class="form-group">
|
|
<label>Planning (Cron) :</label>
|
|
<input type="text"
|
|
name="services[fileCleanup][schedule]"
|
|
class="form-control"
|
|
value="<%= setup.services?.fileCleanup?.schedule || '0 * * * *' %>"
|
|
placeholder="0 * * * *">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Manager -->
|
|
<div class="settings-card">
|
|
<div class="settings-card-header">
|
|
<i class="fas fa-chart-line text-xl"></i>
|
|
<h2 class="settings-card-title">Gestionnaire de rapports</h2>
|
|
</div>
|
|
<div class="form-group flex items-center justify-between">
|
|
<div>
|
|
<label>Service de rapports :</label>
|
|
<p class="text-sm text-gray-500">Génère des rapports périodiques</p>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox"
|
|
name="services[reportManager][enabled]"
|
|
<%= setup.services?.reportManager?.enabled === 'on' ? 'checked' : '' %>
|
|
onchange="toggleSection('reportManagerConfig', this)">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div id="reportManagerConfig" class="nested-settings" style="display: <%= setup.services?.reportManager?.enabled === 'on' ? 'block' : 'none' %>">
|
|
<div class="form-group">
|
|
<label>URL Endpoint :</label>
|
|
<input type="text"
|
|
name="services[reportManager][endpoint]"
|
|
class="form-control"
|
|
value="<%= setup.services?.reportManager?.endpoint %>">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Planning (Cron) :</label>
|
|
<input type="text"
|
|
name="services[reportManager][schedule]"
|
|
class="form-control"
|
|
value="<%= setup.services?.reportManager?.schedule || '0 0 * * *' %>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Tab -->
|
|
<div class="tab-content" data-tab-content="security">
|
|
<div class="settings-card">
|
|
<div class="settings-card-header">
|
|
<i class="fas fa-shield-alt text-xl"></i>
|
|
<h2 class="settings-card-title">IPs Autorisées</h2>
|
|
</div>
|
|
<div class="form-group">
|
|
<div id="ipList" class="space-y-2">
|
|
<% if (setup.allowedIps?.length > 0) { %>
|
|
<% setup.allowedIps.forEach(ip => { %>
|
|
<div class="ip-entry flex items-center gap-2">
|
|
<input type="text" name="allowedIps[]" class="form-control flex-1" value="<%= ip %>">
|
|
<button type="button" class="btn btn-icon" onclick="removeIp(this)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<% }) %>
|
|
<% } else { %>
|
|
<div class="ip-entry flex items-center gap-2">
|
|
<input type="text" name="allowedIps[]" class="form-control flex-1" placeholder="IPv4/IPv6 ou CIDR">
|
|
<button type="button" class="btn btn-icon" onclick="removeIp(this)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary w-full mt-4" onclick="addIp()">
|
|
<i class="fas fa-plus mr-2"></i>Ajouter une IP
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs Tab -->
|
|
<div class="tab-content" data-tab-content="logs">
|
|
<div class="settings-card">
|
|
<div class="settings-card-header">
|
|
<i class="fas fa-list text-xl"></i>
|
|
<h2 class="settings-card-title">Configuration des Logs</h2>
|
|
</div>
|
|
<div class="form-group flex items-center justify-between">
|
|
<label for="logsEnabled">Activer les Logs :</label>
|
|
<label class="switch">
|
|
<input type="checkbox"
|
|
id="logsEnabled"
|
|
name="logs[enabled]"
|
|
<%= setup.logs?.enabled === 'on' ? 'checked' : '' %>
|
|
onchange="toggleSection('logsConfig', this)">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div id="logsConfig" class="nested-settings" style="display: <%= setup.logs?.enabled === 'on' ? 'block' : 'none' %>">
|
|
<div class="form-group">
|
|
<label>Niveaux de Logs :</label>
|
|
<div class="flex flex-wrap gap-2 mt-2">
|
|
<% ['Debug', 'Info', 'Warn', 'Error'].forEach(level => { %>
|
|
<button type="button"
|
|
onclick="toggleLogLevel(this)"
|
|
class="log-level-btn <%= setup.logs?.levels?.includes(level.toLowerCase()) ? 'active' : '' %>"
|
|
data-level="<%= level.toLowerCase() %>">
|
|
<%= level %>
|
|
<input type="checkbox"
|
|
name="logs[levels][]"
|
|
value="<%= level.toLowerCase() %>"
|
|
class="hidden"
|
|
<%= setup.logs?.levels?.includes(level.toLowerCase()) ? 'checked' : '' %>>
|
|
</button>
|
|
<% }) %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chemins exclus -->
|
|
<div class="form-group mt-4">
|
|
<label>Chemins à Exclure :</label>
|
|
<div class="flex gap-2 mt-2">
|
|
<div class="relative flex-1">
|
|
<input type="text"
|
|
id="excludePathInput"
|
|
class="form-control"
|
|
placeholder="/api/, /auth/, /public/, etc">
|
|
<button type="button"
|
|
onclick="addPath('exclude')"
|
|
class="absolute right-2 top-1/2 transform -translate-y-1/2">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<button type="button"
|
|
onclick="showCommonPaths('exclude')"
|
|
class="btn btn-secondary">
|
|
<i class="fas fa-bars"></i>
|
|
<span>Communs</span>
|
|
</button>
|
|
</div>
|
|
<div id="excludePathsList" class="path-list mt-2">
|
|
<% if (setup.logs?.excludePaths?.length > 0) { %>
|
|
<% setup.logs.excludePaths.forEach(path => { %>
|
|
<div class="path-entry">
|
|
<span><%= path %></span>
|
|
<button type="button" onclick="removePath(this)">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
<input type="hidden" name="logs[excludePaths][]" value="<%= path %>">
|
|
</div>
|
|
<% }) %>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chemins inclus -->
|
|
<div class="form-group mt-4">
|
|
<label>Chemins à Inclure Uniquement :</label>
|
|
<div class="flex gap-2 mt-2">
|
|
<div class="relative flex-1">
|
|
<input type="text"
|
|
id="includePathInput"
|
|
class="form-control"
|
|
placeholder="/api/, /auth/, /public/, etc">
|
|
<button type="button"
|
|
onclick="addPath('include')"
|
|
class="absolute right-2 top-1/2 transform -translate-y-1/2">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<button type="button"
|
|
onclick="showCommonPaths('include')"
|
|
class="btn btn-secondary">
|
|
<i class="fas fa-bars"></i>
|
|
<span>Communs</span>
|
|
</button>
|
|
</div>
|
|
<div id="includePathsList" class="path-list mt-2">
|
|
<% if (setup.logs?.includeOnly?.length > 0) { %>
|
|
<% setup.logs.includeOnly.forEach(path => { %>
|
|
<div class="path-entry">
|
|
<span><%= path %></span>
|
|
<button type="button" onclick="removePath(this)">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
<input type="hidden" name="logs[includeOnly][]" value="<%= path %>">
|
|
</div>
|
|
<% }) %>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Fixed Bottom Bar -->
|
|
<div class="fixed-bottom-bar">
|
|
<div class="container mx-auto px-4 flex justify-between items-center">
|
|
<a href="/dpanel/dashboard/admin/" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left mr-2"></i>
|
|
Retour
|
|
</a>
|
|
<button type="submit" form="setupForm" class="btn btn-primary">
|
|
<i class="fas fa-save mr-2"></i>
|
|
Enregistrer les modifications
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme Switcher -->
|
|
<button id="themeSwitcher" class="theme-switcher">
|
|
<i class="fas fa-sun"></i>
|
|
</button>
|
|
|
|
<script src="/public/js/paramadminsettingsetup.script.js"></script>
|
|
</body>
|
|
</html> |