From c18172f23e234f80a0790b1f60ef8ebc9c0fd9ea Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 15 Nov 2019 22:42:44 +0900
Subject: [PATCH] Render Upload data from API description

---
 src/views/settings/components/Inputs.vue |  48 ++++-
 src/views/settings/components/Upload.vue | 234 ++++++-----------------
 2 files changed, 101 insertions(+), 181 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 2f582cd7..0e1bbc77 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -1,9 +1,9 @@
 <template>
-  <el-form-item :label="setting.label">
+  <el-form-item :label="setting.label" :label-width="customLabelWidth">
     <el-input
       v-if="setting.type === 'string'"
       :value="data[setting.key]"
-      :placeholder="setting.suggestions[0]"
+      :placeholder="setting.suggestions ? setting.suggestions[0] : null"
       @input="updateSetting($event, settingGroup.key, setting.key)"/>
     <el-switch
       v-if="setting.type === 'boolean'"
@@ -12,7 +12,7 @@
     <el-input-number
       v-if="setting.type === 'integer'"
       :value="data[setting.key]"
-      :placeholder="setting.suggestions[0].toString()"
+      :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
       :min="0"
       size="large"
       class="top-margin"
@@ -27,6 +27,15 @@
         :value="option"
         :key="index"/>
     </el-select>
+    <div v-if="setting.type === 'keyword'">
+      <div v-for="subSetting in setting.children" :key="subSetting.key">
+        <inputs
+          :setting-group="settingGroup"
+          :setting="subSetting"
+          :data="data[setting.key]"
+          :custom-label-width="'100px'"/>
+      </div>
+    </div>
     <el-select
       v-if="renderMultipleSelect(setting.type)"
       :value="data[setting.key]"
@@ -123,6 +132,14 @@
         </div>
       </div>
     </div>
+    <div v-if="setting.key === ':proxy_url'" class="setting-input">
+      <el-checkbox v-model="proxyUrlTypeSocks5" class="name-input" border>Socks5</el-checkbox>
+      <el-input
+        :value="proxyUrlData"
+        :placeholder="setting.suggestions ? setting.suggestions[0] : ''"
+        class="value-input"
+        @input="updateSetting($event, settingGroup.key, setting.key)"/>
+    </div>
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
 </template>
