Things still work, and i'm cleaning up my work cuz it's hard to know what's going on otherwise

srcs/requirements/nestjs/api_back/src/auth/42/authentication.controller.ts

@@ -34,7 +34,7 @@ export class AuthenticationController {
 		console.log('ON EST DANS REDIRECT AUTH CONTROLLER');
 		console.log('On redirige');
 		if (request.user.isEnabledTwoFactorAuth === false)
-			return response.status(200).redirect('http://transcendance:8080/#/profile');
+			return response.status(200).redirect('http://transcendance:8080/');
 		return response.status(200).redirect('http://transcendance:8080/#/2fa');
 	}
 

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

@@ -5,20 +5,6 @@
   import { primaryRoutes } from "./routes/primaryRoutes.js";
 
 
-	// this page should handle the SPA history management...
-
-	// set to false later for actual security
-	// let loggedIn = true;
-
-
-
-	// $: logout = async() => {
-	// 	await fetch("http://transcendance:8080/api/v2/auth/logout",{
-	// 		method : 'POST',
-	// 	}).then(push('/login'));
-	// }
-
-
 </script>
 
 <!-- <h1>Testing</h1> -->

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

@@ -3,6 +3,7 @@
   import Card from './shared/Card.svelte';
   import {onMount} from 'svelte';
   import { push } from 'svelte-spa-router';
+  import { loginStatus } from './stores/loginStatusStore'
 
   let user;
 
@@ -48,6 +49,8 @@
         .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');
     }
 

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

@@ -4,35 +4,35 @@
   import { onMount } from 'svelte';
   import { loginStatus } from './stores/loginStatusStore.js';
 
-  // tmp for testing
+  // if logged in it gets the user from backend
-  // this is fucking retarded, pardon my offensive language.
+  // set loginStats.fortyTwo = true
-  let aData = {
+  // 
-    username: '',
+
-  }
 
 	onMount(async () => {
-		// console.log('PROFIL SVELTE');
     console.log('SplashPage testing if logged in')
-		// const {data} = await axios.get('http://transcendance:8080/api/v2/user');
+    let user = await fetch('http://transcendance:8080/api/v2/user')
-    fetch('http://transcendance:8080/api/v2/user')
 		  .then((resp) => resp.json())
-	  	.then((res) => {
+		if (user) {
-		  	aData.username = res.username;
+      if (!user.isEnabledTwoFactorAuth) {
-	  	})
+        loginStatus.update( (old) => ({...old, tfa: true}) );
-    console.log(aData);
+      }
-		// if (data) {
+      // because the User will only exist if they're logged in to 42?
-		// 	$loginStatus.42 = true;
+      loginStatus.update( (old) => ({...old, fortyTwo: true}) );
-    //  //push('/user');
+      if (user.isEnabledTwoFactorAuth && $loginStatus.tfa)
-    // }
+        push('/profile');
+      // They have to click Login if using tfa and tfa no already done
+    }
 	});
 
 	const login = () => {
-    // document.body.scrollIntoView();
-    // push
 		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');
+    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
     // cuz rn i'm doing it in the front and that doesn't seem great...
 	}
@@ -41,10 +41,14 @@
 		await fetch('http://transcendance:8080/api/v2/auth/logout', {
         method: 'POST',
       });
-		// $loginStatus.42 = false;
+    loginStatus.allFalse()
-    // you're an idiot, the reason this didn't work is because you didn't use update. duh
 	};
 
+  const toProfile = () => {
+    push('/profile');
+  };
+
+
 </script>
 
 
@@ -53,72 +57,26 @@
   <!-- <div on:mouseenter={enter} on:mouseleave={leave} class:active > -->
     <h1>Potato Pong</h1>
   <!-- </div> -->
+
   <nav>
