ok so trying to get the {wrap} to do what i want for the routing, but the store and local storage aren't complying, something about a Forbidden Resource, either way seems like i need to scrap the store entirely and go with the fetch(user) in the {wrap} each time anyway, for security, and also cuz that works

srcs/requirements/svelte/api_front/old_unused/primaryRoutes.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+  import NotFound from "../src/pages/NotFound.svelte";
+import ProfilePage from "../src/pages/profile/ProfilePage.svelte";
+import SplashPage from "../src/pages/SplashPage.svelte";
+import TwoFactorAuthentication from '../src/pages/TwoFactorAuthentication.svelte';
+import UnauthorizedAccessPage from '../src/pages/UnauthorizedAccessPage.svelte';
+import { wrap } from 'svelte-spa-router/wrap'
+import { get } from 'svelte/store';
+
+import TestPage from '../src/pages/TmpTestPage.svelte';
+import { userStore, userLogout } from "../src/stores/loginStatusStore";
+
+
+
+//   "/article/:title": Article, // this is how you would do parameters!
+// "/": LoginPage,
+
+// TMP not using this cuz need to work out how to authentical both 42 and 2FA from the backend
+
+// export const primaryRoutes = {
+//   '/': SplashPage,
+//   // '/2fa': TwoFactorAuthentication,
+//   '/2fa': wrap({
+//     component: TwoFactorAuthentication,
+//     conditions: [
+//       (detail) => {
+//         // let loggedIn;
+//         // loginStatus.subscribe(value => {
+//        //   loggedIn = value;
+//        // });
+
+//         const { fortyTwo, tfa } = get(loginStatus);
+
+//         console.log('condition in /2fa');
+//         // return (loginStatus.fortyTwo && loginStatus.tfa);
+//         // console.log($loginStatus.fortyTwo)
+//         console.log(fortyTwo);
+//         console.log(tfa);
+//         return true;
+//       }
+//     ]
+//   }),
+//   '/profile': wrap({
+//     component: ProfilePage,
+//     conditions: [
+//       (detail) => {
+//         const { fortyTwo, tfa } = get(loginStatus);
+//         // console.log(fortyTwo);
+//         // console.log(tfa);
+//         // return true;
+//         return (fortyTwo && tfa);
+//       }
+//     ]
+//   }),
+//   '/profile/*': wrap({
+//     component: ProfilePage,
+//     conditions: [
+//       (detail) => {
+//         const { fortyTwo, tfa } = get(loginStatus);
+//         // console.log(fortyTwo);
+//         // console.log(tfa);
+//         // return true;
+//         return (fortyTwo && tfa);
+//       }
+//     ]
+//   }),
+//   '/profile': wrap({
+//         // Use a dynamically-loaded component for this
+//         asyncComponent: () => import('./ProfilePage.svelte'),
+//         // Adding one pre-condition that's an async function
+//         conditions: [
+//           async (detail) => {
+//             // Make a network request, which are async operations
+//             const response = await fetch('http://transcendance:8080/api/v2/user')
+//             const data = await response.json()
+//             // Return true to continue loading the component, or false otherwise
+//             if (data.isAdmin) {
+//               return true
+//             }
+//             else {
+//               return false
+//             }
+//           }
+//         ]
+//       }),
+//   '/unauthorized-access': UnauthorizedAccessPage,
+//   '*': NotFound
+// };
+
+export const primaryRoutes = {
+  "/": SplashPage,
+  '/test': wrap({
+    component: TestPage,
+    conditions: [
+      (detail) => {
+        // const user = get(userStore);  // seems like get(store) is not an option
+        // // const user = userStore;
+        // // console.log(fortyTwo);
+        // // console.log(tfa);
+        // console.log('in /test what is in user')
+        // console.log(user)
+
+        // you moron $userStore is a Svelte Abreviation, this is .JS, duh
+        // let user = $userStore;
+        let user;
+        const unsub = userStore.subscribe(value => {
+          user = value;
+        });
+        console.log('in /test what is in userStore directly')
+        console.log(user)
+
+        // return true;
+        // obvi this doesn't work cuz skips to true after no user...
+          // you gotta make the condition the true and the everything else false
+        // if (user && user.statusCode && user.statusCode === 403)
+        // if (user !== null) {
+        if (user && user.username) {
+          unsub();
+          return true;
+        } else {
+          unsub();
+          return false;
+        }
+      }
+    ]
+  }),
+  // '/test': wrap({
+  //   component: TestPage,
+  //   conditions: [
+  //     async(detail) => {
+  //       // THIS SHIT TOTALLY WORKS
+  //       const user = await fetch('http://transcendance:8080/api/v2/user')
+  //       .then((resp) => resp.json())
+
+  //       console.log('in /test what is in user')
+  //       console.log(user)
+
+  //       if (user && user.username)
+  //         return true;
+  //       else
+  //         return false;
+  //     }
+  //   ]
+  // }),
+  '/2fa': TwoFactorAuthentication,
+  "/profile": ProfilePage,
+  "/profile/*": ProfilePage,
+  '/unauthorized-access': UnauthorizedAccessPage,
+  "*": NotFound
+};
+
+// export const primaryRoutes = {
+//   "/": SplashPage,
+//   "/profile": ProfilePage,
+//   "/game": GamePage,
+//   "/chat": ChatPage,
+//   "*": NotFound
+// };
+
+
+// i might need to add /profile/* and such to make the nested routers work
+
+// ok maybe these need to be in their own files?
+
+
+
+// export const gameRoutes = {
+//   "/": GamePage,
+//   "*": NotFound
+// };
+
+// export const chatRoutes = {
+//   "/": ChatPage,
+//   "*": NotFound
+// };
+
+</script>

