From ce571bad81b412d4d1b885b854ce4a803fd57da2 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 16 May 2025 18:43:52 +0200
Subject: [PATCH] Go out to claim route on subscription setup dialog

---
 dashboard/src/components/CloudronAccount.vue  | 12 +---
 .../components/CloudronRegistrationDialog.vue | 67 -------------------
 .../components/SubscriptionRequiredDialog.vue |  2 +-
 3 files changed, 3 insertions(+), 78 deletions(-)
 delete mode 100644 dashboard/src/components/CloudronRegistrationDialog.vue

diff --git a/dashboard/src/components/CloudronAccount.vue b/dashboard/src/components/CloudronAccount.vue
index b2e1b2bb4..7c4100841 100644
--- a/dashboard/src/components/CloudronAccount.vue
+++ b/dashboard/src/components/CloudronAccount.vue
@@ -1,11 +1,10 @@
 <script setup>
 
-import { ref, onMounted, useTemplateRef } from 'vue';
+import { ref, onMounted } from 'vue';
 import { Button, Spinner } from 'pankow';
 import { prettyDate } from 'pankow/utils';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
-import CloudronRegistrationDialog from '../components/CloudronRegistrationDialog.vue';
 import AppstoreModel from '../models/AppstoreModel.js';
 import DashboardModel from '../models/DashboardModel.js';
 
@@ -24,11 +23,6 @@ const planName = ref('');
 const cancelAt = ref(0);
 const status = ref('');
 
-const registrationDialog = useTemplateRef('registrationDialog');
-function onOpenRegistrationDialog() {
-  registrationDialog.value.open();
-}
-
 async function refresh() {
   const [error, result] = await appstoreModel.getSubscription();
   if (error) {
@@ -62,8 +56,6 @@ onMounted(async () => {
 
 <template>
   <div>
-    <CloudronRegistrationDialog ref="registrationDialog" @success="refresh()"/>
-
     <Section :title="$t('settings.appstoreAccount.title')">
       <!-- TODO: Show plan info -->
 
@@ -103,7 +95,7 @@ onMounted(async () => {
               {{ $t('settings.appstoreAccount.description') }}
             </div>
             <div style="display: flex; align-items: center;">
-              <Button @click="onOpenRegistrationDialog()">{{ $t('settings.appstoreAccount.setupAction') }}</Button>
+              <Button :href="`${consoleServerOrigin}/#/cloudron/${cloudronId}?email=${encodeURIComponent(email)}`" target="_blank">{{ $t('settings.appstoreAccount.setupAction') }}</Button>
             </div>
           </SettingsItem>
         </div>
diff --git a/dashboard/src/components/CloudronRegistrationDialog.vue b/dashboard/src/components/CloudronRegistrationDialog.vue
deleted file mode 100644
index f35f88a96..000000000
--- a/dashboard/src/components/CloudronRegistrationDialog.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup>
-
-import { ref, useTemplateRef } from 'vue';
-import { Dialog, FormGroup, TextInput } from 'pankow';
-import AppstoreModel from '../models/AppstoreModel.js';
-
-const emit = defineEmits([ 'success' ]);
-
-const appstoreModel = AppstoreModel.create();
-
-const dialog = useTemplateRef('dialog');
-
-const busy = ref(false);
-const formError = ref('');
-const setupToken = ref('');
-
-async function onSubmit() {
-  busy.value = true;
-  formError.value = '';
-
-  const [error] = await appstoreModel.register(setupToken.value);
-  if (error) {
-    formError.value = error.body ? error.body.message : 'Internal error';
-    busy.value = false;
-    return console.error(error);
-  }
-
-  emit('success');
-  dialog.value.close();
-  busy.value = false;
-}
-
-defineExpose({
-  open() {
-    dialog.value.open();
-  }
-});
-
-
-</script>
-
-<template>
-  <div>
-    <Dialog ref="dialog"
-      title="Register Cloudron"
-     :confirm-label="$t('main.dialog.save')"
-     :confirm-active="!busy && setupToken !== ''"
-     :confirm-busy="busy"
-     :reject-label="busy ? '' : $t('main.dialog.cancel')"
-      reject-style="secondary"
-     @confirm="onSubmit()"
-    >
-      <div>
-        <div class="text-danger" v-if="formError">{{ formError }}</div>
-
-        <form @submit.prevent="onSubmit()" autocomplete="off">
-          <fieldset :disabled="busy">
-            <FormGroup>
-              <label for="setupTokenInput">Setup token</label>
-              <TextInput id="setupTokenInput" v-model="setupToken" required />
-            </FormGroup>
-          </fieldset>
-        </form>
-      </div>
-    </Dialog>
-  </div>
-</template>
diff --git a/dashboard/src/components/SubscriptionRequiredDialog.vue b/dashboard/src/components/SubscriptionRequiredDialog.vue
index d227d4481..bd47953d3 100644
--- a/dashboard/src/components/SubscriptionRequiredDialog.vue
+++ b/dashboard/src/components/SubscriptionRequiredDialog.vue
@@ -30,6 +30,6 @@ defineExpose({
 <template>
   <Dialog ref="dialog" title="Subscription required" :show-x="true">
     <p>To use this feature a Cloudron subscription needs to be set up</p>
-    <Button :href="consoleServerOrigin" target="_blank">Set up</Button>
+    <Button :href="`${consoleServerOrigin}/#/claim/${cloudronId}`" target="_blank">Set up</Button>
   </Dialog>
 </template>