Icon editing, ready for review button

components/EthicalAd.vue

@@ -1,82 +1,11 @@
 <template>
-  <div>
+  <div></div>
-    <div
-      v-if="!showAlt"
-      class="ethical-ad"
-      data-ea-publisher="modrinth-com"
-      :data-ea-type="type"
-      data-ea-manual="true"
-    />
-    <div v-else class="alt">
-      <p>
-        A privacy-focused ad used to fund this site would've been here. Please
-        disable your content blocker to support Modrinth and it's authors.
-      </p>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
   name: 'EthicalAd',
-  props: {
-    type: {
-      type: String,
-      default: 'text',
-    },
-  },
-  data() {
-    return {
-      showAlt: false,
-    }
-  },
-  mounted() {
-    try {
-      // eslint-disable-next-line no-undef
-      if (typeof ethicalads === 'undefined') {
-        this.$notify({
-          group: 'ads',
-          title: 'Please disable your Content Blocker',
-          text:
-            'Modrinth uses privacy-focused ads, from EthicalAds. Ads are the only way that our site is able to pay modders and support itself. Our ads are non-intrusive and minimal, and we only have one per page. We can assure you that none of your data is sold or used for tracking purposes.',
-          type: 'error',
-        })
-
-        this.showAlt = true
-      } else {
-        const element = document.getElementsByClassName('ethical-ad')[0]
-
-        element.className = 'ethical-ad'
-        element.innerHTML = ''
-
-        // eslint-disable-next-line no-undef
-        ethicalads.load()
-
-        element.className = 'ethical-ad loaded ' + this.$colorMode.preference
-      }
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err)
-    }
-  },
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped></style>
-[data-ea-type='text'] {
-  min-height: 70px;
-}
-[data-ea-type='image'] {
-  margin: auto 10px;
-  min-height: 260px;
-}
-
-.alt {
-  font-size: 14px;
-  border-radius: var(--size-rounded-sm);
-  background-color: var(--color-raised-bg);
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
-  padding: 0.7em 1em;
-  margin: 1em 1em 2em 1em;
-}
-</style>

nuxt.config.js

@@ -16,10 +16,6 @@ export default {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      {
-        name: 'a.validate.01',
-        content: 'c0d5971ccaf69bcec6d758f0dd9d9af6b4d4',
-      },
       {
         hid: 'description',
         name: 'description',
@@ -67,10 +63,6 @@ export default {
         async: true,
         defer: true,
       },
-      {
-        src: 'https://media.ethicalads.io/media/client/ethicalads.min.js',
-        async: true,
-      },
     ],
   },
 

pages/mod/_id/edit.vue

@@ -3,6 +3,15 @@
     <div class="page-contents">
       <header class="columns">
         <h2 class="column-grow-1">Edit Mod</h2>
+        <button
+          v-if="mod.status === 'rejected' || mod.status === 'draft'"
+          title="Submit for Review"
+          class="button column"
+          :disabled="!this.$nuxt.$loading"
+          @click="saveModReview"
+        >
+          Submit for Review
+        </button>
         <button
           title="Save"
           class="brand-button column"
@@ -88,6 +97,7 @@
               @click="
                 icon = null
                 previewImage = null
+                iconChanged = true
               "
             >
               Reset icon
@@ -95,7 +105,9 @@
           </div>
           <img
             :src="
-              mod.icon_url
+              previewImage
+                ? previewImage
+                : mod.icon_url && !iconChanged
                 ? mod.icon_url
                 : 'https://cdn.modrinth.com/placeholder.svg'
             "
@@ -220,7 +232,7 @@
           </span>
           <div class="input-group">
             <Multiselect
-              v-model="mod.license"
+              v-model="license"
               placeholder="Select one"
               track-by="short"
               label="name"
@@ -229,11 +241,7 @@
               :close-on-select="true"
               :show-labels="false"
             />
-            <input
+            <input v-model="license_url" type="url" placeholder="License URL" />
-              v-model="mod.license.url"
-              type="url"
-              placeholder="License URL"
-            />
           </div>
         </label>
       </section>
@@ -317,15 +325,22 @@ export default {
       availableLoaders,
       availableGameVersions,
       availableLicenses,
+      license: {
+        short: mod.license.id,
+        name: mod.license.name,
+      },
+      license_url: mod.license.url,
       // availableDonationPlatforms,
     }
   },
   data() {
     return {
+      isProcessing: false,
       previewImage: null,
       compiledBody: '',
 
       icon: null,
+      iconChanged: false,
 
       sideTypes: [
         { label: 'Required', id: 'required' },
@@ -351,34 +366,56 @@ export default {
     },
   },
   methods: {
+    async saveModReview() {
+      this.isProcessing = true
+      await this.saveMod()
+    },
     async saveMod() {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
       this.$nuxt.$loading.start()
 
       try {
+        const data = {
+          title: this.mod.title,
+          description: this.mod.description,
+          body: this.body,
+          categories: this.mod.categories,
+          issues_url: this.mod.issues_url,
+          source_url: this.mod.source_url,
+          wiki_url: this.mod.wiki_url,
+          license_url: this.license_url,
+          discord_url: this.mod.discord_url,
+          license_id: this.license.short,
+          client_side: this.clientSideType.id,
+          server_side: this.serverSideType.id,
+          slug: this.mod.mod_slug,
+        }
+
+        if (this.isProcessing) {
+          data.status = 'processing'
+        }
+
         await axios.patch(
           `https://api.modrinth.com/api/v1/mod/${this.mod.id}`,
-          {
+          data,
-            title: this.mod.title,
+          config
-            description: this.mod.description,
-            body: this.body,
-            categories: this.mod.categories,
-            issues_url: this.mod.issues_url,
-            source_url: this.mod.source_url,
-            wiki_url: this.mod.wiki_url,
-            license_url: this.mod.license_url,
-            discord_url: this.mod.discord_url,
-            license_id: this.mod.license.short,
-            client_side: this.clientSideType.id,
-            server_side: this.serverSideType.id,
-            slug: this.mod.mod_slug,
-          },
-          {
-            headers: {
-              Authorization: this.$auth.getToken('local'),
-            },
-          }
         )
 
+        if (this.iconChanged) {
+          await axios.patch(
+            `https://api.modrinth.com/api/v1/mod/${this.mod.id}/icon?ext=${
+              this.icon.type.split('/')[this.icon.type.split('/').length - 1]
+            }`,
+            this.icon,
+            config
+          )
+        }
+
         await this.$router.replace(`/mod/${this.mod.id}`)
       } catch (err) {
         this.$notify({