From ce1786f128a190d7557c85466bc92cc4e41883dc Mon Sep 17 00:00:00 2001
From: Geometrically <jai.a@tuta.io>
Date: Thu, 14 Jan 2021 21:43:58 -0700
Subject: [PATCH] Version editing, user, mod, version deletion

---
 assets/styles/components.scss                 |   1 +
 components/ModPage.vue                        |   7 -
 nuxt.config.js                                |   1 +
 pages/dashboard/projects.vue                  |   6 +-
 pages/dashboard/settings.vue                  |  50 ++-
 pages/mod/_id/edit.vue                        |  19 +-
 pages/mod/_id/index.vue                       |  24 +-
 pages/mod/_id/newversion.vue                  | 339 ++++++++++++++++++
 pages/mod/_id/settings.vue                    |  75 ++++
 pages/mod/_id/version/_version/edit.vue       | 303 ++++++++++++++++
 .../{_version.vue => _version/index.vue}      | 118 ++++--
 pages/mod/_id/versions.vue                    | 256 +------------
 pages/mod/create.vue                          |   6 +
 13 files changed, 879 insertions(+), 326 deletions(-)
 create mode 100644 pages/mod/_id/newversion.vue
 create mode 100644 pages/mod/_id/version/_version/edit.vue
 rename pages/mod/_id/version/{_version.vue => _version/index.vue} (82%)

diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index e83f3fb9..e36763a7 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -79,6 +79,7 @@
 
   img {
     max-width: 100%;
+    height: auto;
   }
 
   pre {
diff --git a/components/ModPage.vue b/components/ModPage.vue
index 389758bd..bbe2b601 100644
--- a/components/ModPage.vue
+++ b/components/ModPage.vue
@@ -59,13 +59,6 @@
               <ExternalIcon />
               Source
             </a>
-            <nuxt-link
-              v-if="currentMember"
-              :to="'/mod/' + mod.id + '/edit'"
-              class="tab"
-            >
-              Edit
-            </nuxt-link>
             <nuxt-link
               v-if="currentMember"
               :to="'/mod/' + mod.id + '/settings'"
diff --git a/nuxt.config.js b/nuxt.config.js
index a6734a28..93c46f20 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -47,6 +47,7 @@ export default {
       },
       { hid: 'twitter:card', name: 'twitter:card', content: 'summary' },
       { hid: 'twitter:site', name: 'twitter:site', content: '@modrinth' },
+      { name: 'propeller', content: '9542802736cdc223303e7a97b071550c' },
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
diff --git a/pages/dashboard/projects.vue b/pages/dashboard/projects.vue
index 72aebac0..25808692 100644
--- a/pages/dashboard/projects.vue
+++ b/pages/dashboard/projects.vue
@@ -26,10 +26,10 @@
       :is-modrinth="true"
     >
       <nuxt-link
-        class="button buttonse column"
-        :to="'/mod/' + mod.id + '/edit'"
+        class="button buttons column"
+        :to="'/mod/' + mod.id + '/settings'"
       >
-        Edit
+        Settings
       </nuxt-link>
     </ModCard>
   </DashboardPage>
diff --git a/pages/dashboard/settings.vue b/pages/dashboard/settings.vue
index c178a190..4499ba25 100644
--- a/pages/dashboard/settings.vue
+++ b/pages/dashboard/settings.vue
@@ -5,7 +5,7 @@
       <h3 class="column-grow-1">Settings</h3>
       <button class="brand-button column" @click="editProfile">Save</button>
     </div>
-    <section class="essentials">
+    <section>
       <h3>Username</h3>
       <label>
         <span>
@@ -42,7 +42,7 @@
         <input v-model="bio" type="text" placeholder="Enter your bio" />
       </label>
     </section>
-    <section class="essentials pad-maker">
+    <section class="pad-maker">
       <h3>Theme</h3>
       <label>
         <span
@@ -58,7 +58,7 @@
         />
       </label>
     </section>
-    <section class="essentials pad-maker">
+    <section class="pad-maker">
       <h3>Authorization token</h3>
       <label>
         <span>
@@ -68,7 +68,7 @@
         <input
           type="button"
           class="button pad-rem"
-          value="Copy to clipboard"
+          value="Copy to Clipboard"
           @click="copyToken"
         />
       </label>
@@ -81,10 +81,25 @@
         <input
           type="button"
           class="button"
-          value="Revoke token"
+          value="Revoke Token"
           @click="gotoRevoke"
         />
       </label>
+      <h3>Delete your account</h3>
+      <label>
+        <span
+          >Clicking on this WILL delete your user. Do not click on this unless
+          you want your user deleted. If you delete your user, all attached data
+          will be removed from our servers. This cannot be reversed, so be
+          careful!</span
+        >
+        <input
+          type="button"
+          class="button"
+          value="Delete Account"
+          @click="deleteAccount"
+        />
+      </label>
     </section>
   </DashboardPage>
 </template>
@@ -169,6 +184,31 @@ export default {
         })
       }
 
