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

Things still work, and i'm cleaning up my work cuz it's hard to know what's going on otherwise

Browse Source
This commit is contained in:
Me
2022-11-29 20:49:41 +01:00
parent 53faba7f69
commit d01f92a366
6 changed files with 162 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
srcs/requirements/nestjs/api_back/src/auth/42/authentication.controller.ts
View File

@@ -34,7 +34,7 @@ export class AuthenticationController {
console.log('ON EST DANS REDIRECT AUTH CONTROLLER');
console.log('On redirige');
if (request.user.isEnabledTwoFactorAuth === false)
return response.status(200).redirect('http://transcendance:8080/#/profile');
return response.status(200).redirect('http://transcendance:8080/');
return response.status(200).redirect('http://transcendance:8080/#/2fa');
}

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

@@ -5,20 +5,6 @@
import { primaryRoutes } from "./routes/primaryRoutes.js";
// this page should handle the SPA history management...
// set to false later for actual security
// let loggedIn = true;
// $: logout = async() => {
// await fetch("http://transcendance:8080/api/v2/auth/logout",{
// method : 'POST',
// }).then(push('/login'));
// }
</script>
<!-- <h1>Testing</h1> -->

3
srcs/requirements/svelte/api_front/src/ProfileSettings.svelte
View File

@@ -3,6 +3,7 @@
import Card from './shared/Card.svelte';
import {onMount} from 'svelte';
import { push } from 'svelte-spa-router';
import { loginStatus } from './stores/loginStatusStore'
let user;
@@ -48,6 +49,8 @@
.then(response => response.json())
.then(result => console.log(result));
// so now we're saying it's like they logged in with 2fa, so they don't have to go do it now
loginStatus.update( (old) => ({...old, tfa: true}) );
push('/profile');
}

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

