From 3b1712345b4eb00e15688238733a649b11c2b7d7 Mon Sep 17 00:00:00 2001
From: Jai A <jai.a@tuta.io>
Date: Fri, 16 Oct 2020 12:44:32 -0700
Subject: [PATCH] Creation fixes

---
 nuxt.config.js       |  4 ---
 package-lock.json    | 77 ++++++--------------------------------------
 package.json         |  3 +-
 pages/mod/create.vue | 64 +++++++++++++++++++++++++++++-------
 pages/user/_id.vue   |  1 +
 5 files changed, 65 insertions(+), 84 deletions(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index f4c7489f..94012ae0 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -125,7 +125,6 @@ export default {
     '@nuxtjs/dayjs',
     '@nuxtjs/axios',
     '@nuxtjs/auth',
-    '@nuxtjs/markdownit',
     '@nuxtjs/robots',
     '@nuxtjs/sitemap',
   ],
@@ -171,9 +170,6 @@ export default {
     defaultLocale: 'en',
     plugins: ['relativeTime'],
   },
-  markdownit: {
-    injected: true,
-  },
   /*
    ** Build configuration
    ** See https://nuxtjs.org/api/configuration-build/
diff --git a/package-lock.json b/package-lock.json
index 774ebab8..05176f99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2037,27 +2037,6 @@
         "eslint-loader": "^4.0.2"
       }
     },
-    "@nuxtjs/markdownit": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/markdownit/-/markdownit-1.2.10.tgz",
-      "integrity": "sha512-MWvrVrQNxpnfN4bUUH6mCe7wjpDLj1MUij84u4Rfd4vw+koaj1OzX63Q7MAdrDtFT6Li6yn3YNpq7oJQKmyyPQ==",
-      "dev": true,
-      "requires": {
-        "@nuxtjs/markdownit-loader": "^1.1.1",
-        "raw-loader": "^4.0.1"
-      }
-    },
-    "@nuxtjs/markdownit-loader": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/markdownit-loader/-/markdownit-loader-1.1.1.tgz",
-      "integrity": "sha512-ijbEL5QOTRGuykwpikxaanxv5QntRiGYPtBDFvvdhoVNpsfbvROk1QnxCd2tMaYo6zKtpjFQS1RXcluwn5oTXg==",
-      "dev": true,
-      "requires": {
-        "highlight.js": "^9.12.0",
-        "loader-utils": "^1.1.0",
-        "markdown-it": "^8.3.1"
-      }
-    },
     "@nuxtjs/proxy": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-2.0.1.tgz",
@@ -4834,6 +4813,11 @@
         "domelementtype": "1"
       }
     },
+    "dompurify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.1.1.tgz",
+      "integrity": "sha512-NijiNVkS/OL8mdQL1hUbCD6uty/cgFpmNiuFxrmJ5YPH2cXrPKIewoixoji56rbZ6XBPmtM8GA8/sf9unlSuwg=="
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -6738,12 +6722,6 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
-    "highlight.js": {
-      "version": "9.18.3",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.3.tgz",
-      "integrity": "sha512-zBZAmhSupHIl5sITeMqIJnYCDfAEc3Gdkqj65wC1lpI468MMQeeQkhcIAvk+RylAkxrCcI9xy9piHiXeQ1BdzQ==",
-      "dev": true
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -7653,15 +7631,6 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
-    "linkify-it": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
-      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
-      "dev": true,
-      "requires": {
-        "uc.micro": "^1.0.1"
-      }
-    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -7861,26 +7830,10 @@
         "object-visit": "^1.0.0"
       }
     },
-    "markdown-it": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
-      "integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
-      "dev": true,
-      "requires": {
-        "argparse": "^1.0.7",
-        "entities": "~1.1.1",
-        "linkify-it": "^2.0.0",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
-      },
-      "dependencies": {
-        "entities": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
-          "dev": true
-        }
-      }
+    "marked": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.0.tgz",
+      "integrity": "sha512-tiRxakgbNPBr301ihe/785NntvYyhxlqcL3YaC8CaxJQh7kiaEtrN9B/eK2I2943Yjkh5gw25chYFDQhOMCwMA=="
     },
     "md5.js": {
       "version": "1.3.5",
@@ -7897,12 +7850,6 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
       "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
     },
-    "mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
-      "dev": true
-    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -12267,12 +12214,6 @@
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",
       "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q=="
     },
-    "uc.micro": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
-      "dev": true
-    },
     "uglify-js": {
       "version": "3.10.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.4.tgz",
diff --git a/package.json b/package.json
index 4475e3cf..fb0a98a8 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
     "@nuxtjs/dayjs": "^1.2.0",
     "@nuxtjs/robots": "^2.4.2",
     "@nuxtjs/sitemap": "^2.4.0",
+    "dompurify": "^2.1.1",
+    "marked": "^1.2.0",
     "nuxt": "^2.14.5",
     "vue-multiselect": "^2.1.6"
   },
@@ -24,7 +26,6 @@
     "@nuxtjs/color-mode": "^1.1.1",
     "@nuxtjs/eslint-config": "^3.1.0",
     "@nuxtjs/eslint-module": "^2.0.0",
-    "@nuxtjs/markdownit": "^1.2.10",
     "@nuxtjs/svg": "^0.1.12",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.9.0",
diff --git a/pages/mod/create.vue b/pages/mod/create.vue
index 85286d28..c755f596 100644
--- a/pages/mod/create.vue
+++ b/pages/mod/create.vue
@@ -26,25 +26,38 @@
           <label for="icon-file">Upload Icon</label>
         </div>
         <div class="mod-data">
-          <label class="required" title="The name of your mod"> Name </label>
-          <input v-model="name" type="text" placeholder="Example Mod" />
+          <label for="name" class="required" title="The name of your mod">
+            Name
+          </label>
+          <input
+            id="name"
+            v-model="name"
+            required
+            type="text"
+            placeholder="Example Mod"
+          />
           <label
+            for="description"
             class="required"
             title="The short-form description of your mod. This shows up in searches"
           >
             Short Description
           </label>
           <input
+            id="description"
             v-model="description"
+            required
             type="text"
             placeholder="An example mod which does example stuff!"
           />
           <label
+            for="categories"
             title="The categories of your mod, these help your mod appear in search results. Maximum of three!"
           >
             Categories
           </label>
           <multiselect
+            id="categories"
             v-model="categories"
             class="categories-input"
             :options="selectableCategories"
@@ -64,7 +77,14 @@
       </div>
     </section>
     <section class="editor">
-      <h3>Mod Body</h3>
+      <h3>
+        <label
+          for="body"
+          title="You can type the of the long form of your description here."
+        >
+          Mod Body
+        </label>
+      </h3>
       <p>
         You can type the of the long form of your description here. This editor
         supports markdown. You can find the syntax
@@ -75,8 +95,8 @@
           >here</a
         >.
       </p>
-      <textarea v-model="body"></textarea>
-      <div v-html="$md.render(body)"></div>
+      <textarea id="body" v-model="body" @input="setMarkdownBody"></textarea>
+      <div v-html="compiledBody"></div>
     </section>
     <section>
       <div v-if="currentVersionIndex > -1" class="create-version-popup"></div>
@@ -85,26 +105,35 @@
           <h3>New Version</h3>
 
           <div class="popup-icons">
-            <TrashIcon @click="deleteVersion" />
-            <SaveIcon @click="currentVersionIndex = -1" />
+            <TrashIcon title="Discard Version" @click="deleteVersion" />
+            <SaveIcon title="Save Version" @click="currentVersionIndex = -1" />
           </div>
         </div>
-        <label class="required" title="The title of your version">
+        <label
+          for="version-title"
+          class="required"
+          title="The title of your version"
+        >
           Version Title
         </label>
         <input
+          id="version-title"
           v-model="versions[currentVersionIndex].version_title"
+          required
           type="text"
           placeholder="Combat Update"
         />
         <label
+          for="version-number"
           class="required"
           title="The version number of this version. Preferably following semantic versioning"
         >
           Version Number
         </label>
         <input
+          id="version-number"
           v-model="versions[currentVersionIndex].version_number"
+          required
           type="text"
           placeholder="v1.9"
         />
@@ -163,8 +192,11 @@
           :hide-selected="true"
           placeholder="Choose versions..."
         />
-        <label title="A list of changes for this version"> Changelog </label>
+        <label for="version-body" title="A list of changes for this version">
+          Changelog
+        </label>
         <textarea
+          id="version-body"
           v-model="versions[currentVersionIndex].version_body"
           class="changelog-editor"
           placeholder="This editor supports markdown."
@@ -175,7 +207,8 @@
         <input
           id="version-files"
           type="file"
-          accept="image/x-png,image/gif,image/jpeg"
+          accept="application/java-archive,application/zip"
+          multiple
           @change="updateVersionFiles"
         />
         <label for="version-files">Upload files</label>
@@ -230,6 +263,9 @@
 import axios from 'axios'
 import Multiselect from 'vue-multiselect'
 
+import DOMPurify from 'dompurify'
+import marked from 'marked'
+
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 import EditIcon from '~/assets/images/utils/edit.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
@@ -367,10 +403,11 @@ export default {
       }
 
       this.versions[this.currentVersionIndex].file_parts = newFileParts
+
+      console.log(this.versions)
     },
     createVersion() {
       this.versions.push({
-        mod_id: 'qFcDZRhp',
         raw_files: [],
         file_parts: [],
         version_number: '',
@@ -383,11 +420,15 @@ export default {
       })
 
       this.currentVersionIndex = this.versions.length - 1
+      console.log(this.versions)
     },
     deleteVersion() {
       this.versions.splice(this.currentVersionIndex, 1)
       this.currentVersionIndex = -1
     },
+    setMarkdownBody() {
+      this.compiledBody = DOMPurify.sanitize(marked(this.body))
+    },
   },
   head() {
     return {
@@ -457,6 +498,7 @@ input {
     flex: 1;
 
     img {
+      image-rendering: crisp-edges;
       object-fit: cover;
       width: 100%;
       height: 85%;
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index 5111fb10..15370453 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -10,6 +10,7 @@
         :description="result.description"
         :latest-version="result.versions[0]"
         :created-at="result.published"
+        :updated-at="result.updated"
         :downloads="result.downloads.toString()"
         :icon-url="result.icon_url"
         :author-url="result.author_url"