42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

great news, the new svelte store that is connected to the local storage works great, not only do i always know if a user is logged in but i have their user data too

Browse Source
This commit is contained in:
Me
2022-12-01 21:48:38 +01:00
parent 92acf36962
commit 042053ee2b
5 changed files with 97 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
View File

@@ -3,30 +3,70 @@
import { push } from "svelte-spa-router";
import { onMount } from 'svelte';
import { loginStatus } from '../stores/loginStatusStore.js';
import { userStore, userLogout } from '../stores/loginStatusStore.js';
// go over agian in detail to make sure this actually does what you want
// it needs some work, seems confused a lot of the time...
onMount(async () => {
console.log('SplashPage testing if logged in')
// let user = await fetch('http://transcendance:8080/api/v2/user')
// .then((resp) => resp.json())
// if (user) {
// if (!user.isEnabledTwoFactorAuth) {
// loginStatus.update( (old) => ({...old, tfa: true}) );
// }
// // because the User will only exist if they're logged in to 42?
// loginStatus.update( (old) => ({...old, fortyTwo: true}) );
// if (user.isEnabledTwoFactorAuth && $loginStatus.tfa)
// push('/profile');
// // They have to click Login if using tfa and tfa no already done
// }
// hold on, maybe this is all i need?
let user = await fetch('http://transcendance:8080/api/v2/user')
.then((resp) => resp.json())
if (user) {
if (!user.isEnabledTwoFactorAuth) {
loginStatus.update( (old) => ({...old, tfa: true}) );
}
// because the User will only exist if they're logged in to 42?
loginStatus.update( (old) => ({...old, fortyTwo: true}) );
if (user.isEnabledTwoFactorAuth && $loginStatus.tfa)
push('/profile');
// They have to click Login if using tfa and tfa no already done
.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...
// 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')
// }
// if (user && user.username) {
// console.log('we have a user');
// }
// to clean up local storage... as a precaution
// this condition isn't good enough...
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
}
// 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');
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();
// ok giving our new local storage and store combo a go
// what i need is to set the store to the user when this button get's pressed
// since there's no apparent return i guess i'll just fetch the user?
await fetch('http://transcendance:8080/api/v2/user')
.then((resp) => resp.json())
.then((data) => void userStore.set(data));
// 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()
@@ -34,41 +74,43 @@
// 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?
}
}
// 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
const logout = async() => {
await fetch('http://transcendance:8080/api/v2/auth/logout', {
method: 'POST',
});
loginStatus.allFalse()
// loginStatus.allFalse()
userLogout();
};
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<header class="grid-container">
<!-- <div on:mouseenter={enter} on:mouseleave={leave} class:active > -->
<h1>Potato Pong</h1>
<!-- </div> -->
<nav>
<!-- <nav>
{#if ($loginStatus.fortyTwo && $loginStatus.tfa) === false}
<div on:click={login}>Login</div>
{:else}
<div on:click={ () => (push('/profile')) }>Profile</div>
<div on:click={logout}>Logout</div>
{/if}
</nav>
<!-- <nav> -->
<!-- seems redundant but let's give it a try -->
<!-- {#if $store !== null}
</nav> -->
<nav>
<!-- seems redundant but let's give it a try yea ok it still doesn't work, hate that... -->
{#if $userStore !== null}
<div on:click={ () => (push('/profile')) }>Profile</div>
<div on:click={logout}>Logout</div>
{:else}
<div on:click={login}>Login</div>
{/if}
</nav> -->
</nav>
<h2>
<div>Welcome to</div>
<div>Potato Pong</div>

8
srcs/requirements/svelte/api_front/src/pages/TmpTestPage.svelte Normal file
View File

@@ -0,0 +1,8 @@
<script lang="ts">
</script>
<h1>you made it to test</h1>

2
srcs/requirements/svelte/api_front/src/pieces/Header.svelte
View File

@@ -2,6 +2,7 @@
import { push } from "svelte-spa-router";
import { location } from 'svelte-spa-router';
import { loginStatus } from "../stores/loginStatusStore.js";
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?
@@ -13,6 +14,7 @@
method: 'POST',
});
console.log('clicked logout header')
userLogout();
// $loginStatus = false;
push('/');

19
srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
View File

@@ -7,6 +7,10 @@ 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";
// "/article/:title": Article, // this is how you would do parameters!
// "/": LoginPage,
@@ -85,6 +89,21 @@ import { get } from 'svelte/store';
export const primaryRoutes = {
"/": SplashPage,
'/test': wrap({
component: TestPage,
conditions: [
(detail) => {
const user = get(userStore);
// console.log(fortyTwo);
// console.log(tfa);
// return true;
if (user)
return true;
else
return false;
}
]
}),
'/2fa': TwoFactorAuthentication,
"/profile": ProfilePage,
"/profile/*": ProfilePage,

6
srcs/requirements/svelte/api_front/src/stores/loginStatusStore.js
View File

@@ -42,16 +42,16 @@ export const loginStatus = createLoginStatus();
let _user = localStorage.getItem('42User');
export const store = 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
// ok so this will happen no matter what, basically we are telling it what to do if the store containing the user changes
store.subscribe((value) => {
userStore.subscribe((value) => {
if (value) localStorage.setItem('42User', JSON.stringify(value));
else localStorage.removeItem('42User'); // for logout
});
export const logout = () => store.set(null);
export const userLogout = () => userStore.set(null);
// ok this is the part where i need to use our API rather than Auth
// export async function signUp(username, password, email) {