05/24 Enhance functionalities

templates/admin/settings.html

@@ -52,6 +52,8 @@
         </div>
       </div>
       <div class="modal-footer">
+        <span id="email-test-status" class="settings-test-status"></span>
+        <button type="button" class="btn btn-ghost" onclick="testConnection('email')">📬 Test</button>
         <button class="btn btn-primary" type="submit">Save Email Settings</button>
       </div>
     </form>
@@ -77,9 +79,52 @@
         </div>
       </div>
       <div class="modal-footer">
+        <span id="groq-test-status" class="settings-test-status"></span>
+        <button type="button" class="btn btn-ghost" onclick="testConnection('groq')">🔌 Test</button>
         <button class="btn btn-primary" type="submit">Save AI Settings</button>
       </div>
     </form>
   </div>
 </div>
+
+<script>
+function testConnection(type) {
+  var url    = type === 'email' ? '/admin/settings/test-email' : '/admin/settings/test-groq';
+  var status = document.getElementById(type + '-test-status');
+  var btn    = event.target;
+  btn.disabled    = true;
+  btn.textContent = '…';
+  status.textContent = '';
+  status.className = 'settings-test-status';
+  fetch(url, { method: 'POST', headers: { 'X-CSRFToken': getCsrfToken() } })
+    .then(function(r) { return r.json(); })
+    .then(function(d) {
+      if (d.ok) {
+        status.classList.add('ok');
+        status.textContent = type === 'email'
+          ? '✓ Test email sent to ' + d.to
+          : '✓ Connected — model: ' + d.model;
+      } else {
+        status.classList.add('err');
+        status.textContent = '✕ ' + d.error;
+      }
+    })
+    .catch(function() {
+      status.classList.add('err');
+      status.textContent = '✕ Request failed';
+    })
+    .finally(function() {
+      btn.disabled    = false;
+      btn.textContent = type === 'email' ? '📬 Test' : '🔌 Test';
+    });
+}
+</script>
+
+<style>
+.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
+.settings-test-status { font-size: .78rem; margin-right: auto; max-width: 260px; }
+.settings-test-status.ok  { color: var(--success, #16a34a); }
+.settings-test-status.err { color: var(--danger,  #dc2626); }
+@media(max-width:760px) { .settings-grid { grid-template-columns: 1fr; } }
+</style>
 {% endblock %}