fixing ProfileUser CSS and adding delete account button, in progress

srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte

@@ -108,6 +108,24 @@
 		avatar = await fetchAvatar(user.username);
 	}
 
+	const deleteAccount = async() => {
+		console.log("deleting account")
+		await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`, {
+			method: "DELETE",
+		})
+		.then((response) => {
+			if (!response.ok) {
+				throw new Error("HTTP " + response.status);
+			}
+			console.log("account deleted")
+			push('/');
+		})
+		.catch((error) => { 
+			console.log("catch unable to delete: ", error);
+		});
+	}
+
+
 </script>
 
 
@@ -152,6 +170,7 @@
       </form>
     </Card>
   </div>
+	<Button type="primary" on:click={() => deleteAccount()}>Delete Account</Button>
 </div>
 </main>
 

srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte

@@ -6,6 +6,7 @@
 	import Tabs from "../../pieces/Tabs.svelte";
 	import { fetchUser, fetchAllUsers, fetchAvatar } from "../../pieces/utils";
 
+	import { clickOutside } from '../../pieces/clickOutside'
 
   let user;
 	let allUsers = [];
@@ -26,6 +27,10 @@
 	let activeTabItem: string = "All Users";
   let loadedUser;
 
+	let showModal = false;
+
+
+
 	onMount(async () => {
 		user = await fetchUser();
 
@@ -166,8 +171,13 @@
 	const viewAUser = async (aUsername) => {
 		usernameBeingViewed = aUsername;
 		await fetchFriendshipFull(aUsername);
+		showModal = true;
 	};
 
+	const unViewAUser = () => {
+		showModal = false;
+	}
+
   const acceptFriendRequest = async (relationshipId) => {
 		await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations/${relationshipId}/accept`,
 			{
@@ -410,8 +420,9 @@
 
   <!-- This next bit needs to all be in a window thing above the whatever -->
 
-  <div class="main-display">
-    {#if usernameBeingViewed}
+	{#if showModal && usernameBeingViewed}
+  <div class="main-display box backdrop" use:clickOutside on:outclick={() => unViewAUser()}>
+    <!-- {#if usernameBeingViewed} -->
       <DisplayAUser aUsername={usernameBeingViewed} bind:loaded={loadedUser}/>
 
       {#if loadedUser === true}
@@ -453,9 +464,11 @@
         <h1>Click on a user!</h1>
         <h4>You'll see them displayed here</h4>
       </div> -->
-    {/if}
+    <!-- {/if} -->
 
+		<button on:click={() => unViewAUser()}>Close</button>
   </div>
+	{/if}
 </div>
 </div>
 
@@ -465,8 +478,8 @@
 /* ok so i want a 12 column grid with a sidebar */
 
   div.top-grid{
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
+    /* display: grid; */
+    /* grid-template-columns: repeat(8, 1fr); */
     /* max-height: calc(100vh - 30vh); */
     height: 85vh;
     /* margin: 0; */
@@ -545,5 +558,34 @@
 		width: 60px;
 	}
 
+	/* Modal Stuff */
+
+	.box {
+		--width: 70vw;
+		--height: 60vh;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		display: flex;
+		align-items: center;
+		padding: 8px;
+		border-radius: 7px;
+		/* background-color: #ff3e00; */
+		/* color: #fff; */
+		text-align: center;
+		font-weight: bold;
+	}
+
+	.backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(0,0,0,0.50)
+  }
+
 
 </style>

srcs/requirements/svelte/api_front/src/pieces/clickOutside.ts

@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (!node.contains(event.target)) {
+			node.dispatchEvent(new CustomEvent("outclick"));
+		}
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("click", handleClick, true);
+		}
+	};
+}