Go out to claim route on subscription setup dialog

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>

dashboard/src/components/CloudronRegistrationDialog.vue

@@ -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>

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>