Handle invalid Cloudron registration case in appstore view

This commit is contained in:
Johannes Zellner
2025-06-13 16:31:35 +02:00
parent e898639168
commit 3fb314a1cb
+27 -20
View File
@@ -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>