more progress on updateServer

src/components/app/Popouts/Popouts/AddServer.vue

@@ -34,7 +34,7 @@
           <profile-picture
             class="avatar"
             size="90px"
-            :url="tempImage"
+            :url="avatar + 'default'"
           />
           <!-- <div class="button">
             Browse Avatar Coming Soon!
@@ -98,7 +98,7 @@
           <profile-picture
             class="avatar"
             size="100px"
-            :url="tempImage"
+            :url="avatar + server.avatar"
           />
           <div class="server-name">
             {{ server.name }}
@@ -142,7 +142,7 @@ export default {
   data() {
     return {
       tab: 0,
-      tempImage: config.domain + "/avatars/noob",
+      avatar: config.domain + "/avatars/",
       serverName: "",
       serverNameError: null,
       inviteCode: "",

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

@@ -47,7 +47,7 @@ export default {
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0.541);
-  z-index: 1119111;
+  z-index: 1119999999999999111;
   display: flex;
 }
 .inner {

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

@@ -82,6 +82,12 @@ export default {
       
     },
     avatarChangeEvent(e) {
+      if (!this.googleDriveLinked) {
+        return this.$store.dispatch("setPopoutVisibility", {
+          name: "GDLinkMenu",
+          visibility: true
+        });
+      }
       const file = event.target.files[0];
       const _this = this;
       const maxSize = 2092000; 
@@ -114,6 +120,9 @@ export default {
     }
   },
   computed: {
+    googleDriveLinked() {
+      return this.$store.getters['settingsModule/settings'].GDriveLinked
+    },
     server() {
       const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
       return this.$store.getters["servers/servers"][serverID];

src/components/app/Popouts/Popouts/Settings.vue

@@ -2,15 +2,18 @@
   <div class="settings-darken-background">
     <div class="settings-box">
       <div class="tabs">
-        <div
+        <div class="tab"
           v-for="(tab, index) in tabs"
           :key="index"
-          :class="{tab: true, selected: currentTab === index}"
+          :class="{selected: currentTab === index}"
-          @click="currentTab = index"
+          @click="currentTab = index">
-        >
           <div class="material-icons">{{tab.icon}}</div>
           <div class="tab-name">{{tab.name}}</div>
         </div>
+        <div class="tab warn" @click="logout">
+          <div class="material-icons">exit_to_app</div>
+          <div class="tab-name">Logout</div>
+        </div>
       </div>
       <div class="panel">
         <div class="title">
@@ -73,6 +76,10 @@ export default {
     };
   },
   methods: {
+    logout() {
+      this.$store.dispatch("logout");
+      window.location.href = "/";
+    },
     close() {
       this.$store.dispatch("setPopoutVisibility", {
         name: "settings",
@@ -112,6 +119,7 @@ export default {
   overflow-y: auto;
   overflow-x: hidden;
   flex-shrink: 0;
+  position: relative;
 }
 .panel {
   display: flex;
@@ -139,9 +147,18 @@ export default {
   background: rgb(61, 61, 61) !important;
 }
 
+
 .tab:hover {
   background: rgba(61, 61, 61, 0.616);
 }
+.tab.warn{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: #f54949;
+}
+
 .title {
   display: flex;
   padding: 10px;
@@ -218,6 +235,9 @@ export default {
     overflow-x: auto;
     flex-shrink: 0;
   }
+  .tab.warn{
+    position: relative;
+  }
   .tab {
     flex-shrink: 0;
   }

src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue

@@ -2,38 +2,48 @@
   <div class="edit-profile">
     <div class="inner-content">
       <div class="left">
-        <div class="outer-input">
+        <form>
-          <div class="title">Username</div>
+          <div class="outer-input">
-          <div class="user-tag">
+            <div class="title">Username</div>
-            <input type="text" class="username" value="Fishie" />
+            <div class="user-tag">
-            <input type="text" class="tag" value="#awr3" />
+              <input type="text" class="username" :default-value.prop="user.username" @input="inputEvent('username', $event)"/>
+
+              <input type="text" class="tag" :default-value.prop="user.tag" @input="inputEvent('tag', $event)"/>
+            </div>
           </div>
-        </div>
+          <div class="outer-input">
-        <div class="outer-input">
+            <div class="title">Email</div>
-          <div class="title">Email</div>
+            <input type="email" autocomplete="off" :default-value.prop="user.email" @input="inputEvent('email', $event)"/>
-          <input type="text" value="Fishie" />
+          </div>
-        </div>
+          <div class="outer-input">
-        <div class="outer-input">
+            <div class="title">Current Password</div>
-          <div class="title">Current Password</div>
+            <input type="password" autocomplete="new-password" @input="inputEvent('password', $event)" />
-          <input type="password" value="fsfsdf" />
+          </div>
-        </div>
+        </form>
       </div>
 
       <div class="change-avatar">
         <div class="change-avatar-container">
           <profile-picture
             class="avatar"
-            :url="avatar"
+            :url="update.avatar || avatar"
             :admin="user.admin"
             size="100px"
             emote-size="30px"
             animation-padding="5px"
           />
-          <div class="button">Change Avatar</div>
+          <div class="button" @click="$refs.avatarBrowser.click()">Change Avatar</div>
+          <input
+            ref="avatarBrowser"
+            type="file"
+            accept=".jpeg, .jpg, .png, .gif"
+            class="hidden"
+            @change="avatarChangeEvent"
+          >
         </div>
       </div>
     </div>
-    <div class="button save-button">Update</div>
+    <div class="button save-button" :class="{disabled: requestSent}" @click="updateProfile" v-if="changed">{{requestSent ? 'Saving...' : 'Update'}}</div>
   </div>
 </template>
 
@@ -41,15 +51,69 @@
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 import userService from "@/services/userService.js";
 import config from "@/config.js";
+import path from "path";
 
 export default {
   components: { ProfilePicture },
   data() {
-    return {};
+    return {
+      requestSent: false,
+      changed: false,
+      update: {}
+    };
+  },
+  methods: {
+    inputEvent(name, event) {
+      this.$set(this.update, name, event.target.value)
+    },
+    avatarChangeEvent(event) {
+      if (!this.googleDriveLinked) {
+        return this.$store.dispatch("setPopoutVisibility", {
+          name: "GDLinkMenu",
+          visibility: true
+        });
+      }
+      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())) {
+        return this.$store.dispatch('setGenericMessage', "That file format is not allowed!"); 
+      }
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      
+      reader.onload = function () {
+        _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);
+      };
+    },
+    async updateProfile() {
+      if (this.requestSent) return;
+      this.requestSent = true;
+      const {ok, result, error} = await userService.update(this.update) 
+      this.requestSent = false;
+    }
+  },
+  watch: {
+    update(obj) {
+      if ( Object.keys(obj).length === 0 ){
+        return this.changed = false
+      }
+      this.changed = true;
+    }
   },
-  methods: {},
-  async mounted() {},
   computed: {
+    googleDriveLinked() {
+      return this.$store.getters['settingsModule/settings'].GDriveLinked
+    },
     avatar() {
       return config.domain + "/avatars/" + this.$store.getters.user.avatar;
     },
@@ -67,7 +131,6 @@ export default {
   margin-top: 10px;
   flex: 1;
   overflow: hidden;
-  padding-bottom: 40px;
 }
 .inner-content {
   display: flex;
@@ -95,18 +158,22 @@ export default {
   margin-bottom: 10px;
   align-self: center;
 }
-
+.hidden {
-
+  display: none;
+}
 .button {
-  background: rgb(0, 119, 255);
+  background: #5394fc;
   padding: 10px;
   text-align: center;
   border-radius: 5px;
   display: inline-block;
   align-self: center;
   cursor: pointer;
+  transition: 0.3s;
+}
+.disabled {
+  background: grey;
 }
-
 .left {
   width: 340px;
   display: flex;
@@ -141,14 +208,13 @@ export default {
 }
 
 .save-button {
-  position: absolute;
   z-index: 99999;
-  bottom: 0;
   width: 100%;
   align-self: initial;
   display: block;
   padding: 10px 0px 10px 0px;
   margin: 0;
+  border-radius: 10px;
 }
 
 

src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue

@@ -91,10 +91,6 @@ export default {
         return (this.alert.show = true);
       }
     },
-    logout() {
-      this.$store.dispatch("logout");
-      window.location.href = "/";
-    },
     changePassword() {
       this.alert.content = "Not implemented yet.";
       return (this.alert.show = true);

src/router.js

@@ -23,6 +23,9 @@ const RegisterPage = () => import(/* webpackChunkName: "RegisterPage" */ "../src
 export const router = new VueRouter({
   mode: "history",
   routes: [
+    { name: "404", path: '*', beforeEnter(to, from, next) {
+        return window.location.href = "/404"
+    } },  
     {
       path: "/",
       name: "HomePage",

src/services/userService.js

@@ -4,6 +4,9 @@ export default {
   get (uniqueID) {
     return wrapper(instance().get(`user/${uniqueID}`))
   },
+  update (data) {
+    return wrapper(instance().patch(`user`, data))
+  },
   getSurvey() {
     return wrapper(instance().get('/user/survey'));
   },

src/utils/changelog.js

@@ -21,6 +21,7 @@ const config = [
     date: "27/07/2019",
     headColor: "rgba(15, 65, 70, 0.77)",
     new: [
+      "You can now enable desktop notifications by going in the settings.",
       "We have re-added syntax highlighting and also improved the performance of message formatting. (Thanks to Bree!)",
       "Profile Setting has been re-designed. You can now edit your username, email and password!"
     ],

src/utils/markdown-it-plugins/customEmoji.js

@@ -88,7 +88,7 @@ function replace_custom_emoji(state, silent) {
 		state.posMax = idEnd
 
 		let token = state.push('custom_emoji', 'img', 0);
-		token.attrs = [[ 'src', `${config.domain}/files/${emojiID}` ], [ 'alt', emojiName ]]
+		token.attrs = [[ 'src', `${config.domain}/media/${emojiID}` ], [ 'alt', emojiName ]]
 	}
 
 	state.pos = idEnd + 1

src/views/Invites.vue

@@ -21,7 +21,7 @@
               <profile-picture
                 class="avatar"
                 size="100px"
-                :url="tempImage"
+                :url="domain + server.avatar"
               />
               <div class="server-name">
                 {{ server.name }}
@@ -69,7 +69,7 @@ export default {
     return {
       isDay: true,
       server: null,
-      tempImage: config.domain + "/avatars/noob",
+      domain: config.domain + "/avatars/",
       loggedIn: localStorage.getItem('hauthid'),
       errorMsg: ""
     };