+      this.$nuxt.$loading.finish()
+    },
+    async deleteAccount() {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
+      this.$nuxt.$loading.start()
+
+      try {
+        await axios.delete(
+          `https://api.modrinth.com/api/v1/user/${this.$auth.user.id}`,
+          config
+        )
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+      }
+
       this.$nuxt.$loading.finish()
     },
   },
diff --git a/pages/mod/_id/edit.vue b/pages/mod/_id/edit.vue
index 81a24da5..c3efdce2 100644
--- a/pages/mod/_id/edit.vue
+++ b/pages/mod/_id/edit.vue
@@ -3,6 +3,12 @@
     <div class="page-contents">
       <header class="columns">
         <h2 class="column-grow-1">Edit Mod</h2>
+        <nuxt-link
+          :to="'/mod/' + (mod.slug ? mod.slug : mod.id)"
+          class="button column"
+        >
+          Back
+        </nuxt-link>
         <button
           v-if="mod.status === 'rejected' || mod.status === 'draft'"
           title="Submit for Review"
@@ -174,9 +180,9 @@
         </span>
         <div class="columns">
           <div class="textarea-wrapper">
-            <textarea id="body" v-model="body"></textarea>
+            <textarea id="body" v-model="mod.body"></textarea>
           </div>
-          <div v-compiled-markdown="body" class="markdown-body"></div>
+          <div v-compiled-markdown="mod.body" class="markdown-body"></div>
         </div>
       </section>
       <section class="extra-links">
@@ -309,15 +315,12 @@ export default {
         name: mod.license.name,
       }
 