@@ -4,35 +4,35 @@
import { onMount } from 'svelte';
import { loginStatus } from './stores/loginStatusStore.js';
// tmp for testing
// this is fucking retarded, pardon my offensive language.
let aData = {
username: '',
}
// if logged in it gets the user from backend
// set loginStats.fortyTwo = true
//
onMount(async () => {
// console.log('PROFIL SVELTE');
console.log('SplashPage testing if logged in')
// const {data} = await axios.get('http://transcendance:8080/api/v2/user');
fetch('http://transcendance:8080/api/v2/user')
let user = await fetch('http://transcendance:8080/api/v2/user')
.then((resp) => resp.json())
.then((res) => {
aData.username = res.username;
})
console.log(aData);
// if (data) {
// $loginStatus.42 = true;
// //push('/user');
// }
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
}
});
const login = () => {
// document.body.scrollIntoView();
// push
window.location.href = 'http://transcendance:8080/api/v2/auth';
// await fetch ('http://transcendance:8080/api/v2/auth');
console.log('you are now logged in');
//push('/profile');
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()
push('/profile');
// it doesn't wait before changing the page tho which is really annoying... maybe the backend needs to be updated idk
// cuz rn i'm doing it in the front and that doesn't seem great...
}
@@ -41,10 +41,14 @@
await fetch('http://transcendance:8080/api/v2/auth/logout', {
method: 'POST',
});
// $loginStatus.42 = false;
// you're an idiot, the reason this didn't work is because you didn't use update. duh
loginStatus.allFalse()
};
const toProfile = () => {
push('/profile');
};
</script>
@@ -53,72 +57,26 @@
<!-- <div on:mouseenter={enter} on:mouseleave={leave} class:active > -->
<h1>Potato Pong</h1>
<!-- </div> -->
<nav>
<!-- placeholder links -->
<a href="/">Somewhere</a>
<!-- <a href="/">SomewhereElse</a> -->
<!-- {#if $loginStatus == false} -->
<!-- <div on:click={login}>Login {$loginStatus}</div> -->
{#if ($loginStatus.fortyTwo && $loginStatus.tfa) === false}
<div on:click={login}>Login</div>
<!-- {:else} -->
<!-- <div on:click={logout}>Logout {$loginStatus}</div> -->
<!-- {/if} -->
<!-- one of these will be login and it will scroll you down to the login part -->
{:else}
<div on:click={toProfile}>Profile</div>
<div on:click={logout}>Logout</div>
{/if}
</nav>
<h2>
<div>Welcome to</div>
<div>Potato Pong</div>
</h2>
<!-- here i want a flashing arrow pointing down to the login part -->
</header>
<!-- <Canvas class=".canvas2"/> -->
<Canvas/>
<style>
/* currently useless */
/* No styles get applied to the canvas from here, maybe i should move them to the Canvas Component... */
/* tho tbh, why bother, i'm gonna change it anyway... */
.canvas{
/* grid-column: 1 / 13;
grid-row: 1 / 3; */
/* don't rely on Z-Index!!!! */
z-index: -1;
position: relative;
width: 100%;
height: 100%;
white-space: nowrap;
/* Tmp? */
/* background-color: #666; */
/* somehow this got rid of they annoying white space under the canvas */
padding-bottom: 0;
margin-bottom: 0px;
overflow: hidden;
}
.canvas2{
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
white-space: nowrap;
/* Tmp? */
/* background-color: #666; */
/* somehow this got rid of they annoying white space under the canvas */
padding-bottom: 0;
margin-bottom: 0px;
overflow: hidden;
}
/* .canvas .grid-container{ */
.grid-container{
@@ -126,7 +84,6 @@
left: 0;
top: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
@@ -136,17 +93,12 @@
overflow: hidden;
padding: 20px 40px;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
align-items: center;
}
header h1, header nav a{
/* tmp ? well i kinda like it */
color: bisque;
}
header h1{
grid-column: 1 / 7;
grid-row: 1;
@@ -164,20 +116,6 @@
padding: 20px;
border: 1px solid bisque;
}
header nav a{
margin-left: 10px;
text-decoration: none;
}
/* testing */
header nav a:hover{
font-weight: bold;
background-color: blue;
}
header h2:hover{
background: blue;
}
header h2{
grid-row: 3;
@@ -192,11 +130,19 @@
/* color: red; */
}
/* tmp prolly */
nav div {
display: inline;
color: bisque;
font-weight: bold;
}
nav > div {
padding-left: 1em;
/* didn't quite work, applies to both for some reason */
/* nav:first-child doesn't work either*/
}
nav div:hover{
text-decoration: underline;
cursor: pointer;
}
</style>

131
srcs/requirements/svelte/api_front/src/TwoFactorAuthentication.svelte
View File

@@ -1,36 +1,121 @@
<script lang="ts">
import { onMount } from 'svelte';
import { onMount } from "svelte";
import { push } from "svelte-spa-router";
import { loginStatus } from './stores/loginStatusStore';
// onMount( async() => {
// await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
// {
// method: 'POST',
// })
// .then(response => {return response.blob()})
// .then(blob => {
// const url = URL.createObjectURL(blob);
// qrCodeImg = url;
// });
// });
onMount( async() => {
// ok no idea what goes in here...
})
// testing loginStatus Custom Store
const toggleTFA = () => {
loginStatus.toggleTFA();
console.log($loginStatus.tfa);
}
let qrCodeImg;
let qrCode = "";
let wrongCode = "";
let maxTry = 3;
const fetchQrCodeImg = (async() => {
await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
{
method: 'POST',
})
.then(response => {return response.blob()})
.then(blob => {
const url = URL.createObjectURL(blob);
qrCodeImg = url;
});
})()
const submitCode = async() => {
const response = await fetch("http://transcendance:8080/api/v2/auth/2fa/turn-on",
{
method : 'POST',
headers : {
"Content-Type": "application/json",
},
body : JSON.stringify({
"twoFaCode" : qrCode,
}),
});
if (response.status === 401) {
qrCode = "";
wrongCode = `Wrong code, you have ${maxTry} tries left`;
maxTry--;
}
if (maxTry === 0) {
await fetch("http://transcendance:8080/auth/logout",
{
method : 'POST',
})
.then(response => response.json())
// .then(push('/'));
push('/');
// The .then(push) doesn't seem to work...
}
if (response.status === 200) {
// loginStatus.toggleTFA();
loginStatus.update( (old) => ({...old, tfa: true}) );
push('/profile');
console.log('vaid Code for 2FA')
}
};
</script>
<h1>2FA Test</h1>
<p>FortyTwo: {$loginStatus.fortyTwo}</p>
<p>TFA: {$loginStatus.tfa}</p>
<p>isLogged: {loginStatus.isLogged}</p>
<div>
<button on:click={toggleTFA}>toggleTFA</button>
</div>
<!-- ask Hugo but for Reactive page might want to put main in a div or something? -->
<main>
<h1>2FA Sign In</h1>
<p>use google authenticator</p>
{#await fetchQrCodeImg}
<p>Please Wait...</p>
{:then data}
<!-- 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>
{#if wrongCode}
<!-- shoudl i do this in the Net Ninja way? like it's "" until an error happens? -->
<div class="error">
{wrongCode}
</div>
{/if}
{:catch}
<p>Unable to get QrCodeImg</p>
{/await}
</main>
<style>
main {
/* display: flex; */
/* align-items: center; */
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
/* max-width: 500px; */
}
form {
/* max-width: 330px; */
padding-top: 15px;
}
form input {
max-width: 330px;
}
.error {
font-weight: bold;
font-size: 0.8em;
color: red;
}
</style>

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

@@ -14,6 +14,14 @@ function createLoginStatus() {
update( (old) => ({...old, tfa: !old.tfa}) );
};
function allTrue() {
update( (old) => ({fortyTwo: true, tfa: true}) );
}
function allFalse() {
update( (old) => ({fortyTwo: false, tfa: false}) );
}
function isLogged() {
// return (l) => {l.fortyTwo && l.tfa};
// return self.fortyTwo && self.tfa;
@@ -21,7 +29,7 @@ function createLoginStatus() {
return (old) => (old.fortyTwo && old.tfa);
};
return { subscribe, update, toggle42, toggleTFA, isLogged };
return { subscribe, update, toggle42, toggleTFA, allTrue, allFalse, isLogged };
}
export const loginStatus = createLoginStatus();