gitea

public/plugins/email/email.js

@@ -168,8 +168,8 @@ function buildSettingsPanel(panelEl) {
                         <button type="submit" id="email-acc-save" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">save</span></button>
                         <button type="button" id="email-acc-test" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-plug text-sm"></i><span class="font-pixel text-[10px]">test</span></button>
                         <button type="button" id="email-acc-cancel" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">cancel</span></button>
-                        <span id="email-acc-status" class="font-pixel text-[9px] text-t-dim"></span>
                     </div>
+                    <div id="email-acc-status" class="hidden mt-1 px-3 py-2 text-[10px] font-mono break-words border border-t-border bg-t-bg"></div>
                 </form>
             </div>
         </div>
@@ -233,6 +233,30 @@ function renderAccountsList() {
     });
 }
 
+function setAccountStatus(text, kind = 'info') {
+    const el = $('email-acc-status');
+    if (!el) return;
+    if (!text) {
+        el.classList.add('hidden');
+        el.textContent = '';
+        el.style.borderColor = '';
+        el.style.color = '';
+        return;
+    }
+    el.classList.remove('hidden');
+    el.textContent = text;
+    if (kind === 'error') {
+        el.style.borderColor = 'var(--t-danger)';
+        el.style.color = 'var(--t-danger)';
+    } else if (kind === 'success') {
+        el.style.borderColor = 'var(--t-accent)';
+        el.style.color = 'var(--t-accent)';
+    } else {
+        el.style.borderColor = 'var(--t-border)';
+        el.style.color = 'var(--t-muted)';
+    }
+}
+
 function resetAccountForm() {
     editingAccountId = null;
     const form = $('email-account-form');
@@ -246,7 +270,7 @@ function resetAccountForm() {
     $('email-acc-username').value = '';
     $('email-acc-password').value = '';
     $('email-acc-folder').value = 'INBOX';
-    $('email-acc-status').textContent = '';
+    setAccountStatus('');
     $('email-pw-hint').textContent = '';
 }
 
@@ -264,7 +288,7 @@ function editAccount(id) {
     $('email-acc-password').value = '';
     $('email-acc-folder').value = acc.folder;
     $('email-pw-hint').textContent = '(leave blank to keep existing)';
-    $('email-acc-status').textContent = '';
+    setAccountStatus('');
     $('email-acc-name').focus();
 }
 
@@ -283,9 +307,7 @@ async function deleteAccount(id) {
 
 async function saveAccount(e) {
     e.preventDefault();
-    const status = $('email-acc-status');
-    status.textContent = 'saving...';
-    status.style.color = 'var(--t-dim)';
+    setAccountStatus('saving...');
 
     const payload = {
         name: $('email-acc-name').value.trim(),
@@ -297,8 +319,7 @@ async function saveAccount(e) {
         folder: $('email-acc-folder').value.trim() || 'INBOX',
     };
     if (!payload.name || !payload.host || !payload.username || (!editingAccountId && !payload.password)) {
-        status.textContent = 'name, host, username, and password are required';
-        status.style.color = 'var(--t-danger)';
+        setAccountStatus('name, host, username, and password are required', 'error');
         return;
     }
     if (editingAccountId && !payload.password) delete payload.password;
@@ -311,45 +332,35 @@ async function saveAccount(e) {
             res = await hyprcrd.api('api/email/accounts', { method: 'POST', body: payload });
         }
         if (res.error) {
-            status.textContent = 'error: ' + res.error;
-            status.style.color = 'var(--t-danger)';
+            setAccountStatus('error: ' + res.error, 'error');
             return;
         }
-        status.textContent = 'saved';
-        status.style.color = 'var(--t-accent)';
+        setAccountStatus('saved', 'success');
         await loadAccounts();
         renderAccountsList();
-        resetAccountForm();
+        setTimeout(() => { resetAccountForm(); }, 1500);
     } catch (err) {
-        status.textContent = 'error: ' + err.message;
-        status.style.color = 'var(--t-danger)';
+        setAccountStatus('error: ' + err.message, 'error');
     }
 }
 
 async function testExistingAccount(id) {
-    const status = $('email-acc-status');
-    status.textContent = 'testing...';
-    status.style.color = 'var(--t-dim)';
+    setAccountStatus('testing...');
     try {
         const res = await hyprcrd.api(`api/email/accounts/${id}/test`, { method: 'POST' });
         if (res.ok) {
-            status.textContent = `ok — ${res.exists} messages in INBOX`;
-            status.style.color = 'var(--t-accent)';
+            setAccountStatus(`ok — ${res.exists} messages in INBOX`, 'success');
         } else {
-            status.textContent = 'failed: ' + (res.error || 'unknown');
-            status.style.color = 'var(--t-danger)';
+            setAccountStatus('failed: ' + (res.error || 'unknown'), 'error');
         }
     } catch (err) {
-        status.textContent = 'error: ' + err.message;
-        status.style.color = 'var(--t-danger)';
+        setAccountStatus('error: ' + err.message, 'error');
     }
 }
 
 async function testCurrentForm() {
     if (!editingAccountId) {
-        const status = $('email-acc-status');
-        status.textContent = 'save first, then test';
-        status.style.color = 'var(--t-dim)';
+        setAccountStatus('save first, then test');
         return;
     }
     await testExistingAccount(editingAccountId);