-      const reg = /.+?:\/\/.+?(\/.+?)(?:#|\?|$)/
-      const urlPath = reg.exec(mod.body_url)[1]
-      const res = await axios.get(
-        `https://modrinth-cdn.nyc3.digitaloceanspaces.com${urlPath}`
-      )
+      if (mod.body_url && !mod.body) {
+        mod.body = (await axios.get(mod.body_url)).data
+      }
 
       return {
         mod,
-        body: res.data,
         clientSideType: {
           label: mod.client_side,
           id: mod.client_side,
diff --git a/pages/mod/_id/index.vue b/pages/mod/_id/index.vue
index f524920f..a06f691a 100644
--- a/pages/mod/_id/index.vue
+++ b/pages/mod/_id/index.vue
@@ -5,7 +5,11 @@
     :members="members"
     :current-member="currentMember"
   >
-    <div v-compiled-markdown="body" v-highlightjs class="markdown-body"></div>
+    <div
+      v-compiled-markdown="mod.body"
+      v-highlightjs
+      class="markdown-body"
+    ></div>
   </ModPage>
 </template>
 
@@ -16,15 +20,6 @@ import ModPage from '@/components/ModPage'
 export default {
   components: { ModPage },
   auth: false,
-  async fetch() {
-    const reg = /.+?:\/\/.+?(\/.+?)(?:#|\?|$)/
-    const urlPath = reg.exec(this.mod.body_url)[1]
-    this.body = (
-      await axios.get(
-        `https://modrinth-cdn.nyc3.digitaloceanspaces.com${urlPath}`
-      )
-    ).data
-  },
   async asyncData(data) {
     const config = {
       headers: {
@@ -42,6 +37,10 @@ export default {
         )
       ).data
 
+      if (mod.body_url && !mod.body) {
+        mod.body = (await axios.get(mod.body_url)).data
+      }
+
       const [members, versions] = (
         await Promise.all([
           axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
@@ -90,11 +89,6 @@ export default {
       })
     }
   },
-  data() {
-    return {
-      body: '',
-    }
-  },
   head() {
     return {
       title: this.mod.title + ' - Modrinth',
diff --git a/pages/mod/_id/newversion.vue b/pages/mod/_id/newversion.vue
new file mode 100644
index 00000000..3f43b6f0
--- /dev/null
+++ b/pages/mod/_id/newversion.vue
@@ -0,0 +1,339 @@
+<template>
+  <ModPage
+    :mod="mod"
+    :versions="versions"
+    :members="members"
+    :current-member="currentMember"
+  >
+    <div class="new-version">
+      <div class="controls">
+        <button
+          class="brand-button"
+          title="Create version"
+          @click="createVersion"
+        >
+          Create version
+        </button>
+      </div>
+      <div class="main">
+        <h3>Name</h3>
+        <label>
+          <span>
+            This is what users will see first. Will default to version number
+          </span>
+          <input
+            v-model="createdVersion.version_title"
+            type="text"
+            placeholder="Enter the name"
+          />
+        </label>
+        <h3>Number</h3>
+        <label>
+          <span>
+            That's how your version will appear in mod lists and in URLs
+          </span>
+          <input
+            v-model="createdVersion.version_number"
+            type="text"
+            placeholder="Enter the number"
+          />
+        </label>
+        <h3>Channel</h3>
+        <label>
+          <span>
+            It is important to notify players and pack makers if the version is
+            stable
+          </span>
+          <multiselect
+            v-model="createdVersion.release_channel"
+            placeholder="Select one"
+            :options="['release', 'beta', 'alpha']"
+            :searchable="false"
+            :close-on-select="true"
+            :show-labels="false"
+            :allow-empty="false"
+          />
+        </label>
+        <h3>Loaders</h3>
+        <label>
+          <span>
+            Mark all loaders this version works with. It is essential for search
+          </span>
+          <multiselect
+            v-model="createdVersion.loaders"
+            :options="selectableLoaders"
+            :loading="selectableLoaders.length === 0"
+            :multiple="true"
+            :searchable="false"
+            :show-no-results="false"
+            :close-on-select="true"
+            :clear-on-select="false"
+            :show-labels="false"
+            :limit="6"
+            :hide-selected="true"
+            placeholder="Choose loaders..."
+          />
+        </label>
+        <h3>Game versions</h3>
+        <label>
+          <span>
+            Mark all game version this version supports. It is essential for
+            search
+          </span>
+          <multiselect
+            v-model="createdVersion.game_versions"
+            :options="selectableVersions"
+            :loading="selectableVersions.length === 0"
+            :multiple="true"
+            :searchable="true"
+            :show-no-results="false"
+            :close-on-select="false"
+            :clear-on-select="false"
+            :show-labels="false"
+            :limit="6"
+            :hide-selected="true"
+            placeholder="Choose versions..."
+          />
+        </label>
+        <h3>Files</h3>
+        <label>
+          <span>
+            You should upload a single JAR file. However, you are allowed to
+            upload multiple
+          </span>
+          <FileInput
+            accept="application/*"
+            multiple
+            prompt="Choose files or drag them here"
+            @change="updateVersionFiles"
+          />
+        </label>
+      </div>
+      <div class="changelog">
+        <h3>Changelog</h3>
+        <span>
+          Tell players and modpack makers what's new. It supports the same
+          markdown as description, but it is advisable not to be too creative
+          with it in changelogs
+        </span>
+        <div class="textarea-wrapper">
+          <textarea v-model="createdVersion.version_body"></textarea>
+        </div>
+      </div>
+    </div>
+  </ModPage>
+</template>
+<script>
+import axios from 'axios'
+
+import Multiselect from 'vue-multiselect'
+import ModPage from '~/components/ModPage'
+
+export default {
+  components: {
+    ModPage,
+    Multiselect,
+  },
+  async asyncData(data) {
+    const config = {
+      headers: {
+        Authorization: data.$auth.getToken('local')
+          ? data.$auth.getToken('local')
+          : '',
+      },
+    }
+
+    try {
+      const mod = (
+        await axios.get(
+          `https://api.modrinth.com/api/v1/mod/${data.params.id}`,
+          config
+        )
+      ).data
+
+      const [members, versions, selectableLoaders, selectableVersions] = (
+        await Promise.all([
+          axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
+          axios.get(
+            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+              mod.versions
+            )}`,
+            config
+          ),
+          axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
+          axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
+        ])
+      ).map((it) => it.data)
+
+      const users = (
+        await axios.get(
+          `https://api.modrinth.com/api/v1/users?ids=${JSON.stringify(
+            members.map((it) => it.user_id)
+          )}`,
+          config
+        )
+      ).data
+
+      users.forEach((it) => {
+        const index = members.findIndex((x) => x.user_id === it.id)
+        members[index].avatar_url = it.avatar_url
+        members[index].name = it.username
+      })
+
+      const currentMember = data.$auth.loggedIn
+        ? members.find((x) => x.user_id === data.$auth.user.id)
+        : null
+
+      return {
+        mod,
+        versions: versions.sort(
+          (a, b) =>
+            new Date(b.date_published).getTime() -
+            new Date(a.date_published).getTime()
+        ),
+        members,
+        selectableLoaders,
+        selectableVersions,
+        currentMember,
+      }
+    } catch {
+      data.error({
+        statusCode: 404,
+        message: 'Mod not found',
+      })
+    }
+  },
+  data() {
+    return {
+      createdVersion: {},
+    }
+  },
+  methods: {
+    async createVersion() {
+      this.$nuxt.$loading.start()
+
+      const formData = new FormData()
+      if (!this.createdVersion.version_title) {
+        this.createdVersion.version_title = this.createdVersion.version_number
+      }
+      this.createdVersion.mod_id = this.mod.id
+      this.createdVersion.dependencies = []
+      this.createdVersion.featured = false
+      formData.append('data', JSON.stringify(this.createdVersion))
+      if (this.createdVersion.raw_files) {
+        for (let i = 0; i < this.createdVersion.raw_files.length; i++) {
+          formData.append(
+            this.createdVersion.file_parts[i],
+            new Blob([this.createdVersion.raw_files[i]]),
+            this.createdVersion.raw_files[i].name
+          )
+        }
+      }
+      try {
+        await axios({
+          url: 'https://api.modrinth.com/api/v1/version',
+          method: 'POST',
+          data: formData,
+          headers: {
+            'Content-Type': 'multipart/form-data',
+            Authorization: this.$auth.getToken('local'),
+          },
+        })
+        await this.$router.go(null)
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+      }
+      this.$nuxt.$loading.finish()
+    },
+    updateVersionFiles(files) {
+      this.createdVersion.raw_files = files
+
+      const newFileParts = []
+      for (let i = 0; i < files.length; i++) {
+        newFileParts.push(files[i].name.concat('-' + i))
+      }
+
+      this.createdVersion.file_parts = newFileParts
+    },
+    async downloadFile(hash, url) {
+      await axios.get(
+        `https://api.modrinth.com/api/v1/version_file/${hash}/download`
+      )
+
+      const elem = document.createElement('a')
+      elem.download = hash
+      elem.href = url
+      elem.click()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  textarea {
+    flex: 1;
+    overflow-y: auto;
+    resize: none;
+    max-width: 100%;
+  }
+}
+
+.new-version {
+  @extend %card;
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+
+  display: grid;
+  grid-template:
+    'controls controls' auto
+    'main changelog' auto
+    / 5fr 4fr;
+  column-gap: var(--spacing-card-md);
+
+  .controls {
+    grid-area: controls;
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .main {
+    grid-area: main;
+  }
+
+  .changelog {
+    grid-area: changelog;
+    display: flex;
+    flex-direction: column;
+
+    .textarea-wrapper {
+      flex: 1;
+    }
+  }
+}
+
+label {
+  display: flex;
+
+  span {
+    flex: 2;
+    padding-right: var(--spacing-card-lg);
+  }
+
+  input,
+  .multiselect,
+  .input-group {
+    flex: 3;
+    height: fit-content;
+  }
+}
+</style>
diff --git a/pages/mod/_id/settings.vue b/pages/mod/_id/settings.vue
index 382c6872..818432f6 100644
--- a/pages/mod/_id/settings.vue
+++ b/pages/mod/_id/settings.vue
@@ -5,6 +5,39 @@
     :members="members.filter((it) => it.accepted)"
     :current-member="currentMember"
   >
+    <div class="section-header columns">
+      <h3 class="column-grow-1">General</h3>
+    </div>
+    <section>
+      <h3>Edit Mod</h3>
+      <label>
+        <span> This leads you to a page where you can edit your mod. </span>
+        <nuxt-link class="button" to="edit">Edit</nuxt-link>
+      </label>
+      <h3>Create Version</h3>
+      <label>
+        <span>
+          This leads to a page where you can create a version for your mod.
+        </span>
+        <nuxt-link class="button" to="newversion">Create Version</nuxt-link>
+      </label>
+      <h3>Delete Mod</h3>
+      <label>
+        <span>
+          Clicking on this WILL delete your mod. Do not click on this unless you
+          want your mod deleted. If you delete your mod, all versions and any
+          attatched data will be removed from our servers. This may break other
+          projects, so be careful!
+        </span>
+        <div
+          class="button"
+          :disabled="(currentMember.permissions & DELETE_MOD) !== DELETE_MOD"
+          @click="deleteMod"
+        >
+          Delete Mod
+        </div>
+      </label>
+    </section>
     <div class="section-header columns">
       <h3 class="column-grow-1">Team members</h3>
       <div class="column">
@@ -392,6 +425,18 @@ export default {
 
       this.$nuxt.$loading.finish()
     },
+    async deleteMod() {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
+      await axios.delete(
+        `https://api.modrinth.com/api/v1/mod/${this.mod.id}`,
+        config
+      )
+    },
   },
 }
 </script>
@@ -486,4 +531,34 @@ button {
     cursor: not-allowed !important;
   }
 }
+
+section {
+  @extend %card;
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+  margin-bottom: var(--spacing-card-md);
+
+  label {
+    display: flex;
+
+    span {
+      flex: 2;
+      padding-right: var(--spacing-card-lg);
+    }
+
+    input {
+      flex: 3;
+      height: fit-content;
+    }
+
+    div,
+    a {
+      text-align: center;
+      height: fit-content;
+      flex: 1;
+    }
+    div:hover {
+      cursor: pointer;
+    }
+  }
+}
 </style>
diff --git a/pages/mod/_id/version/_version/edit.vue b/pages/mod/_id/version/_version/edit.vue
new file mode 100644
index 00000000..afa825ef
--- /dev/null
+++ b/pages/mod/_id/version/_version/edit.vue
@@ -0,0 +1,303 @@
+<template>
+  <ModPage
+    :mod="mod"
+    :versions="versions"
+    :members="members"
+    :current-member="currentMember"
+  >
+    <div class="new-version">
+      <div class="controls">
+        <button class="brand-button" title="Save version" @click="saveVersion">
+          Save version
+        </button>
+      </div>
+      <div class="main">
+        <h3>Name</h3>
+        <label>
+          <span>
+            This is what users will see first. Will default to version number
+          </span>
+          <input
+            v-model="version.name"
+            type="text"
+            placeholder="Enter the name"
+          />
+        </label>
+        <h3>Number</h3>
+        <label>
+          <span>
+            That's how your version will appear in mod lists and in URLs
+          </span>
+          <input
+            v-model="version.version_number"
+            type="text"
+            placeholder="Enter the number"
+          />
+        </label>
+        <h3>Channel</h3>
+        <label>
+          <span>
+            It is important to notify players and pack makers if the version is
+            stable
+          </span>
+          <multiselect
+            v-model="version.version_type"
+            placeholder="Select one"
+            :options="['release', 'beta', 'alpha']"
+            :searchable="false"
+            :close-on-select="true"
+            :show-labels="false"
+            :allow-empty="false"
+          />
+        </label>
+        <h3>Loaders</h3>
+        <label>
+          <span>
+            Mark all loaders this version works with. It is essential for search
+          </span>
+          <multiselect
+            v-model="version.loaders"
+            :options="selectableLoaders"
+            :loading="selectableLoaders.length === 0"
+            :multiple="true"
+            :searchable="false"
+            :show-no-results="false"
+            :close-on-select="true"
+            :clear-on-select="false"
+            :show-labels="false"
+            :limit="6"
+            :hide-selected="true"
+            placeholder="Choose loaders..."
+          />
+        </label>
+        <h3>Game versions</h3>
+        <label>
+          <span>
+            Mark all game version this version supports. It is essential for
+            search
+          </span>
+          <multiselect
+            v-model="version.game_versions"
+            :options="selectableVersions"
+            :loading="selectableVersions.length === 0"
+            :multiple="true"
+            :searchable="true"
+            :show-no-results="false"
+            :close-on-select="false"
+            :clear-on-select="false"
+            :show-labels="false"
+            :limit="6"
+            :hide-selected="true"
+            placeholder="Choose versions..."
+          />
+        </label>
+      </div>
+      <div class="changelog">
+        <h3>Changelog</h3>
+        <span>
+          Tell players and modpack makers what's new. It supports the same
+          markdown as description, but it is advisable not to be too creative
+          with it in changelogs
+        </span>
+        <div class="textarea-wrapper">
+          <textarea v-model="version.changelog"></textarea>
+        </div>
+      </div>
+    </div>
+  </ModPage>
+</template>
+<script>
+import axios from 'axios'
+
+import ModPage from '@/components/ModPage'
+import Multiselect from 'vue-multiselect'
+
+export default {
+  components: {
+    ModPage,
+    Multiselect,
+  },
+  auth: false,
+  async asyncData(data) {
+    const config = {
+      headers: {
+        Authorization: data.$auth.getToken('local')
+          ? data.$auth.getToken('local')
+          : '',
+      },
+    }
+
+    try {
+      const mod = (
+        await axios.get(
+          `https://api.modrinth.com/api/v1/mod/${data.params.id}`,
+          config
+        )
+      ).data
+
+      const [members, versions, selectableLoaders, selectableVersions] = (
+        await Promise.all([
+          axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
+          axios.get(
+            `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+              mod.versions
+            )}`,
+            config
+          ),
+          axios.get(`https://api.modrinth.com/api/v1/tag/loader`),
+          axios.get(`https://api.modrinth.com/api/v1/tag/game_version`),
+        ])
+      ).map((it) => it.data)
+
+      const users = (
+        await axios.get(
+          `https://api.modrinth.com/api/v1/users?ids=${JSON.stringify(
+            members.map((it) => it.user_id)
+          )}`,
+          config
+        )
+      ).data
+
+      users.forEach((it) => {
+        const index = members.findIndex((x) => x.user_id === it.id)
+        members[index].avatar_url = it.avatar_url
+        members[index].name = it.username
+      })
+
+      const version = versions.find((x) => x.id === data.params.version)
+
+      version.author = members.find((x) => x.user_id === version.author_id)
+
+      let primaryFile = version.files.find((file) => file.primary)
+
+      if (!primaryFile) {
+        primaryFile = version.files[0]
+      }
+
+      const currentMember = data.$auth.loggedIn
+        ? members.find((x) => x.user_id === data.$auth.user.id)
+        : null
+
+      if (!version.changelog && version.changelog_url) {
+        version.changelog = (await axios.get(version.changelog_url)).data
+      }
+
+      return {
+        mod,
+        versions: versions.sort(
+          (a, b) =>
+            new Date(b.date_published).getTime() -
+            new Date(a.date_published).getTime()
+        ),
+        members,
+        version,
+        primaryFile,
+        currentMember,
+        selectableLoaders,
+        selectableVersions,
+      }
+    } catch {
+      data.error({
+        statusCode: 404,
+        message: 'Version not found',
+      })
+    }
+  },
+  methods: {
+    async saveVersion() {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local')
+            ? this.$auth.getToken('local')
+            : '',
+        },
+      }
+
+      this.$nuxt.$loading.start()
+
+      try {
+        await axios.patch(
+          `https://api.modrinth.com/api/v1/version/${this.version.id}`,
+          this.version,
+          config
+        )
+        await this.$router.replace(
+          `/mod/${this.mod.id}/version/${this.version.id}`
+        )
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+      }
+      this.$nuxt.$loading.finish()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  textarea {
+    flex: 1;
+    overflow-y: auto;
+    resize: none;
+    max-width: 100%;
+  }
+}
+
+.new-version {
+  @extend %card;
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+
+  display: grid;
+  grid-template:
+    'controls controls' auto
+    'main changelog' auto
+    / 5fr 4fr;
+  column-gap: var(--spacing-card-md);
+
+  .controls {
+    grid-area: controls;
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .main {
+    grid-area: main;
+  }
+
+  .changelog {
+    grid-area: changelog;
+    display: flex;
+    flex-direction: column;
+
+    .textarea-wrapper {
+      flex: 1;
+    }
+  }
+}
+
+label {
+  display: flex;
+
+  span {
+    flex: 2;
+    padding-right: var(--spacing-card-lg);
+  }
+
+  input,
+  .multiselect,
+  .input-group {
+    flex: 3;
+    height: fit-content;
+  }
+}
+</style>
diff --git a/pages/mod/_id/version/_version.vue b/pages/mod/_id/version/_version/index.vue
similarity index 82%
rename from pages/mod/_id/version/_version.vue
rename to pages/mod/_id/version/_version/index.vue
index 3aaac21b..1f693d43 100644
--- a/pages/mod/_id/version/_version.vue
+++ b/pages/mod/_id/version/_version/index.vue
@@ -21,17 +21,31 @@
           {{ version.version_number }}
         </span>
         <Categories :categories="version.loaders" />
-        <a
-          v-if="primaryFile"
-          :href="primaryFile.url"
-          class="download-button"
-          @click.prevent="
-            downloadFile(primaryFile.hashes.sha1, primaryFile.url)
-          "
-        >
-          <DownloadIcon />
-          Download
-        </a>
+        <div class="buttons">
+          <button class="action" @click="deleteVersion">
+            <TrashIcon />
+            Delete
+          </button>
+          <nuxt-link
+            v-if="currentMember"
+            class="action"
+            :to="version.id + '/edit'"
+          >
+            <EditIcon />
+            Edit
+          </nuxt-link>
+          <a
+            v-if="primaryFile"
+            :href="primaryFile.url"
+            class="action"
+            @click.prevent="
+              downloadFile(primaryFile.hashes.sha1, primaryFile.url)
+            "
+          >
+            <DownloadIcon />
+            Download
+          </a>
+        </div>
       </div>
       <div class="stats">
         <div class="stat">
@@ -67,7 +81,10 @@
           </div>
         </div>
       </div>
-      <div v-compiled-markdown="changelog" class="markdown-body"></div>
+      <div
+        v-compiled-markdown="version.changelog ? version.changelog : ''"
+        class="markdown-body"
+      ></div>
       <div class="files">
         <div v-for="file in version.files" :key="file.hashes.sha1" class="file">
           <div class="text-wrapper">
@@ -98,6 +115,8 @@ import ModPage from '@/components/ModPage'
 
 import Categories from '@/components/Categories'
 import FileInput from '@/components/FileInput'
+import TrashIcon from '~/assets/images/utils/trash.svg?inline'
+import EditIcon from '~/assets/images/utils/edit.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import TagIcon from '~/assets/images/utils/tag.svg?inline'
@@ -110,13 +129,10 @@ export default {
     DownloadIcon,
     CalendarIcon,
     TagIcon,
+    TrashIcon,
+    EditIcon,
   },
   auth: false,
-  async fetch() {
-    if (this.version.changelog_url) {
-      this.changelog = (await axios.get(this.version.changelog_url)).data
-    }
-  },
   async asyncData(data) {
     const config = {
       headers: {
@@ -175,6 +191,10 @@ export default {
         ? members.find((x) => x.user_id === data.$auth.user.id)
         : null
 
+      if (!version.changelog && version.changelog_url) {
+        version.changelog = (await axios.get(version.changelog_url)).data
+      }
+
       return {
         mod,
         versions: versions.sort(
@@ -196,7 +216,6 @@ export default {
   },
   data() {
     return {
-      changelog: '',
       filesToUpload: [],
     }
   },
@@ -212,6 +231,8 @@ export default {
       elem.click()
     },
     async deleteFile(hash) {
+      this.$nuxt.$loading.start()
+
       const config = {
         headers: {
           Authorization: this.$auth.getToken('local'),
@@ -222,8 +243,13 @@ export default {
         `https://api.modrinth.com/api/v1/version_file/${hash}`,
         config
       )
+
+      await this.$router.go(null)
+      this.$nuxt.$loading.finish()
     },
     async makePrimary(hash) {
+      this.$nuxt.$loading.start()
+
       const config = {
         headers: {
           Authorization: this.$auth.getToken('local'),
@@ -233,12 +259,13 @@ export default {
       await axios.patch(
         `https://api.modrinth.com/api/v1/version/${this.version.id}`,
         {
-          primary_file: {
-            sha1: hash,
-          },
+          primary_file: ['sha1', hash],
         },
         config
       )
+
+      await this.$router.go(null)
+      this.$nuxt.$loading.finish()
     },
     async addFiles(e) {
       this.filesToUpload = e.target.files
@@ -287,6 +314,23 @@ export default {
 
       this.$nuxt.$loading.finish()
     },
+    async deleteVersion() {
+      this.$nuxt.$loading.start()
+
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
+      await axios.delete(
+        `https://api.modrinth.com/api/v1/version/${this.version.id}`,
+        config
+      )
+
+      await this.$router.replace(`/mod/${this.mod.id}`)
+      this.$nuxt.$loading.finish()
+    },
   },
   head() {
     return {
@@ -350,23 +394,27 @@ export default {
       margin: auto 0.5rem auto 0;
     }
 
-    .download-button {
-      margin-left: auto;
-      padding: 0.5rem;
-      color: var(--color-button-text);
-      background-color: var(--color-button-bg);
-      justify-self: flex-end;
+    .buttons {
       display: flex;
-      align-items: center;
-      border-radius: var(--size-rounded-sm);
+      margin-left: auto;
 
-      &:hover,
-      &:focus {
-        background-color: var(--color-button-bg-hover);
-      }
+      .action {
+        padding: 0.5rem;
+        color: var(--color-button-text);
+        background-color: var(--color-button-bg);
+        display: flex;
+        align-items: center;
+        border-radius: var(--size-rounded-sm);
+        margin: 0 0 0 0.5rem;
 
-      svg {
-        margin-right: 0.25rem;
+        &:hover,
+        &:focus {
+          background-color: var(--color-button-bg-hover);
+        }
+
+        svg {
+          margin-right: 0.25rem;
+        }
       }
     }
   }
diff --git a/pages/mod/_id/versions.vue b/pages/mod/_id/versions.vue
index 968aad97..b2bbc8e7 100644
--- a/pages/mod/_id/versions.vue
+++ b/pages/mod/_id/versions.vue
@@ -68,159 +68,26 @@
         </tr>
       </tbody>
     </table>
-    <Popup
-      v-if="currentMember"
-      :show-popup="showPopup"
-      class="create-version-popup-body"
-    >
-      <h3>New Version</h3>
-      <label
-        for="version-title"
-        class="required"
-        title="The title of your version"
-      >
-        Version Title
-      </label>
-      <input
-        id="version-title"
-        v-model="createdVersion.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="createdVersion.version_number"
-        required
-        type="text"
-        placeholder="v1.9"
-      />
-      <label class="required" title="The release channel of this version.">
-        Release Channel
-      </label>
-      <Multiselect
-        v-model="createdVersion.release_channel"
-        class="categories-input"
-        placeholder="Select one"
-        :options="['release', 'beta', 'alpha']"
-        :searchable="false"
-        :close-on-select="true"
-        :show-labels="false"
-        :allow-empty="false"
-      />
-      <label
-        title="The version number of this version. Preferably following semantic versioning"
-      >
-        Mod Loaders
-      </label>
-      <multiselect
-        v-model="createdVersion.loaders"
-        class="categories-input"
-        :options="selectableLoaders"
-        :loading="selectableLoaders.length === 0"
-        :multiple="true"
-        :searchable="false"
-        :show-no-results="false"
-        :close-on-select="true"
-        :clear-on-select="false"
-        :show-labels="false"
-        :limit="6"
-        :hide-selected="true"
-        placeholder="Choose loaders..."
-      />
-      <label title="The versions of minecraft that this mod version supports">
-        Minecraft Versions
-      </label>
-      <multiselect
-        v-model="createdVersion.game_versions"
-        class="categories-input"
-        :options="selectableVersions"
-        :loading="selectableVersions.length === 0"
-        :multiple="true"
-        :searchable="true"
-        :show-no-results="false"
-        :close-on-select="false"
-        :clear-on-select="false"
-        :show-labels="false"
-        :limit="6"
-        :hide-selected="true"
-        placeholder="Choose versions..."
-      />
-      <label for="version-body" title="A list of changes for this version">
-        Changelog
-      </label>
-      <textarea
-        id="version-body"
-        v-model="createdVersion.version_body"
-        class="changelog-editor"
-      />
-      <FileInput
-        input-id="version-files"
-        accept="application/java-archive,application/zip"
-        default-text="Upload Files"
-        :input-multiple="true"
-        @change="updateVersionFiles"
-      >
-        <label class="required" title="The files associated with the version">
-          Version Files
-        </label>
-      </FileInput>
-
-      <div class="popup-buttons">
-        <button
-          class="trash-button"
-          @click="
-            showPopup = false
-            createdVersion = {}
-          "
-        >
-          <TrashIcon />
-        </button>
-        <button class="default-button" @click="createVersion">
-          Create Version
-        </button>
-      </div>
-    </Popup>
-    <button
-      v-if="currentMember"
-      class="default-button"
-      @click="showPopup = !showPopup"
-    >
+    <nuxt-link v-if="currentMember" to="newversion" class="button">
       New Version
-    </button>
+    </nuxt-link>
   </ModPage>
 </template>
 <script>
 import axios from 'axios'
 
-import Multiselect from 'vue-multiselect'
-
 import ModPage from '@/components/ModPage'
 
-import Popup from '@/components/Popup'
-import FileInput from '@/components/FileInput'
-import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
 import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
 
 export default {
   components: {
-    Multiselect,
-    FileInput,
-    Popup,
     ModPage,
     ForgeIcon,
     FabricIcon,
     DownloadIcon,
-    TrashIcon,
   },
   auth: false,
   async asyncData(data) {
@@ -292,68 +159,7 @@ export default {
       })
     }
   },
-  data() {
-    return {
-      showPopup: false,
-      createdVersion: {},
-    }
-  },
   methods: {
-    updateVersionFiles(files) {
-      this.createdVersion.raw_files = files
-
-      const newFileParts = []
-      for (let i = 0; i < files.length; i++) {
-        newFileParts.push(files[i].name.concat('-' + i))
-      }
-
-      this.createdVersion.file_parts = newFileParts
-    },
-    async createVersion() {
-      this.$nuxt.$loading.start()
-
-      const formData = new FormData()
-
-      this.createdVersion.mod_id = this.mod.id
-      this.createdVersion.dependencies = []
-      this.createdVersion.featured = false
-
-      formData.append('data', JSON.stringify(this.createdVersion))
-
-      if (this.createdVersion.raw_files) {
-        for (let i = 0; i < this.createdVersion.raw_files.length; i++) {
-          formData.append(
-            this.createdVersion.file_parts[i],
-            new Blob([this.createdVersion.raw_files[i]]),
-            this.createdVersion.raw_files[i].name
-          )
-        }
-      }
-
-      try {
-        await axios({
-          url: 'https://api.modrinth.com/api/v1/version',
-          method: 'POST',
-          data: formData,
-          headers: {
-            'Content-Type': 'multipart/form-data',
-            Authorization: this.$auth.getToken('local'),
-          },
-        })
-
-        await this.$router.go(null)
-      } catch (err) {
-        this.$notify({
-          group: 'main',
-          title: 'An Error Occurred',
-          text: err.response.data.description,
-          type: 'error',
-        })
-        window.scrollTo({ top: 0, behavior: 'smooth' })
-      }
-
-      this.$nuxt.$loading.finish()
-    },
     findPrimary(version) {
       let file = version.files.find((x) => x.primary)
 
@@ -487,65 +293,9 @@ table {
     }
   }
 }
-.multiselect {
-  margin-bottom: 20px;
-}
 
-input {
-  width: calc(100% - 15px);
-  padding: 0.5rem 5px;
-  margin-bottom: 20px;
-}
-
-.changelog-editor {
-  padding: 20px;
-  width: calc(100% - 40px);
-  height: 200px;
-  resize: none;
-  outline: none;
-  border: none;
-  margin: 10px 0 30px;
-  background-color: var(--color-button-bg);
-  color: var(--color-text);
-  font-family: monospace;
-}
-
-.popup-buttons {
-  margin-top: 20px;
-  display: flex;
-  justify-content: right;
-  align-items: center;
-
-  .default-button {
-    float: none;
-    margin-top: 0;
-  }
-
-  .trash-button {
-    cursor: pointer;
-    margin-right: 10px;
-    padding: 5px;
-    border: none;
-    border-radius: var(--size-rounded-sm);
-    color: #9b2c2c;
-    background-color: var(--color-bg);
-  }
-}
-
-.default-button {
+.button {
   float: right;
-  margin-top: 20px;
-  border-radius: var(--size-rounded-sm);
-  cursor: pointer;
-  border: none;
-  padding: 10px;
-  background-color: var(--color-button-bg);
-  color: var(--color-button-text);
-
-  &:hover,
-  &:focus {
-    background-color: var(--color-button-bg-hover);
-  }
 }
 
 @media screen and (max-width: 400px) {
diff --git a/pages/mod/create.vue b/pages/mod/create.vue
index d4b48447..ac9e2c5a 100644
--- a/pages/mod/create.vue
+++ b/pages/mod/create.vue
@@ -556,6 +556,12 @@ export default {
     async createMod() {
       this.$nuxt.$loading.start()
 
+      for (const version of this.versions) {
+        if (!version.version_title) {
+          version.version_title = version.version_number
+        }
+      }
+
       const formData = new FormData()
 
       formData.append(