SMTP-to-Pushover/views/settings.ejs

<div class="container-fluid">
  <h1 class="h3 mb-4">Paramètres</h1>
  
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary">Configuration</h6>
    </div>
    <div class="card-body">
      <form action="/settings" method="POST">
        <h5 class="mb-3">Serveur SMTP</h5>
        <div class="row mb-4">
          <div class="col-md-6">
            <div class="mb-3">
              <label for="smtpHost" class="form-label">Hôte</label>
              <input type="text" class="form-control" id="smtpHost" name="smtpHost" value="<%= settings.smtp?.host || '0.0.0.0' %>">
              <div class="form-text">Adresse IP à laquelle le serveur SMTP sera lié</div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label for="smtpPort" class="form-label">Port</label>
              <input type="number" class="form-control" id="smtpPort" name="smtpPort" value="<%= settings.smtp?.port || 2525 %>">
              <div class="form-text">Port sur lequel le serveur SMTP écoutera</div>
            </div>
          </div>
        </div>
        
        <div class="row mb-4">
          <div class="col-md-6">
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" id="smtpSecure" name="smtpSecure" value="true" <%= settings.smtp?.secure ? 'checked' : '' %>>
              <label class="form-check-label" for="smtpSecure">
                Connexion sécurisée (TLS)
              </label>
              <div class="form-text">Activer TLS pour les connexions SMTP</div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" id="smtpAuthOptional" name="smtpAuthOptional" value="true" <%= settings.smtp?.authOptional ? 'checked' : '' %>>
              <label class="form-check-label" for="smtpAuthOptional">
                Authentification optionnelle
              </label>
              <div class="form-text">Permettre les connexions sans authentification</div>
            </div>
          </div>
        </div>
        
        <hr class="my-4">
        
        <h5 class="mb-3">Notifications Pushover</h5>
        <div class="row mb-4">
          <div class="col-md-6">
            <div class="mb-3">
              <label for="pushoverUser" class="form-label">Clé utilisateur</label>
              <input type="text" class="form-control" id="pushoverUser" name="pushoverUser" value="<%= settings.pushover?.user || '' %>">
              <div class="form-text">Votre clé utilisateur Pushover</div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label for="pushoverToken" class="form-label">Token d'application</label>
              <input type="text" class="form-control" id="pushoverToken" name="pushoverToken" value="<%= settings.pushover?.token || '' %>">
              <div class="form-text">Token API de votre application Pushover</div>
            </div>
          </div>
        </div>
        
        <div class="row mb-4">
          <div class="col-md-4">
            <div class="mb-3">
              <label for="pushoverTitle" class="form-label">Titre des notifications</label>
              <input type="text" class="form-control" id="pushoverTitle" name="pushoverTitle" value="<%= settings.pushover?.title || 'Mail Notifier' %>">
            </div>
          </div>
          <div class="col-md-4">
            <div class="mb-3">
              <label for="pushoverSound" class="form-label">Son</label>
              <select class="form-select" id="pushoverSound" name="pushoverSound">
                <option value="pushover" <%= settings.pushover?.sound === 'pushover' ? 'selected' : '' %>>Pushover (défaut)</option>
                <option value="bike" <%= settings.pushover?.sound === 'bike' ? 'selected' : '' %>>Bike</option>
                <option value="bugle" <%= settings.pushover?.sound === 'bugle' ? 'selected' : '' %>>Bugle</option>
                <option value="cashregister" <%= settings.pushover?.sound === 'cashregister' ? 'selected' : '' %>>Cash Register</option>
                <option value="classical" <%= settings.pushover?.sound === 'classical' ? 'selected' : '' %>>Classical</option>
                <option value="cosmic" <%= settings.pushover?.sound === 'cosmic' ? 'selected' : '' %>>Cosmic</option>
                <option value="falling" <%= settings.pushover?.sound === 'falling' ? 'selected' : '' %>>Falling</option>
                <option value="gamelan" <%= settings.pushover?.sound === 'gamelan' ? 'selected' : '' %>>Gamelan</option>
                <option value="incoming" <%= settings.pushover?.sound === 'incoming' ? 'selected' : '' %>>Incoming</option>
                <option value="magic" <%= settings.pushover?.sound === 'magic' ? 'selected' : '' %>>Magic</option>
                <option value="none" <%= settings.pushover?.sound === 'none' ? 'selected' : '' %>>Aucun son</option>
              </select>
            </div>
          </div>
          <div class="col-md-4">
            <div class="mb-3">
              <label for="pushoverPriority" class="form-label">Priorité</label>
              <select class="form-select" id="pushoverPriority" name="pushoverPriority">
                <option value="-2" <%= settings.pushover?.priority === -2 ? 'selected' : '' %>>Très basse (-2)</option>
                <option value="-1" <%= settings.pushover?.priority === -1 ? 'selected' : '' %>>Basse (-1)</option>
                <option value="0" <%= settings.pushover?.priority === 0 || !settings.pushover?.priority ? 'selected' : '' %>>Normale (0)</option>
                <option value="1" <%= settings.pushover?.priority === 1 ? 'selected' : '' %>>Haute (1)</option>
                <option value="2" <%= settings.pushover?.priority === 2 ? 'selected' : '' %>>Urgente (2)</option>
              </select>
              <div class="form-text">Les notifications urgentes (2) contournent le mode silencieux et nécessitent une confirmation</div>
            </div>
          </div>
        </div>
        
        <div class="mb-4">
          <button type="button" class="btn btn-info" id="testPushover" onclick="document.getElementById('testPushoverForm').submit();">
            <i class="fas fa-bell"></i> Tester les notifications
          </button>
          <div class="form-text">Envoie une notification de test pour vérifier votre configuration</div>
        </div>
        
        <hr class="my-4">
        
        <h5 class="mb-3">Administration</h5>
        <div class="row mb-4">
          <div class="col-md-6">
            <div class="mb-3">
              <label for="adminUsername" class="form-label">Nom d'utilisateur</label>
              <input type="text" class="form-control" id="adminUsername" name="adminUsername" value="<%= settings.admin?.username || 'admin' %>">
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label for="adminPassword" class="form-label">Mot de passe</label>
              <input type="password" class="form-control" id="adminPassword" name="adminPassword" placeholder="Laisser vide pour ne pas changer">
              <div class="form-text">Laisser vide pour conserver le mot de passe actuel</div>
            </div>
          </div>
        </div>
        
        <div class="form-check mb-4">
          <input class="form-check-input" type="checkbox" id="enableAuth" name="enableAuth" value="true" <%= settings.admin?.enableAuth ? 'checked' : '' %>>
          <label class="form-check-label" for="enableAuth">
            Activer l'authentification
          </label>
          <div class="form-text">Si désactivé, aucune connexion ne sera requise pour accéder à l'interface d'administration</div>
        </div>
        
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> Enregistrer les paramètres
          </button>
        </div>
      </form>
      
      <!-- Formulaire de test Pushover (soumis via JS) -->
      <form id="testPushoverForm" action="/test-pushover" method="POST" class="d-none"></form>
    </div>
  </div>
  
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary">Informations système</h6>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6">
          <p><strong>Version:</strong> <%= settings.version || '1.0.0' %></p>
          <p><strong>Mode:</strong> <%= process.env.NODE_ENV || 'development' %></p>
        </div>
        <div class="col-md-6">
          <p><strong>Démarré le:</strong> <%= settings.createdAt ? new Date(settings.createdAt).toLocaleString() : new Date().toLocaleString() %></p>
          <p><strong>Modifié le:</strong> <%= settings.updatedAt ? new Date(settings.updatedAt).toLocaleString() : new Date().toLocaleString() %></p>
        </div>
      </div>
    </div>
  </div>
</div>