Teams (#64)

* Teams

* Fix errors on versions with no files

pages/dashboard/misc/revoke-token.vue

@@ -42,8 +42,8 @@
         >
       </p>
       <button @click="logout">Continue</button>
-    </section></DashboardPage
-  >
+    </section>
+  </DashboardPage>
 </template>
 
 <script>
@@ -54,8 +54,8 @@ export default {
   },
   methods: {
     async logout() {
-      await this.$auth. setToken('local', false)
-      await this.$router.go(
+      await this.$auth.setToken('local', false)
+      await this.$router.replace(
         'https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com/'
       )
     },

pages/dashboard/notifications.vue

@@ -0,0 +1,146 @@
+<template>
+  <DashboardPage>
+    <div class="section-header columns">
+      <h3 class="column-grow-1">My invites</h3>
+    </div>
+    <div v-for="invite in invites" :key="invite.team_id" class="invite columns">
+      <div class="text">
+        <p>
+          Invite to join <strong>{{ invite.username }}'s</strong> team.
+        </p>
+      </div>
+      <div class="actions">
+        <button @click="declineInvite(invite.team_id)">Decline</button>
+        <button @click="acceptInvite(invite.team_id)">Accept</button>
+      </div>
+    </div>
+  </DashboardPage>
+</template>
+
+<script>
+import axios from 'axios'
+import DashboardPage from '@/components/DashboardPage'
+
+export default {
+  components: {
+    DashboardPage,
+  },
+  async asyncData(data) {
+    const config = {
+      headers: {
+        Authorization: data.$auth.getToken('local')
+          ? data.$auth.getToken('local')
+          : '',
+      },
+    }
+
+    const teams = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/user/${data.$auth.user.id}/teams`,
+        config
+      )
+    ).data.filter((it) => !it.accepted)
+
+    const members = (
+      await Promise.all(
+        teams.map((it) =>
+          axios.get(
+            `https://api.modrinth.com/api/v1/team/${it.team_id}/members`,
+            config
+          )
+        )
+      )
+    ).map((it) => it.data)
+
+    const invites = []
+
+    for (let i = 0; i++; i < members.length) {
+      const owner = members[i].find((it) => it.role === 'Owner')
+
+      const ownerData = (
+        await axios.get(
+          `https://api.modrinth.com/api/v1/user/${owner.id}`,
+          config
+        )
+      ).data
+
+      invites.push({
+        team_id: owner.team_id,
+        username: ownerData.username,
+      })
+    }
+
+    return {
+      invites,
+    }
+  },
+  methods: {
+    async acceptInvite(teamId) {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
+      this.$nuxt.$loading.start()
+
+      try {
+        await axios.post(
+          `https://api.modrinth.com/api/v1/team/${teamId}/join`,
+          config
+        )
+        await this.$router.go(null)
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+      }
+
+      this.$nuxt.$loading.finish()
+    },
+    async declineInvite(teamId) {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
+      this.$nuxt.$loading.start()
+
+      try {
+        await axios.delete(
+          `https://api.modrinth.com/api/v1/team/${teamId}/members/${this.$auth.user.id}`,
+          config
+        )
+        await this.$router.go(null)
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+      }
+
+      this.$nuxt.$loading.finish()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.invite {
+  @extend %card;
+  padding: var(--spacing-card-sm) var(--spacing-card-lg);
+  margin-bottom: var(--spacing-card-sm);
+  align-items: center;
+  justify-content: space-between;
+
+  p {
+    margin: 0;
+  }
+}
+</style>

pages/mod/_id/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <ModPage :mod="mod" :versions="versions" :members="members">
+  <ModPage
+    :mod="mod"
+    :versions="versions"
+    :members="members"
+    :current-member="currentMember"
+  >
     <div v-compiled-markdown="body" class="markdown-body"></div>
   </ModPage>
 </template>
@@ -51,15 +56,20 @@ export default {
       )
     ).data
 
-    users.forEach((it, index) => {
+    users.reverse().forEach((it, index) => {
       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.reverse(),
       members,
+      currentMember,
     }
   },
   data() {

pages/mod/_id/settings.vue

@@ -1,13 +1,215 @@
 <template>
-  <ModPage :mod="mod" :versions="versions" :members="members"> </ModPage>
+  <ModPage
+    :mod="mod"
+    :versions="versions"
+    :members="members.filter((it) => it.accepted)"
+    :current-member="currentMember"
+  >
+    <div class="section-header columns">
+      <h3 class="column-grow-1">Team members</h3>
+      <div class="column">
+        <input
+          id="username"
+          v-model="currentUsername"
+          type="text"
+          placeholder="Username"
+        />
+        <label for="username" class="hidden">Username</label>
+        <button class="brand-button column" @click="inviteTeamMember">
+          Invite
+        </button>
+      </div>
+    </div>
+    <div
+      v-for="(member, index) in members"
+      :key="member.user_id"
+      class="member"
+      :class="{ open: openTeamMembers.includes(member.user_id) }"
+    >
+      <div class="member-header">
+        <div class="info">
+          <img :src="member.avatar_url" :alt="member.name" />
+          <div class="text">
+            <h4>{{ member.name }}</h4>
+            <h3>{{ member.role }}</h3>
+          </div>
+        </div>
+        <div class="side-buttons">
+          <span v-if="member.accepted" class="badge green">Accepted</span>
+          <span v-else class="badge yellow">Pending</span>
+          <button
+            class="dropdown-icon"
+            @click="
+              openTeamMembers.indexOf(member.user_id) === -1
+                ? openTeamMembers.push(member.user_id)
+                : (openTeamMembers = openTeamMembers.filter(
+                    (it) => it !== member.user_id
+                  ))
+            "
+          >
+            <DropdownIcon />
+          </button>
+        </div>
+      </div>
+      <div class="content">
+        <div class="main-info">
+          <label>
+            Role:
+            <input
+              v-model="members[index].role"
+              type="text"
+              :disabled="
+                member.role === 'Owner' ||
+                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
+              "
+            />
+          </label>
+        </div>
+        <h3>Permissions</h3>
+        <div class="permissions">
+          <label>
+            <input
+              type="checkbox"
+              :checked="
+                (member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION
+              "
+              :disabled="
+                member.role === 'Owner' ||
+                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+                (currentMember.permissions & UPLOAD_VERSION) !== UPLOAD_VERSION
+              "
+              @change="members[index].permissions ^= UPLOAD_VERSION"
+            />
+            Upload Version
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              :checked="
+                (member.permissions & DELETE_VERSION) === DELETE_VERSION
+              "
+              :disabled="
+                member.role === 'Owner' ||
+                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+                (currentMember.permissions & DELETE_VERSION) !== DELETE_VERSION
+              "
+              @change="members[index].permissions ^= DELETE_VERSION"
+            />
+            Delete Version
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              :checked="(member.permissions & EDIT_DETAILS) === EDIT_DETAILS"
+              :disabled="
+                member.role === 'Owner' ||
+                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+                (currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS
+              "
+              @change="members[index].permissions ^= EDIT_DETAILS"
+            />
+            Edit Details
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              :checked="(member.permissions & EDIT_BODY) === EDIT_BODY"
+              :disabled="
+                member.role === 'Owner' ||
+                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+                (currentMember.permissions & EDIT_BODY) !== EDIT_BODY
+              "
+              @change="members[index].permissions ^= EDIT_BODY"
+            />
+            Edit Body
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              :checked="
+                (member.permissions & MANAGE_INVITES) === MANAGE_INVITES
+              "
+              :disabled="
+                member.role === 'Owner' ||
+                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+                (currentMember.permissions & MANAGE_INVITES) !== MANAGE_INVITES
+              "
+              @change="members[index].permissions ^= MANAGE_INVITES"
+            />
+            Manage Invites
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              :checked="(member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER"
+              :disabled="
+                member.role === 'Owner' ||
+                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+                (currentMember.permissions & REMOVE_MEMBER) !== REMOVE_MEMBER
+              "
+              @change="members[index].permissions ^= REMOVE_MEMBER"
+            />
+            Remove Member
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              :checked="(member.permissions & EDIT_MEMBER) === EDIT_MEMBER"
+              :disabled="
+                member.role === 'Owner' ||
+                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
+              "
+              @change="members[index].permissions ^= EDIT_MEMBER"
+            />
+            Edit Member
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              :checked="(member.permissions & DELETE_MOD) === DELETE_MOD"
+              :disabled="
+                member.role === 'Owner' ||
+                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+                (currentMember.permissions & DELETE_MOD) !== DELETE_MOD
+              "
+              @change="members[index].permissions ^= DELETE_MOD"
+            />
+            Delete Mod
+          </label>
+        </div>
+        <div class="actions">
+          <button
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
+            "
+            @click="removeTeamMember(index)"
+          >
+            Remove Member
+          </button>
+          <button
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
+            "
+            @click="updateTeamMember(index)"
+          >
+            Save Changes
+          </button>
+        </div>
+      </div>
+    </div>
+  </ModPage>
 </template>
 
 <script>
 import axios from 'axios'
 import ModPage from '@/components/ModPage'
 
+import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
+
 export default {
-  components: { ModPage },
+  components: { ModPage, DropdownIcon },
   async asyncData(data) {
     const config = {
       headers: {
@@ -24,9 +226,8 @@ export default {
       )
     ).data
 
-    const [members, allMembers, versions] = (
+    const [members, versions] = (
       await Promise.all([
-        axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
         axios.get(
           `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
           config
@@ -40,7 +241,7 @@ export default {
       ])
     ).map((it) => it.data)
 
-    const [users, allUsers] = (
+    const [users] = (
       await Promise.all([
         axios.get(
           `https://api.modrinth.com/api/v1/users?ids=${JSON.stringify(
@@ -48,44 +249,229 @@ export default {
           )}`,
           config
         ),
-        axios.get(
-          `https://api.modrinth.com/api/v1/users?ids=${JSON.stringify(
-            allMembers.map((it) => it.user_id)
-          )}`,
-          config
-        ),
       ])
     ).map((it) => it.data)
 
-    users.forEach((it, index) => {
+    users.reverse().forEach((it, index) => {
       members[index].avatar_url = it.avatar_url
       members[index].name = it.username
     })
 
-    allUsers.forEach((it, index) => {
-      allMembers[index].avatar_url = it.avatar_url
-      allMembers[index].name = it.username
-      allMembers[index].accepted = members.find(
-        (it) => allMembers[index].user_id === it.user_id
-      )
-    })
+    const currentMember = data.$auth.loggedIn
+      ? members.find((x) => x.user_id === data.$auth.user.id)
+      : null
 
     return {
       mod,
       versions: versions.reverse(),
       members,
-      allMembers,
-      allUsers,
+      currentMember,
     }
   },
+  data() {
+    return {
+      currentUsername: '',
+      openTeamMembers: [],
+    }
+  },
+  created() {
+    this.UPLOAD_VERSION = 1 << 0
+    this.DELETE_VERSION = 1 << 1
+    this.EDIT_DETAILS = 1 << 2
+    this.EDIT_BODY = 1 << 3
+    this.MANAGE_INVITES = 1 << 4
+    this.REMOVE_MEMBER = 1 << 5
+    this.EDIT_MEMBER = 1 << 6
+    this.DELETE_MOD = 1 << 7
+  },
+  methods: {
+    async inviteTeamMember() {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
+      this.$nuxt.$loading.start()
+
+      try {
+        const user = (
+          await axios.get(
+            `https://api.modrinth.com/api/v1/user/${this.currentUsername}`
+          )
+        ).data
+
+        const data = {
+          user_id: user.id,
+        }
+
+        await axios.post(
+          `https://api.modrinth.com/api/v1/team/${this.mod.team}/members`,
+          data,
+          config
+        )
+        await this.$router.go(null)
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+      }
+
+      this.$nuxt.$loading.finish()
+    },
+    async removeTeamMember(index) {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
+      this.$nuxt.$loading.start()
+
+      try {
+        await axios.delete(
+          `https://api.modrinth.com/api/v1/team/${this.mod.team}/members/${this.members[index].user_id}`,
+          config
+        )
+        await this.$router.go(null)
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+      }
+
+      this.$nuxt.$loading.finish()
+    },
+    async updateTeamMember(index) {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local'),
+        },
+      }
+
+      this.$nuxt.$loading.start()
+
+      try {
+        const data = {
+          permissions: this.members[index].permissions,
+          role: this.members[index].role,
+        }
+
+        await axios.patch(
+          `https://api.modrinth.com/api/v1/team/${this.mod.team}/members/${this.members[index].user_id}`,
+          data,
+          config
+        )
+        await this.$router.go(null)
+      } catch (err) {
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
+      }
+
+      this.$nuxt.$loading.finish()
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.markdown-body {
-  padding: 1rem;
+.section-header {
+  @extend %card;
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
   margin-bottom: var(--spacing-card-md);
-  background: var(--color-raised-bg);
-  border-radius: var(--size-rounded-card);
+  h3 {
+    margin: auto 0;
+    color: var(--color-text-dark);
+    font-weight: var(--font-weight-extrabold);
+  }
+}
+
+.member {
+  @extend %card;
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+  margin-bottom: var(--spacing-card-md);
+
+  .member-header {
+    display: flex;
+    justify-content: space-between;
+    .info {
+      display: flex;
+      img {
+        border-radius: var(--size-rounded-icon);
+        height: 50px;
+        width: 50px;
+      }
+      .text {
+        margin: auto 0 auto 0.5rem;
+        h4 {
+          font-weight: normal;
+          margin: 0;
+        }
+        h3 {
+          text-transform: uppercase;
+          margin-top: 0.1rem;
+          margin-bottom: 0;
+          font-size: var(--font-size-sm);
+          font-weight: var(--font-weight-extrabold);
+          letter-spacing: 0.02rem;
+        }
+      }
+    }
+    .side-buttons {
+      display: flex;
+      align-items: center;
+      .dropdown-icon {
+        margin-left: 1rem;
+        cursor: pointer;
+        color: var(--color-text-dark);
+        background-color: unset;
+        transition: 150ms ease transform;
+        padding: unset;
+      }
+    }
+  }
+
+  .content {
+    display: none;
+
+    .main-info {
+      margin-bottom: var(--spacing-card-lg);
+    }
+    .permissions {
+      margin: 1rem 0;
+      display: grid;
+      grid-template-columns: 10rem 10rem 10rem;
+      grid-template-rows: 1.5rem 1.5rem 1.5rem;
+    }
+  }
+
+  &.open {
+    .member-header {
+      .dropdown-icon {
+        transform: rotate(180deg);
+      }
+    }
+    .content {
+      display: unset;
+      margin: var(--spacing-card-lg);
+    }
+  }
+}
+
+input,
+button {
+  &:disabled {
+    cursor: not-allowed !important;
+  }
 }
 </style>

pages/mod/_id/version/_version.vue

@@ -1,5 +1,10 @@
 <template>
-  <ModPage :mod="mod" :versions="versions" :members="members">
+  <ModPage
+    :mod="mod"
+    :versions="versions"
+    :members="members"
+    :current-member="currentMember"
+  >
     <div class="version">
       <div class="version-header">
         <h4>{{ version.name }}</h4>
@@ -17,6 +22,7 @@
         </span>
         <Categories :categories="version.loaders" />
         <a
+          v-if="primaryFile"
           :href="primaryFile.url"
           class="download-button"
           @click.prevent="
@@ -63,16 +69,10 @@
       </div>
       <div v-compiled-markdown="changelog" class="markdown-body"></div>
       <div class="files">
-        <div v-for="file in version.files" :key="file.hashes.sha1">
+        <div v-for="file in version.files" :key="file.hashes.sha1" class="file">
           <div class="text-wrapper">
             <p>{{ file.filename }}</p>
-            <div
-              v-if="
-                $auth.loggedIn &&
-                members.find((x) => x.user_id === $auth.user.id)
-              "
-              class="actions"
-            >
+            <div v-if="currentMember" class="actions">
               <button @click="deleteFile(file.hashes.sha1)">Delete File</button>
               <button @click="makePrimary(file.hashes.sha1)">
                 Make Primary
@@ -87,13 +87,7 @@
           </a>
         </div>
       </div>
-      <FileInput
-        v-if="
-          $auth.loggedIn && members.find((x) => x.user_id === $auth.user.id)
-        "
-        class="file-input"
-        @change="addFiles"
-      />
+      <FileInput v-if="currentMember" class="file-input" @change="addFiles" />
     </div>
   </ModPage>
 </template>
@@ -160,7 +154,7 @@ export default {
       )
     ).data
 
-    users.forEach((it, index) => {
+    users.reverse().forEach((it, index) => {
       members[index].avatar_url = it.avatar_url
       members[index].name = it.username
     })
@@ -175,12 +169,17 @@ export default {
       primaryFile = version.files[0]
     }
 
+    const currentMember = data.$auth.loggedIn
+      ? members.find((x) => x.user_id === data.$auth.user.id)
+      : null
+
     return {
       mod,
       versions,
       members,
       version,
       primaryFile,
+      currentMember,
     }
   },
   data() {
@@ -367,11 +366,11 @@ export default {
   .files {
     display: flex;
 
-    div {
+    .file {
       display: flex;
       margin-right: 0.5rem;
-      background: var(--color-bg);
       border-radius: var(--size-rounded-control);
+      border: 1px solid var(--color-divider);
 
       .text-wrapper {
         display: flex;

pages/mod/_id/versions.vue

@@ -1,5 +1,10 @@
 <template>
-  <ModPage :mod="mod" :versions="versions" :members="members">
+  <ModPage
+    :mod="mod"
+    :versions="versions"
+    :members="members"
+    :current-member="currentMember"
+  >
     <table>
       <thead>
         <tr>
@@ -64,10 +69,7 @@
       </tbody>
     </table>
     <Popup
-      v-if="
-        this.$auth.loggedIn &&
-        members.find((x) => x.user_id === this.$auth.user.id)
-      "
+      v-if="currentMember"
       :show-popup="showPopup"
       class="create-version-popup-body"
     >
@@ -187,10 +189,7 @@
       </div>
     </Popup>
     <button
-      v-if="
-        this.$auth.loggedIn &&
-        members.find((x) => x.user_id === this.$auth.user.id)
-      "
+      v-if="currentMember"
       class="default-button"
       @click="showPopup = !showPopup"
     >
@@ -263,17 +262,22 @@ export default {
       )
     ).data
 
-    users.forEach((it, index) => {
+    users.reverse().forEach((it, index) => {
       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.reverse(),
       members,
       selectableLoaders,
       selectableVersions,
+      currentMember,
     }
   },
   data() {

pages/mod/create.vue

@@ -581,7 +581,7 @@ export default {
           discord_url: this.discord_url,
           client_side: this.clientSideType.id,
           server_side: this.serverSideType.id,
-          license_id: this.license.short,
+          license_id: this.license ? this.license.short : null,
           license_url: this.license_url,
           is_draft: this.draft,
         })