From e8ad61aa9555586b22ca23b27f2bb7a29e619e6f Mon Sep 17 00:00:00 2001
From: Troplo <troplo@troplo.com>
Date: Sun, 22 Nov 2020 23:08:41 +1100
Subject: [PATCH] Team Invites

---
 frontend/src/App.vue                          |  5 ++-
 frontend/src/components/routes/Team.vue       | 12 ++---
 frontend/src/components/routes/TeamInvite.vue | 45 ++++++++++++++++++-
 frontend/src/components/routes/TeamWall.vue   | 12 +----
 frontend/src/components/routes/Teams.vue      |  2 +
 models/team_invite.js                         |  1 +
 routes/team.js                                |  2 +-
 7 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 36dd9dd..1e05e3e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -736,7 +736,7 @@ blockquote {
             <b-navbar-item v-if="!$store.state.koins"><b>
               <i class="fas fa-circle-notch fa-spin"></i> Loading...
             </b></b-navbar-item>
-            <b-navbar-item style="background: transparent; ">
+            <b-navbar-item style="background: transparent; " tag="div">
               <NotificationButton class="is-hidden-mobile"></NotificationButton>
             </b-navbar-item>
             <b-navbar-item tag="div">
@@ -769,13 +769,14 @@ blockquote {
                   <b-navbar-item @click="switchUser('user1')" v-if="$store.state.availableUsers.user1.username">{{$store.state.availableUsers.user1.username}}</b-navbar-item>
                   <b-navbar-item @click="switchUser('user2')" v-if="$store.state.availableUsers.user2.username">{{$store.state.availableUsers.user2.username}}</b-navbar-item>
                   <b-navbar-item @click="switchUser('user3')" v-if="$store.state.availableUsers.user3.username">{{$store.state.availableUsers.user3.username}}</b-navbar-item>
+                  <b-navbar-item @click="switchUser('user3')" v-if="$store.state.availableUsers.user3.username">{{$store.state.availableUsers.user3.username}}</b-navbar-item>
                   <b-navbar-item @click="showAccountModalTab(1)">Add another user</b-navbar-item>
                   <b-navbar-item @click="logoutAll">Logout all users</b-navbar-item>
                   <b-navbar-item @click="reload()">Not seeing any users?</b-navbar-item>
                 </div>
               </div>
             </b-navbar-item>
-            <b-navbar-item style="background: transparent; ">
+            <b-navbar-item style="background: transparent; " tag="div">
               <search-box class="kave-search" header-bar='true'></search-box>
             </b-navbar-item>
           </template>
diff --git a/frontend/src/components/routes/Team.vue b/frontend/src/components/routes/Team.vue
index 23b2a04..0587f77 100644
--- a/frontend/src/components/routes/Team.vue
+++ b/frontend/src/components/routes/Team.vue
@@ -69,11 +69,13 @@
       <div class="columns is-mobile is-multiline">
         <div class="column is-2">
           <figure class="image is-256 is-centered">
-            <img class="team-img" v-if="user.picture !== 'default' && user.approved" width="256px" height="256px" :src="user.picture">
-            <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="256px" height="256px" src="https://cdn.kaverti.com/teams/unknown-light.png">
-            <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="256px" height="256px" src="https://cdn.kaverti.com/teams/unknown-dark.png">
-            <img class="team-img" v-if="$store.state.theme === 'light' && !user.approved" width="256px" height="256px" src="https://cdn.kaverti.com/teams/pending-light.png">
-            <img class="team-img" v-if="$store.state.theme === 'dark' && !user.approved" width="256px" height="256px" src="https://cdn.kaverti.com/teams/pending-dark.png">
+            <img class="team-img" v-if="user.picture !== 'default' && user.approved" width="128px" height="128px" :src="user.picture">
+            <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
+            <img class="team-img" v-if="user.picture === 'default' && !$store.state.theme && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
+            <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-dark.png">
+            <img class="team-img" v-if="$store.state.theme === 'light' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
+            <img class="team-img" v-if="!$store.state.theme && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
+            <img class="team-img" v-if="$store.state.theme === 'dark' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-dark.png">
           </figure>
         </div>
         <div class="column is-7">
diff --git a/frontend/src/components/routes/TeamInvite.vue b/frontend/src/components/routes/TeamInvite.vue
index 058f51e..9ac1ed1 100644
--- a/frontend/src/components/routes/TeamInvite.vue
+++ b/frontend/src/components/routes/TeamInvite.vue
@@ -1,5 +1,38 @@
 <template>
   <main>
+    <modal-window v-model='showRoleInfo' :loading='loading' style='z-index: 99; '>
+      <div slot="header">
+        Viewing {{team.Role.name}}&nbsp;<b-tooltip class="is-info" label="You are viewing the permissions that this Auto Role provides">
+        <b-tag class="is-info" rounded><i class="fas fa-info-circle"></i></b-tag>
+      </b-tooltip>
+      </div>
+      <div slot='main' class="card-content">
+        <div>
+          <p>Permissions:</p>
+          <b-switch type="is-info" disabled v-model="team.Role.administrator">
+            Administrator
+          </b-switch>
+          <b-switch type="is-info" disabled v-model="team.Role.inviteUsers">
+            Invite users
+          </b-switch>
+          <b-switch type="is-info" disabled v-model="team.Role.changeTeamMeta">
+            Modify general Team settings
+          </b-switch>
+          <b-switch type="is-info" disabled v-model="team.Role.forumAdministrator">
+            Modify Team Forum <b-tooltip class="is-info" label="Team forums are coming soon, you can set this for the future when they do release."><b-tag class="is-info" rounded><i class="fas fa-info-circle"></i></b-tag></b-tooltip>
+          </b-switch>
+          <b-switch type="is-info" disabled v-model="team.Role.moderateForumThreads">
+            Forum moderator <b-tooltip class="is-info" label="Team forums are coming soon, you can set this for the future when they do release. This role only allows people with the permission to delete threads and posts, not have access to forum settings"><b-tag class="is-info" rounded><i class="fas fa-info-circle"></i></b-tag></b-tooltip>
+          </b-switch>
+          <b-switch type="is-info" disabled v-model="team.Role.submitTeamItems">
+            Submit Marketplace items <b-tooltip class="is-info" label="Team Marketplace items are coming soon, you can set this for the future when they do release."><b-tag class="is-info" rounded><i class="fas fa-info-circle"></i></b-tag></b-tooltip>
+          </b-switch>
+        </div>
+      </div>
+      <div slot='footer'>
+        <button class='button is-info' :loading="team.Role.loading" @click='showRoleInfo = false'>Got it!</button>
+      </div>
+    </modal-window>
     <section class="hero is-info is-large">
       <div class="hero-body">
         <div class="container" v-if="!expired && !loading">
@@ -7,8 +40,11 @@
             You have been invited to:
           </h2>
           <h1>
-            {{ team.name }}
+            {{ team.Team.name }}
           </h1>
+          <h2>by {{team.User.username}}</h2>
+          <h2 v-if="team.Role.name">and you will be assigned the {{team.Role.name}} role automatically. <b-button @click="showRoleInfo = true">View role info</b-button></h2>
+          <b-button @click="joinTeam">Join {{team.Team.name}}</b-button>
         </div>
         <div class="container" v-if="expired && !loading">
           <h1>This invite has expired</h1>
@@ -21,10 +57,14 @@
   </main>
 </template>
 <script>
+import ModalWindow from '../ModalWindow'
 import AjaxErrorHandler from "@/assets/js/errorHandler";
 
 export default {
   name: 'TeamInvite',
+  components: {
+    ModalWindow
+  },
   // eslint-disable-next-line vue/no-unused-components
   data () {
     return {
@@ -32,6 +72,7 @@ export default {
         name: '',
         picture: ''
       },
+      showRoleInfo: false,
       expired: false,
       loading: true,
       code: this.$route.params.code
@@ -68,7 +109,7 @@ export default {
     fetchData () {
       this.axios
         .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `teams/invite/${this.$route.params.code}`)
-        .then(res => this.user = res.data, this.loading = false)
+        .then(res => this.team = res.data, this.loading = false)
         .catch(() => {
           this.team.name = "Invite has expired or is invalid."
           this.loading = false
diff --git a/frontend/src/components/routes/TeamWall.vue b/frontend/src/components/routes/TeamWall.vue
index 8ecf505..31a56ce 100644
--- a/frontend/src/components/routes/TeamWall.vue
+++ b/frontend/src/components/routes/TeamWall.vue
@@ -187,18 +187,8 @@
               this.posts = res.data.teamWalls
               this.nextPostsCount = res.data.meta.postNumber
             })
-        }).catch(e => {
+        }).catch(() => {
           this.loading = false
-
-          AjaxErrorHandler(this.$store)(e, (error, errors) => {
-            let path = error.path
-
-            if(this.errors[path] !== undefined) {
-              this.errors[path] = error.message
-            } else {
-              errors.push(error.message)
-            }
-          })
         })
       },
       setFocusInput (val) {
diff --git a/frontend/src/components/routes/Teams.vue b/frontend/src/components/routes/Teams.vue
index c00fe2f..ac98216 100644
--- a/frontend/src/components/routes/Teams.vue
+++ b/frontend/src/components/routes/Teams.vue
@@ -121,8 +121,10 @@
                       <figure class="image is-64x64">
                         <img class="team-img" v-if="user.picture !== 'default' && user.approved" width="128px" height="128px" :src="user.picture">
                         <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
+                        <img class="team-img" v-if="user.picture === 'default' && !$store.state.theme && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
                         <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-dark.png">
                         <img class="team-img" v-if="$store.state.theme === 'light' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
+                        <img class="team-img" v-if="!$store.state.theme && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
                         <img class="team-img" v-if="$store.state.theme === 'dark' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-dark.png">
                       </figure>
                     </div>
diff --git a/models/team_invite.js b/models/team_invite.js
index 7077725..b862a59 100644
--- a/models/team_invite.js
+++ b/models/team_invite.js
@@ -47,6 +47,7 @@ module.exports = (sequelize, DataTypes) => {
     TeamInvite.associate = function (models) {
         TeamInvite.belongsTo(models.Team)
         TeamInvite.belongsTo(models.User)
+        TeamInvite.belongsTo(models.TeamRoles, { as: 'Role'})
     }
     TeamInvite.includeOptions = function () {
         let models = sequelize.models
diff --git a/routes/team.js b/routes/team.js
index d3cace7..4fc97bb 100644
--- a/routes/team.js
+++ b/routes/team.js
@@ -500,7 +500,7 @@ router.get('/invite/:username', async(req, res, next) => {
     try {
         let code = await TeamInvite.findOne({
             where: {code: req.params.username},
-            include: {model: Team, attributes: { exclude: [ 'banReason' ]}}
+            include: [{model: User, attributes: ['username', 'createdAt', 'id', 'color', 'picture']}, {model: Team, attributes: { exclude: [ 'banReason' ]}}, {model: TeamRoles, as: 'Role'}]
         })
         if (code) {
             if(code.maxUses === 0) {