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

ok so trying to get the {wrap} to do what i want for the routing, but the store and local storage aren't complying, something about a Forbidden Resource, either way seems like i need to scrap the store entirely and go with the fetch(user) in the {wrap} each time anyway, for security, and also cuz that works

Browse Source
This commit is contained in:
Me
2022-12-05 05:55:43 +01:00
parent 450f6873a6
commit c79d6f9b7d
8 changed files with 255 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
srcs/requirements/svelte/api_front/old_unused/primaryRoutes.svelte Normal file
View File

@@ -0,0 +1,177 @@
<script lang="ts">
import NotFound from "../src/pages/NotFound.svelte";
import ProfilePage from "../src/pages/profile/ProfilePage.svelte";
import SplashPage from "../src/pages/SplashPage.svelte";
import TwoFactorAuthentication from '../src/pages/TwoFactorAuthentication.svelte';
import UnauthorizedAccessPage from '../src/pages/UnauthorizedAccessPage.svelte';
import { wrap } from 'svelte-spa-router/wrap'
import { get } from 'svelte/store';
import TestPage from '../src/pages/TmpTestPage.svelte';
import { userStore, userLogout } from "../src/stores/loginStatusStore";
// "/article/:title": Article, // this is how you would do parameters!
// "/": LoginPage,
// TMP not using this cuz need to work out how to authentical both 42 and 2FA from the backend
// export const primaryRoutes = {
// '/': SplashPage,
// // '/2fa': TwoFactorAuthentication,
// '/2fa': wrap({
// 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);
// }
// ]
// }),
// '/profile': wrap({
// // Use a dynamically-loaded component for this
// asyncComponent: () => import('./ProfilePage.svelte'),
// // Adding one pre-condition that's an async function
// conditions: [
// async (detail) => {
// // Make a network request, which are async operations
// const response = await fetch('http://transcendance:8080/api/v2/user')
// const data = await response.json()
// // Return true to continue loading the component, or false otherwise
// if (data.isAdmin) {
// return true
// }
// else {
// return false
// }
// }
// ]
// }),
// '/unauthorized-access': UnauthorizedAccessPage,
// '*': NotFound
// };
export const primaryRoutes = {
"/": SplashPage,
'/test': wrap({
component: TestPage,
conditions: [
(detail) => {
// const user = get(userStore); // seems like get(store) is not an option
// // const user = userStore;
// // console.log(fortyTwo);
// // console.log(tfa);
// console.log('in /test what is in user')
// console.log(user)
// you moron $userStore is a Svelte Abreviation, this is .JS, duh
// let user = $userStore;
let user;
const unsub = userStore.subscribe(value => {
user = value;
});
console.log('in /test what is in userStore directly')
console.log(user)
// return true;
// obvi this doesn't work cuz skips to true after no user...
// you gotta make the condition the true and the everything else false
// if (user && user.statusCode && user.statusCode === 403)
// if (user !== null) {
if (user && user.username) {
unsub();
return true;
} else {
unsub();
return false;
}
}
]
}),
// '/test': wrap({
// component: TestPage,
// conditions: [
// async(detail) => {
// // THIS SHIT TOTALLY WORKS
// const user = await fetch('http://transcendance:8080/api/v2/user')
// .then((resp) => resp.json())
// console.log('in /test what is in user')
// console.log(user)
// if (user && user.username)
// return true;
// else
// return false;
// }
// ]
// }),
'/2fa': TwoFactorAuthentication,
"/profile": ProfilePage,
"/profile/*": ProfilePage,
'/unauthorized-access': UnauthorizedAccessPage,
"*": NotFound
};
// export const primaryRoutes = {
// "/": SplashPage,
// "/profile": ProfilePage,
// "/game": GamePage,
// "/chat": ChatPage,
// "*": NotFound
// };
// i might need to add /profile/* and such to make the nested routers work
// ok maybe these need to be in their own files?
// export const gameRoutes = {
// "/": GamePage,
// "*": NotFound
// };
// export const chatRoutes = {
// "/": ChatPage,
// "*": NotFound
// };
</script>

1
srcs/requirements/svelte/api_front/src/App.svelte
View File

