From ce7d75a95412b163af7b8b1f1b4b347b79778213 Mon Sep 17 00:00:00 2001
From: Me <me@Philip.local>
Date: Thu, 1 Dec 2022 22:46:34 +0100
Subject: [PATCH] ok everything still works, now can see the avatar, working on
 better ProfileSettings

---
 .../api_front/src/pages/SplashPage.svelte     | 14 +++++--
 .../src/pages/TwoFactorAuthentication.svelte  |  1 -
 .../src/pages/profile/ProfileDisplay.svelte   | 28 +++++++++++---
 .../src/pages/profile/ProfileSettings.svelte  | 21 +++++++++--
 .../svelte/api_front/src/pieces/Header.svelte |  6 +--
 .../api_front/src/stores/loginStatusStore.js  | 37 +------------------
 6 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
index ad1be730..f5e98f95 100644
--- a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
@@ -2,12 +2,9 @@
   import Canvas from "../pieces/Canvas.svelte";
   import { push } from "svelte-spa-router";
   import { onMount } from 'svelte';
-  import { loginStatus } from '../stores/loginStatusStore.js';
   import { userStore, userLogout } from '../stores/loginStatusStore.js';
 
 
-  // go over agian in detail to make sure this actually does what you want
-  // it needs some work, seems confused a lot of the time...
 	onMount(async () => {
     console.log('SplashPage testing if logged in')
     // let user = await fetch('http://transcendance:8080/api/v2/user')
@@ -43,9 +40,18 @@
       // }
 
 
+  // for some reason unlike in ProfileDisplay here the user is never undefined...
+  // ok i think it's because here i declare the user in the call whereas in ProfileDisplay i declare user before...
+    // if (user !== undefined) {
+    //   console.log('user not undefined')
+    // }
+    // else
+    //   console.log('user undefined')
+
     // to clean up local storage... as a precaution
     // this condition isn't good enough...
-    if (user && user.statusCode && user.statusCode === 403) {
+    // if (user && user.statusCode && user.statusCode === 403) {
+    if (user === undefined) {
       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
     }
diff --git a/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte b/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
index 8fc8d500..5d1cb717 100644
--- a/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { push } from "svelte-spa-router";
-  import { loginStatus } from '../stores/loginStatusStore';
 
   // onMount( async() => {
   //  await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
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 9ba1a28c..9423e921 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
@@ -21,6 +21,7 @@
 
   let user;
   let rank = '';
+  let avatar;
 
 
   // i think i don't need to do this once i sort out the {wrap} conditions: in theory i could pass values to the Route
@@ -29,6 +30,8 @@
     user = await fetch('http://transcendance:8080/api/v2/user')
       .then( (x) => x.json() );
 
+    // should i be updating the userStore or is that unnecessary?
+
     if (user.loseGame > user.winGame) {
       rank = 'Bitch Ass Loser!'
     } else if (user.loseGame === user.winGame) {
@@ -37,6 +40,14 @@
       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;
+		});
+
+
   })
 
   // Glittery Stars and such for Rank
@@ -76,9 +87,9 @@
 {#if user !== undefined}
 <main>
   <!-- <img class="icon" src="img/default_user_icon.png" alt="default user icon"> -->
-  <div>{user.image_url}</div>
-  <img class="icon" src="{user.image_url}" alt="default user icon">
-  <div>{user.username}</div>
+  <!-- <img class="icon" src="{user.image_url}" alt="default user icon"> -->
+  <img class="avatar" src="{avatar}" alt="default user icon">
+  <div class="username">{user.username}</div>
   <div class="rank">Rank: 
     <span class="glitter">
       <span bind:this={stars[0]} class="glitter-star">
@@ -153,8 +164,9 @@
   }
 
 /* Normal CSS stuff */
-  .icon{
+  .avatar{
     max-width: 150px;
+    /* padding: 5px; */
   }
 
 /* The variable rich section */
@@ -174,9 +186,15 @@
     grid-column: 1 / span 3;
   }
 
+  div.username{
+    font-size: 1.5em;
+    font-weight: bold;
+    padding-bottom: 5px;
+  }
+
   div.rank {
     /* color: black; */
-    font-size: 1.5em;
+    font-size: 1.2em;
     font-weight: bold;
   }
 
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 512156b7..7c14ca22 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
@@ -3,7 +3,6 @@
   import Card from '../../pieces/Card.svelte';
   import {onMount} from 'svelte';
   import { push } from 'svelte-spa-router';
-  import { loginStatus } from '../../stores/loginStatusStore'
 
   let user;
 
@@ -49,13 +48,29 @@
         .then(response => response.json())
         .then(result => console.log(result));
 
-      // so now we're saying it's like they logged in with 2fa, so they don't have to go do it now
-      loginStatus.update( (old) => ({...old, tfa: true}) );
       push('/profile');
     }
 
   };
 
+  // $: 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." )
+	// }
+
+
+
+
+
+
 </script>
 
 
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
index e2cc2c5f..237a7565 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { push } from "svelte-spa-router";
   import { location } from 'svelte-spa-router';
-  import { loginStatus } from "../stores/loginStatusStore.js";
   import { userStore, userLogout } from "../stores/loginStatusStore.js";
 
   import active from 'svelte-spa-router/active'
@@ -9,15 +8,12 @@
 
 
   let handleClickLogout = async () => {
-    // dispatch('clickedLogout');
     await fetch('http://transcendance:8080/api/v2/auth/logout', {
         method: 'POST',
       });
     console.log('clicked logout header')
     userLogout();
-		// $loginStatus = false;
-
-    push('/');
+    push('/'); // replace?
   };
 
 </script>
diff --git a/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js b/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
index 98a32894..d89a9d57 100644
--- a/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
+++ b/srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
@@ -1,47 +1,12 @@
 import { writable } from "svelte/store";
 
-function createLoginStatus() {
-  const { subscribe, update } = writable({
-    fortyTwo: false,
-    tfa: false,
-  });
-
-  function toggle42() {
-    update( (old) => ({...old, fortyTwo: !old.fortyTwo}) );
-  };
-
-  function toggleTFA() {
-    update( (old) => ({...old, tfa: !old.tfa}) );
-  };
-
-  function allTrue() {
-    update( (old) => ({fortyTwo: true, tfa: true}) );
-  }
-
-  function allFalse() {
-    update( (old) => ({fortyTwo: false, tfa: false}) );
-  }
-
-  function isLogged() {
-    // return (l) => {l.fortyTwo && l.tfa};
-    // return self.fortyTwo && self.tfa;
-    // return fortyTwo && tfa;
-    return (old) => (old.fortyTwo && old.tfa);
-  };
-
-  return { subscribe, update, toggle42, toggleTFA, allTrue, allFalse, isLogged };
-}
-
-export const loginStatus = createLoginStatus();
-
-
 // an alternative way of doing things where i have a svelte store connected to localStorage
 
 // do in need to adapt this to work with 2fa?
 
-
 let _user = localStorage.getItem('42User');
 
+// turns out a simple store is actually the easiest :)
 export const userStore = writable(_user ? JSON.parse(_user) : null);  // we start with no user, but go get one if one exists
 
 // ok so this will happen no matter what, basically we are telling it what to do if the store containing the user changes