Port support view to composition api

This commit is contained in:
Johannes Zellner
2025-02-03 18:39:16 +01:00
parent 5a16a50b3f
commit a93b3dab1b
+31 -40
View File
@@ -1,6 +1,11 @@
<script>
<script setup>
import { fetcher, Button } from 'pankow';
import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { computed, ref, onMounted, watch } from 'vue';
import { fetcher, Button, Switch } from 'pankow';
import { marked } from 'marked';
import Section from '../components/Section.vue';
@@ -8,45 +13,31 @@ import Section from '../components/Section.vue';
const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
const accessToken = localStorage.token;
export default {
name: 'SupportView',
components: {
Button,
Section
},
data() {
return {
ready: false,
sshSupportEnabled: false,
toggleSshSupportError: ''
};
},
computed: {
description() {
return marked.parse(this.$t('support.help.description', {
docsLink: 'https://docs.cloudron.io/?support_view',
packagingLink: 'https://docs.cloudron.io/custom-apps/tutorial/?support_view',
forumLink: 'https://forum.cloudron.io/'
}));
}
},
methods: {
async toggleSshSupport() {
this.toggleSshSupportError = '';
const ready = ref(false);
const sshSupportEnabled = ref(false);
const toggleSshSupportError = ref('');
const res = await fetcher.post(`${API_ORIGIN}/api/v1/support/remote_support`, { enable: !this.sshSupportEnabled }, { access_token: accessToken });
if (res.status === 412 || res.status === 417) this.toggleSshSupportError = res.body;
else if (res.status !== 202) console.error(res.body);
const description = computed(() => {
return marked.parse(t('support.help.description', {
docsLink: 'https://docs.cloudron.io/?support_view',
packagingLink: 'https://docs.cloudron.io/custom-apps/tutorial/?support_view',
forumLink: 'https://forum.cloudron.io/'
}));
});
this.sshSupportEnabled = !this.sshSupportEnabled;
}
},
async mounted() {
const response = await fetcher.get(`${API_ORIGIN}/api/v1/support/remote_support`, { access_token: accessToken });
this.sshSupportEnabled = response.body.enabled;
this.ready = true;
}
};
watch(sshSupportEnabled, async (newValue) => {
toggleSshSupportError.value = '';
const res = await fetcher.post(`${API_ORIGIN}/api/v1/support/remote_support`, { enabled: newValue }, { access_token: accessToken });
if (res.status === 412 || res.status === 417) toggleSshSupportError.value = res.body;
else if (res.status !== 202) console.error(res.body);
});
onMounted(async () => {
const response = await fetcher.get(`${API_ORIGIN}/api/v1/support/remote_support`, { access_token: accessToken });
sshSupportEnabled.value = response.body.enabled;
ready.value = true;
});
</script>
@@ -66,7 +57,7 @@ export default {
<br/>
<br/>
<b class="pull-left text-danger text-bold" v-show="toggleSshSupportError">{{ toggleSshSupportError }}</b>
<Button :danger="sshSupportEnabled ? true : null" @click="toggleSshSupport()">{{ sshSupportEnabled ? $t('support.remoteSupport.disableAction') : $t('support.remoteSupport.enableAction') }}</Button>
<Switch v-model="sshSupportEnabled" :label="$t(sshSupportEnabled ? 'main.statusEnabled' : 'main.statusDisabled')" />
</div>
</Section>
</div>