From e9e4f564eb1d13c5db511bb7e85040410a02b9a2 Mon Sep 17 00:00:00 2001
From: Me <me@Philip.local>
Date: Sun, 4 Dec 2022 21:55:14 +0100
Subject: [PATCH] Ok about to do some clean up

---
 .../api_front/src/pages/SplashPage.svelte     |  8 ++-
 .../src/pages/TwoFactorAuthentication.svelte  |  5 +-
 .../src/pages/profile/ProfileDisplay.svelte   | 12 ++--
 .../src/pages/profile/ProfileSettings.svelte  | 55 ++++++++++++-------
 .../svelte/api_front/src/pieces/Header.svelte |  8 ++-
 5 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
index f5e98f95..d17c1cc3 100644
--- a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
@@ -50,8 +50,8 @@
 
     // to clean up local storage... as a precaution
     // this condition isn't good enough...
-    // if (user && user.statusCode && user.statusCode === 403) {
-    if (user === undefined) {
+    // if (user === undefined) {
+    if (user && user.statusCode && user.statusCode === 403) {
       console.log('on mount no user, returned status code 403 so logging out of userStore')
       userLogout(); // which i think should delete any previous local storage
     }
@@ -63,6 +63,7 @@
     window.location.href = 'http://transcendance:8080/api/v2/auth';
     // await fetch ('http://transcendance:8080/api/v2/auth');
     console.log('you are now logged in');
+    push('/profile')
 
     // ok giving our new local storage and store combo a go
     // what i need is to set the store to the user when this button get's pressed
@@ -83,7 +84,8 @@
   }
 
 // i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
-	const logout = async() => {
+// we could .then( () => replace('/') ) need the func so TS compatible...
+  const logout = async() => {
 		await fetch('http://transcendance:8080/api/v2/auth/logout', {
         method: 'POST',
       });
diff --git a/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte b/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
index 5d1cb717..e839f3da 100644
--- a/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { push } from "svelte-spa-router";
+  import { userStore, userLogout } from "../stores/loginStatusStore";
 
   // onMount( async() => {
   //  await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
@@ -59,9 +60,7 @@
       // The .then(push) doesn't seem to work...
     }
     if (response.status === 200) {
-      // loginStatus.toggleTFA();
-      loginStatus.update( (old) => ({...old, tfa: true}) );
-      // 
+      userLogout();
       push('/profile');
       console.log('vaid Code for 2FA')
     }
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
index 9423e921..f0da080f 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
@@ -40,12 +40,12 @@
       rank = 'Yea you da Boss!'
     }
 
-    await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"}).
-		then(response => {return response.blob()}).
-		then(data => {
-			const url = URL.createObjectURL(data);
-			avatar = url;
-		});
+    await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
+		  .then(response => {return response.blob()})
+		  .then(data => {
+		  	const url = URL.createObjectURL(data);
+		  	avatar = url;
+	  	});
 
 
   })
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
index 7c14ca22..8ae03bf0 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
@@ -5,13 +5,15 @@
   import { push } from 'svelte-spa-router';
 
   let user;
+  let avatar, postVar, newAvatar, fileinput;
+  let uploadAvatarSuccess = false;
 
   // tbh i might not need this...
   let set = {
     username: '',
     isChecked: false,
   }
-  const errors = { username: '', checkbox: ''};
+  const errors = { username: '', checkbox: '', avatar: ''};
   // let isChecked;
   let testChecked = true;
 
@@ -53,18 +55,18 @@
 
   };
 
-  // $: uploadAvatar = async() => {
-	// 	const data = new FormData();
-	// 	data.append("file", newAvatar[0]);
-	// 	console.log(data);
-	// 	await fetch("http://transcendance:8080/api/v2/user/avatar",
-	// 	{
-	// 		method : 'POST',
-	// 		body : data,
-	// 	})
-	// 	.then(uploadAvatarSuccess = true)
-	// 	.catch(errors.image_urlSv = "Something went wrong." )
-	// }
+  const uploadAvatar = async() => {
+		const data = new FormData();
+		data.append("file", newAvatar[0]);
+		console.log(data);
+		await fetch("http://transcendance:8080/api/v2/user/avatar",
+		{
+			method : 'POST',
+			body : data,
+		})
+		.then(() => uploadAvatarSuccess = true) // for some reason it needs to be a function, i think a TS thing, not a promis otherwise 
+		.catch(() => errors.avatar = "Something went wrong." )
+	}
 
 
 
@@ -75,7 +77,7 @@
 
 
 <main>
-  <div class="outter">
+  <!-- <div class="outter"> -->
   <h2>Look, you can change stuff</h2>
   <!-- maybe ues a card? -->
   <!-- a form? -->
@@ -88,21 +90,34 @@
         <input type="text" placeholder="new username" bind:value={set.username}>
         <div class="error">{errors.username}</div>
       </div>
-      <!-- <div class="form-field">
+      <div class="form-field">
         <div class="label">Set Two Factor Authentication</div>
         <input type="checkbox" bind:checked={set.isChecked}>
         <div class="error">{errors.checkbox}</div>
-      </div> -->
-      <div class="form-field">
+      </div>
+      <!-- <div class="form-field">
         <div class="label">Test</div>
         <input type="checkbox" bind:checked={testChecked}>
-        <!-- This does work :) -->
-      </div>
+      </div> -->
       <button>Update Settings</button>
     </form>
 
   </Card>
-  </div>
+
+  <Card>
+    <form on:submit|preventDefault={uploadAvatar}>
+      {#if avatar}
+        <img class="avatar" src={avatar} alt="your avatar"/>
+      {/if}
+        <input type="text" bind:value={postVar} placeholder={"choose your file"}/>
+        <br />
+        <input type="file" bind:files={newAvatar}/>
+        <br />
+        <button type="submit">Choose avatar</button>
+    </form>
+  </Card>
+
+  <!-- </div> -->
 
 </main>
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
index 237a7565..62a461fb 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
@@ -10,10 +10,12 @@
   let handleClickLogout = async () => {
     await fetch('http://transcendance:8080/api/v2/auth/logout', {
         method: 'POST',
-      });
+      })
+      .then( () => userLogout() ) // i think for TS reasons it has to be a func not direclty push('/') or whatever
+      .then( () => push('/') )
     console.log('clicked logout header')
-    userLogout();
-    push('/'); // replace?
+    // userLogout();
+    // push('/'); // replace?
   };
 
 </script>