Move cloudron.io account to its own view only for owners
This commit is contained in:
Johannes Zellner
@@ -1,152 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const i18n = useI18n();
|
||||
const t = i18n.t;
|
||||
|
||||
import { ref, onMounted, useTemplateRef } from 'vue';
|
||||
import { Button, Spinner, InputDialog } from 'pankow';
|
||||
import { prettyDate } from 'pankow/utils';
|
||||
import Section from '../components/Section.vue';
|
||||
import SettingsItem from '../components/SettingsItem.vue';
|
||||
import AppstoreModel from '../models/AppstoreModel.js';
|
||||
import DashboardModel from '../models/DashboardModel.js';
|
||||
|
||||
const appstoreModel = AppstoreModel.create();
|
||||
const dashboardModel = DashboardModel.create();
|
||||
|
||||
const consoleServerOrigin = ref();
|
||||
const busy = ref(true);
|
||||
const hasSubscription = ref(false);
|
||||
const email = ref('');
|
||||
const emailEncoded = ref('');
|
||||
const emailVerified = ref(false);
|
||||
const cloudronId = ref('');
|
||||
const planId = ref('');
|
||||
const planName = ref('');
|
||||
const cancelAt = ref(0);
|
||||
const status = ref('');
|
||||
|
||||
async function refresh() {
|
||||
const [error, result] = await appstoreModel.getSubscription();
|
||||
if (error) {
|
||||
if (error.status === 402) return busy.value = false; // not yet registered
|
||||
if (error.status === 412) return busy.value = false; // invalid appstore token
|
||||
return console.error(error);
|
||||
}
|
||||
|
||||
hasSubscription.value = true;
|
||||
email.value = result.email;
|
||||
emailEncoded.value = encodeURIComponent(result.email);;
|
||||
emailVerified.value = result.emailVerified;
|
||||
cloudronId.value = result.cloudronId;
|
||||
planId.value = result.plan.id;
|
||||
planName.value = result.plan.name;
|
||||
cancelAt.value = result.cancel_at || 0;
|
||||
status.value = result.status;
|
||||
}
|
||||
|
||||
const inputDialog = useTemplateRef('inputDialog');
|
||||
async function onAskResetCloudron() {
|
||||
const yes = await inputDialog.value.confirm({
|
||||
title: 'Really reset Cloudron ID',
|
||||
message: 'This will disconnect the Cloudron from the current cloudron.io account',
|
||||
confirmStyle: 'danger',
|
||||
confirmLabel: t('main.dialog.yes'),
|
||||
rejectLabel: t('main.dialog.cancel'),
|
||||
rejectStyle: 'secondary',
|
||||
});
|
||||
|
||||
if (!yes) return;
|
||||
|
||||
await onResetCloudron();
|
||||
}
|
||||
|
||||
async function onResetCloudron() {
|
||||
busy.value = true;
|
||||
|
||||
const [error] = await appstoreModel.resetCloudronId();
|
||||
if (error) return console.error(error);
|
||||
|
||||
await refresh();
|
||||
|
||||
busy.value = false;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const [error, result] = await dashboardModel.config();
|
||||
if (error) return console.error(error);
|
||||
|
||||
consoleServerOrigin.value = result.consoleServerOrigin;
|
||||
|
||||
await refresh();
|
||||
busy.value = false;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<InputDialog ref="inputDialog"/>
|
||||
|
||||
<Section :title="$t('settings.appstoreAccount.title')">
|
||||
<!-- TODO: Show plan info -->
|
||||
|
||||
<div v-if="!busy">
|
||||
<div v-if="hasSubscription">
|
||||
<p>{{ $t('settings.appstoreAccount.description') }}</p>
|
||||
|
||||
<div class="info-row" v-if="email">
|
||||
<div class="info-label">{{ $t('settings.appstoreAccount.email') }}</div>
|
||||
<!-- TODO change to setup subscxription -->
|
||||
<!-- TODO button is a link to console.cloudron.io/setup-subscription?cloudronId=xxx -->
|
||||
<div class="info-value"><a :href="`${consoleServerOrigin}?email=${emailEncoded}`" target="_blank">{{ email }} <i v-show="!emailVerified" class="fas fa-exclamation-triangle text-danger" v-tooltip="$t('settings.appstoreAccount.emailNotVerified')"></i></a></div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ $t('settings.appstoreAccount.cloudronId') }}</div>
|
||||
<div class="info-value">{{ cloudronId }}</div>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ $t('settings.appstoreAccount.subscription') }}</div>
|
||||
<div class="info-value">{{ planName }}</div>
|
||||
</div>
|
||||
|
||||
<p class="text-danger" v-show="cancelAt">{{ $t('settings.appstoreAccount.subscriptionEndsAt') }} {{ prettyDate(cancelAt*1000) }}</p>
|
||||
|
||||
<div class="button-bar">
|
||||
<Button :href="`${consoleServerOrigin}/#/claim/${cloudronId}`" target="_blank">
|
||||
<span v-if="planName.toLowerCase() === 'free'">{{ $t('settings.appstoreAccount.subscriptionSetupAction') }}</span>
|
||||
<span v-else-if="cancelAt">{{ $t('settings.appstoreAccount.subscriptionReactivateAction') }}</span>
|
||||
<span v-else>{{ $t('settings.appstoreAccount.subscriptionChangeAction') }}</span>
|
||||
</Button>
|
||||
|
||||
<Button secondary @click="onAskResetCloudron">Reset Registration</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SettingsItem v-else-if="cloudronId">
|
||||
<div style="display: flex; align-items: center;">
|
||||
{{ $t('settings.appstoreAccount.description') }}
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<Button :href="`${consoleServerOrigin}/#/claim/${cloudronId}`" target="_blank">{{ $t('settings.appstoreAccount.setupAction') }}</Button>
|
||||
</div>
|
||||
</SettingsItem>
|
||||
|
||||
<SettingsItem v-else>
|
||||
<div style="display: flex; align-items: center;">
|
||||
Unknown Cloudron ID or invalid cloudron.io token.
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<Button @click="onResetCloudron">Reset Registration</Button>
|
||||
</div>
|
||||
</SettingsItem>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Spinner class="pankow-spinner-large"/>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user