@@ -3,6 +3,7 @@
// may not need {link} here
import Router, { link, replace } from "svelte-spa-router";
import { primaryRoutes } from "./routes/primaryRoutes.js";
// import primaryRoutes from "./routes/primaryRoutes.svelte";
const conditionsFailed = (event) => {
console.error('conditionsFailed event', event.detail);

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

@@ -3,6 +3,7 @@
import { push } from "svelte-spa-router";
import { onMount } from 'svelte';
import { userStore, userLogout } from '../stores/loginStatusStore.js';
import { get } from "svelte/store";
onMount(async () => {
@@ -15,9 +16,16 @@
// .catch( userLogout(); )
// yea ok i don't know how to use catch...
// userStore.set(user);
// console.log('user in userStore');
// console.log($userStore);
// Testing Svelet get(store)
// 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);
// if (user && user.statusCode && user.statusCode === 403) {
@@ -44,7 +52,8 @@
await fetch('http://transcendance:8080/api/v2/user')
.then((resp) => resp.json())
.then((data) => void userStore.set(data));
.then((data) => userStore.set(data));
// .then((data) => void userStore.set(data));
// decide if do this here on in backend
// push('/profile');

23
srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
View File

@@ -30,8 +30,8 @@
set.tfa = user.isEnabledTwoFactorAuth;
// tmp
console.log('this is what is in the avatar before fetch')
console.log(avatar)
// console.log('this is what is in the avatar before fetch')
// console.log(avatar)
await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
.then(response => {return response.blob()})
@@ -44,10 +44,10 @@
// .then(() => errors.avatar = '' ) // unnecessary i think cuz in on mount...
// tmp
console.log('this is what is in the avatar')
console.log(avatar)
console.log('this is what is in the NEW Avatar')
console.log(newAvatar)
// console.log('this is what is in the avatar')
// console.log(avatar)
// console.log('this is what is in the NEW Avatar')
// console.log(newAvatar)
})
const settingsHandler = async() => {
@@ -55,7 +55,7 @@
// I don't really care which i use at this point...
// if (set.username === nameTmp) {
if (set.username === user.username || set.username.trim() === '') {
if (set.username === user.username || (set.username.trim() === '' && set.username !== '')) {
errors.username = 'Invalid new username';
valid = false;
} else {
@@ -90,7 +90,7 @@
}
const data = new FormData();
data.append("file", newAvatar[0]);
// tmp
console.log(data);
@@ -132,13 +132,6 @@
<Card>
<!-- ok so it can't actually show us the file we upload until we've uploaded it... -->
<!-- {#if newAvatar !== undefined}
<img class="avatar" src={newAvatar} alt="your new avatar"/>
{:else if avatar !== undefined}
<img class="avatar" src={avatar} alt="your avatar"/>
{:else}
<p class="error">{errors.avatar}</p>
{/if} -->
{#if avatar !== undefined}
<img class="avatar" src={avatar} alt="your avatar"/>
{/if}

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

@@ -34,6 +34,9 @@
<!-- <button on:click={() => (push('/stream'))}>Stream</button> -->
<!-- <button on:click={() => (push('/chat'))}>Chat</button> -->
<!-- tmp -->
<button on:click={() => (push('/test'))}>test</button>
<button on:click={handleClickLogout}>Log Out</button>
</nav>
</header>

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

@@ -3,10 +3,8 @@ import ProfilePage from "../pages/profile/ProfilePage.svelte";
import SplashPage from "../pages/SplashPage.svelte";
import TwoFactorAuthentication from '../pages/TwoFactorAuthentication.svelte';
import UnauthorizedAccessPage from '../pages/UnauthorizedAccessPage.svelte';
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";
@@ -93,17 +91,57 @@ export const primaryRoutes = {
component: TestPage,
conditions: [
(detail) => {
const user = get(userStore);
// console.log(fortyTwo);
// console.log(tfa);
const user = get(userStore); // seems like get(store) is not an option
// // const user = userStore;
// // console.log(fortyTwo);
// // console.log(tfa);
// console.log('in /test what is in user')
// console.log(user)
// you moron $userStore is a Svelte Abreviation, this is .JS, duh
// let user = $userStore;
// let user;
// const unsub = userStore.subscribe(value => {
// console.log(value);
// user = value;
// });
console.log('in /test what is in userStore directly')
console.log(user)
// return true;
if (user)
// obvi this doesn't work cuz skips to true after no user...
// you gotta make the condition the true and the everything else false
// if (user && user.statusCode && user.statusCode === 403)
// if (user && user.username) {
if (user !== null) {
unsub();
return true;
else
} else {
unsub();
return false;
}
}
]
}),
// '/test': wrap({
// component: TestPage,
// conditions: [
// async(detail) => {
// // THIS SHIT TOTALLY WORKS
// // Yea in the end this might be the best thing, like also from a Security point of view
// const user = await fetch('http://transcendance:8080/api/v2/user')
// .then((resp) => resp.json())
// console.log('in /test what is in user')
// console.log(user)
// if (user && user.username)
// return true;
// else
// return false;
// }
// ]
// }),
'/2fa': TwoFactorAuthentication,
"/profile": ProfilePage,
"/profile/*": ProfilePage,

1
srcs/requirements/svelte/api_front/src/routes/profileRoutes.js
View File

@@ -2,7 +2,6 @@
import NotFound from "../pages/NotFound.svelte";
import ProfileDisplay from '../pages/profile/ProfileDisplay.svelte';
import ProfileSettings from '../pages/profile/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

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

@@ -8,11 +8,17 @@ 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(null);
// ok so this will happen no matter what, basically we are telling it what to do if the store containing the user changes
userStore.subscribe((value) => {
if (value) localStorage.setItem('42User', JSON.stringify(value));
else localStorage.removeItem('42User'); // for logout
if (value)
localStorage.setItem('42User', JSON.stringify(value));
else
localStorage.removeItem('42User'); // for logout
});
export const userLogout = () => userStore.set(null);
// export const tmpStore = userStore