reduce ui inline conditionals

lnbits/static/js/pages/account.js

@@ -222,6 +222,30 @@ window.PageAccount = {
       return this.selectedApiAcl.token_id_list.find(
         token => token.id === this.apiAcl.selectedTokenId
       )
+    },
+    expiryAt() {
+      if (this.selectedApiToken.expires_at) {
+        return `${this.$t('expiry')}: ${LNbits.utils.formatTimestamp(this.selectedApiToken.expires_at)}`
+      } else {
+        return ''
+      }
+    },
+    tokenStatus() {
+      if (this.selectedApiToken.expires_at) {
+        const now = new Date()
+        const expiresAt = new Date(this.selectedApiToken.expires_at * 1000)
+        let status = ''
+        let badgeColor = 'positive'
+        if (expiresAt < now) {
+          status = this.$t('acl_token_expired')
+          badgeColor = 'negative'
+        } else {
+          status = this.$t('acl_token_active')
+        }
+        return {status, badgeColor}
+      } else {
+        return ''
+      }
     }
   },
   methods: {

lnbits/templates/pages/account.vue

@@ -890,36 +890,14 @@
                         </div>
                       </div>
                       <div
-                        v-if="selectedApiToken"
+                        v-if="selectedApiToken && selectedApiToken.expires_at"
                         class="row items-center q-mb-md q-gutter-sm"
                       >
-                        <span v-text="$t('expiry') + ':'"></span>
+                        <span v-text="expiryAt"></span>
-                        <span
-                          v-text="
-                            selectedApiToken.expires_at
-                              ? utils.formatTimestamp(
-                                  selectedApiToken.expires_at
-                                )
-                              : 'Unknown'
-                          "
-                        ></span>
                         <span v-text="$t('status') + ':'"></span>
                         <q-badge
-                          :color="
+                          :color="tokenStatus.badgeColor"
-                            selectedApiToken.expires_at &&
+                          :label="tokenStatus.status"
-                            selectedApiToken.expires_at * 1000 > Date.now()
-                              ? 'positive'
-                              : selectedApiToken.expires_at
-                                ? 'negative'
-                                : 'grey'
-                          "
-                          :label="
-                            selectedApiToken.expires_at
-                              ? selectedApiToken.expires_at * 1000 > Date.now()
-                                ? 'Active'
-                                : 'Expired'
-                              : 'Unknown'
-                          "
                         ></q-badge>
                       </div>
                       <div v-if="apiAcl.apiToken" class="row q-mb-md">