good progress, working on 2FA, adding conditions to limit access to certain Routes, need to find out more about the back to settle these things

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

@@ -1,14 +1,21 @@
 <script lang="ts">
 // routing
 	// may not need {link} here
-	import Router, { link } from "svelte-spa-router";
+	import Router, { link, replace } from "svelte-spa-router";
   import { primaryRoutes } from "./routes/primaryRoutes.js";
 
+  const conditionsFailed = (event) => {
+    console.error('conditionsFailed event', event.detail);
+    // i mean i guess i can just leave this in there permanently?
+
+    replace('/unauthorized-access');
+  };
+
 
 </script>
 
 <!-- <h1>Testing</h1> -->
-<Router routes={primaryRoutes} />
+<Router routes={primaryRoutes} on:conditionsFailed={conditionsFailed}/>
 
 
 <style>

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

@@ -4,11 +4,7 @@
   import { onMount } from 'svelte';
   import { loginStatus } from './stores/loginStatusStore.js';
 
-  // if logged in it gets the user from backend
+  // go over agian in detail to make sure this actually does what you want
-  // set loginStats.fortyTwo = true
-  // 
-
-
 	onMount(async () => {
     console.log('SplashPage testing if logged in')
     let user = await fetch('http://transcendance:8080/api/v2/user')
@@ -25,16 +21,18 @@
     }
 	});
 
-	const login = () => {
+	const login = async() => {
 		window.location.href = 'http://transcendance:8080/api/v2/auth';
 		// await fetch ('http://transcendance:8080/api/v2/auth');
     console.log('you are now logged in');
     loginStatus.allTrue();
     // this is redundant if TFA is on because they would only get back here after going through the TFA which sets it to True
     // $loginStatus.tfa = true; // also it doesn't do anything cuz no .update()
-    push('/profile');
+
-    // it doesn't wait before changing the page tho which is really annoying... maybe the backend needs to be updated idk
+    // leave this out for now cuz causing problems
-    // cuz rn i'm doing it in the front and that doesn't seem great...
+    // push('/profile');
+    // idk why this doesn't work, seems really weird, maybe it's an awit thing?
+    // Maybe it would be better to do it in the Backend?
 	}
 
 	const logout = async() => {

srcs/requirements/svelte/api_front/src/components/UnauthorizedAccessPage.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { replace } from "svelte-spa-router";
+
+
+
+</script>
+
+<div class="wrapper">
+  <h1>You're not supposed to be here...</h1>
+  <button on:click={ () => (replace('/'))}>Go Home</button>
+</div>
+
+<style>
+
+  div.wrapper{
+    display: flexbox;
+    align-items: center;
+  }
+
+  button{
+    /* cursor: pointer;
+    font-weight: bold; */
+    /* rounder edges or something */
+  }
+
+</style>

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

@@ -1,8 +1,11 @@
 import NotFound from "../NotFound.svelte";
 import ProfilePage from "../ProfilePage.svelte";
 import SplashPage from "../SplashPage.svelte";
-import TmpTest from '../TmpTest.svelte';
 import TwoFactorAuthentication from '../TwoFactorAuthentication.svelte';
+import UnauthorizedAccessPage from '../components/UnauthorizedAccessPage.svelte';
+import { loginStatus } from "../stores/loginStatusStore";
+import { wrap } from 'svelte-spa-router/wrap'
+import { get } from 'svelte/store';
 
 
 //   "/article/:title": Article, // this is how you would do parameters!
@@ -10,9 +13,52 @@ import TwoFactorAuthentication from '../TwoFactorAuthentication.svelte';
 
 export const primaryRoutes = {
   '/': SplashPage,
-  '/2fa': TwoFactorAuthentication,
+  // '/2fa': TwoFactorAuthentication,
-  '/profile': ProfilePage,
+  '/2fa': wrap({
-  '/profile/*': ProfilePage,
+    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);
+      }
+    ]
+  }),
+  '/unauthorized-access': UnauthorizedAccessPage,
   '*': NotFound
 };
 

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

@@ -2,6 +2,8 @@
 import NotFound from "../NotFound.svelte";
 import ProfileDisplay from '../ProfileDisplay.svelte';
 import ProfileSettings from '../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
 export const prefix = '/profile';
@@ -9,8 +11,38 @@ export const prefix = '/profile';
 export const profileRoutes = {
   '/': ProfileDisplay,
   '/settings': ProfileSettings,
-  '/fetch': ProfileDisplay,
   '*': NotFound
 };
 
+// I think the conditions of access like are you authenticated work best when they are on the parent routes not the nested routes cuz i don't want my header showing up
+
+// export const profileRoutes = {
+//   '/': wrap({
+//     component: ProfileDisplay,
+//     conditions: [
+//       (detail) => {
+//         const { fortyTwo, tfa } = get(loginStatus);
+//         console.log(fortyTwo);
+//         console.log(tfa);
+//         console.log('in Profile Display');
+//         // return true;
+//         return (fortyTwo && tfa);
+//       }
+//     ]
+//   }),
+//   '/settings': wrap({
+//     component: ProfileSettings,
+//     conditions: [
+//       (detail) => {
+//         const { fortyTwo, tfa } = get(loginStatus);
+//         // console.log(fortyTwo);
+//         // console.log(tfa);
+//         // return true;
+//         return (fortyTwo && tfa);
+//       }
+//     ]
+//   }),
+//   '*': NotFound
+// };
+
 // what if i did /#/profile/:id for like not the user? and then based on that did a fetch?