Port support view to composition api
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user