Update index.html

index.html

@@ -21,6 +21,10 @@
   }
   input:focus { outline: none; border-color: #38bdf8; }
   input::placeholder { color: #475569; }
+  .hint { font-size: 0.8rem; color: #64748b; margin-bottom: 10px; }
+  .hint span { color: #fbbf24; }
+  .divider { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: #475569; font-size: 0.82rem; }
+  .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #334155; }
   button {
     padding: 10px 22px; border: none; border-radius: 8px; cursor: pointer;
     font-size: 0.9rem; font-weight: 600; transition: all .15s;
@@ -40,6 +44,7 @@
   .badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.78rem; font-weight:600; }
   .badge-ok  { background:#14532d; color:#86efac; }
   .badge-na  { background:#334155; color:#94a3b8; }
+  .badge-method { background:#1e3a5f; color:#7dd3fc; font-size:0.72rem; padding:2px 8px; border-radius:10px; }
   #log {
     background: #020617; border: 1px solid #1e3a5f; border-radius: 8px;
     padding: 14px; height: 260px; overflow-y: auto;
@@ -84,10 +89,26 @@
   <!-- إضافة حساب -->
   <div class="card">
     <h2>➕ إضافة حساب جديد</h2>
+
+    <div class="hint">
+      يمكنك استخدام <span>كلمة المرور</span> (طريقة التمديد المباشر /extend) أو <span>API Token</span> (إعادة تحميل الويب آب).
+      إذا أدخلت الاثنين معاً، ستُستخدم كلمة المرور أولاً.
+    </div>
+
+    <div class="form-row">
+      <input type="text"     id="new-user"  placeholder="اسم المستخدم — مثال: mahmoud123">
+    </div>
+
+    <div class="divider">كلمة المرور (موصى بها)</div>
     <div class="form-row">
-      <input type="text"     id="new-user"  placeholder="اسم المستخدم — مثال: nopoh55678">
-      <input type="password" id="new-token" placeholder="API Token">
+      <input type="password" id="new-pass"  placeholder="كلمة مرور الحساب">
     </div>
+
+    <div class="divider">أو API Token</div>
+    <div class="form-row">
+      <input type="password" id="new-token" placeholder="API Token — من /account/#api_token">
+    </div>
+
     <button class="btn-primary" id="add-btn" onclick="addAccount()">➕ إضافة الحساب</button>
   </div>
 
@@ -158,17 +179,23 @@ async function loadAccounts() {
     return;
   }
   let html = `<table>
-    <tr><th>المستخدم</th><th>الخادم</th><th>آخر تجديد</th><th>التجديد القادم</th><th>الحالة</th></tr>`;
+    <tr><th>المستخدم</th><th>الخادم</th><th>طريقة الدخول</th><th>آخر تجديد</th><th>التجديد القادم</th><th>الحالة</th></tr>`;
   for (const a of data) {
-    const last = a.last_renewed ? a.last_renewed.slice(0,16).replace('T',' ') : '—';
-    const nxt  = a.next_renewal ? a.next_renewal.slice(0,16).replace('T',' ') : '—';
-    const res  = (a.last_results||[]).map(r=>`${r.domain}: ${r.status}`).join('<br>') || '—';
+    const last  = a.last_renewed ? a.last_renewed.slice(0,16).replace('T',' ') : '—';
+    const nxt   = a.next_renewal ? a.next_renewal.slice(0,16).replace('T',' ') : '—';
+    const res   = (a.last_results||[]).map(r=>`${r.domain}: ${r.status}`).join('<br>') || '—';
     const badge = a.last_renewed
       ? '<span class="badge badge-ok">✅ مجدَّد</span>'
       : '<span class="badge badge-na">⏳ لم يُجدَّد</span>';
+    const method = a.auth_method === 'password'
+      ? '<span class="badge-method">🔑 Password</span>'
+      : a.auth_method === 'token'
+        ? '<span class="badge-method">🔐 Token</span>'
+        : '—';
     html += `<tr>
       <td><b>${a.username}</b></td>
       <td style="font-size:.8rem;color:#94a3b8">${a.host||'—'}</td>
+      <td>${method}</td>
       <td style="font-size:.82rem">${last}</td>
       <td style="font-size:.82rem">${nxt}</td>
       <td>${badge}<br><span style="font-size:.78rem;color:#64748b">${res}</span></td>
@@ -179,18 +206,21 @@ async function loadAccounts() {
 
 async function addAccount() {
   const user  = document.getElementById('new-user').value.trim();
+  const pass  = document.getElementById('new-pass').value.trim();
   const token = document.getElementById('new-token').value.trim();
-  if (!user || !token) { toast('❌ أدخل اسم المستخدم والتوكن', false); return; }
+  if (!user) { toast('❌ أدخل اسم المستخدم', false); return; }
+  if (!pass && !token) { toast('❌ أدخل كلمة المرور أو API Token', false); return; }
   const btn = document.getElementById('add-btn');
   btn.innerHTML = 'جاري التحقق... <span class="spinner"></span>';
   btn.disabled = true;
-  const r = await api('/api/accounts','POST',{username:user,token});
+  const r = await api('/api/accounts', 'POST', {username: user, token, password: pass});
   btn.innerHTML = '➕ إضافة الحساب';
   btn.disabled = false;
   toast(r.message, r.ok);
   if (r.ok) {
-    document.getElementById('new-user').value='';
-    document.getElementById('new-token').value='';
+    document.getElementById('new-user').value = '';
+    document.getElementById('new-pass').value = '';
+    document.getElementById('new-token').value = '';
     loadAccounts();
   }
 }
@@ -242,11 +272,10 @@ async function loadLog() {
   el.scrollTop = el.scrollHeight;
 }
 
-// تهيئة
 loadAccounts();
 loadLog();
 setInterval(loadLog, 10000);
 setInterval(loadAccounts, 30000);
 </script>
 </body>
-</html>
+</html>