@@ -138,6 +155,13 @@ export default {
     editor: AceEditor
   },
   props: {
+    customLabelWidth: {
+      type: String,
+      default: function() {
+        return this.labelWidth
+      },
+      required: false
+    },
     data: {
       type: Object || Array,
       default: function() {
@@ -173,6 +197,21 @@ export default {
         this.processNestedData([value], this.settingGroup.key, this.setting.key, this.data[this.setting.key])
       }
     },
+    labelWidth() {
+      return this.isMobile ? '100px' : '240px'
+    },
+    proxyUrlData() {
+      if (!this.data[this.setting.key]) {
+        return null
+      } else {
+        return typeof this.data[this.setting.key] === 'string'
+          ? this.data[this.setting.key]
+          : `${this.data[this.setting.key][1]}:${this.data[this.setting.key][2]}`
+      }
+    },
+    proxyUrlTypeSocks5() {
+      return Array.isArray(this.data[this.setting.key]) && this.data[this.setting.key][0] === 'socks5'
+    },
     prune() {
       return this.data[this.setting.key] === ':disabled'
         ? ':disabled'
@@ -256,7 +295,8 @@ export default {
         (type.includes('list') && type.includes('string')) ||
         (type.includes('list') && type.includes('atom')) ||
         (type.includes('list') && type.includes('module')) ||
-        (type.includes('module') && type.includes('atom'))
+        (type.includes('module') && type.includes('atom')) ||
+        this.setting.key === ':args'
       )
     },
     toggleAtomTuple(value, tab, input) {
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index 776c9ed6..ffbbd865 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -1,141 +1,26 @@
 <template>
-  <div>
-    <el-form ref="upload" :model="upload" :label-width="labelWidth">
-      <el-form-item label="Uploader">
-        <el-input :value="upload.uploader" @input="updateSetting($event, 'Pleroma.Upload', 'uploader')"/>
-      </el-form-item>
-      <el-form-item label="Filters">
-        <el-select :value="upload.filters || []" multiple filterable allow-create @change="updateSetting($event, 'Pleroma.Upload', 'filters')"/>
-      </el-form-item>
-      <el-form-item label="Link name">
-        <el-switch :value="upload.link_name" @change="updateSetting($event, 'Pleroma.Upload', 'link_name')"/>
-        <p class="expl">When enabled Pleroma will add a name parameter to the url of the upload, for example
-        <span class="code">https://instance.tld/media/corndog.png?name=corndog.png</span></p>
-      </el-form-item>
-      <el-form-item label="Base URL">
-        <el-input :value="upload.base_url" @input="updateSetting($event, 'Pleroma.Upload', 'base_url')"/>
-        <p class="expl">The base URL to access a user-uploaded file. Useful when you want to proxy the media files via another host</p>
-      </el-form-item>
-      <el-form-item label="Proxy remote">
-        <el-switch :value="upload.proxy_remote" @change="updateSetting($event, 'Pleroma.Upload', 'proxy_remote')"/>
-        <p class="expl">If you're using a remote uploader, Pleroma will proxy media requests instead of redirecting to it</p>
-      </el-form-item>
-      <div class="line"/>
-      <el-form-item label="Proxy options:"/>
-      <el-form-item label="Redirect on failure">
-        <el-switch :value="upload.proxy_opts.redirect_on_failure" @change="processNestedData($event, 'Pleroma.Upload', 'proxy_opts', 'redirect_on_failure')"/>
-        <p class="expl">Redirects the client to the real remote URL if there's any HTTP errors.
-        Any error during body processing will not be redirected as the response is chunked</p>
-      </el-form-item>
-      <el-form-item label="Max body length (MB)">
-        <el-input-number :value="upload.proxy_opts.max_body_length / 1048576" :step="1" :min="0" size="large" @change="processNestedData($event * 1048576, 'Pleroma.Upload', 'proxy_opts', 'max_body_length')"/>
-        <p class="expl">Limits the content length to be approximately the specified length</p>
-      </el-form-item>
-      <el-form-item label="Max read duration (s)">
-        <el-input-number :value="upload.proxy_opts.max_read_duration" :step="1" :min="0" size="large" @change="processNestedData($event, 'Pleroma.Upload', 'proxy_opts', 'max_read_duration')"/>
-        <p class="expl">The total time the connection is allowed to read from the remote upstream</p>
-      </el-form-item>
-      <el-form-item label="Inline content types">
-        <el-select :value="inlineContentTypes" clearable @change="processNestedData($event, 'Pleroma.Upload', 'proxy_opts', 'inline_content_types')">
-          <el-option :value="true" label="True"/>
-          <el-option :value="false" label="False"/>
-          <el-option value="whitelistedTypeArray" label="List of whitelisted content types"/>
-          <el-option value="keepUserAgent" label="Forward client's user-agent to the upstream"/>
-        </el-select>
-        <p v-if="inlineContentTypes === true" class="expl">Will not alter <span class="code">content-disposition</span> (up to the upstream)</p>
-        <p v-if="!inlineContentTypes" class="expl">Will add <span class="code">content-disposition: attachment</span> to any request</p>
-        <p v-if="inlineContentTypes === 'keepUserAgent'" class="expl">
-          Will forward the client's user-agent to the upstream. This may be useful if the upstream is
-          doing content transformation (encoding, …) depending on the request.
-        </p>
-      </el-form-item>
-      <el-form-item v-if="inlineContentTypes === 'whitelistedTypeArray'" label="Whitelisted content types">
-        <el-select :value="whitelistedContentTypes" multiple filterable allow-create @change="processNestedData($event, 'Pleroma.Upload', 'proxy_opts', 'inline_content_types')">
-          <el-option
-            v-for="item in whitelistedContentTypesOptions"
-            :label="item.label"
-            :key="item.value"
-            :value="item.value"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Request headers">
-        <el-select :value="upload.proxy_opts.req_headers || []" multiple filterable allow-create @change="processNestedData($event, 'Pleroma.Upload', 'proxy_opts', 'req_headers')"/>
-        <p class="expl"><span class="code">resp_headers</span> additional headers</p>
-      </el-form-item>
-      <el-form-item label="HTTP:"/>
-      <el-form-item label="Follow redirect">
-        <el-switch :value="http.follow_redirect" @change="processHttpSettings($event, 'Pleroma.Upload', 'proxy_opts', 'http', 'follow_redirect')"/>
-      </el-form-item>
-      <el-form-item label="Pool">
-        <el-select :value="http.pool" clearable @change="processHttpSettings($event, 'Pleroma.Upload', 'proxy_opts', 'http', 'pool')">
-          <el-option
-            v-for="item in hackneyPoolsOptions"
-            :label="item.label"
-            :key="item.value"
-            :value="item.value"/>
-        </el-select>
-        <p class="expl">{{ getPoolExpl(http.pool) }}</p>
-      </el-form-item>
+  <div v-if="!loading">
+    <el-form ref="uploadData" :model="uploadData" :label-width="labelWidth">
+      <setting :setting-group="upload" :data="uploadData"/>
+    </el-form>
+    <el-form ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
+      <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="uploadersLocal" :model="uploadersLocal" :label-width="labelWidth">
-      <el-form-item label="Uploaders.Local:"/>
-      <el-form-item label="Directory for user-uploads">
-        <el-input :value="uploadersLocal.uploads" @input="updateSetting($event, 'Pleroma.Uploaders.Local', 'uploads')"/>
-        <p class="expl">Which directory to store the user-uploads in, relative to pleroma’s working directory</p>
-      </el-form-item>
+    <el-form ref="uploadersS3" :model="uploadersS3Data" :label-width="labelWidth">
+      <setting :setting-group="uploadersS3" :data="uploadersS3Data"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrify" :label-width="labelWidth">
-      <el-form-item label="Actions for Mogrify">
-        <el-select :value="uploadFilterMogrify.args || []" multiple filterable allow-create @change="updateSetting($event, 'Pleroma.Upload.Filter.Mogrify', 'args')">
-          <el-option
-            v-for="item in mogrifyActionsOptions"
-            :label="item.label"
-            :key="item.value"
-            :value="item.value"/>
-        </el-select>
-      </el-form-item>
+    <el-form ref="uploadersMDII" :model="uploadersMDIIData" :label-width="labelWidth">
+      <setting :setting-group="uploadersMDII" :data="uploadersMDIIData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilename" :label-width="labelWidth">
-      <el-form-item label="Anonymize filename">
-        <el-input :value="uploadAnonymizeFilename.text" @input="updateSetting($event, 'Pleroma.Upload.Filter.AnonymizeFilename', 'text')"/>
-        <p class="expl">Text to replace filenames in links. If empty, <span class="code">{random}.extension</span> will be used</p>
-      </el-form-item>
+    <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-width="labelWidth">
+      <setting :setting-group="uploadFilterMogrify" :data="uploadFilterMogrifyData"/>
     </el-form>
     <div class="line"/>
-    <el-form ref="uploadS3" :model="uploadS3" :label-width="labelWidth">
-      <el-form-item label="S3 Config:"/>
-      <el-form-item label="Bucket">
-        <el-input :value="uploadS3.bucket" @input="updateSetting($event, 'Pleroma.Uploaders.S3', 'bucket')"/>
-        <p class="expl">S3 bucket name</p>
-      </el-form-item>
-      <el-form-item label="Bucket namespace">
-        <el-input :value="uploadS3.bucket_namespace" @input="updateSetting($event, 'Pleroma.Uploaders.S3', 'bucket_namespace')"/>
-        <p class="expl">S3 bucket namespace</p>
-      </el-form-item>
-      <el-form-item label="Public endpoint">
-        <el-input :value="uploadS3.public_endpoint" @input="updateSetting($event, 'Pleroma.Uploaders.S3', 'public_endpoint')"/>
-        <p class="expl">S3 endpoint that the user finally accesses</p>
-      </el-form-item>
-      <el-form-item label="Truncated namespace">
-        <el-input :value="uploadS3.truncated_namespace" @input="updateSetting($event, 'Pleroma.Uploaders.S3', 'truncated_namespace')"/>
-        <p class="expl">If you use S3 compatible service such as Digital Ocean Spaces or CDN, set folder name or "" etc.
-        For example, when using CDN to S3 virtual host format, set "".
-        At this time, write CNAME to CDN in <span class="code">public_endpoint</span>.
-        </p>
-      </el-form-item>
-    </el-form>
-    <div class="line"/>
-    <el-form ref="uploadMDII" :model="uploadMDII" :label-width="labelWidth">
-      <el-form-item label="Uploaders.MDII Config:"/>
-      <el-form-item label="CGI">
-        <el-input :value="uploadMDII.cgi" @input="updateSetting($event, 'Pleroma.Uploaders.MDII', 'cgi')"/>
-      </el-form-item>
-      <el-form-item label="Files">
-        <el-input :value="uploadMDII.files" @input="updateSetting($event, 'Pleroma.Uploaders.MDII', 'files')"/>
-      </el-form-item>
+    <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-width="labelWidth">
+      <setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
@@ -146,67 +31,62 @@
 <script>
 import i18n from '@/lang'
 import { mapGetters } from 'vuex'
-import { options } from './options'
+import Setting from './Setting'
 
 export default {
   name: 'Upload',
+  components: { Setting },
   computed: {
     ...mapGetters([
-      'uploadAnonymizeFilename',
-      'upload',
-      'uploadFilterMogrify',
-      'uploadersLocal',
-      'uploadMDII',
-      'uploadS3'
+      'settings'
     ]),
-    inlineContentTypes() {
-      return Array.isArray(this.upload.proxy_opts.inline_content_types) ? 'whitelistedTypeArray' : this.upload.proxy_opts.inline_content_types
-    },
-    http() {
-      return this.upload.proxy_opts.http || {}
-    },
-    hackneyPoolsOptions() {
-      return options.hackneyPoolsOptions
-    },
-    whitelistedContentTypes() {
-      return Array.isArray(this.upload.proxy_opts.inline_content_types) ? this.upload.proxy_opts.inline_content_types : []
-    },
-    whitelistedContentTypesOptions() {
-      return options.whitelistedContentTypesOptions
-    },
-    mogrifyActionsOptions() {
-      return options.mogrifyActionsOptions
-    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '210px'
+      return this.isMobile ? '100px' : '240px'
+    },
+    loading() {
+      return this.$store.state.settings.loading
+    },
+    upload() {
+      return this.settings.description.find(setting => setting.key === 'Pleroma.Upload')
+    },
+    uploadData() {
+      return this.settings.settings['Pleroma.Upload']
+    },
+    uploadersLocal() {
+      return this.settings.description.find(setting => setting.key === 'Pleroma.Uploaders.Local')
+    },
+    uploadersLocalData() {
+      return this.settings.settings['Pleroma.Uploaders.Local']
+    },
+    uploadersS3() {
+      return this.settings.description.find(setting => setting.key === 'Pleroma.Uploaders.S3')
+    },
+    uploadersS3Data() {
+      return this.settings.settings['Pleroma.Uploaders.S3']
+    },
+    uploadersMDII() {
+      return this.settings.description.find(setting => setting.key === 'Pleroma.Uploaders.MDII')
+    },
+    uploadersMDIIData() {
+      return this.settings.settings['Pleroma.Uploaders.MDII']
+    },
+    uploadFilterMogrify() {
+      return this.settings.description.find(setting => setting.key === 'Pleroma.Upload.Filter.Mogrify')
+    },
+    uploadFilterMogrifyData() {
+      return this.settings.settings['Pleroma.Upload.Filter.Mogrify']
+    },
+    uploadAnonymizeFilename() {
+      return this.settings.description.find(setting => setting.key === 'Pleroma.Upload.Filter.AnonymizeFilename')
+    },
+    uploadAnonymizeFilenameData() {
+      return this.settings.settings['Pleroma.Upload.Filter.AnonymizeFilename']
     }
   },
   methods: {
-    getPoolExpl(value) {
-      const pool = this.hackneyPoolsOptions.find(el => el.value === value)
-      return pool ? 'Max connections: ' + pool.max_connections + ', timeout: ' + pool.timeout : ''
-    },
-    processHttpSettings(value, tab, section, httpSection, input) {
-      const updatedValue = { ...this.upload[section][httpSection], ...{ [input]: value }}
-      this.processNestedData(updatedValue, tab, section, httpSection)
-    },
-    processNestedData(value, tab, section, input) {
-      const updatedValue = { ...this.$store.state.settings.settings[tab][section], ...{ [input]: value }}
-      this.updateSetting(updatedValue, tab, section)
-    },
-    updateInlineContentTypes() {
-      if (this.$data.inlineContentTypes === 'whitelistedTypeArray') {
-        this.processNestedData(this.$data.whitelistedContentTypes, 'Pleroma.Upload', 'proxy_opts', 'inline_content_types')
-      } else {
-        this.processNestedData(this.$data.inlineContentTypes, 'Pleroma.Upload', 'proxy_opts', 'inline_content_types')
-      }
-    },
-    updateSetting(value, tab, input) {
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
-    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')