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

This commit is contained in:
batche
2022-12-08 17:13:29 +01:00
10 changed files with 38 additions and 62 deletions

View File

@@ -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

View File

@@ -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')
// hold on, maybe this is all i need?
let user = await fetch('http://transcendance:8080/api/v2/user')
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('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);
console.log('User 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()
userLogout();
user = undefined;
};
</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}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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) {

View File

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

View File

@@ -6,8 +6,7 @@
import Button from '../../pieces/Button.svelte';
let user;
let avatar, postVar, newAvatar;
// postVar means nothing can i get rid of it or do i need it to do something...
let avatar, newAvatar;
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;

View File

@@ -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( () => push('/') )
// .then(resp => resp.json)
// .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>

View File

@@ -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,