feat: ordre naturel des sections Configurations et avatar utilisateur #113
This commit is contained in:
+315
-278
@@ -1581,28 +1581,131 @@
|
||||
</button>
|
||||
</div>
|
||||
<ul class="help-nav-list">
|
||||
<li><a href="#cfg-profile" class="help-nav-link" data-i18n="settings.profile"></a></li>
|
||||
<li><a href="#cfg-security" class="help-nav-link" data-i18n="settings.security"></a></li>
|
||||
<li><a href="#cfg-themes" class="help-nav-link" data-i18n="settings.themes"></a></li>
|
||||
<li><a href="#cfg-search" class="help-nav-link" data-i18n="help.nav_search"></a></li>
|
||||
<li><a href="#cfg-recent" class="help-nav-link" data-i18n="config.section_recent"></a></li>
|
||||
<li><a href="#cfg-backend-settings" class="help-nav-link" data-i18n="config.section_backend"></a></li>
|
||||
<li><a href="#cfg-tags" class="help-nav-link" data-i18n="config.section_tags"></a></li>
|
||||
<li><a href="#cfg-sync" class="help-nav-link" data-i18n="settings.sync"></a></li>
|
||||
<li><a href="#cfg-hidden-files" class="help-nav-link" data-i18n="config.section_hidden"></a></li>
|
||||
<li><a href="#cfg-sync" class="help-nav-link" data-i18n="settings.sync"></a></li>
|
||||
<li><a href="#cfg-backend-settings" class="help-nav-link" data-i18n="config.section_backend"></a></li>
|
||||
<li><a href="#cfg-diags" class="help-nav-link" data-i18n="settings.diagnostics"></a></li>
|
||||
<li><a href="#cfg-ai" class="help-nav-link" data-i18n="settings.ai"></a></li>
|
||||
<li><a href="#cfg-sources" class="help-nav-link" data-i18n="config.section_sources">Sources connectées</a></li>
|
||||
<li><a href="#cfg-themes" class="help-nav-link" data-i18n="settings.themes"></a></li>
|
||||
<li><a href="#cfg-profile" class="help-nav-link" data-i18n="settings.profile"></a></li>
|
||||
<li><a href="#cfg-security" class="help-nav-link" data-i18n="settings.security"></a></li>
|
||||
<li><a href="#cfg-tokens" class="help-nav-link" data-i18n="config.nav_tokens">🔑 Clés API & MCP</a></li>
|
||||
<li><a href="#cfg-push" class="help-nav-link" data-i18n="config.section_push">Notifications push</a></li>
|
||||
<li><a href="#cfg-plugins" class="help-nav-link" data-i18n="config.section_plugins">🧩 Plugins</a></li>
|
||||
<li><a href="#cfg-about" class="help-nav-link" data-i18n="settings.about"></a></li>
|
||||
<li><a href="#cfg-webhooks" class="help-nav-link" data-i18n="config.section_webhooks"></a></li>
|
||||
<li><a href="#cfg-partages-publics" class="help-nav-link" data-i18n="config.section_shares"></a></li>
|
||||
<li><a href="#cfg-plugins" class="help-nav-link" data-i18n="config.section_plugins">🧩 Plugins</a></li>
|
||||
<li><a href="#cfg-about" class="help-nav-link" data-i18n="settings.about"></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="help-content" id="config-scroll">
|
||||
<div class="config-content">
|
||||
<!-- Profil -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-profile"
|
||||
>
|
||||
<h2 data-i18n="config.profile">👤 Profil utilisateur</h2>
|
||||
<p class="config-description" data-i18n="config.profile_desc">
|
||||
Préférences personnelles pour personnaliser
|
||||
l'expérience ObsiGate.
|
||||
</p>
|
||||
<div class="profile-form" id="profile-form">
|
||||
<div class="profile-field profile-avatar-field" id="profile-avatar-field">
|
||||
<span class="profile-avatar-label" id="profile-avatar-label" data-i18n="config.avatar_label">Photo de profil</span>
|
||||
<div class="profile-avatar-row">
|
||||
<div
|
||||
class="profile-avatar-preview"
|
||||
id="profile-avatar-preview"
|
||||
data-i18n-attr="title:config.avatar_choose;aria-label:config.avatar_choose"
|
||||
title="Choisir une image"
|
||||
aria-label="Choisir une image"
|
||||
>
|
||||
<img id="profile-avatar-img" alt="" hidden />
|
||||
<span class="profile-avatar-initials" id="profile-avatar-initials" aria-hidden="true"></span>
|
||||
<button
|
||||
type="button"
|
||||
class="profile-avatar-overlay"
|
||||
id="profile-avatar-overlay"
|
||||
data-i18n-attr="title:config.avatar_choose;aria-label:config.avatar_choose"
|
||||
title="Choisir une image"
|
||||
aria-label="Choisir une image"
|
||||
>
|
||||
<i data-lucide="camera" style="width: 18px; height: 18px"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="profile-avatar-actions">
|
||||
<button type="button" class="config-btn-secondary" id="profile-avatar-choose" data-i18n="config.avatar_choose">Choisir une image</button>
|
||||
<button type="button" class="config-btn-secondary profile-avatar-remove-btn" id="profile-avatar-remove" data-i18n="config.avatar_remove" hidden>Supprimer la photo</button>
|
||||
<input
|
||||
type="file"
|
||||
id="profile-avatar-input"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
hidden
|
||||
/>
|
||||
<span class="profile-hint" data-i18n="config.avatar_hint">PNG, JPG ou WEBP — image carrée recadrée et réduite à 256 px.</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="profile-avatar-error hidden" id="profile-avatar-error" role="alert"></p>
|
||||
</div>
|
||||
<div class="profile-field">
|
||||
<label for="profile-lang" data-i18n="config.lang_label">Langue préférée</label>
|
||||
<select id="profile-lang" class="config-select">
|
||||
<option value="fr">Francais</option>
|
||||
<option value="en">English</option>
|
||||
<option value="es">Espanol</option>
|
||||
<option value="de">Deutsch</option>
|
||||
</select>
|
||||
<span class="profile-hint" data-i18n="config.lang_hint">Utilisée par l'autocomplétion et le ghost text.</span>
|
||||
</div>
|
||||
<div class="profile-field">
|
||||
<label for="profile-name" data-i18n="config.display_name">Nom d'affichage</label>
|
||||
<input type="text" id="profile-name" class="config-input" placeholder="Votre nom" maxlength="60">
|
||||
</div>
|
||||
<button class="config-save-btn" id="profile-save" data-i18n="config.save">Enregistrer</button>
|
||||
<button class="config-save-btn" id="profile-logout" style="background:var(--danger-bg);color:var(--danger);border-color:var(--danger);margin-left:8px" data-i18n="config.logout" onclick="if(window.handleLogout)window.handleLogout();else{doLogoutFallback()}">Déconnexion</button>
|
||||
<span class="profile-saved" id="profile-saved" style="display:none" data-i18n="config.saved">✓ Sauvegardé</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sécurité du compte (MFA) -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-security"
|
||||
>
|
||||
<h2 data-i18n="settings.security">🔒 Sécurité du compte</h2>
|
||||
<p class="config-description" data-i18n="settings.security_desc">
|
||||
Activez l'authentification à deux facteurs (2FA) pour renforcer la sécurité de votre compte.
|
||||
</p>
|
||||
<div id="mfa-settings">
|
||||
<div id="mfa-status" class="mfa-status-section">
|
||||
<div class="mfa-status-row">
|
||||
<span class="mfa-status-label" data-i18n="mfa.status_label">Authentification 2FA</span>
|
||||
<span id="mfa-status-badge" class="mfa-badge mfa-badge-off" data-i18n="mfa.disabled">Désactivée</span>
|
||||
</div>
|
||||
<div id="mfa-setup-area"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Themes -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-themes"
|
||||
>
|
||||
<h2 data-i18n="auto.c14b5603">🎨 Thèmes</h2>
|
||||
<p class="config-description" data-i18n="auto.caac40b9">
|
||||
Choisissez un thème visuel. Chaque thème
|
||||
offre un mode sombre, clair, contraste élevé et sépia.
|
||||
</p>
|
||||
<div class="theme-grid" id="theme-grid">
|
||||
<div class="config-diag-loading" data-i18n="common.loading">Chargement...</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Performance Settings - Frontend -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
@@ -1748,6 +1851,182 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tag Filtering (existing) -->
|
||||
<section class="config-section help-section" id="cfg-tags">
|
||||
<h2 data-i18n="config.tag_filtering_label">Filtrage de tags</h2>
|
||||
<p class="config-description" data-i18n="auto.e0b8a606">
|
||||
Définissez les patterns de tags à masquer
|
||||
dans la sidebar. Vous pouvez utiliser des
|
||||
wildcards pour cibler les tags de template.
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="config-filters-list"
|
||||
id="config-filters-list"
|
||||
></div>
|
||||
|
||||
<div class="config-add-pattern">
|
||||
<input
|
||||
type="text"
|
||||
id="config-pattern-input"
|
||||
placeholder="Ex: #<% ... %> ou #{{ ... }}"
|
||||
class="config-input"
|
||||
/>
|
||||
<button id="config-add-btn"
|
||||
class="config-btn-add" data-i18n="config.add_webhook">
|
||||
Ajouter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="config-regex-preview"
|
||||
id="config-regex-preview"
|
||||
style="display: none"
|
||||
>
|
||||
<small
|
||||
>Regex :
|
||||
<code id="config-regex-code"></code
|
||||
></small>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hidden Files/Folders Configuration -->
|
||||
<section id="cfg-hidden-files" class="config-section help-section">
|
||||
<h2 data-i18n="auto.f8ba6127">🗂️ Fichiers cachés</h2>
|
||||
<p class="config-description">
|
||||
Contrôlez l'affichage des fichiers/dossiers
|
||||
cachés (commençant par <code>.</code>) par
|
||||
vault.
|
||||
</p>
|
||||
<p
|
||||
class="config-hint"
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
padding: 8px;
|
||||
background: var(--background-secondary);
|
||||
border-radius: 4px;
|
||||
"
|
||||
>
|
||||
i️ <strong data-i18n="config.note">Note :</strong> Tous les fichiers
|
||||
sont toujours indexés et cherchables. Ce
|
||||
paramètre contrôle uniquement leur
|
||||
visibilité dans l'interface.
|
||||
</p>
|
||||
|
||||
<div id="hidden-files-vault-list">
|
||||
<!-- Vault-specific settings will be injected here -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="config-actions-row"
|
||||
style="margin-top: 16px"
|
||||
>
|
||||
<button
|
||||
class="config-btn-save"
|
||||
id="cfg-save-hidden-files"
|
||||
>
|
||||
💾 Sauvegarder
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Watcher / Synchronisation -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-sync"
|
||||
>
|
||||
<h2 data-i18n="config.section_watcher">Synchronisation automatique</h2>
|
||||
<p class="config-description" data-i18n="auto.d33601dc">
|
||||
Surveillance des fichiers en temps réel via
|
||||
watchdog. Les modifications sont détectées
|
||||
automatiquement et l'index est mis à jour
|
||||
sans redémarrage.
|
||||
</p>
|
||||
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-watcher-enabled"
|
||||
>Activer la surveillance</label
|
||||
>
|
||||
<label class="config-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="cfg-watcher-enabled"
|
||||
checked
|
||||
/>
|
||||
<span
|
||||
class="config-toggle-slider"
|
||||
></span>
|
||||
</label>
|
||||
<span class="config-hint"
|
||||
>Activer/désactiver la surveillance
|
||||
automatique des fichiers</span
|
||||
>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-watcher-polling"
|
||||
>Mode polling (fallback)</label
|
||||
>
|
||||
<label class="config-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="cfg-watcher-polling"
|
||||
/>
|
||||
<span
|
||||
class="config-toggle-slider"
|
||||
></span>
|
||||
</label>
|
||||
<span class="config-hint"
|
||||
>Forcer le mode polling au lieu de
|
||||
inotify natif (utile si le mode natif ne
|
||||
fonctionne pas)</span
|
||||
>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-watcher-interval"
|
||||
>Intervalle polling (s)</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="cfg-watcher-interval"
|
||||
class="config-input config-input--num"
|
||||
min="1"
|
||||
max="30"
|
||||
step="1"
|
||||
value="5"
|
||||
/>
|
||||
<span class="config-hint"
|
||||
>Intervalle de scrutation en mode
|
||||
polling (1-30 secondes)</span
|
||||
>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-watcher-debounce"
|
||||
>Debounce (s)</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="cfg-watcher-debounce"
|
||||
class="config-input config-input--num"
|
||||
min="0.5"
|
||||
max="10"
|
||||
step="0.5"
|
||||
value="2"
|
||||
/>
|
||||
<span class="config-hint"
|
||||
>Délai avant traitement des changements
|
||||
groupés (0.5-10 secondes)</span
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Performance Settings - Backend -->
|
||||
<section id="cfg-backend-settings" class="config-section help-section">
|
||||
<h2 data-i18n="config.section_backend">
|
||||
@@ -1884,182 +2163,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tag Filtering (existing) -->
|
||||
<section class="config-section help-section">
|
||||
<h2 id="cfg-tags" data-i18n="config.tag_filtering_label">Filtrage de tags</h2>
|
||||
<p class="config-description" data-i18n="auto.e0b8a606">
|
||||
Définissez les patterns de tags à masquer
|
||||
dans la sidebar. Vous pouvez utiliser des
|
||||
wildcards pour cibler les tags de template.
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="config-filters-list"
|
||||
id="config-filters-list"
|
||||
></div>
|
||||
|
||||
<div class="config-add-pattern">
|
||||
<input
|
||||
type="text"
|
||||
id="config-pattern-input"
|
||||
placeholder="Ex: #<% ... %> ou #{{ ... }}"
|
||||
class="config-input"
|
||||
/>
|
||||
<button id="config-add-btn"
|
||||
class="config-btn-add" data-i18n="config.add_webhook">
|
||||
Ajouter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="config-regex-preview"
|
||||
id="config-regex-preview"
|
||||
style="display: none"
|
||||
>
|
||||
<small
|
||||
>Regex :
|
||||
<code id="config-regex-code"></code
|
||||
></small>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Watcher / Synchronisation -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-sync"
|
||||
>
|
||||
<h2 data-i18n="config.section_watcher">Synchronisation automatique</h2>
|
||||
<p class="config-description" data-i18n="auto.d33601dc">
|
||||
Surveillance des fichiers en temps réel via
|
||||
watchdog. Les modifications sont détectées
|
||||
automatiquement et l'index est mis à jour
|
||||
sans redémarrage.
|
||||
</p>
|
||||
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-watcher-enabled"
|
||||
>Activer la surveillance</label
|
||||
>
|
||||
<label class="config-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="cfg-watcher-enabled"
|
||||
checked
|
||||
/>
|
||||
<span
|
||||
class="config-toggle-slider"
|
||||
></span>
|
||||
</label>
|
||||
<span class="config-hint"
|
||||
>Activer/désactiver la surveillance
|
||||
automatique des fichiers</span
|
||||
>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-watcher-polling"
|
||||
>Mode polling (fallback)</label
|
||||
>
|
||||
<label class="config-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="cfg-watcher-polling"
|
||||
/>
|
||||
<span
|
||||
class="config-toggle-slider"
|
||||
></span>
|
||||
</label>
|
||||
<span class="config-hint"
|
||||
>Forcer le mode polling au lieu de
|
||||
inotify natif (utile si le mode natif ne
|
||||
fonctionne pas)</span
|
||||
>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-watcher-interval"
|
||||
>Intervalle polling (s)</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="cfg-watcher-interval"
|
||||
class="config-input config-input--num"
|
||||
min="1"
|
||||
max="30"
|
||||
step="1"
|
||||
value="5"
|
||||
/>
|
||||
<span class="config-hint"
|
||||
>Intervalle de scrutation en mode
|
||||
polling (1-30 secondes)</span
|
||||
>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-watcher-debounce"
|
||||
>Debounce (s)</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="cfg-watcher-debounce"
|
||||
class="config-input config-input--num"
|
||||
min="0.5"
|
||||
max="10"
|
||||
step="0.5"
|
||||
value="2"
|
||||
/>
|
||||
<span class="config-hint"
|
||||
>Délai avant traitement des changements
|
||||
groupés (0.5-10 secondes)</span
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hidden Files/Folders Configuration -->
|
||||
<section id="cfg-hidden-files" class="config-section help-section">
|
||||
<h2 data-i18n="auto.f8ba6127">🗂️ Fichiers cachés</h2>
|
||||
<p class="config-description">
|
||||
Contrôlez l'affichage des fichiers/dossiers
|
||||
cachés (commençant par <code>.</code>) par
|
||||
vault.
|
||||
</p>
|
||||
<p
|
||||
class="config-hint"
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
padding: 8px;
|
||||
background: var(--background-secondary);
|
||||
border-radius: 4px;
|
||||
"
|
||||
>
|
||||
i️ <strong data-i18n="config.note">Note :</strong> Tous les fichiers
|
||||
sont toujours indexés et cherchables. Ce
|
||||
paramètre contrôle uniquement leur
|
||||
visibilité dans l'interface.
|
||||
</p>
|
||||
|
||||
<div id="hidden-files-vault-list">
|
||||
<!-- Vault-specific settings will be injected here -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="config-actions-row"
|
||||
style="margin-top: 16px"
|
||||
>
|
||||
<button
|
||||
class="config-btn-save"
|
||||
id="cfg-save-hidden-files"
|
||||
>
|
||||
💾 Sauvegarder
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Diagnostics -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
@@ -2316,72 +2419,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Themes -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-themes"
|
||||
>
|
||||
<h2 data-i18n="auto.c14b5603">🎨 Thèmes</h2>
|
||||
<p class="config-description" data-i18n="auto.caac40b9">
|
||||
Choisissez un thème visuel. Chaque thème
|
||||
offre un mode sombre, clair, contraste élevé et sépia.
|
||||
</p>
|
||||
<div class="theme-grid" id="theme-grid">
|
||||
<div class="config-diag-loading" data-i18n="common.loading">Chargement...</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Profil -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-profile"
|
||||
>
|
||||
<h2 data-i18n="config.profile">👤 Profil utilisateur</h2>
|
||||
<p class="config-description" data-i18n="config.profile_desc">
|
||||
Préférences personnelles pour personnaliser
|
||||
l'expérience ObsiGate.
|
||||
</p>
|
||||
<div class="profile-form" id="profile-form">
|
||||
<div class="profile-field">
|
||||
<label for="profile-lang" data-i18n="config.lang_label">Langue préférée</label>
|
||||
<select id="profile-lang" class="config-select">
|
||||
<option value="fr">Francais</option>
|
||||
<option value="en">English</option>
|
||||
<option value="es">Espanol</option>
|
||||
<option value="de">Deutsch</option>
|
||||
</select>
|
||||
<span class="profile-hint" data-i18n="config.lang_hint">Utilisée par l'autocomplétion et le ghost text.</span>
|
||||
</div>
|
||||
<div class="profile-field">
|
||||
<label for="profile-name" data-i18n="config.display_name">Nom d'affichage</label>
|
||||
<input type="text" id="profile-name" class="config-input" placeholder="Votre nom" maxlength="60">
|
||||
</div>
|
||||
<button class="config-save-btn" id="profile-save" data-i18n="config.save">Enregistrer</button>
|
||||
<button class="config-save-btn" id="profile-logout" style="background:var(--danger-bg);color:var(--danger);border-color:var(--danger);margin-left:8px" data-i18n="config.logout" onclick="if(window.handleLogout)window.handleLogout();else{doLogoutFallback()}">Déconnexion</button>
|
||||
<span class="profile-saved" id="profile-saved" style="display:none" data-i18n="config.saved">✓ Sauvegardé</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sécurité du compte (MFA) -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-security"
|
||||
>
|
||||
<h2 data-i18n="settings.security">🔒 Sécurité du compte</h2>
|
||||
<p class="config-description" data-i18n="settings.security_desc">
|
||||
Activez l'authentification à deux facteurs (2FA) pour renforcer la sécurité de votre compte.
|
||||
</p>
|
||||
<div id="mfa-settings">
|
||||
<div id="mfa-status" class="mfa-status-section">
|
||||
<div class="mfa-status-row">
|
||||
<span class="mfa-status-label" data-i18n="mfa.status_label">Authentification 2FA</span>
|
||||
<span id="mfa-status-badge" class="mfa-badge mfa-badge-off" data-i18n="mfa.disabled">Désactivée</span>
|
||||
</div>
|
||||
<div id="mfa-setup-area"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Clés API / MCP (#107) -->
|
||||
<section id="cfg-tokens" class="config-section help-section">
|
||||
<h2 data-i18n="config.section_tokens">🔑 Clés API & MCP</h2>
|
||||
@@ -2440,34 +2477,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Plugins -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-plugins"
|
||||
>
|
||||
<h2 data-i18n="config.section_plugins">🧩 Plugins</h2>
|
||||
<p class="config-description" data-i18n="plugins.description">
|
||||
Extend ObsiGate with custom renderers, search filters, and editor actions.
|
||||
</p>
|
||||
<div id="plugins-settings-container"></div>
|
||||
</section>
|
||||
|
||||
<!-- À propos -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-about"
|
||||
>
|
||||
<h2 data-i18n="auto.a3319169">📦 À propos</h2>
|
||||
<div
|
||||
id="config-about"
|
||||
class="config-diagnostics"
|
||||
>
|
||||
<div class="config-diag-loading" data-i18n="common.loading">
|
||||
Chargement...
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Webhooks -->
|
||||
<section id="cfg-webhooks" class="config-section help-section">
|
||||
<h2>🔔 Webhooks</h2>
|
||||
@@ -2499,13 +2508,41 @@
|
||||
</section>
|
||||
|
||||
<!-- Partages publics -->
|
||||
<section class="config-section help-section">
|
||||
<section class="config-section help-section" id="cfg-partages-publics">
|
||||
<h2 id="cfg-partages-publics">📤 Partages publics</h2>
|
||||
<p class="config-description">
|
||||
Liens de partage publics pour des documents
|
||||
(lecture seule, sans authentification).
|
||||
</p>
|
||||
<div id="shares-list"></div>
|
||||
</section>
|
||||
|
||||
<!-- Plugins -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-plugins"
|
||||
>
|
||||
<h2 data-i18n="config.section_plugins">🧩 Plugins</h2>
|
||||
<p class="config-description" data-i18n="plugins.description">
|
||||
Extend ObsiGate with custom renderers, search filters, and editor actions.
|
||||
</p>
|
||||
<div id="plugins-settings-container"></div>
|
||||
</section>
|
||||
|
||||
<!-- À propos -->
|
||||
<section
|
||||
class="config-section help-section"
|
||||
id="cfg-about"
|
||||
>
|
||||
<h2 data-i18n="auto.a3319169">📦 À propos</h2>
|
||||
<div
|
||||
id="config-about"
|
||||
class="config-diagnostics"
|
||||
>
|
||||
<div class="config-diag-loading" data-i18n="common.loading">
|
||||
Chargement...
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+25
-1
@@ -125,6 +125,18 @@ const AuthManager = {
|
||||
return raw ? JSON.parse(raw) : null;
|
||||
},
|
||||
|
||||
/** Merge fields into the cached user object (#113 — profile avatar). */
|
||||
updateCachedUser(fields) {
|
||||
const next = { ...(this.getUser() || {}), ...fields };
|
||||
sessionStorage.setItem(this.USER_KEY, JSON.stringify(next));
|
||||
return next;
|
||||
},
|
||||
|
||||
/** Whether authentication is enabled on this instance (#113). */
|
||||
isAuthEnabled() {
|
||||
return !!this._authEnabled;
|
||||
},
|
||||
|
||||
isTokenExpired() {
|
||||
const expiry = sessionStorage.getItem(this.TOKEN_EXPIRY_KEY);
|
||||
if (!expiry) return true;
|
||||
@@ -354,7 +366,19 @@ const AuthManager = {
|
||||
const roleEl = document.getElementById("sidebar-user-role");
|
||||
if (roleEl) roleEl.textContent = user.role === "admin" ? t("sidebar.user_role_admin") : t("sidebar.user_role_user");
|
||||
const avatarEl = document.getElementById("sidebar-user-avatar");
|
||||
if (avatarEl) avatarEl.textContent = userInitials(name);
|
||||
if (avatarEl) {
|
||||
// #113: custom avatar image when set, initials as the fallback.
|
||||
if (user.avatar) {
|
||||
avatarEl.textContent = "";
|
||||
const img = document.createElement("img");
|
||||
img.src = user.avatar;
|
||||
img.alt = "";
|
||||
img.className = "sidebar-user-avatar-img";
|
||||
avatarEl.appendChild(img);
|
||||
} else {
|
||||
avatarEl.textContent = userInitials(name);
|
||||
}
|
||||
}
|
||||
section.hidden = false;
|
||||
safeCreateIcons();
|
||||
|
||||
|
||||
@@ -2356,6 +2356,107 @@ function initAboutModal() {
|
||||
}
|
||||
|
||||
// ── Profile ──────────────────────────────────────────────────────────
|
||||
// #113 — profile picture: pick/import an image, center-crop it to a 256 px
|
||||
// square JPEG, persist it on the account (PATCH /api/auth/me) and show it in
|
||||
// the sidebar circle (#sidebar-user-avatar). Initials remain the fallback.
|
||||
const _AVATAR_MAX_FILE_BYTES = 8 * 1024 * 1024;
|
||||
const _AVATAR_TYPES = ["image/png", "image/jpeg", "image/webp"];
|
||||
const _AVATAR_SIZE = 256;
|
||||
|
||||
function _profileInitials(name) {
|
||||
var parts = String(name || "").trim().split(/\s+/).filter(Boolean);
|
||||
if (!parts.length) return "?";
|
||||
var first = parts[0][0] || "";
|
||||
var last = parts.length > 1 ? parts[parts.length - 1][0] : "";
|
||||
return (first + last).toUpperCase() || "?";
|
||||
}
|
||||
|
||||
/** Center-crop the picked image to a square and export it as a JPEG data-URL. */
|
||||
function _resizeAvatarFile(file) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var url = URL.createObjectURL(file);
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
URL.revokeObjectURL(url);
|
||||
try {
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.width = _AVATAR_SIZE;
|
||||
canvas.height = _AVATAR_SIZE;
|
||||
var ctx = canvas.getContext("2d");
|
||||
if (!ctx) throw new Error("canvas");
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fillRect(0, 0, _AVATAR_SIZE, _AVATAR_SIZE);
|
||||
var side = Math.min(img.naturalWidth, img.naturalHeight);
|
||||
var sx = (img.naturalWidth - side) / 2;
|
||||
var sy = (img.naturalHeight - side) / 2;
|
||||
ctx.drawImage(img, sx, sy, side, side, 0, 0, _AVATAR_SIZE, _AVATAR_SIZE);
|
||||
resolve(canvas.toDataURL("image/jpeg", 0.85));
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
};
|
||||
img.onerror = function () {
|
||||
URL.revokeObjectURL(url);
|
||||
reject(new Error("image decode failed"));
|
||||
};
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
|
||||
function _profileAvatarError(key) {
|
||||
var err = document.getElementById("profile-avatar-error");
|
||||
if (!err) return;
|
||||
if (!key) {
|
||||
err.textContent = "";
|
||||
err.classList.add("hidden");
|
||||
return;
|
||||
}
|
||||
err.textContent = t(key);
|
||||
err.classList.remove("hidden");
|
||||
}
|
||||
|
||||
/** Paint the settings preview (image or initials) for the given avatar. */
|
||||
function _renderProfileAvatar(dataUrl) {
|
||||
var img = document.getElementById("profile-avatar-img");
|
||||
var initialsEl = document.getElementById("profile-avatar-initials");
|
||||
var removeBtn = document.getElementById("profile-avatar-remove");
|
||||
if (!img || !initialsEl) return;
|
||||
if (dataUrl) {
|
||||
img.src = dataUrl;
|
||||
img.hidden = false;
|
||||
initialsEl.textContent = "";
|
||||
if (removeBtn) removeBtn.hidden = false;
|
||||
} else {
|
||||
img.removeAttribute("src");
|
||||
img.hidden = true;
|
||||
var user = AuthManager.getUser() || {};
|
||||
var name = localStorage.getItem("obsigate-name") || user.display_name || user.username || "";
|
||||
initialsEl.textContent = _profileInitials(name);
|
||||
if (removeBtn) removeBtn.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
/** PATCH /api/auth/me with an avatar value (data-URL, or "" to clear). */
|
||||
async function _patchProfileAvatar(value) {
|
||||
var headers = { "Content-Type": "application/json" };
|
||||
var authHeaders = AuthManager.getAuthHeaders ? AuthManager.getAuthHeaders() : null;
|
||||
if (authHeaders) headers = Object.assign(headers, authHeaders);
|
||||
var res = await fetch("/api/auth/me", {
|
||||
method: "PATCH",
|
||||
headers: headers,
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ avatar: value }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
var detail = "";
|
||||
try {
|
||||
detail = (await res.json()).detail || "";
|
||||
} catch (e) { /* no json body */ }
|
||||
throw new Error(detail || "HTTP " + res.status);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function initProfile() {
|
||||
var langSel = document.getElementById('profile-lang');
|
||||
var nameInp = document.getElementById('profile-name');
|
||||
@@ -2393,4 +2494,92 @@ function initProfile() {
|
||||
});
|
||||
|
||||
// Logout button — handled inline in index.html (onclick)
|
||||
|
||||
// ── Avatar (#113) ────────────────────────────────────────────────
|
||||
var avatarField = document.getElementById('profile-avatar-field');
|
||||
var avatarInput = document.getElementById('profile-avatar-input');
|
||||
var chooseBtn = document.getElementById('profile-avatar-choose');
|
||||
var overlayBtn = document.getElementById('profile-avatar-overlay');
|
||||
var previewBox = document.getElementById('profile-avatar-preview');
|
||||
var removeBtn = document.getElementById('profile-avatar-remove');
|
||||
if (!avatarField || !avatarInput || !chooseBtn) return;
|
||||
|
||||
// The avatar only exists on a real account — hide it when auth is off.
|
||||
if (!AuthManager.isAuthEnabled || !AuthManager.isAuthEnabled()) {
|
||||
avatarField.hidden = true;
|
||||
return;
|
||||
}
|
||||
|
||||
_renderProfileAvatar((AuthManager.getUser() || {}).avatar || null);
|
||||
|
||||
// Refresh from the server so the preview survives a page reload.
|
||||
fetch('/api/auth/me', { credentials: 'include' })
|
||||
.then(function (res) { return res.ok ? res.json() : null; })
|
||||
.then(function (user) {
|
||||
if (!user) return;
|
||||
AuthManager.updateCachedUser(user);
|
||||
_renderProfileAvatar(user.avatar || null);
|
||||
})
|
||||
.catch(function () { /* non-bloquant */ });
|
||||
|
||||
function openPicker() {
|
||||
_profileAvatarError(null);
|
||||
avatarInput.click();
|
||||
}
|
||||
chooseBtn.addEventListener('click', openPicker);
|
||||
if (overlayBtn) overlayBtn.addEventListener('click', openPicker);
|
||||
if (previewBox) {
|
||||
previewBox.addEventListener('click', function (e) {
|
||||
if (e.target.closest('button')) return;
|
||||
openPicker();
|
||||
});
|
||||
}
|
||||
|
||||
avatarInput.addEventListener('change', async function () {
|
||||
var file = avatarInput.files && avatarInput.files[0];
|
||||
avatarInput.value = ""; // allow re-picking the same file
|
||||
if (!file) return;
|
||||
_profileAvatarError(null);
|
||||
if (_AVATAR_TYPES.indexOf(file.type) === -1) {
|
||||
_profileAvatarError('config.avatar_invalid_type');
|
||||
return;
|
||||
}
|
||||
if (file.size > _AVATAR_MAX_FILE_BYTES) {
|
||||
_profileAvatarError('config.avatar_too_large');
|
||||
return;
|
||||
}
|
||||
chooseBtn.disabled = true;
|
||||
try {
|
||||
var dataUrl = await _resizeAvatarFile(file);
|
||||
var user = await _patchProfileAvatar(dataUrl);
|
||||
AuthManager.updateCachedUser(user);
|
||||
_renderProfileAvatar(user.avatar || dataUrl);
|
||||
AuthManager.renderUserSection();
|
||||
showToast(t('config.avatar_updated'), 'success');
|
||||
} catch (err) {
|
||||
_profileAvatarError('config.avatar_upload_failed');
|
||||
console.error('Avatar upload failed:', err);
|
||||
} finally {
|
||||
chooseBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (removeBtn) {
|
||||
removeBtn.addEventListener('click', async function () {
|
||||
_profileAvatarError(null);
|
||||
removeBtn.disabled = true;
|
||||
try {
|
||||
var user = await _patchProfileAvatar("");
|
||||
AuthManager.updateCachedUser(user);
|
||||
_renderProfileAvatar(null);
|
||||
AuthManager.renderUserSection();
|
||||
showToast(t('config.avatar_removed'), 'success');
|
||||
} catch (err) {
|
||||
_profileAvatarError('config.avatar_upload_failed');
|
||||
console.error('Avatar removal failed:', err);
|
||||
} finally {
|
||||
removeBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -380,6 +380,15 @@
|
||||
"config.delete_key": "Delete",
|
||||
"config.delete_key_confirm": "Delete key",
|
||||
"config.key_deleted": "Key deleted:",
|
||||
"config.avatar_label": "Profile picture",
|
||||
"config.avatar_hint": "PNG, JPG or WEBP — square image cropped and resized to 256 px. Shown in the sidebar.",
|
||||
"config.avatar_choose": "Choose an image",
|
||||
"config.avatar_remove": "Remove picture",
|
||||
"config.avatar_updated": "Profile picture updated",
|
||||
"config.avatar_removed": "Profile picture removed",
|
||||
"config.avatar_too_large": "Image too large (8 MB max)",
|
||||
"config.avatar_invalid_type": "Unsupported format — use PNG, JPG or WEBP",
|
||||
"config.avatar_upload_failed": "Failed to save the profile picture",
|
||||
"config.backups": "Backups",
|
||||
"config.backups_desc": "Manage automatic file backups.",
|
||||
"config.client_config": "Client config",
|
||||
|
||||
@@ -380,6 +380,15 @@
|
||||
"config.delete_key": "Supprimer",
|
||||
"config.delete_key_confirm": "Supprimer la clé",
|
||||
"config.key_deleted": "Clé supprimée :",
|
||||
"config.avatar_label": "Photo de profil",
|
||||
"config.avatar_hint": "PNG, JPG ou WEBP — image carrée recadrée et réduite à 256 px. Apparaît dans la barre latérale.",
|
||||
"config.avatar_choose": "Choisir une image",
|
||||
"config.avatar_remove": "Supprimer la photo",
|
||||
"config.avatar_updated": "Photo de profil mise à jour",
|
||||
"config.avatar_removed": "Photo de profil supprimée",
|
||||
"config.avatar_too_large": "Image trop lourde (8 Mo maximum)",
|
||||
"config.avatar_invalid_type": "Format non pris en charge — utilisez PNG, JPG ou WEBP",
|
||||
"config.avatar_upload_failed": "Échec de l'enregistrement de la photo de profil",
|
||||
"config.backups": "Sauvegardes",
|
||||
"config.backups_desc": "Gérez les sauvegardes automatiques de vos fichiers.",
|
||||
"config.client_config": "Configuration client",
|
||||
|
||||
@@ -2616,6 +2616,60 @@ select {
|
||||
}
|
||||
.profile-hint { display: block; font-size: 0.65rem; color: var(--text-muted); margin-top: 4px; }
|
||||
.profile-saved { font-size: 0.7rem; color: var(--accent-green); margin-left: 10px; }
|
||||
/* Profile picture picker (#113) */
|
||||
.profile-avatar-field { margin-bottom: 18px; }
|
||||
.profile-avatar-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
|
||||
.profile-avatar-row { display: flex; align-items: center; gap: 16px; }
|
||||
.profile-avatar-preview {
|
||||
position: relative;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed));
|
||||
border: 2px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.profile-avatar-preview:hover,
|
||||
.profile-avatar-preview:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
|
||||
}
|
||||
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.profile-avatar-initials {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
}
|
||||
.profile-avatar-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.profile-avatar-preview:hover .profile-avatar-overlay,
|
||||
.profile-avatar-overlay:focus-visible { opacity: 1; }
|
||||
.profile-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
|
||||
.profile-avatar-actions .config-btn-secondary { font-size: 0.75rem; padding: 6px 14px; }
|
||||
.profile-avatar-remove-btn { background: var(--danger-bg) !important; color: var(--danger) !important; border-color: var(--danger) !important; }
|
||||
.profile-avatar-error { font-size: 0.7rem; color: var(--danger); margin-top: 8px; }
|
||||
.profile-avatar-error.hidden { display: none; }
|
||||
.config-save-btn {
|
||||
padding: 6px 18px; font-size: 0.75rem; font-weight: 600;
|
||||
background: var(--accent); color: #fff;
|
||||
@@ -6086,6 +6140,14 @@ body.resizing-v {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed));
|
||||
}
|
||||
/* #113 — custom avatar image fills the circle; initials stay the fallback */
|
||||
.sidebar-user-avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
.sidebar-user-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user