Try first view support

dashboard/src/components/Index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <SupportView v-if="view === VIEWS.SUPPORT"></SupportView>
+  </div>
+</template>
+
+<script>
+
+import SupportView from './SupportView.vue';
+
+const VIEWS = {
+  SUPPORT: 'support'
+};
+
+export default {
+  name: 'Index',
+  components: {
+    SupportView
+  },
+  data() {
+    return {
+      VIEWS,
+      accessToken: localStorage.token,
+      view: ''
+    };
+  },
+  methods: {
+  },
+  async mounted() {
+    if (!localStorage.token) {
+      console.error('Set localStorage.token');
+      return;
+    }
+
+    const that = this;
+    function onHashChange() {
+      const view = location.hash.slice(2);
+
+      if (view === VIEWS.SUPPORT) {
+        that.view = VIEWS.SUPPORT;
+      } else {
+        that.view = '';
+      }
+    }
+
+    window.addEventListener('hashchange', onHashChange);
+    onHashChange();
+
+    console.log('Indexvue mounted')
+  }
+};
+
+</script>
+
+<style>
+
+</style>

dashboard/src/components/SupportView.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="content">
+    <h1 class="section-header">{{ $t('support.title') }}</h1>
+
+    <h3 class="section-header">{{ $t('support.help.title') }}</h3>
+    <div v-html="description"></div>
+
+    <h3 class="section-header">{{ $t('support.remoteSupport.title') }}</h3>
+    <h2 class="text-center" v-show="!ready"><i class="fa fa-circle-notch fa-spin"></i></h2>
+    <div v-show="ready">
+      <p>{{ $t('support.remoteSupport.description') }}</p>
+      <b>{{ $t('support.remoteSupport.warning') }}</b>
+      <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>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { fetcher, Button } from 'pankow';
+import { marked } from 'marked';
+
+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
+  },
+  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 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);
+
+        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;
+  }
+};
+
+</script>
+
+<style>
+
+html {
+  --pankow-border-radius: 20px;
+}
+
+</style>