show link menu when clicking on edit avatar.

src/components/app/GDriveLinkMenu.vue

@@ -2,7 +2,7 @@
 	<div class="dark-background">
 		<div class="inner">
 			<div class="text">
-				To upload files and images, You must link your Google Drive account with your Nertivia account.
+				To upload files, images or set avatars, You must link your Google Drive account with your Nertivia account.
 			</div>
 			<div class="images">
 					<div class="image GDrive-img"></div>
@@ -22,7 +22,7 @@
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.781);
-    z-index: 1;
+    z-index: 111111;
     display: flex;
 }
 .inner {
@@ -30,16 +30,18 @@
     height: 400px;
     width: 400px;
     background: rgb(32, 32, 32);
-		display: flex;
+	display: flex;
-		flex-direction: column;
+	flex-direction: column;
-		color: white;
+	color: white;
-		border-radius: 3px;
+	border-radius: 3px;
 }
 .text{
 	color: white;
 	text-align: center;
 	margin-top: 30px;
 	font-size: 17px;
+	padding-left: 10px;
+	padding-right: 10px;
 }
 .images{
 	display: flex;

src/components/app/SettingsPanels/MyProfile.vue

@@ -7,7 +7,7 @@
     </div>
     <div class="options">
       <input type="file"  accept="image/*" ref="avatarBrowser" @change="avatarBrowse" class="hidden">
-      <div class="option"  @click="$refs.avatarBrowser.click()">Edit Avatar</div>
+      <div class="option"  @click="editAvatarBtn">Edit Avatar</div>
       <div class="option" @click="changePassword">Change Password</div>
       <div class="option red" @click="logout">Logout</div>
     </div>
@@ -28,6 +28,7 @@
 <script>
 import UploadService from '@/services/UploadService.js'
 import config from '@/config.js'
+import {bus} from '@/main'
 import path from 'path'
 
 export default {
@@ -74,6 +75,12 @@ export default {
     changePassword() {
       this.alert.content = 'Not implemented yet.';
       return this.alert.show = true;
+    },
+    editAvatarBtn() {
+      if(!this.$store.getters.settings.GDriveLinked) {
+        return bus.$emit('GDriveLink:show');
+      }
+      this.$refs.avatarBrowser.click()
     }
   },
   computed: {

src/store/index.js

@@ -5,12 +5,13 @@ import socketModule from './modules/socketIOModule';
 import channelModule from './modules/channelModule';
 import messageModule from './modules/messageModule';
 import notificationsModule from './modules/notificationsModule';
+import settingsModule from './modules/settingsModule';
 import {router} from './../router'
 
 Vue.use(Vuex);
 
 export const store = new Vuex.Store({
-  modules: { user, channelModule, messageModule, notificationsModule, socketModule },
+  modules: { user, channelModule, messageModule, notificationsModule, socketModule,settingsModule },
   state: {
 
   },

src/store/modules/settingsModule.js

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import {bus} from '../../main'
+
+
+
+const state = {
+    settings: {
+
+    }
+}
+
+const getters = {
+    settings(state) {
+        return state.settings;
+    }
+}
+
+const actions = {
+    setSettings(context, settings) {
+        context.commit('setSettings', settings)
+    }
+}
+
+const mutations = {
+    setSettings(state, settings) {
+        state.settings = settings;
+    }
+}
+
+export default {
+  namespace: true,
+  state,
+  getters,
+  actions,
+  mutations
+}

src/store/modules/socketIOModule.js

@@ -16,7 +16,7 @@ const actions = {
   },
   socket_success(context, data) {
 
-    const {message, user, dms, notifications, currentFriendStatus} = data;
+    const {message, user, dms, notifications, currentFriendStatus, settings} = data;
     const friendsArray = user.friends;
     const friendObject = {};
 
@@ -44,6 +44,7 @@ const actions = {
     }
     context.commit('addAllChannels', channelsObject)
     context.dispatch('addAllNotifications', notifications)
+    context.dispatch('setSettings', settings)
     
 
   },

src/views/App.vue

@@ -15,8 +15,8 @@
     </transition>
     <transition name="fade">
       <settings v-if="showSettings  && loggedIn" />
-      <!--<GDriveLinkMenu v-if="loggedIn" /> -->
     </transition>
+    <GDriveLinkMenu v-if="loggedIn && showGDLinkMenu" />
   </div>
 </template>
 
@@ -41,6 +41,7 @@ export default {
     return {
       showLeftPanel: false,
       showSettings: false,
+      showGDLinkMenu: false,
       title: "Nertivia"
     }
   },
@@ -69,6 +70,9 @@ export default {
     bus.$on('title:change', (title) => {
       this.title = title;
     })
+    bus.$on('GDriveLink:show', () => {
+      this.showGDLinkMenu = true;
+    })
   },
   computed: {
     loggedIn() {