From e0fc34f6ed0e621c2fba4dba271cdda89a59cee3 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Sat, 10 Aug 2019 11:47:14 +0100
Subject: [PATCH] added error messages to places

---
 src/components/app/MessagePanel.vue           |   4 -
 .../app/Popouts/Popouts/AddServer.vue         | 175 +++++++-----------
 .../Popouts/ServerSettingsPanels/General.vue  |   3 +
 .../ServerSettingsPanels/ManageChannels.vue   | 108 ++++++++---
 .../ServerSettingsPanels/ServerSettings.vue   |   3 +-
 .../Popouts/SettingsPanels/EditProfile.vue    |  12 +-
 src/components/app/errorsListTemplate.vue     |  25 +++
 7 files changed, 179 insertions(+), 151 deletions(-)
 create mode 100644 src/components/app/errorsListTemplate.vue

diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index 8ff13b0..510030c 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -522,10 +522,6 @@ export default {
     delete this.$options.sockets.typingStatus;
   },
   watch: {
-    scrolledDown(v) {
-
-      
-    },
     selectedChannelMessages(newMessages, oldMessages){
       this.$nextTick(function () {
         this.scrollDown();
diff --git a/src/components/app/Popouts/Popouts/AddServer.vue b/src/components/app/Popouts/Popouts/AddServer.vue
index 939ab61..35ade90 100644
--- a/src/components/app/Popouts/Popouts/AddServer.vue
+++ b/src/components/app/Popouts/Popouts/AddServer.vue
@@ -1,128 +1,55 @@
 <template>
-  <div
-    class="dark-background"
-    @mousedown="backgroundClick"
-  >
+  <div class="dark-background" @mousedown="backgroundClick">
     <div class="inner">
       <div class="tabs">
-        <div
-          :class="{tab: true, selected: tab == 0}"
-          @click="tab = 0; slideBack(); "
-        >
-          Create
-        </div>
+        <div :class="{tab: true, selected: tab == 0}" @click="tab = 0; slideBack(); ">Create</div>
         <div
           :class="{tab: true, selected: tab == 1 || tab == 2}"
           @click="tab = 1; slideForward();"
-        >
-          Join
-        </div>
+        >Join</div>
       </div>
-      <transition-group
-        tag="div"
-        class="slider"
-        :name="slideInDirection"
-      >
-        <div
-          v-if="tab == 0"
-          key="add-server"
-          class="content"
-        >
-          <!-- <div class="title">
-            Set your server's avatar
-          </div> -->
-          <profile-picture
-            class="avatar"
-            size="90px"
-            :url="avatar + 'default'"
-          />
-          <!-- <div class="button">
-            Browse Avatar Coming Soon!
-          </div> -->
-          <div class="input">
-            <div class="input-name">
-              Server Name
+      <transition-group tag="div" class="slider" :name="slideInDirection">
+        <div class="content" v-if="tab == 0" key="add-server">
+          <errors-list-template :errors="errors" v-if="errors" />
+
+          <div class="inner-content">
+            <div class="add-server">
+              <profile-picture class="avatar" size="90px" :url="avatar + 'default'" />
+              <div class="input">
+                <div class="input-name">Server Name</div>
+                <input v-model="serverName" type="text" placeholder="Server Name" />
+              </div>
+              <span v-if="serverNameError" class="warn">{{ serverNameError }}</span>
+              <div class="button create-button" @click="createButton">Create</div>
             </div>
-            <input
-              v-model="serverName"
-              type="text"
-              placeholder="Server Name"
-            >
-          </div>
-          <span
-            v-if="serverNameError"
-            class="warn"
-          >{{ serverNameError }}</span>
-          <div
-            class="button create-button"
-            @click="createButton"
-          >
-            Create
           </div>
         </div>
-        <div
-          v-if="tab == 1"
-          key="check-invite"
-          class="content"
-        >
+        <div v-if="tab == 1" key="check-invite" class="content">
           <i class="material-icons icon">forum</i>
-          <div class="title">
-            Join A Server
-          </div>
+          <div class="title">Join A Server</div>
           <div class="input">
             <div class="input-name">
               Invite Code
-              <span
-                v-if="inviteCodeError"
-                class="warn"
-              >- {{ inviteCodeError }}</span>
+              <span v-if="inviteCodeError" class="warn">- {{ inviteCodeError }}</span>
             </div>
-            <input
-              v-model="inviteCode"
-              type="text"
-              placeholder="Invite code"
-            >
-          </div>
-          <div
-            class="button check-button"
-            @click="checkInviteCode"
-          >
-            Check
+            <input v-model="inviteCode" type="text" placeholder="Invite code" />
           </div>
+          <div class="button check-button" @click="checkInviteCode">Check</div>
         </div>
-        <div
-          v-if="tab == 2"
-          key="join-server"
-          class="content server"
-        >
-          <profile-picture
-            class="avatar"
-            size="100px"
-            :url="avatar + server.avatar"
-          />
-          <div class="server-name">
-            {{ server.name }}
-          </div>
+        <div v-if="tab == 2" key="join-server" class="content server">
+          <profile-picture class="avatar" size="100px" :url="avatar + server.avatar" />
+          <div class="server-name">{{ server.name }}</div>
           <div class="buttons">
             <div
               v-if="!servers[server.server_id]"
               class="button join-button"
               @click="joinButton"
-            >
-              Join
-            </div>
-            <div
-              v-if="servers[server.server_id]"
-              class="button join-button button-clicked"
-            >
-              Joined
-            </div>
+            >Join</div>
+            <div v-if="servers[server.server_id]" class="button join-button button-clicked">Joined</div>
             <div
               class="button cancel-button"
               @click="server = null; inviteCode = ''; tab = 1; slideBack();"
-            >
-              Cancel
-            </div>
+            >Cancel</div>
           </div>
         </div>
       </transition-group>
@@ -135,10 +62,11 @@ import config from "@/config.js";
 import { bus } from "@/main";
 import ServerService from "@/services/ServerService";
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
-import serversModule from '../../../../store/modules/serversModule';
+import serversModule from "../../../../store/modules/serversModule";
+import ErrorsListTemplate from "@/components/app/errorsListTemplate";
 
 export default {
-  components: { ProfilePicture },
+  components: { ProfilePicture, ErrorsListTemplate },
   data() {
     return {
       tab: 0,
@@ -148,12 +76,13 @@ export default {
       inviteCode: "",
       inviteCodeError: null,
       server: null,
-      slideInDirection: "slide-forward"
+      slideInDirection: "slide-forward",
+      errors: null
     };
   },
   computed: {
     servers() {
-      return this.$store.getters['servers/servers'];
+      return this.$store.getters["servers/servers"];
     }
   },
   methods: {
@@ -176,10 +105,10 @@ export default {
     },
     async createButton(event) {
       if (event.target.classList.contains("button-clicked")) return;
-      this.serverNameError = null;
+      this.errors = null;
       const name = this.serverName.trim();
       if (!name) {
-        this.serverNameError = "Enter a name!";
+        this.errors = [{ msg: "Enter a name!" }];
         return;
       }
       event.target.classList.add("button-clicked");
@@ -188,9 +117,11 @@ export default {
         this.closeMenu();
       } else {
         if (error.response) {
-          this.serverNameError = error.response.data.message;
+          if (error.response.data.message)
+            this.errors = [{ msg: error.response.data.message }];
+          else this.errors = error.response.data.errors;
         } else {
-          this.serverNameError = "Something went wrong.";
+          this.errors = [{ msg: "Something went wrong." }];
         }
         event.target.classList.remove("button-clicked");
       }
@@ -221,7 +152,9 @@ export default {
     async joinButton(event) {
       if (event.target.classList.contains("button-clicked")) return;
       event.target.classList.add("button-clicked");
-      const { ok, error, result } = await ServerService.joinServer(this.inviteCode)
+      const { ok, error, result } = await ServerService.joinServer(
+        this.inviteCode
+      );
       if (ok) {
         this.closeMenu();
       }
@@ -273,7 +206,8 @@ export default {
 }
 .inner {
   margin: auto;
-  height: 450px;
+  height: 100%;
+  max-height: 450px;
   width: 400px;
   background: rgb(32, 32, 32);
   display: flex;
@@ -287,6 +221,7 @@ export default {
   justify-content: center;
   padding-top: 15px;
   background: rgb(27, 27, 27);
+  flex-shrink: 0;
 }
 .tab {
   flex-shrink: 0;
@@ -314,15 +249,31 @@ export default {
   height: 100%;
   width: 100%;
 
-  overflow: hidden;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   align-items: center;
-  justify-content: center;
+  overflow: auto;
 }
+.inner-content {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  align-content: center;
+}
+.add-server {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+}
+.errors {
+  margin-top: 10px;
+  flex-shrink: 0;
+}
+
 .input {
   align-self: center;
   margin-top: 15px;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
index 7d81fbe..6119d50 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
@@ -166,6 +166,7 @@ export default {
   flex-direction: column;
   width: 100%;
   justify-content: center;
+  flex-shrink: 0;
 }
 .details {
   display: flex;
@@ -179,6 +180,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-self: center;
+  flex-shrink: 0;
 }
 .server-name {
   align-self: center;
@@ -192,6 +194,7 @@ export default {
   padding: 10px;
   align-self: center;
   margin: 10px;
+  flex-shrink: 0;
 }
 .input input {
   margin-top: 2px;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
index 756f932..3e0cc6b 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
@@ -1,19 +1,53 @@
 <template>
+  <div class="content">
+    <errors-list-template :errors="errors" v-if="errors" />
     <div class="content-inner">
+
       <div class="channels-list">
-        <div class="channel add-channel-button" @click="createChannel()"><div class="material-icons">add</div><div>Create Channel</div></div>
-        <div class="channel" v-for="(channel, index) in channels" :key="channel.channelID" :class="{selected: index === selectedChannelIndex}" @click="channelClick($event, index)"><div class="name">{{channel.name}}</div></div>
+        <div
+          class="channel add-channel-button"
+          :class="{warn: Object.keys(channels).length === 50}"
+          @click="createChannel()"
+        >
+          <div class="material-icons">add</div>
+          <div>Create Channel</div>
+        </div>
+        <div
+          class="channel"
+          v-for="(channel, index) in channels"
+          :key="channel.channelID"
+          :class="{selected: index === selectedChannelIndex}"
+          @click="channelClick($event, index)"
+        >
+          <div class="name">{{channel.name}}</div>
+        </div>
       </div>
       <div class="details" v-if="channels[selectedChannelIndex]">
         <div class="input">
-        <div class="input-title">Channel Name</div>
-          <input type="text" ref="name" placeholder="Channel Name" :default-value.prop="channels[selectedChannelIndex].name" @input="inputEvent('name', $event)">
+          <div class="input-title">Channel Name</div>
+          <input
+            type="text"
+            ref="name"
+            placeholder="Channel Name"
+            :default-value.prop="channels[selectedChannelIndex].name"
+            @input="inputEvent('name', $event)"
+          />
         </div>
         <div class="button" v-if="update.name" @click="updateChannel">Save Changes</div>
-        <div class="button warn delete-server disabled" v-if="server.default_channel_id === channels[selectedChannelIndex].channelID">Cannot delete default channel</div>
-        <div class="button warn delete-server" :class="{disabled: deleteClicked}" v-if="server.default_channel_id !== channels[selectedChannelIndex].channelID" @click="deleteChannel">{{deleteButtonConfirmed ? 'ARE YOU SURE?' : 'Delete Channel' }}</div>
+        <div
+          class="button warn delete-server disabled"
+          v-if="server.default_channel_id === channels[selectedChannelIndex].channelID"
+        >Cannot delete default channel</div>
+        <div
+          class="button warn delete-server"
+          :class="{disabled: deleteClicked}"
+          v-if="server.default_channel_id !== channels[selectedChannelIndex].channelID"
+          @click="deleteChannel"
+        >{{deleteButtonConfirmed ? 'ARE YOU SURE?' : 'Delete Channel' }}</div>
       </div>
+      
     </div>
+  </div>
 </template>
 
 <script>
@@ -21,65 +55,85 @@ import config from "@/config.js";
 import { bus } from "@/main";
 import ServerService from "@/services/ServerService";
 import { mapState } from "vuex";
-
+import ErrorsListTemplate from "@/components/app/errorsListTemplate";
 export default {
-  components: {},
+  components: { ErrorsListTemplate },
   data() {
     return {
       deleteButtonConfirmed: false,
       deleteClicked: false,
       selectedChannelIndex: 0,
+      errors: null,
       update: {
         name: null
       }
-    }
+    };
   },
   methods: {
     async createChannel() {
-      const {ok, error, result} = await ServerService.createChannel(this.server.server_id, "New Channel");
+      const { ok, error, result } = await ServerService.createChannel(
+        this.server.server_id,
+        "New Channel"
+      );
     },
     async updateChannel() {
+      this.errors = null;
       const data = {
         name: this.update.name || this.channels[this.selectedChannelIndex].name
-      }
-      const {ok, error, result} = await ServerService.updateChannel(this.server.server_id, this.channels[this.selectedChannelIndex].channelID, data);    
+      };
+      const { ok, error, result } = await ServerService.updateChannel(
+        this.server.server_id,
+        this.channels[this.selectedChannelIndex].channelID,
+        data
+      );
       if (ok) {
         this.update.name = null;
+      } else {
+        if (error.response) {
+          if (error.response.data.message)
+            this.errors = [{ msg: error.response.data.message }];
+          else this.errors = error.response.data.errors;
+        } else {
+          this.errors = [{ msg: "Something went wrong." }];
+        }
       }
     },
     async deleteChannel() {
       if (this.deleteClicked) return;
       if (!this.deleteButtonConfirmed) {
-        return this.deleteButtonConfirmed = true; 
+        return (this.deleteButtonConfirmed = true);
       }
       this.deleteClicked = true;
-      const {ok, error, result} = await ServerService.deleteChannel(this.server.server_id, this.channels[this.selectedChannelIndex].channelID)
+      const { ok, error, result } = await ServerService.deleteChannel(
+        this.server.server_id,
+        this.channels[this.selectedChannelIndex].channelID
+      );
       this.deleteButtonConfirmed = false;
       this.selectedChannelIndex = null;
       this.deleteClicked = false;
     },
     inputEvent(name, event) {
-      this.update.name = event.target.value
+      this.update.name = event.target.value;
     },
     channelClick(event, index) {
-      this.selectedChannelIndex = index
-      this.$refs['name'].value = this.channels[this.selectedChannelIndex].name
+      this.selectedChannelIndex = index;
+      this.$refs["name"].value = this.channels[this.selectedChannelIndex].name;
       this.update.name = null;
       this.deleteButtonConfirmed = false;
-    },
+    }
   },
   computed: {
     server() {
-      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
-      return this.$store.getters['servers/servers'][serverID]
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
+      return this.$store.getters["servers/servers"][serverID];
     },
     channels() {
-      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
       const channels = this.$store.getters.channels;
-      const channelIDs = this.$store.getters['servers/channelsIDs'][serverID];
+      const channelIDs = this.$store.getters["servers/channelsIDs"][serverID];
       return channelIDs.map(c => {
         return channels[c];
-      })
+      });
     }
   }
 };
@@ -118,7 +172,7 @@ export default {
 }
 .channel .name {
   overflow: hidden;
-  text-overflow: ellipsis; 
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 .channel div {
@@ -168,8 +222,12 @@ export default {
 .button.disabled:hover {
   background: grey;
 }
+.add-channel-button.warn {
+  background: rgba(255, 17, 17, 0.192);
+  cursor: not-allowed;
+}
 
-.delete-server{
+.delete-server {
   margin: auto;
   margin-bottom: 0;
   margin-left: 0;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
index 36b3e99..1bae4c4 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
@@ -74,7 +74,8 @@ export default {
 }
 .inner {
   margin: auto;
-  height: 500px;
+  height: 100%;
+  max-height: 500px;
   width: 700px;
   background: rgba(32, 32, 32, 0.87);
   display: flex;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
index cde7edc..b92623f 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="edit-profile">
-    <div class="errors" v-if="errors">
-      <div class="error-title">Fix these mistakes:</div>
-      <li class="error" v-for="error in errors" :key="error.msg">{{error.msg}}</li>
-    </div>
+    <errors-list-template :errors="errors" v-if="errors" />
     <div class="inner-content">
       <div class="left">
         <form>
@@ -59,11 +56,12 @@
 <script>
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 import userService from "@/services/userService.js";
+import ErrorsListTemplate from "@/components/app/errorsListTemplate";
 import config from "@/config.js";
 import path from "path";
 
 export default {
-  components: { ProfilePicture },
+  components: { ProfilePicture, ErrorsListTemplate },
   data() {
     return {
       errors: null,
@@ -245,10 +243,6 @@ export default {
 }
 
 .errors {
-  background: rgb(255, 62, 62);
-  color: white;
-  border-radius: 10px;
-  padding: 10px;
   align-self: center;
 }
 .link {
diff --git a/src/components/app/errorsListTemplate.vue b/src/components/app/errorsListTemplate.vue
new file mode 100644
index 0000000..fd460c9
--- /dev/null
+++ b/src/components/app/errorsListTemplate.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="errors">
+    <div class="errors-title">Fix these mistakes:</div>
+    <li class="error" v-for="(error, index) in errors" :key="index">{{error.msg}}</li>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: ['errors']
+}
+</script>
+
+
+<style scoped>
+
+.errors{
+  background: rgb(255, 62, 62);
+  color: white;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+</style>