fix: fire login event after registration, clear stale tokens on session restore, add published/expired status badges to listing cards

js/components/auth-modal.js

@@ -208,7 +208,10 @@ class AuthModal extends HTMLElement {
         this.querySelector('#download-uuid')?.addEventListener('click', () => this.downloadBackup())
 
         // Confirm saved
-        this.querySelector('#confirm-saved')?.addEventListener('click', () => this.hide())
+        this.querySelector('#confirm-saved')?.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('login', { detail: { success: true } }))
+            this.hide()
+        })
 
         // Escape key
         document.addEventListener('keydown', this.boundHandleKeydown)

js/components/listing-card.js

@@ -130,11 +130,14 @@ class ListingCard extends HTMLElement {
         ` : ''
         
         const paymentStatus = this.getAttribute('payment-status')
-        const paymentBadge = paymentStatus === 'processing'
-            ? /* html */`<span class="payment-badge payment-processing"><span class="pulse-dot"></span>${t('payment.awaitingConfirmation')}</span>`
-            : paymentStatus === 'pending'
-                ? /* html */`<span class="payment-badge payment-pending">${t('payment.pending')}</span>`
-                : ''
+        let paymentBadge = ''
+        if (paymentStatus === 'processing' || paymentStatus === 'pending') {
+            paymentBadge = /* html */`<span class="payment-badge payment-processing"><span class="pulse-dot"></span>${t('myListings.status.processing')}</span>`
+        } else if (paymentStatus === 'expired') {
+            paymentBadge = /* html */`<span class="payment-badge payment-expired">${t('myListings.status.expired')}</span>`
+        } else if (paymentStatus === 'paid') {
+            paymentBadge = /* html */`<span class="payment-badge payment-published">${t('myListings.status.published')}</span>`
+        }
 
         this.innerHTML = /* html */`
             ${ownerBadge}
@@ -251,8 +254,13 @@ style.textContent = /* css */`
         gap: 6px;
     }
 
-    listing-card .payment-pending {
-        background: rgba(230, 167, 0, 0.9);
+    listing-card .payment-published {
+        background: rgba(40, 167, 69, 0.9);
+        color: #fff;
+    }
+
+    listing-card .payment-expired {
+        background: rgba(180, 60, 60, 0.85);
         color: #fff;
     }
 

js/services/auth.js

@@ -271,6 +271,7 @@ class AuthService {
                 this.notifyListeners()
                 return true
             } catch (e) {
+                directus.clearTokens()
                 return false
             }
         }