From 3fb314a1cbde2c0da5034e9918f880cd1f9a5ff4 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 13 Jun 2025 16:31:35 +0200
Subject: [PATCH] Handle invalid Cloudron registration case in appstore view

---
 dashboard/src/views/AppstoreView.vue | 47 ++++++++++++++++------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/dashboard/src/views/AppstoreView.vue b/dashboard/src/views/AppstoreView.vue
index 01e0b30e4..9b54a7919 100644
--- a/dashboard/src/views/AppstoreView.vue
+++ b/dashboard/src/views/AppstoreView.vue
@@ -71,6 +71,7 @@ const searchInput = useTemplateRef('searchInput');
 const inputDialog = useTemplateRef('inputDialog');
 const features = inject('features');
 const installedApps = ref([]);
+const appstoreTokenError = ref(false);
 
 const category = ref('');
 const categories = [
@@ -113,7 +114,10 @@ function onInstall(app) {
 
 async function getAppList() {
   const [error, result] = await appstoreModel.list();
-  if (error) return console.error(error);
+  if (error) {
+    if (error.status === 402) return appstoreTokenError.value = true;
+    return console.error(error);
+  }
 
   apps.value = result;
 }
@@ -173,32 +177,35 @@ onMounted(async () => {
     <InputDialog ref="inputDialog"/>
     <AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
 
-    <div class="filter-bar" :disabled="!ready" :style="{ 'pointer-events': ready ? null : 'none' }">
-      <SingleSelect @select="onCategory" v-model="category" :options="categories" option-key="id" option-label="label"/>
-      <TextInput ref="searchInput" @keydown.esc="search = ''" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="flex-grow: 1;"/>
-    </div>
-
     <div v-if="!ready" style="width: 100%; text-align: center;">
       <Spinner class="pankow-spinner-large"/>
     </div>
-
-    <div v-if="!search && ready">
-      <h4 v-show="filteredPopularApps.length">{{ $t('appstore.category.popular') }}</h4>
-      <div class="grid">
-        <AppStoreItem v-for="app in filteredPopularApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
+    <div v-else-if="appstoreTokenError">
+      Cloudron not registered. Reset registration <a href="#/cloudron-account">here</a>.
+    </div>
+    <div v-else>
+      <div class="filter-bar">
+        <SingleSelect @select="onCategory" v-model="category" :options="categories" option-key="id" option-label="label"/>
+        <TextInput ref="searchInput" @keydown.esc="search = ''" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="flex-grow: 1;"/>
       </div>
 
-      <h4 v-show="filteredAllApps.length">{{ $t('appstore.category.all') }}</h4>
-      <div class="grid">
-        <AppStoreItem v-for="app in filteredAllApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
+      <div v-if="!search">
+        <h4 v-show="filteredPopularApps.length">{{ $t('appstore.category.popular') }}</h4>
+        <div class="grid">
+          <AppStoreItem v-for="app in filteredPopularApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
+        </div>
+
+        <h4 v-show="filteredAllApps.length">{{ $t('appstore.category.all') }}</h4>
+        <div class="grid">
+          <AppStoreItem v-for="app in filteredAllApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
+        </div>
+      </div>
+      <div v-else>
+        <div class="grid">
+          <AppStoreItem v-for="app in filteredApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
+        </div>
       </div>
     </div>
-    <div v-else-if="ready">
-      <div class="grid">
-        <AppStoreItem v-for="app in filteredApps" :app="app" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)"/>
-      </div>
-    </div>
-
   </div>
 </template>