Invites Feature

.env

@@ -0,0 +1,2 @@
+VITE_GOOGLE_CLIENT_ID=1048735894859-hqugf3pk855tfs7d5qkpvm3lvvskak0v.apps.googleusercontent.com
+API_URL=https://localhost:3000/api/v1

src/components/profile/UserInvites.vue

@@ -0,0 +1,23 @@
+<template>
+	<div class="bg-darkGrey w-full shadow rounded-lg p-8 flex flex-col items-center justify-between">
+		<div class="text-lightestGrey p-3 mb-2 border-b border-b-grey w-full">Recent invitations</div>
+		<div class="w-full flex items-center py-2 px-3 mb-2 rounded-lg text-lightestGrey hover:bg-black hover:text-white">
+			<img src="../../assets/person6.jpg" alt="user" class="h-9 w-9 rounded-lg mr-4" />
+			<p class="tracking-wide mr-auto">Diego Armando</p>
+			<p class="tracking-widest underline mr-4">Pending...</p>
+			<button class="p-2 text-center flex items-center justify-center rounded-lg hover:bg-grey">
+				<span class="material-icons">close</span>
+			</button>
+		</div>
+		<div class="w-full flex items-center py-2 px-3 mb-2 rounded-lg text-lightestGrey hover:bg-black hover:text-white">
+			<img src="https://ui-avatars.com/api/?name=Anas+Nassar" alt="user" class="h-9 w-9 rounded-lg mr-4" />
+			<p class="tracking-wide mr-auto">Diego Armando</p>
+			<button class="p-2 text-center flex items-center justify-center rounded-lg hover:bg-grey mr-4">
+				<span class="material-icons">done</span>
+			</button>
+			<button class="p-2 text-center flex items-center justify-center rounded-lg hover:bg-grey">
+				<span class="material-icons">close</span>
+			</button>
+		</div>
+	</div>
+</template>

src/components/profile/UserProfile.vue

@@ -1,29 +1,33 @@
 <template>
-    <div class="user-profile">
-        <div class="bg-darkGrey shadow rounded-lg p-8 w-fit flex flex-col items-center justify-between md:flex-row">
-            <profile-image/>
-            <edit-info/>
-        </div>
-    </div>
+	<div class="user-profile">
+		<div class="bg-darkGrey shadow rounded-lg p-8 w-fit flex flex-col items-center justify-between md:flex-row">
+			<profile-image />
+			<edit-info />
+		</div>
+		<user-invites />
+	</div>
 </template>
 
 <script>
-import ProfileImage from './ProfileImage.vue';
-import EditInfo from './EditInfo.vue';
-export default {
-    components: {
-        ProfileImage,
-        EditInfo
-    }
-}
+	import ProfileImage from "./ProfileImage.vue";
+	import EditInfo from "./EditInfo.vue";
+	import UserInvites from "./UserInvites.vue";
+	export default {
+		components: {
+			ProfileImage,
+			EditInfo,
+			UserInvites,
+		},
+	};
 </script>
 
 <style scoped>
-.user-profile{
-    height: calc(100vh - 100px);
-    width: 100%;
-    display: grid;
-    align-content: center;
-    justify-content: center;
-}
-</style>
+	.user-profile {
+		height: max-content;
+		width: 100%;
+		display: grid;
+		gap: 30px;
+		align-content: center;
+		justify-content: center;
+	}
+</style>

src/layout/sidebar/LogOutBtn.vue

@@ -1,7 +1,35 @@
 <template>
-    <div
-    class="flex items-center justify-center space-x-2 tracking-wider py-3 rounded-lg cursor-pointer text-lightestGrey bg-grey hover:bg-lightGrey hover:text-white">
-        <span class="material-icons">logout</span>
-        <span>Logout</span>
-    </div>
-</template>
+	<div
+		@click="logOut"
+		class="flex items-center justify-center space-x-2 tracking-wider py-3 rounded-lg cursor-pointer text-lightestGrey bg-grey hover:bg-lightGrey hover:text-white">
+		<span class="material-icons">logout</span>
+		<span>Logout</span>
+	</div>
+</template>
+
+<script>
+	import { useAuthStore } from "../../stores/auth";
+	import { useRouter } from "vue-router";
+	import socket from "../../utils/socket";
+	import { inject } from "vue";
+	import toaster from "../../utils/toast";
+	export default {
+		setup() {
+			const store = useAuthStore();
+			const router = useRouter();
+			const swal = inject("$swal");
+
+			function logOut() {
+				swal.fire(toaster.logOutPopUpOptions()).then((result) => {
+					if (result.isConfirmed) {
+						store.logout();
+						socket.disconnect();
+						router.replace("/signin");
+					}
+				});
+			}
+
+			return { logOut };
+		},
+	};
+</script>

src/layout/sidebar/TheLinks.vue

@@ -43,13 +43,41 @@
 		</div>
 
 		<div
+			@click="createNewInvite"
 			class="flex items-center justify-center space-x-2 tracking-wider py-3 rounded-lg cursor-pointer text-lightestGrey bg-grey hover:bg-lightGrey hover:text-white">
 			<span class="material-icons">add</span>
 			<span>Add Contact</span>
 		</div>
 	</div>
 </template>
 
+<script>
+	import { useMainStore } from "../../stores/main";
+	import toaster from "../../utils/toast";
+	import { inject } from "vue";
+
+	export default {
+		setup() {
+			const store = useMainStore();
+			const swal = inject("$swal");
+
+			async function createNewInvite() {
+				let input = await toaster.textInputPopUp(swal, "Send Invitation", "Enter recipent email...");
+				if (input) {
+					try {
+						await store.createInvitation(input);
+						toaster.fireToast(swal, true, "Invitation Sent, you can view your previous invitations at your profile page!", 5000);
+					} catch (error) {
+						toaster.fireToast(swal, false, error.message);
+					}
+				}
+			}
+
+			return { createNewInvite };
+		},
+	};
+</script>
+
 <style scoped>
 	.wrapper {
 		width: 100%;

src/stores/main.js

@@ -0,0 +1,34 @@
+import axios from "axios";
+import { defineStore } from "pinia";
+import { useAuthStore } from "./auth";
+
+const API = "https://localhost:3000/api/v1";
+
+export const useMainStore = defineStore("main", {
+	state: () => {
+		return {
+			chats: [],
+		};
+	},
+	getters: {
+		getChats: (state) => state.chats,
+	},
+	actions: {
+		async createInvitation(payload) {
+			//Get Token
+			const authStore = useAuthStore();
+			const token = authStore.token;
+
+			const EndPoint = API + "/users/createInvite";
+
+			const data = {
+				to: payload,
+			};
+
+			// Send HTTP Post Request
+			await axios.post(EndPoint, data, { headers: { Authorization: `Bearer ${token}` } }).catch(function (error) {
+				throw new Error(error.response.data.msg);
+			});
+		},
+	},
+});