Add ability to enable media proxy and invalidation from Media proxy tab

src/lang/en.js

@@ -103,7 +103,11 @@ export default {
     evictObjectsHeader: 'Evict object from the MediaProxy cache',
     listBannedUrlsHeader: 'List of all banned MediaProxy URLs',
     multipleInput: 'You can enter a single URL or several comma separated links',
-    removeSelected: 'Remove Selected'
+    removeSelected: 'Remove Selected',
+    enable: 'Enable',
+    invalidationAndMediaProxy: 'MediaProxy and Invalidation to evict and ban MediaProxy objects',
+    confirmEnablingMediaProxy: 'Are you sure you want to enable Media Proxy and Media Cache object Invalidation?',
+    enableMediaProxySuccessMessage: 'Media Proxy and Media Cache object Invalidation were enabled'
   },
   documentation: {
     documentation: 'Documentation',

src/store/modules/mediaProxyCache.js

@@ -1,5 +1,5 @@
 import { listBannedUrls, purgeUrls, removeBannedUrls, searchBannedUrls } from '@/api/mediaProxyCache'
-import { fetchSettings } from '@/api/settings'
+import { fetchSettings, updateSettings } from '@/api/settings'
 import { Message } from 'element-ui'
 import i18n from '@/lang'
 
@@ -30,6 +30,19 @@ const mediaProxyCache = {
     }
   },
   actions: {
+    async EnableMediaProxy({ dispatch, getters, state }) {
+      const configs = [{
+        group: ':pleroma',
+        key: ':media_proxy',
+        value: [
+          { tuple: [':enabled', true] },
+          { tuple: [':invalidation', [{ tuple: [':enabled', true] }]] }
+        ]
+      }]
+      await updateSettings(configs, getters.authHost, getters.token)
+
+      dispatch('FetchMediaProxySetting')
+    },
     async FetchMediaProxySetting({ commit, getters }) {
       const { data } = await fetchSettings(getters.authHost, getters.token)
       const mediaProxySettings = data.configs.find(el => el.key === ':media_proxy')

src/views/mediaProxyCache/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="media-proxy-cache-container">
+    <div class="media-proxy-cache-header-container">
+      <h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1>
+      <reboot-button/>
+    </div>
     <div v-if="mediaProxyEnabled">
-      <div class="media-proxy-cache-header-container">
-        <h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1>
-        <reboot-button/>
-      </div>
       <p class="media-proxy-cache-header">{{ $t('mediaProxyCache.evictObjectsHeader') }}</p>
       <div class="url-input-container">
         <el-input
@@ -65,6 +65,10 @@
         />
       </div>
     </div>
+    <div v-else class="enable-mediaproxy-container">
+      <el-button type="text" @click="enableMediaProxy">{{ $t('mediaProxyCache.enable') }}</el-button>
+      {{ $t('mediaProxyCache.invalidationAndMediaProxy') }}
+    </div>
   </div>
 </template>
 
@@ -121,6 +125,26 @@ export default {
     this.$store.dispatch('ListBannedUrls', { page: 1 })
   },
   methods: {
+    enableMediaProxy() {
+      this.$confirm(
+        this.$t('mediaProxyCache.confirmEnablingMediaProxy'),
+        {
+          confirmButtonText: 'Yes',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
+        }).then(() => {
+        this.$message({
+          type: 'success',
+          message: this.$t('mediaProxyCache.enableMediaProxySuccessMessage')
+        })
+        this.$store.dispatch('EnableMediaProxy')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: 'Canceled'
+        })
+      })
+    },
     evictURL() {
       const urls = this.urls.split(',').map(url => url.trim()).filter(el => el.length > 0)
       this.$store.dispatch('PurgeUrls', { urls, ban: this.ban })
@@ -148,6 +172,12 @@ export default {
 h1 {
   margin: 0;
 }
+.enable-mediaproxy-container {
+  margin: 10px 15px;
+  button {
+    font-size: 16px;
+  }
+}
 .expl {
   color: #666666;
   font-size: 13px;