added generic popout.

src/components/app/Popouts/Popouts.vue

@@ -11,6 +11,7 @@
       <add-server key="as" v-if="popouts.addServer"/>
       <server-invite key="sip" v-if="popouts.showServerInviteMenu" />
       <server-settings key="ss" v-if="popouts.serverSettings.serverID"/>
+      <GenericPopout  key="gp" v-if="popouts.genericMessage"/>
     </transition-group>
   </div>
 </template>
@@ -28,6 +29,7 @@
   const DragDropFileUploadDialog = () => import('./Popouts/DragDropFileUploadDialog.vue');
   const ServerInvitePopout = () => import('./Popouts/ServerInvitePopout.vue');
   const ServerSettings = () => import('./Popouts/ServerSettingsPanels/ServerSettings.vue');
+  const GenericPopout = () => import('./Popouts/GenericPopout');
 
 
 
@@ -42,7 +44,8 @@ export default {
     TakeSurveyPopout,
     AddServer,
     ServerInvite: ServerInvitePopout,
-    ServerSettings
+    ServerSettings,
+    GenericPopout
   },
   data() {
     return {

src/components/app/Popouts/Popouts/GenericPopout.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="dark-background"
+    @mousedown="backgroundClick"
+  >
+    <div class="inner">
+      <div class="text">{{message}}</div>
+     <div class="button" @click="closeMenu()">Okay</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+
+    };
+  },
+
+  methods: {
+    closeMenu() {
+      this.$store.dispatch("setGenericMessage", null);
+    },
+    backgroundClick(e) {
+      if (e.target.classList.contains("dark-background")) {
+        this.closeMenu();
+      }
+    },
+  },
+  computed: {
+    message() {
+      return this.$store.getters.popouts.genericMessage
+    }
+  }
+};
+</script>
+
+
+<style scoped>
+
+.dark-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.541);
+  z-index: 1119111;
+  display: flex;
+}
+.inner {
+  margin: auto;
+  height: 150px;
+  width: 350px;
+  background: rgb(32, 32, 32);
+  display: flex;
+  flex-direction: column;
+  color: white;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.text {
+  margin: auto;
+  margin-bottom: 10px;
+  text-align: center;
+  word-break: break-word;
+}
+
+.button {
+  margin-top: 50px;
+  background: rgb(0, 162, 255);
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
+  margin: auto;
+  margin-top: 10px;
+}
+
+</style>
+

src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue

@@ -4,7 +4,7 @@
       <profile-picture
         class="server-avatar"
         size="100px"
-        :url="update.avatar || `${avatarDomain}/${server.avatar}` "
+        :url="update.avatar || `${avatarDomain}/${server.avatar}`"
       />
       <div class="button" @click="$refs.avatarBrowser.click()">Edit Avatar</div>
         <input
@@ -70,18 +70,28 @@ export default {
       if (this.requestSent) return;
       this.requestSent = true;
       const {ok, error, result} = await ServerService.updateServer(this.server.server_id, this.update);
-      if (ok) {
+      if (!ok) {
-        this.update = {};
         this.requestSent = false;
+        if (!error.response) {
+          return this.$store.dispatch('setGenericMessage', "Something went wrong. Try again later.") 
+        }
+        return this.$store.dispatch('setGenericMessage', error.response.data.message) 
       }
+      this.update = {};
+      this.requestSent = false;
+      
     },
     avatarChangeEvent(e) {
       const file = event.target.files[0];
       const _this = this;
+      const maxSize = 2092000; 
+      if (file.size > maxSize) {
+        return this.$store.dispatch('setGenericMessage', "Image is larger than 2MB") 
+      }
       event.target.value = "";
       const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
       if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
-        console.log("Invalid format.")
+        return this.$store.dispatch('setGenericMessage', "That file format is not allowed!"); 
       }
       let reader = new FileReader();
       reader.readAsDataURL(file);
@@ -90,6 +100,7 @@ export default {
         _this.$set(_this.update, 'avatar', reader.result);
       };
       reader.onerror = function (error) {
+        return this.$store.dispatch('setGenericMessage', "Something went wrong. Try again later.") 
         console.log('Error: ', error);
       };
     }

src/store/modules/popoutsModule/popoutsModule.js

@@ -22,6 +22,8 @@ const state = {
   GDLinkMenu: false,
   addServer: false,
 
+  genericMessage: null, 
+
   serverSettings:{
     serverID: null,
     index: null
@@ -52,10 +54,16 @@ const actions = {
   },
   setServerIDContextMenu(context, serverID) {
     context.commit('setServerIDContextMenu', serverID);
+  },
+  setGenericMessage(context, message) {
+    context.commit('setGenericMessage', message);
   }
 }
 
 const mutations = {
+  setGenericMessage(state, message){
+    Vue.set(state, 'genericMessage', message)
+  },
   setServerSettings(state, {serverID, index}){
     Vue.set(state, 'serverSettings', {serverID, index});
   },

src/utils/changelog.js

@@ -18,6 +18,20 @@ const config = [
 
 
 
+  {
+    version: 5.1,
+    title: "Change server avatar!",
+    shortTitle: "Change server avatar!",
+    date: "17/07/2019",
+    headColor: "rgba(255, 79, 0, 0.77)",
+    new: [
+      "You can now change your server avatar from the server settings menu!",
+    ],
+    fix: ['Some bugs have been fixed.'],
+    next: ["Not decided yet."],
+  },
+
+
   {
     version: 5.0,
     title: "Change server name and default server channel",