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

everything still works, and i cleaned more stuff up, better flow, disabled features that i need imput to make work

Browse Source
This commit is contained in:
Me
2022-11-30 19:29:29 +01:00
parent e7f0c08bb9
commit effb1740f5
3 changed files with 90 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@
import { loginStatus } 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')

75
srcs/requirements/svelte/api_front/src/components/Header.svelte
View File

@@ -1,23 +1,12 @@
<script lang="ts">
// import { primaryRoutes } from "../routes.js";
import { push } from "svelte-spa-router";
import { location } from 'svelte-spa-router';
import { loginStatus } from "../stores/loginStatusStore.js";
import {location} from 'svelte-spa-router';
// this could be how i change the header based on which Route it's in
import active from 'svelte-spa-router/active'
// or i could leave them all and not display if they're active?
let handleClickHome = () => {
// dispatch('clickedHome');
// profile?
console.log('clicked home')
push('/profile');
};
let handleClickLogout = async () => {
// dispatch('clickedLogout');
await fetch('http://transcendance:8080/api/v2/auth/logout', {
@@ -29,70 +18,28 @@
push('/');
};
// TMP for testing Fetch
// let response;
let promise;
let handleClickFetch = async () => {
// await fetch('http://transcendance:8080/api/v2/user')
// .then((res) => {response = res})
// let {data} = await fetch('http://transcendance:8080/api/v2/user');
promise = await fetch('http://transcendance:8080/api/v2/user')
.then( (x) => x.json() );
// there's a () after the .json, duh!!!!
};
</script>
<!-- What if i could query what the current URL is and based on that change the button names in the NAV! -->
<header>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClickHome}>
<!-- {#if currentType === 'home'} -->
<h1>Potato Pong</h1>
<!-- {/if} -->
<img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<!-- /profile or / ? not sure -->
<h1>Potato Pong</h1>
<nav>
<!-- TMP for testing Fetch -->
{#if $location === '/profile/fetch'}
<button on:click={handleClickFetch}>Do a Fetch</button>
{#if $location !== '/profile'}
<button on:click={() => (push('/profile'))}>My Profile</button>
{:else if $location === '/profile'}
<button on:click={() => (push('/profile/settings'))}>Settings</button>
{/if}
<!-- <a href=""></a> -->
<!-- i might change these to links rather than buttons, i kinda hate the buttons -->
<!-- maybe just p or div actually idk -->
<!-- {#if userpage === 'display'} -->
<button>My Stats</button>
<!-- {:else if userpage === 'settings'} -->
<!-- {:else} -->
<!-- button idk something about -->
<button>Stream</button>
<!-- <button on:click={() => (push('/stream'))}>Stream</button> -->
<!-- <button on:click={() => (push('/chat'))}>Chat</button> -->
<button on:click={handleClickLogout}>Log Out</button>
</nav>
</header>
<!-- TMP for testing fetch -->
{#if $location === '/profile/fetch'}
<p>Made it to /fetch</p>
<!-- {#if response != undefined} -->
<!-- <p>{response}</p> -->
<!-- <p>{response.json.username}</p> -->
<!-- <p>{response.json}</p> -->
<!-- {/if} -->
{#if promise !== undefined}
<!-- <p>{promise}}</p> -->
<!-- <p>{JSON.stringify(promise, null, 2)}</p> -->
<p>{promise.username}</p>
{/if}
{/if}

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

@@ -11,55 +11,85 @@ import { get } from 'svelte/store';
// "/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);
// }
// ]
// }),
// and example
// '/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,
// '/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);
}
]
}),
"/": SplashPage,
"/profile": ProfilePage,
"/profile/*": ProfilePage,
'/unauthorized-access': UnauthorizedAccessPage,
'*': NotFound
"*": NotFound
};
// export const primaryRoutes = {
@@ -70,6 +100,7 @@ export const primaryRoutes = {
// "*": 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?