Add Terms of Services on Other tab

src/lang/en.js

@@ -439,7 +439,8 @@ export default {
     changeImage: 'Change image',
     uploadImage: 'Upload image',
     remove: 'Remove',
-    instancePanel: 'Instance Panel Document'
+    instancePanel: 'Instance Panel Document',
+    termsOfServices: 'Terms of Service'
   },
   invites: {
     inviteTokens: 'Invite tokens',

src/store/modules/settings.js

@@ -66,6 +66,9 @@ const settings = {
       state.settings = newSettings
       state.db = newDbSettings
     },
+    SET_TERMS_OF_SERVICES: (state, data) => {
+      state.termsOfServices = data
+    },
     TOGGLE_TABS: (state, status) => {
       state.configDisabled = status
     },
@@ -85,7 +88,13 @@ const settings = {
   actions: {
     async FetchInstanceDocument({ commit, getters }, name) {
       const { data } = await getInstanceDocument(name, getters.authHost, getters.token)
-      commit('SET_INSTANCE_PANEL', data)
+      console.log(data)
+      if (name === 'instance-panel') {
+        commit('SET_INSTANCE_PANEL', data)
+      } else {
+        console.log(name)
+        commit('SET_TERMS_OF_SERVICES', data)
+      }
     },
     async FetchSettings({ commit, getters }) {
       commit('SET_LOADING', true)
@@ -107,7 +116,7 @@ const settings = {
     },
     async RemoveInstanceDocument({ dispatch, getters }, name) {
       await deleteInstanceDocument(name, getters.authHost, getters.token)
-      await dispatch('FetchInstanceDocument', 'instance-panel')
+      await dispatch('FetchInstanceDocument', name)
     },
     async RemoveSetting({ commit, getters }, configs) {
       await removeSettings(configs, getters.authHost, getters.token)

src/views/settings/components/Instance.vue

@@ -3,7 +3,7 @@
     <el-form :model="instanceData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
-    <editor-input :content="instancePanelContent" @input="handleEditorUpdate"/>
+    <editor-input :content="instancePanelContent" :name="'terms-of-service'" @input="handleEditorUpdate"/>
     <el-divider v-if="instance" class="divider thick-line"/>
     <el-form :model="restrictUnauthenticatedData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="restrictUnauthenticated" :data="restrictUnauthenticatedData"/>

src/views/settings/components/Other.vue

@@ -1,5 +1,6 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
+    <editor-input :content="termsOfServicesContent" :name="'terms-of-service'" @input="handleEditorUpdate"/>
     <el-form :model="mimeTypesData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="mimeTypes" :data="mimeTypesData"/>
     </el-form>
@@ -25,11 +26,17 @@
 import { mapGetters } from 'vuex'
 import i18n from '@/lang'
 import Setting from './Setting'
+import { EditorInput } from './inputComponents'
 import _ from 'lodash'
 
 export default {
   name: 'Other',
-  components: { Setting },
+  components: { EditorInput, Setting },
+  data() {
+    return {
+      editorContent: ''
+    }
+  },
   computed: {
     ...mapGetters([
       'settings'
@@ -81,12 +88,22 @@ export default {
     },
     remoteIpData() {
       return _.get(this.settings.settings, [':pleroma', 'Pleroma.Web.Plugs.RemoteIp']) || {}
+    },
+    termsOfServicesContent() {
+      return this.$store.state.settings.termsOfServices
     }
   },
+  async mounted() {
+    await this.$store.dispatch('FetchInstanceDocument', 'terms-of-service')
+  },
   methods: {
+    handleEditorUpdate(content) {
+      this.editorContent = content
+    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')
+        await this.$store.dispatch('UpdateInstanceDocs', { name: 'terms-of-service', content: this.editorContent })
       } catch (e) {
         return
       }

src/views/settings/components/inputComponents/EditorInput.vue

@@ -1,8 +1,8 @@
 <template>
   <el-form :label-position="labelPosition" :label-width="labelWidth">
-    <el-form-item label="Instance panel doc" class="editor-form-item">
+    <el-form-item class="editor-form-item">
       <span slot="label">
-        {{ $t('settings.instancePanel') }}
+        {{ name === 'instance-panel' ? $t('settings.instancePanel') : $t('settings.termsOfServices') }}
         <el-tooltip :content="$t('settings.removeFromDB')" placement="bottom-end">
           <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeInstanceDoc"/>
         </el-tooltip>
@@ -126,6 +126,10 @@ export default {
     content: {
       type: String,
       default: ''
+    },
+    name: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -173,8 +177,8 @@ export default {
     this.editor.destroy()
   },
   methods: {
-    async removeInstanceDoc(name) {
+    async removeInstanceDoc() {
-      await this.$store.dispatch('RemoveInstanceDocument', 'instance-panel')
+      await this.$store.dispatch('RemoveInstanceDocument', this.name)
       this.editor.setContent(this.content)
     }
   }