Merge branch 'master' of bitbucket.org:LuckyLaszlo/ft_transcendence

srcs/requirements/svelte/api_front/old_unused/loginStatusStore.js

@@ -7,7 +7,7 @@ import { writable } from "svelte/store";
 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(_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

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

@@ -2,32 +2,19 @@
   import Canvas from "../pieces/Canvas.svelte";
   import { push } from "svelte-spa-router";
   import { onMount } from 'svelte';
-  import { userStore, userLogout } from '../stores/loginStatusStore.js';
   import { get } from "svelte/store";
 
 
+  let user;
+
 	onMount(async () => {
-    // console.log('SplashPage testing if logged in')
+    user = await fetch('http://transcendance:8080/api/v2/user')
-
-    // hold on, maybe this is all i need?
-    let user = await fetch('http://transcendance:8080/api/v2/user')
       .then((resp) => resp.json())
-      // .then((data) => void userStore.set(data))  // this returns void so local var user is undefined...
-      // .catch( userLogout(); )
-      // yea ok i don't know how to use catch...
 
-    // Testing Svelet get(store)
+    // i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother
 
-    // let tmp = get(userStore);
+      console.log('User var');
-    // console.log('in SplashPage get(store)')
+      console.log(user);
-    // 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) {
       //   console.log('user not logged in')
       // }
@@ -39,24 +26,14 @@
     // 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
+      // userLogout(); // which i think should delete any previous local storage
     }
 
-    // in theory now we should be logged in...
 	});
 
   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');
-
-    await fetch('http://transcendance:8080/api/v2/user')
-      .then((resp) => resp.json())
-      .then((data) => userStore.set(data));
-      // .then((data) => void userStore.set(data));
-
-    // decide if do this here on in backend
-    // push('/profile');
   }
 
 // 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
@@ -65,8 +42,7 @@
 		await fetch('http://transcendance:8080/api/v2/auth/logout', {
         method: 'POST',
       });
-    // loginStatus.allFalse()
+    user = undefined;
-    userLogout();
 	};
 
 </script>
@@ -75,7 +51,8 @@
 <header class="grid-container">
   <h1>Potato Pong</h1>
   <nav>
-    {#if $userStore !== null}
+    <!-- {#if user !== undefined} -->
+    {#if user && user.username}
       <div on:click={ () => (push('/profile')) }>Profile</div>
       <div on:click={logout}>Logout</div>
     {:else}

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

@@ -1,8 +1,22 @@
 <script lang="ts">
 
+  import { replace } from "svelte-spa-router";
 
+  export let user;
 
 </script>
 
+<div class="wrapper">
+  <h1>You made it to Test</h1>
+  <button on:click={ () => (replace('/'))}>Go Home</button>
+  <div>{user}</div>
+</div>
 
-<h1>you made it to test</h1>
+<style>
+
+  div.wrapper{
+    display: flexbox;
+    align-items: center;
+  }
+
+</style>

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 { userStore, userLogout } from "../stores/loginStatusStore";
 
   // onMount( async() => {
   //  await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
@@ -19,7 +18,6 @@
   let qrCodeImg;
   let qrCode = "";
   let wrongCode = "";
-  // max try doesn't work if you reste the page
   const fetchQrCodeImg = (async() => {
     await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
     {
@@ -65,7 +63,6 @@
   <!-- What the hell is data? ask Cherif -->
     <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>

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

@@ -1,8 +1,5 @@
 <script lang="ts">
   import { replace } from "svelte-spa-router";
-
-
-
 </script>
 
 <div class="wrapper">
@@ -17,10 +14,4 @@
     align-items: center;
   }
 
-  button{
-    /* cursor: pointer;
-    font-weight: bold; */
-    /* rounder edges or something */
-  }
-
 </style>

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

@@ -26,10 +26,11 @@
   // 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
   // once the async authentication check is done
   onMount( async() => {
-    // so ideally i wouldn't do this 
+    // console.log('mounting profile display')
     user = await fetch('http://transcendance:8080/api/v2/user')
       .then( (x) => x.json() );
 
+    // console.log('profile display did my fetch')
     // should i be updating the userStore or is that unnecessary?
 
     if (user.loseGame > user.winGame) {

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

@@ -1,10 +1,7 @@
 <script lang="ts">
 
   import Header from "../../pieces/Header.svelte";
-  import Footer from "../../pieces/Footer.svelte";
+  import Router from "svelte-spa-router";
-  // import { createEventDispatcher } from "svelte";
-  import { push } from "svelte-spa-router";
-  import Router, { link } from "svelte-spa-router";
   import { profileRoutes, prefix } from "../../routes/profileRoutes.js";
 
   // let dispatch = createEventDispatcher();

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

@@ -6,8 +6,7 @@
   import Button from '../../pieces/Button.svelte';
 
   let user;
-  let avatar, postVar, newAvatar;
+  let avatar, newAvatar;
-  // postVar means nothing can i get rid of it or do i need it to do something...
   let uploadAvatarSuccess = false;
 
   // tbh i might not need this...
@@ -26,7 +25,7 @@
     }
     // i don't unerstand why this is necessary but it really doesn't like it otherwise
     nameTmp = user.username;
-    // console.log(user.username)
+    console.log(user.username)
 
     set.tfa = user.isEnabledTwoFactorAuth;
 

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 { userStore, userLogout } from "../stores/loginStatusStore.js";
 
   import active from 'svelte-spa-router/active'
   // or i could leave them all and not display if they're active?
@@ -11,11 +10,10 @@
     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(resp => resp.json)
-      .then( () => push('/') )
+      // .then((resp) => console.log(resp))
+      .then( () => push('/') ) // i think for TS reasons it has to be a func not direclty push('/') or whatever
     console.log('clicked logout header')
-    // userLogout();
-    // push('/'); // replace?
   };
 
 </script>

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

@@ -6,7 +6,6 @@ import UnauthorizedAccessPage from '../pages/UnauthorizedAccessPage.svelte';
 import { wrap } from 'svelte-spa-router/wrap'
 import { get } from 'svelte/store';
 import TestPage from '../pages/TmpTestPage.svelte';
-import { userStore, userLogout } from "../stores/loginStatusStore";
 
 
 
@@ -141,7 +140,10 @@ export const primaryRoutes = {
         else
           return false;
       }
-    ]
+    ],
+    // props: {
+    //   user: user
+    // }
   }),
   '/profile': wrap({
     component: ProfilePage,