-    <!-- placeholder links -->
+    {#if ($loginStatus.fortyTwo && $loginStatus.tfa) === false}
-    <a href="/">Somewhere</a>
-    <!-- <a href="/">SomewhereElse</a> -->
-    <!-- {#if $loginStatus == false} -->
-      <!-- <div on:click={login}>Login {$loginStatus}</div> -->
       <div on:click={login}>Login</div>
-    <!-- {:else} -->
+    {:else}
-      <!-- <div on:click={logout}>Logout {$loginStatus}</div> -->
+      <div on:click={toProfile}>Profile</div>
-    <!-- {/if} -->
+      <div on:click={logout}>Logout</div>
-    <!-- one of these will be login and it will scroll you down to the login part -->
+    {/if}
   </nav>
   <h2>
     <div>Welcome to</div>
     <div>Potato Pong</div>
   </h2>
-
-  <!-- here i want a flashing arrow pointing down to the login part -->
-
 </header>
-<!-- <Canvas class=".canvas2"/> -->
+
 <Canvas/>
 
 
 
 <style>
-  /* currently useless */
-  /* No styles get applied to the canvas from here, maybe i should move them to the Canvas Component... */
-  /* tho tbh, why bother, i'm gonna change it anyway... */
-  .canvas{
-    /* grid-column: 1 / 13;
-    grid-row: 1 / 3; */
-    /* don't rely on Z-Index!!!! */
-    z-index: -1;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-
-    /* Tmp? */
-    /* background-color: #666; */
-
-    /* somehow this got rid of they annoying white space under the canvas */
-    padding-bottom: 0;
-    margin-bottom: 0px;
-    overflow: hidden;
-  }
-
-  .canvas2{
-    z-index: -1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-
-    /* Tmp? */
-    /* background-color: #666; */
-
-    /* somehow this got rid of they annoying white space under the canvas */
-    padding-bottom: 0;
-    margin-bottom: 0px;
-    overflow: hidden;
-  }
-
 
   /* .canvas .grid-container{ */
   .grid-container{
@@ -126,7 +84,6 @@
     left: 0;
     top: 0;
 
-
     box-sizing: border-box;
     width: 100%;
     height: 100%;
@@ -136,17 +93,12 @@
     overflow: hidden;
     padding: 20px 40px;
 
-
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
     align-items: center;
   }
 
-  header h1, header nav a{
-    /* tmp ? well i kinda like it */
-    color: bisque;
-  }
   header h1{
     grid-column: 1 / 7;
     grid-row: 1;
@@ -164,20 +116,6 @@
     padding: 20px;
     border: 1px solid bisque;
   }
-  header nav a{
-    margin-left: 10px;
-    text-decoration: none;
-  }
-
-  /* testing */
-  header nav a:hover{
-    font-weight: bold;
-    background-color: blue;
-  }
-  header h2:hover{
-    background: blue;
-  }
-
 
   header h2{
     grid-row: 3;
@@ -192,11 +130,19 @@
     /* color: red; */
   }
 
-  /* tmp prolly */
   nav div {
     display: inline;
     color: bisque;
     font-weight: bold;
   }
+  nav > div {
+    padding-left: 1em;
+    /* didn't quite work, applies to both for some reason */
+    /* nav:first-child doesn't work either*/
+  }
+  nav div:hover{
+    text-decoration: underline;
+    cursor: pointer;
+  }
 
 </style>

srcs/requirements/svelte/api_front/src/TwoFactorAuthentication.svelte

@@ -1,36 +1,121 @@
-
-
 <script lang="ts">
-
+  import { onMount } from "svelte";
-  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",
+  //    {
+  //      method: 'POST',
+  //    })
+  //    .then(response => {return response.blob()})
+  //    .then(blob => {
+  //      const url = URL.createObjectURL(blob);
+  //      qrCodeImg = url;
+  //    });
+  // });
 
-  onMount( async() => {
-    // ok no idea what goes in here...
-  })
 
-  // testing loginStatus Custom Store
+  let qrCodeImg;
-
+  let qrCode = "";
-  const toggleTFA = () => {
+  let wrongCode = "";
-    loginStatus.toggleTFA();
+  let maxTry = 3;
-    console.log($loginStatus.tfa);
+  const fetchQrCodeImg = (async() => {
-  }
+    await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
+    {
+      method: 'POST',
+    })
+    .then(response => {return response.blob()})
+    .then(blob => {
+      const url = URL.createObjectURL(blob);
+      qrCodeImg = url;
+    });
+  })()
 
+  const submitCode = async() => {
+    const response = await fetch("http://transcendance:8080/api/v2/auth/2fa/turn-on",
+      {
+        method : 'POST',
+        headers : {
+          "Content-Type": "application/json",
+        },
+        body : JSON.stringify({
+          "twoFaCode" : qrCode,
+        }),
+    });
+    if (response.status === 401) {
+      qrCode = "";
+      wrongCode = `Wrong code, you have ${maxTry} tries left`;
+      maxTry--;
+    }
+    if (maxTry === 0) {
+      await fetch("http://transcendance:8080/auth/logout",
+      {
+        method : 'POST',
+      })
+      .then(response => response.json())
+      // .then(push('/'));
+      push('/');
+      // The .then(push) doesn't seem to work...
+    }
+    if (response.status === 200) {
+      // loginStatus.toggleTFA();
+      loginStatus.update( (old) => ({...old, tfa: true}) );
+      push('/profile');
+      console.log('vaid Code for 2FA')
+    }
+  };
 
 </script>
 
-<h1>2FA Test</h1>
+<!-- ask Hugo but for Reactive page might want to put main in a div or something? -->
-
+<main>
-<p>FortyTwo: {$loginStatus.fortyTwo}</p>
+  <h1>2FA Sign In</h1>
-<p>TFA: {$loginStatus.tfa}</p>
+  <p>use google authenticator</p>
-<p>isLogged: {loginStatus.isLogged}</p>
+  {#await fetchQrCodeImg}
-
+    <p>Please Wait...</p>
-<div>
+  {:then data}
-  <button on:click={toggleTFA}>toggleTFA</button>
+  <!-- What the hell is data? ask Cherif -->
-</div>
+    <img src={qrCodeImg} alt="A QRCodeImg you must scan with google authenticator" id="qrcodeImg" />
-
+    <form on:submit|preventDefault={submitCode}>
+      <!-- <label for="code">Input Code</label> -->
+      <input id="code" bind:value={qrCode} type="text" placeholder="Input Code"/>
+      <button type="submit">Send</button>
+    </form>
+    {#if wrongCode}
+      <!-- shoudl i do this in the Net Ninja way? like it's "" until an error happens? -->
+      <div class="error">
+        {wrongCode}
+      </div>
+    {/if}
+  {:catch}
+    <p>Unable to get QrCodeImg</p>
+  {/await}
+</main>
 
 <style>
+  main {
+    /* display: flex; */
+    /* align-items: center; */
+    text-align: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    /* max-width: 500px; */
+  }
 
+  form {
+    /* max-width: 330px; */
+    padding-top: 15px;
+
+  }
+
+  form input {
+    max-width: 330px;
+  }
+
+  .error {
+    font-weight: bold;
+    font-size: 0.8em;
+    color: red;
+  }
 </style>

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

@@ -14,6 +14,14 @@ function createLoginStatus() {
     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;
@@ -21,7 +29,7 @@ function createLoginStatus() {
     return (old) => (old.fortyTwo && old.tfa);
   };
 
-  return { subscribe, update, toggle42, toggleTFA, isLogged };
+  return { subscribe, update, toggle42, toggleTFA, allTrue, allFalse, isLogged };
 }
 
 export const loginStatus = createLoginStatus();