srcs/requirements/svelte/api_front/src/App.svelte

@@ -3,6 +3,7 @@
 	// may not need {link} here
 	import Router, { link, replace } from "svelte-spa-router";
   import { primaryRoutes } from "./routes/primaryRoutes.js";
+  // import primaryRoutes from "./routes/primaryRoutes.svelte";
 
   const conditionsFailed = (event) => {
     console.error('conditionsFailed event', event.detail);

srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte

@@ -3,6 +3,7 @@
   import { push } from "svelte-spa-router";
   import { onMount } from 'svelte';
   import { userStore, userLogout } from '../stores/loginStatusStore.js';
+  import { get } from "svelte/store";
 
 
 	onMount(async () => {
@@ -15,9 +16,16 @@
       // .catch( userLogout(); )
       // yea ok i don't know how to use catch...
 
-    //   userStore.set(user);
+    // Testing Svelet get(store)
-    //   console.log('user in userStore');
+
-    //   console.log($userStore);
+    // let tmp = get(userStore);
+    // console.log('in SplashPage get(store)')
+    // console.log(tmp)
+
+
+      // userStore.set(user);
+      // console.log('user in userStore');
+      // console.log($userStore);
       // console.log('now user in the local var');
       // console.log(user);
       // if (user && user.statusCode && user.statusCode === 403) {
@@ -44,7 +52,8 @@
 
     await fetch('http://transcendance:8080/api/v2/user')
       .then((resp) => resp.json())
-      .then((data) => void userStore.set(data));
+      .then((data) => userStore.set(data));
+      // .then((data) => void userStore.set(data));
 
     // decide if do this here on in backend
     // push('/profile');

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

@@ -30,8 +30,8 @@
     set.tfa = user.isEnabledTwoFactorAuth;
 
     // tmp
-    console.log('this is what is in the avatar before fetch')
+    // console.log('this is what is in the avatar before fetch')
-    console.log(avatar)
+    // console.log(avatar)
 
     await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
 		  .then(response => {return response.blob()})
@@ -44,10 +44,10 @@
       // .then(() => errors.avatar = '' ) // unnecessary i think cuz in on mount...
 
       // tmp
-      console.log('this is what is in the avatar')
+      // console.log('this is what is in the avatar')
-      console.log(avatar)
+      // console.log(avatar)
-      console.log('this is what is in the NEW Avatar')
+      // console.log('this is what is in the NEW Avatar')
-      console.log(newAvatar)
+      // console.log(newAvatar)
     })
 
   const settingsHandler = async() => {
@@ -55,7 +55,7 @@
 
     // I don't really care which i use at this point...
     // if (set.username === nameTmp) {
-    if (set.username === user.username || set.username.trim() === '') {
+    if (set.username === user.username || (set.username.trim() === '' && set.username !== '')) {
       errors.username = 'Invalid new username';
       valid = false;
     } else {
@@ -90,7 +90,7 @@
     }
 		const data = new FormData();
 		data.append("file", newAvatar[0]);
-    
+
     // tmp
 		console.log(data);
 
@@ -132,13 +132,6 @@
 
     <Card>
       <!-- ok so it can't actually show us the file we upload until we've uploaded it... -->
-      <!-- {#if newAvatar !== undefined}
-        <img class="avatar" src={newAvatar} alt="your new avatar"/>
-      {:else if avatar !== undefined}
-        <img class="avatar" src={avatar} alt="your avatar"/>
-      {:else}
-        <p class="error">{errors.avatar}</p>
-      {/if} -->
       {#if avatar !== undefined}
         <img class="avatar" src={avatar} alt="your avatar"/>
       {/if}

srcs/requirements/svelte/api_front/src/pieces/Header.svelte

@@ -34,6 +34,9 @@
 
     <!-- <button on:click={() => (push('/stream'))}>Stream</button> -->
     <!-- <button on:click={() => (push('/chat'))}>Chat</button> -->
+
+    <!-- tmp -->
+    <button on:click={() => (push('/test'))}>test</button>
     <button on:click={handleClickLogout}>Log Out</button>
   </nav>
 </header>

srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js

@@ -3,10 +3,8 @@ import ProfilePage from "../pages/profile/ProfilePage.svelte";
 import SplashPage from "../pages/SplashPage.svelte";
 import TwoFactorAuthentication from '../pages/TwoFactorAuthentication.svelte';
 import UnauthorizedAccessPage from '../pages/UnauthorizedAccessPage.svelte';
-import { loginStatus } from "../stores/loginStatusStore";
 import { wrap } from 'svelte-spa-router/wrap'
 import { get } from 'svelte/store';
-
 import TestPage from '../pages/TmpTestPage.svelte';
 import { userStore, userLogout } from "../stores/loginStatusStore";
 
@@ -93,17 +91,57 @@ export const primaryRoutes = {
     component: TestPage,
     conditions: [
       (detail) => {
-        const user = get(userStore);
+        const user = get(userStore);  // seems like get(store) is not an option
-        // console.log(fortyTwo);
+        // // const user = userStore;
-        // console.log(tfa);
+        // // console.log(fortyTwo);
+        // // console.log(tfa);
+        // console.log('in /test what is in user')
+        // console.log(user)
+
+        // you moron $userStore is a Svelte Abreviation, this is .JS, duh
+        // let user = $userStore;
+        // let user;
+        // const unsub = userStore.subscribe(value => {
+        //   console.log(value);
+        //   user = value;
+        // });
+        console.log('in /test what is in userStore directly')
+        console.log(user)
+
         // return true;
-        if (user)
+        // obvi this doesn't work cuz skips to true after no user...
+          // you gotta make the condition the true and the everything else false
+        // if (user && user.statusCode && user.statusCode === 403)
+        // if (user && user.username) {
+        if (user !== null) {
+          unsub();
           return true;
-        else
+        } else {
+          unsub();
           return false;
+        }
       }
     ]
   }),
+  // '/test': wrap({
+  //   component: TestPage,
+  //   conditions: [
+  //     async(detail) => {
+  //       // THIS SHIT TOTALLY WORKS
+  //       // Yea in the end this might be the best thing, like also from a Security point of view
+  //       const user = await fetch('http://transcendance:8080/api/v2/user')
+  //       .then((resp) => resp.json())
+
+  //       console.log('in /test what is in user')
+  //       console.log(user)
+
+  //       if (user && user.username)
+  //         return true;
+  //       else
+  //         return false;
+  //     }
+  //   ]
+  // }),
   '/2fa': TwoFactorAuthentication,
   "/profile": ProfilePage,
   "/profile/*": ProfilePage,

srcs/requirements/svelte/api_front/src/routes/profileRoutes.js

@@ -2,7 +2,6 @@
 import NotFound from "../pages/NotFound.svelte";
 import ProfileDisplay from '../pages/profile/ProfileDisplay.svelte';
 import ProfileSettings from '../pages/profile/ProfileSettings.svelte';
-import { loginStatus } from "../stores/loginStatusStore";
 import { wrap } from 'svelte-spa-router/wrap'
 
 // establishing the prefix here very clearly so we can have a coherent repeatable structure

srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js

@@ -8,11 +8,17 @@ 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
+// export const userStore = writable(null);
 
 // ok so this will happen no matter what, basically we are telling it what to do if the store containing the user changes
 userStore.subscribe((value) => {
-  if (value) localStorage.setItem('42User', JSON.stringify(value));
+  if (value)
-  else localStorage.removeItem('42User'); // for logout
+    localStorage.setItem('42User', JSON.stringify(value));
+  else
+    localStorage.removeItem('42User'); // for logout
 });
 
 export const userLogout = () => userStore.set(null);
+
+
+// export const tmpStore = userStore