suppression de l'option no-cache dans le fichier docker-compose.
This commit is contained in:
batche
@@ -5,7 +5,6 @@ services:
|
|||||||
context: ./requirements/nestjs
|
context: ./requirements/nestjs
|
||||||
target: development
|
target: development
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
no_cache: true
|
|
||||||
environment:
|
environment:
|
||||||
POSTGRES_USER: "${POSTGRES_USER}"
|
POSTGRES_USER: "${POSTGRES_USER}"
|
||||||
POSTGRES_PASSWORD: "${POSTGRES_PASSWORD}"
|
POSTGRES_PASSWORD: "${POSTGRES_PASSWORD}"
|
||||||
|
|||||||
@@ -1,81 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
// routing
|
|
||||||
// may not need {link} here
|
|
||||||
import Router, { link } from "svelte-spa-router";
|
|
||||||
import { routes } from "../routes.js";
|
|
||||||
|
|
||||||
import LoginPage from "./LoginPage.svelte";
|
|
||||||
import UserPage from "../UserPage.svelte";
|
|
||||||
import NotFound from "../pages/NotFound.svelte";
|
|
||||||
|
|
||||||
// Ideally fuck all this shit in the long run
|
|
||||||
let pages = ['login', 'user', 'account'];
|
|
||||||
// make this a $: currentPage ?
|
|
||||||
let currentPage = 'booba';
|
|
||||||
// prolly change this? yea idk...
|
|
||||||
// let userIndex;
|
|
||||||
// tmp for testing
|
|
||||||
let userId = 0;
|
|
||||||
// horrible naming... can be HOME or ACCOUNT
|
|
||||||
let currentType = 'account';
|
|
||||||
|
|
||||||
// this page should handle the SPA history management...
|
|
||||||
|
|
||||||
// set to false later for actual security
|
|
||||||
let loggedIn = true;
|
|
||||||
|
|
||||||
// not sure if this is how i want to do this...
|
|
||||||
// might do differently cuz URL route manangement...
|
|
||||||
const handleLogin = () => {
|
|
||||||
currentPage = 'user';
|
|
||||||
loggedIn = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// I don't know if i should but i'm tempted to put this here...
|
|
||||||
|
|
||||||
// import axios from 'axios';
|
|
||||||
// import { onMount } from 'svelte';
|
|
||||||
// import { push } from 'svelte-spa-router';
|
|
||||||
|
|
||||||
// let user = {logedIn: false};
|
|
||||||
|
|
||||||
// onMount(async () => {
|
|
||||||
// // console.log('PROFIL SVELTE');
|
|
||||||
// const {data} = await axios.get('http://transcendance:8080/api/v2/user');
|
|
||||||
// if (data)
|
|
||||||
// user.logedIn = true;
|
|
||||||
// });
|
|
||||||
|
|
||||||
// $: submit = async() => {
|
|
||||||
// window.location.href = 'http://transcendance:8080/api/v2/auth';
|
|
||||||
// }
|
|
||||||
|
|
||||||
// $: logout = async() => {
|
|
||||||
// await fetch('http://transcendance:8080/api/v2/auth/logout',);
|
|
||||||
// user.logedIn = false;
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- eventually we will do this with routes, but for now use a prop -->
|
|
||||||
<!-- {#if currentPage === 'login'}
|
|
||||||
<LoginPage {pages} {currentPage} {userId} on:loggedIn={handleLogin}/>
|
|
||||||
{:else if currentPage === 'user'}
|
|
||||||
<UserPage {pages} {currentPage} {userId} {currentType}/>
|
|
||||||
{:else}
|
|
||||||
<NotFound />
|
|
||||||
{/if} -->
|
|
||||||
<Router {routes}/>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
/* doesn't work... */
|
|
||||||
/* body{
|
|
||||||
background: bisque;
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,167 +0,0 @@
|
|||||||
<!-- <script lang="ts"> -->
|
|
||||||
<script>
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
let canvas;
|
|
||||||
|
|
||||||
// $: scaleRatio = window.innerWidth / 10;
|
|
||||||
$: scaleRatio = 30;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
// we're invoking JS methods of the canvas element
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
|
|
||||||
ctx.width = window.innerWidth;
|
|
||||||
ctx.height = window.innerHeight;
|
|
||||||
|
|
||||||
// ctx.beginPath();
|
|
||||||
// ctx.moveTo(50,50);
|
|
||||||
// ctx.lineTo(70,70);
|
|
||||||
// ctx.stroke();
|
|
||||||
|
|
||||||
// attempting to import an image
|
|
||||||
const img = new Image();
|
|
||||||
// we may have to call an onMount or something to make sure the image has loaded...
|
|
||||||
// doing it in JS for now, ideally in Svelte later..
|
|
||||||
// img.addEventListener('load', () => {
|
|
||||||
// // execute drawImage statements here
|
|
||||||
// }, false);
|
|
||||||
img.src = 'img/potato_logo.png'; // seems like this does need to be above onload()
|
|
||||||
img.onload = () => {
|
|
||||||
// ctx.drawImage(img, 0, 0, img.width * (ctx.width / 15), img.height * (ctx.height / 15));
|
|
||||||
// ctx.drawImage(img, 0, 0, ctx.width / 15, ctx.height / 15);
|
|
||||||
|
|
||||||
// i think i don't want this cuz it'll get in the way?
|
|
||||||
// ctx.drawImage(img, 0, 0, img.width / scaleRatio, img.height / scaleRatio);
|
|
||||||
|
|
||||||
// it would seem you need to redraw the images when you change the Window size, it's not automatically responsive
|
|
||||||
};
|
|
||||||
|
|
||||||
let startX = 200;
|
|
||||||
let startY = 200;
|
|
||||||
let dx = 3;
|
|
||||||
let dy = -1;
|
|
||||||
|
|
||||||
// Time for some math
|
|
||||||
// lets say i want 6 rows
|
|
||||||
// ok so we're gonna draw all the potatos at the same time and each of them gets animated, like i have it now
|
|
||||||
// 6 in a row so # of rows aka x = width * 6/height
|
|
||||||
|
|
||||||
function Potato(x, y) {
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
// ctx.drawImage(img, x, y, img.width / scaleRatio, img.height / scaleRatio);
|
|
||||||
|
|
||||||
this.draw = function() {
|
|
||||||
ctx.drawImage(img, x, y, img.width / scaleRatio, img.height / scaleRatio);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.animate = function() {
|
|
||||||
this.x += dx;
|
|
||||||
this.y += dy;
|
|
||||||
|
|
||||||
this.draw();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// let spacing = canvas.width * ((6 + 1) / canvas.height);
|
|
||||||
let spacing = 70;
|
|
||||||
let Potatos = [];
|
|
||||||
//check the math...
|
|
||||||
// for (let i = 0; i < 6 * spacing; i++) {
|
|
||||||
for (let i = 0; i < 2; i++) {
|
|
||||||
// for (let j = 0; j < 6; j++) {
|
|
||||||
for (let j = 0; i < 2; j++) {
|
|
||||||
Potatos.push(new Potato(spacing + (i * spacing), spacing + (j * spacing)));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// now i'm trying to move 1 potato
|
|
||||||
let frame = requestAnimationFrame(loop);
|
|
||||||
// function loop(t) {
|
|
||||||
// ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
// frame = requestAnimationFrame(loop);
|
|
||||||
// ctx.drawImage(img, startX, startY, img.width / scaleRatio, img.height / scaleRatio);
|
|
||||||
// startX += dx;
|
|
||||||
// startY += dy;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// new Potato(70, 70).animate();
|
|
||||||
|
|
||||||
|
|
||||||
function loop(t) {
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
frame = requestAnimationFrame(loop);
|
|
||||||
for (let i = 0; i < Potatos.length; i++) {
|
|
||||||
Potatos[i].animate();
|
|
||||||
}
|
|
||||||
// Potatos[0].animate();
|
|
||||||
}
|
|
||||||
|
|
||||||
loop();
|
|
||||||
|
|
||||||
// Lets try again with a single loop
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// THis shit makes the cool Gradient
|
|
||||||
// let frame = requestAnimationFrame(loop);
|
|
||||||
// function loop(t) {
|
|
||||||
// frame = requestAnimationFrame(loop);
|
|
||||||
|
|
||||||
// // const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
||||||
|
|
||||||
// for (let p = 0; p < imageData.data.length; p += 4) {
|
|
||||||
// const i = p / 4;
|
|
||||||
// const x = i % canvas.width;
|
|
||||||
// const y = i / canvas.width >>> 0;
|
|
||||||
|
|
||||||
// const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
|
|
||||||
// const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
|
|
||||||
// const b = 128;
|
|
||||||
|
|
||||||
// imageData.data[p + 0] = r;
|
|
||||||
// imageData.data[p + 1] = g;
|
|
||||||
// imageData.data[p + 2] = b;
|
|
||||||
// imageData.data[p + 3] = 255;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// ctx.putImageData(imageData, 0, 0);
|
|
||||||
// }
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
cancelAnimationFrame(frame);
|
|
||||||
// prolly something else...
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<canvas
|
|
||||||
bind:this={canvas}
|
|
||||||
width={window.innerWidth}
|
|
||||||
height={window.innerHeight}
|
|
||||||
></canvas>
|
|
||||||
<!-- widht and height were 32, trying stuff -->
|
|
||||||
|
|
||||||
<!-- I don't have the /svelte-logo-mask.svg, i guess i'll go get something -->
|
|
||||||
<style>
|
|
||||||
canvas {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #666;
|
|
||||||
|
|
||||||
|
|
||||||
/* testing something */
|
|
||||||
/* -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
|
|
||||||
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); */
|
|
||||||
/* Holy shit that worked! i got a mask */
|
|
||||||
/* it also works without a mask! i have a canvas! */
|
|
||||||
|
|
||||||
/* -webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat; */
|
|
||||||
/* -webkit-mask: url(img/cartoon_potato3.jpg) 50% 50% no-repeat; */
|
|
||||||
/* mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat; */
|
|
||||||
/* mask: url(img/cartoon_potato3.jpg) 50% 50% no-repeat; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { onMount, setContext } from "svelte";
|
|
||||||
|
|
||||||
let canvas;
|
|
||||||
|
|
||||||
// what do i want?
|
|
||||||
// lets start with an image of my potato
|
|
||||||
// then get it to move
|
|
||||||
// then have many displayed in an offset grid
|
|
||||||
|
|
||||||
const drawFunctions = [];
|
|
||||||
|
|
||||||
|
|
||||||
setContext('canvas', {
|
|
||||||
register(drawFn) {
|
|
||||||
drawFunctions.push(drawFn);
|
|
||||||
},
|
|
||||||
unregister(drawFn) {
|
|
||||||
drawFunctions.splice(drawFunctions.indexOf(drawFn), 1);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
// not sure what this does...
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
|
|
||||||
// no idea what this does...
|
|
||||||
function update() {
|
|
||||||
|
|
||||||
ctx.clearRect()
|
|
||||||
drawFunctions.forEach(drawFn => {
|
|
||||||
drawFn(ctx);
|
|
||||||
});
|
|
||||||
|
|
||||||
frameId = requestAnimationFrame(update);
|
|
||||||
}
|
|
||||||
|
|
||||||
let frameId = requestAnimationFrame(update);
|
|
||||||
return () => {
|
|
||||||
cancelAnimationFrame(update);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<canvas bind:this={canvas} />
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
import { location } from 'svelte-spa-router';
|
|
||||||
import GenerateUserDisplay from './GenerateUserDisplay.svelte';
|
|
||||||
|
|
||||||
// using location won't work cuz i do a fetch but i don't change the page fragment, so means nothing to location...
|
|
||||||
|
|
||||||
// this is how you access /:first for example
|
|
||||||
// export let params = {}
|
|
||||||
// <p>Your name is: <b>{params.first}</b> <b>{#if params.last}{params.last}{/if}</b></p>
|
|
||||||
|
|
||||||
// If i export these vars, maybe as an nice tidy object, i could pass whatever i like to them
|
|
||||||
// The current user, some other user, whatever, and thus reuse this Componente for the user and their friends or whatever
|
|
||||||
// will have to coordinate with Back, will know more once the Game stats are in the back
|
|
||||||
// wait maybe this won't work, cuz like it's still going through a route, i would have to update a Store Var each time...
|
|
||||||
// not sure if that's what i want...
|
|
||||||
|
|
||||||
|
|
||||||
// maybe the rank is determined dynamically just in the front based on win loss ratio or something no one cares about
|
|
||||||
// why bother storing that shit in the back...
|
|
||||||
// maybe i need a Rank.svelte component
|
|
||||||
// ohhh i could make above a certain rank glitter! like that CSS tutorial showed me!
|
|
||||||
|
|
||||||
export let aUsername;
|
|
||||||
|
|
||||||
let user;
|
|
||||||
let rank = '';
|
|
||||||
let avatar;
|
|
||||||
|
|
||||||
// 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() => {
|
|
||||||
console.log('Display aUser username: '+ aUsername)
|
|
||||||
// http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
|
|
||||||
user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
|
|
||||||
.then( (x) => x.json() );
|
|
||||||
|
|
||||||
console.log('Display a user: ' + user.username)
|
|
||||||
|
|
||||||
|
|
||||||
// console.log('profile display did my fetch')
|
|
||||||
// should i be updating the userStore or is that unnecessary?
|
|
||||||
|
|
||||||
if (user.loseGame > user.winGame) {
|
|
||||||
rank = 'Bitch Ass Loser!'
|
|
||||||
} else if (user.loseGame === user.winGame) {
|
|
||||||
rank = 'Fine i guess...'
|
|
||||||
} else {
|
|
||||||
rank = 'Yea you da Boss!'
|
|
||||||
}
|
|
||||||
|
|
||||||
await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
|
|
||||||
.then(response => {return response.blob()})
|
|
||||||
.then(data => {
|
|
||||||
const url = URL.createObjectURL(data);
|
|
||||||
avatar = url;
|
|
||||||
});
|
|
||||||
|
|
||||||
// tmp
|
|
||||||
// console.log('mounted Profile Display')
|
|
||||||
// console.log(user);
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
// Glittery Stars and such for Rank
|
|
||||||
|
|
||||||
let index = 0, interval = 1000;
|
|
||||||
|
|
||||||
const rand = (min, max) =>
|
|
||||||
Math.floor(Math.random() * (max - min + 1)) + min;
|
|
||||||
|
|
||||||
// it's unhappy that "star" isn't typeset, no idea what to do about it...
|
|
||||||
const animate = (star) => {
|
|
||||||
// the if seems to have fixed the type issue
|
|
||||||
if (star) {
|
|
||||||
star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
|
|
||||||
star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
|
|
||||||
|
|
||||||
star.style.animation = "none";
|
|
||||||
star.offsetHeight;
|
|
||||||
star.style.animation = "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is the part i invented, it was kinda a fucking nightmare...
|
|
||||||
let stars = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < 3; i++) {
|
|
||||||
setTimeout(() => {
|
|
||||||
animate(stars[i]);
|
|
||||||
|
|
||||||
setInterval(() => animate(stars[i]), 1000);
|
|
||||||
}, index++ * (interval / 3))
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if user !== undefined}
|
|
||||||
<GenerateUserDisplay {user}/>
|
|
||||||
{:else}
|
|
||||||
<h2>Sorry</h2>
|
|
||||||
<div>Failed to load user {aUsername}</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
// might rename...
|
|
||||||
// no idea what i'm doing...
|
|
||||||
|
|
||||||
import { getContext, onMount } from 'svelte';
|
|
||||||
|
|
||||||
// here you have to export the vars you need to draw this shit...
|
|
||||||
|
|
||||||
const { register, unregister } = getContext('canvas');
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
register(draw);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
unregister(draw);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function draw(ctx) {
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.fillStyle = fill;
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@@ -1,124 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
|
|
||||||
// Fucking having a header that can change size, i don't really want the larger one
|
|
||||||
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
|
|
||||||
let dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
let types: string[] = ['home', 'regular', 'none'];
|
|
||||||
// let currentType: string = 'regular';
|
|
||||||
export let currentType = 'regular';
|
|
||||||
// apparently Regular is the only one i use...
|
|
||||||
|
|
||||||
let handleClickHome = () => {
|
|
||||||
dispatch('clickedHome');
|
|
||||||
};
|
|
||||||
|
|
||||||
let handleClickLogout = () => {
|
|
||||||
dispatch('clickedLogout');
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Make it so you can have a Big Home page header and a regular header or no header -->
|
|
||||||
<!-- So far my CSS is super Gross, i guess i'll get Hugo to help me with it -->
|
|
||||||
|
|
||||||
<header class={currentType}>
|
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
||||||
<img class={currentType} src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClickHome}>
|
|
||||||
<!-- {#if currentType === 'home'} -->
|
|
||||||
<h1 class={currentType}>Potato Pong</h1>
|
|
||||||
<!-- {/if} -->
|
|
||||||
<nav class={currentType}>
|
|
||||||
<!-- <a href=""></a> -->
|
|
||||||
<!-- i might change these to links rather than buttons, i kinda hate the buttons -->
|
|
||||||
<button>My Stats</button>
|
|
||||||
<button>Stream</button>
|
|
||||||
<button on:click={handleClickLogout}>Log Out</button>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* See "possible_fonts.css" for more font options... */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Bondi';
|
|
||||||
src:url('/fonts/Bondi.ttf.woff') format('woff'),
|
|
||||||
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
|
|
||||||
url('/fonts/Bondi.ttf.eot'),
|
|
||||||
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
|
|
||||||
|
|
||||||
|
|
||||||
header{
|
|
||||||
/* background: #f7f7f7; */
|
|
||||||
background: #618174;
|
|
||||||
/* padding: 20px; */
|
|
||||||
margin: 0;
|
|
||||||
/* does nothing so far... */
|
|
||||||
/* display: flex; */
|
|
||||||
}
|
|
||||||
|
|
||||||
header.home{
|
|
||||||
/* position: sticky; */
|
|
||||||
}
|
|
||||||
header.regular{
|
|
||||||
/* for some reason this doesn't do shit! */
|
|
||||||
position: sticky;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Headers */
|
|
||||||
h1{
|
|
||||||
font-family: 'Bondi';
|
|
||||||
}
|
|
||||||
h1.home {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
/* max-width: 100px; */
|
|
||||||
}
|
|
||||||
h1.regular{
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
/* max-width: 40px; */
|
|
||||||
/* this helped with the weird extra space under the image... */
|
|
||||||
display: flex;
|
|
||||||
justify-self: center;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Images */
|
|
||||||
img.home{
|
|
||||||
/* text-align: center; */
|
|
||||||
/* get the image squarely in the middle... */
|
|
||||||
cursor: pointer;
|
|
||||||
max-width: 100px;
|
|
||||||
}
|
|
||||||
img.regular{
|
|
||||||
cursor: pointer;
|
|
||||||
max-width: 40px;
|
|
||||||
padding: 7px 20px;
|
|
||||||
justify-self: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav{
|
|
||||||
display: flex;
|
|
||||||
justify-content: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav button{
|
|
||||||
margin: 7px 20px;
|
|
||||||
/* padding: 5px; */
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .none{
|
|
||||||
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
|
|
||||||
let dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
let types: string[] = ['home', 'regular', 'none'];
|
|
||||||
// let currentType: string = 'regular';
|
|
||||||
export let currentType = 'home';
|
|
||||||
|
|
||||||
let handleClick = () => {
|
|
||||||
dispatch('clickedHome');
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Make it so you can have a Big Home page header and a regular header or no header -->
|
|
||||||
<!-- So far my CSS is super Gross, i guess i'll get Hugo to help me with it -->
|
|
||||||
|
|
||||||
<header class={currentType}>
|
|
||||||
<h1 class={currentType}>
|
|
||||||
<img class={currentType} src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClick}>
|
|
||||||
</h1>
|
|
||||||
<!-- {#if currentType === 'home'} -->
|
|
||||||
<h1 class={currentType}>Potato Pong</h1>
|
|
||||||
<!-- {/if} -->
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* See "possible_fonts.css" for more font options... */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Bondi';
|
|
||||||
src:url('/fonts/Bondi.ttf.woff') format('woff'),
|
|
||||||
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
|
|
||||||
url('/fonts/Bondi.ttf.eot'),
|
|
||||||
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
|
|
||||||
|
|
||||||
|
|
||||||
header{
|
|
||||||
/* background: #f7f7f7; */
|
|
||||||
background: #618174;
|
|
||||||
/* padding: 20px; */
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Bondi';
|
|
||||||
/* does nothing so far... */
|
|
||||||
/* display: flex; */
|
|
||||||
}
|
|
||||||
|
|
||||||
header.home{
|
|
||||||
/* position: sticky; */
|
|
||||||
}
|
|
||||||
header.regular{
|
|
||||||
position: sticky;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
}
|
|
||||||
header.regular > h1:first-child{
|
|
||||||
justify-self: left;
|
|
||||||
}
|
|
||||||
header.regular > h1:nth-child(2){
|
|
||||||
justify-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Headers */
|
|
||||||
h1.home {
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
/* max-width: 100px; */
|
|
||||||
}
|
|
||||||
h1.regular{
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
/* max-width: 40px; */
|
|
||||||
/* this helped with the weird extra space under the image... */
|
|
||||||
display: flex;
|
|
||||||
justify-self: center;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Images */
|
|
||||||
h1 img.home{
|
|
||||||
/* text-align: center; */
|
|
||||||
/* get the image squarely in the middle... */
|
|
||||||
cursor: pointer;
|
|
||||||
max-width: 100px;
|
|
||||||
}
|
|
||||||
h1 img.regular{
|
|
||||||
cursor: pointer;
|
|
||||||
max-width: 40px;
|
|
||||||
padding: 7px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* .none{
|
|
||||||
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
@@ -1,172 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
|
|
||||||
// Now called LoginPage
|
|
||||||
|
|
||||||
// import Header from "./Header.svelte";
|
|
||||||
import Footer from "../components/Footer.svelte";
|
|
||||||
import Login from "./Login.svelte";
|
|
||||||
import Tabs from "../shared/Tabs.svelte"
|
|
||||||
import Card from "../pieces/Card.svelte"
|
|
||||||
// tmp
|
|
||||||
let login = { username: '', password: ''};
|
|
||||||
// let's us track any errors in a submited form
|
|
||||||
let errors = { username: '', password: ''};
|
|
||||||
let valid:boolean = false;
|
|
||||||
const loginHandler = () => {
|
|
||||||
console.log('hi');
|
|
||||||
};
|
|
||||||
const createAccountHandler = () => {
|
|
||||||
console.log('hi');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Tabs
|
|
||||||
let items: string[] = ['Login', 'Create Account'];
|
|
||||||
let activeItem: string = 'Login';
|
|
||||||
|
|
||||||
const tabChange = (e) => {
|
|
||||||
activeItem = e.detail;
|
|
||||||
};
|
|
||||||
|
|
||||||
// TMP for switching page, down the line this will be down by modifying url
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- New New Approach -->
|
|
||||||
<!-- if i were to do all this with CSS Grids how would i do it? -->
|
|
||||||
<!-- Things i want -->
|
|
||||||
<!-- A title button, some nav buttons, a giant dope canvas and words over it -->
|
|
||||||
<!-- not sure if i want: login and create account -->
|
|
||||||
<!-- let's start with just the canvas -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- New aproach -->
|
|
||||||
<!-- just make the html in order you can move it around all you want into special Compoenents later -->
|
|
||||||
|
|
||||||
<!-- Ok i think all of this needs to go in a Home Page Component -->
|
|
||||||
<!-- and then i make another master component for the main page once you're logged in, no idea what that should look like -->
|
|
||||||
|
|
||||||
<!-- what if i kept the special canvas header in here and made another generic header for the rest of the site as a component -->
|
|
||||||
|
|
||||||
<header class="banner">
|
|
||||||
<!-- top left corner, sticky -->
|
|
||||||
<h1>Potato Pong</h1>
|
|
||||||
<!-- top right but it takes you down the page -->
|
|
||||||
<h2>Login</h2>
|
|
||||||
|
|
||||||
<!-- all this used to be in Welcome Section -->
|
|
||||||
<!-- the amazing backround! not sure yet if it should scroll with us or be the size of the View Port... -->
|
|
||||||
<!-- <canvas></canvas> -->
|
|
||||||
<!-- i think maybe the canvas needs to be in the header -->
|
|
||||||
<!-- using an image for now as a placehodler for the canvase -->
|
|
||||||
<img src="/img/tmp_mario_banner.png" alt="tmp Mario banner">
|
|
||||||
<div class="welcome">
|
|
||||||
<h2>Welcome to <br><span>Potato Pong</span></h2>
|
|
||||||
</div>
|
|
||||||
<!-- I want some sort of arrow pointing down and blinking to indicate you should scroll -->
|
|
||||||
</header>
|
|
||||||
<!-- <section class="banner"> -->
|
|
||||||
<section class="welcome">
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<!-- no nav on home page -->
|
|
||||||
<section class="register">
|
|
||||||
|
|
||||||
<!-- i could have a toggle tab to login or create a new account -->
|
|
||||||
|
|
||||||
<Tabs items={items} {activeItem} on:tabChange={tabChange}/>
|
|
||||||
{#if activeItem === 'Login'}
|
|
||||||
<div class="card">
|
|
||||||
<Card>
|
|
||||||
<h2>Login</h2>
|
|
||||||
<form on:submit|preventDefault={loginHandler}>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="text" id="username" placeholder="username" bind:value={login.username}>
|
|
||||||
<div class="error">{ errors.username }</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="password" id="password" placeholder="password" bind:value={login.password}>
|
|
||||||
<div class="error">{ errors.password }</div>
|
|
||||||
</div>
|
|
||||||
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
|
|
||||||
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
|
|
||||||
<button>Login</button>
|
|
||||||
</form>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
{:else if activeItem = 'Create Account'}
|
|
||||||
<!-- Create Account -->
|
|
||||||
<div class="card">
|
|
||||||
<Card>
|
|
||||||
<h3>Create Account</h3>
|
|
||||||
<form on:submit|preventDefault={createAccountHandler}>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="text" id="username" placeholder="username" bind:value={login.username}>
|
|
||||||
<div class="error">{ errors.username }</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="password" id="password" placeholder="password" bind:value={login.password}>
|
|
||||||
<div class="error">{ errors.password }</div>
|
|
||||||
</div>
|
|
||||||
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
|
|
||||||
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
|
|
||||||
<button>Login</button>
|
|
||||||
</form>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<!-- below this i could say, this is where i might have put an explanation of what you can do on this page but fuck you i didn't -->
|
|
||||||
<!-- or maybe in the end i will, something like: Fun, Game, Colors, enjoy Friendship, or don't, it's your choice! -->
|
|
||||||
<Footer />
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* hearder stuff */
|
|
||||||
|
|
||||||
/* Clearly i have yet to master floating stuff... */
|
|
||||||
/* i need to put box-sizing in here somewhere for the login... */
|
|
||||||
|
|
||||||
/* starting again with CSS Grid */
|
|
||||||
/* .banner{
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.banner img{
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner h1{
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
.banner h2{
|
|
||||||
position: absolute;
|
|
||||||
left: 90%;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
.banner .welcome{
|
|
||||||
background-color: #feb614;
|
|
||||||
color:white;
|
|
||||||
padding: 30px;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
.banner .welcome h2{
|
|
||||||
font-size: 58px;
|
|
||||||
}
|
|
||||||
.banner .welcome h2 span{
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.register{
|
|
||||||
|
|
||||||
} */
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { now } from "svelte/internal";
|
|
||||||
import Card from "../pieces/Card.svelte";
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
// import UserStore from './stores/UserStore';
|
|
||||||
|
|
||||||
// prolly Typescript-ify
|
|
||||||
//let fields{question:string, answerA:string, answerB: string} = { question: '', answerA: '', answerB: ''};
|
|
||||||
let login = { username: '', password: ''};
|
|
||||||
// let's us track any errors in a submited form
|
|
||||||
let errors = { username: '', password: ''};
|
|
||||||
let valid:boolean = false;
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
const loginHandler = () => {
|
|
||||||
valid = true;
|
|
||||||
|
|
||||||
if (login.username !== $UserStore.username) {
|
|
||||||
valid = false;
|
|
||||||
errors.username = "wrong example username."
|
|
||||||
} else {
|
|
||||||
// reseting the value of errors
|
|
||||||
errors.username = "";
|
|
||||||
}
|
|
||||||
if (login.password !== $UserStore.password) {
|
|
||||||
valid = false;
|
|
||||||
errors.password = "wrong example password."
|
|
||||||
} else {
|
|
||||||
// reseting the value of errors
|
|
||||||
errors.password = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (valid) {
|
|
||||||
$UserStore.loggedIn = true;
|
|
||||||
$UserStore.status = 'online';
|
|
||||||
|
|
||||||
dispatch('login');
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="login">
|
|
||||||
<Card>
|
|
||||||
|
|
||||||
<form on:submit|preventDefault={loginHandler}>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="text" id="username" placeholder="username" bind:value={login.username}>
|
|
||||||
<div class="error">{ errors.username }</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="password" id="password" placeholder="password" bind:value={login.password}>
|
|
||||||
<div class="error">{ errors.password }</div>
|
|
||||||
</div>
|
|
||||||
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
|
|
||||||
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
|
|
||||||
<button>Login</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
form{
|
|
||||||
width: 200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.form-field{
|
|
||||||
margin: 18px auto;
|
|
||||||
}
|
|
||||||
input{
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
.login{
|
|
||||||
/* display: grid;
|
|
||||||
grid-template-columns: 1fr; */
|
|
||||||
max-width: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error{
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #d91b42;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,414 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
// import Header from "./Header.svelte";
|
|
||||||
import Footer from "../components/Footer.svelte";
|
|
||||||
import Tabs from "../shared/Tabs.svelte";
|
|
||||||
import Card from "../pieces/Card.svelte";
|
|
||||||
import Canvas from "../pieces/Canvas.svelte";
|
|
||||||
import ScrollTo from "../shared/ScrollTo.svelte";
|
|
||||||
import UserStore from "./UserStore.js";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import {push} from "svelte-spa-router";
|
|
||||||
|
|
||||||
let dispatch = createEventDispatcher();
|
|
||||||
// Tabs
|
|
||||||
let items: string[] = ['Login', 'Create Account'];
|
|
||||||
let activeItem: string = 'Login';
|
|
||||||
|
|
||||||
const tabChange = (e) => {
|
|
||||||
activeItem = e.detail;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
import axios from 'axios';
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
let user = {logedIn: false};
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
// console.log('PROFIL SVELTE');
|
|
||||||
const {data} = await axios.get('http://transcendance:8080/api/v2/user');
|
|
||||||
if (data)
|
|
||||||
user.logedIn = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
const submit = async() => {
|
|
||||||
document.body.scrollIntoView();
|
|
||||||
push
|
|
||||||
window.location.href = 'http://transcendance:8080/api/v2/auth';
|
|
||||||
}
|
|
||||||
|
|
||||||
const logout = async() => {
|
|
||||||
await fetch('http://transcendance:8080/api/v2/auth/logout',);
|
|
||||||
user.logedIn = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// for toLogin
|
|
||||||
|
|
||||||
let bottomHalf;
|
|
||||||
// console.log(bottomHalf);
|
|
||||||
// const element = document.body;
|
|
||||||
|
|
||||||
|
|
||||||
// in theory this could be a Store, but for now this will do
|
|
||||||
// also in future we'll do this with urls
|
|
||||||
export let pages;
|
|
||||||
export let currentPage;
|
|
||||||
// this shit has overstayed it's welcome, fuck having userId all over the place
|
|
||||||
export let userId;
|
|
||||||
|
|
||||||
|
|
||||||
// maybe we put this in the login Component?
|
|
||||||
// tmp
|
|
||||||
let login = { username: '', password: ''};
|
|
||||||
// let's us track any errors in a submited form
|
|
||||||
let errors = { username: '', password: ''};
|
|
||||||
let valid:boolean = false;
|
|
||||||
|
|
||||||
const loginHandler = () => {
|
|
||||||
console.log('hi from loginHandler');
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Basic Checks
|
|
||||||
//
|
|
||||||
valid = false;
|
|
||||||
|
|
||||||
// checkin Username
|
|
||||||
if (login.username.length < 1)
|
|
||||||
{
|
|
||||||
valid = false;
|
|
||||||
errors.username = 'please enter a username';
|
|
||||||
} else {
|
|
||||||
valid = true;
|
|
||||||
errors.username = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Checking Password
|
|
||||||
if (login.password.length < 1)
|
|
||||||
{
|
|
||||||
valid = false;
|
|
||||||
errors.password = 'please enter your password';
|
|
||||||
} else {
|
|
||||||
valid = true;
|
|
||||||
errors.password = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Advanded Checks
|
|
||||||
//
|
|
||||||
|
|
||||||
// Comparing to UserStore
|
|
||||||
let users;
|
|
||||||
const unsubscribe = UserStore.subscribe(objs => {
|
|
||||||
users = objs;
|
|
||||||
console.log('subscribed');
|
|
||||||
});
|
|
||||||
|
|
||||||
// could i do $users.length ? doesn't look like it...
|
|
||||||
// let len = $users.length;
|
|
||||||
|
|
||||||
// userId = 0;
|
|
||||||
// userId = users.filter(user => user.username === login.username);
|
|
||||||
// this shit returns an array, it would be nice if it weren't an array
|
|
||||||
// let user = users.filter(user => user.username === login.username);
|
|
||||||
let user = users.find(user => user.username === login.username);
|
|
||||||
|
|
||||||
console.log(user);
|
|
||||||
// console.log(user.password);
|
|
||||||
|
|
||||||
|
|
||||||
// all this shit is a bit wordy... maybe a better way to handle this stuff?
|
|
||||||
|
|
||||||
// if (userIndex > users.length) {
|
|
||||||
if (!user) {
|
|
||||||
valid = false;
|
|
||||||
errors.username = 'user not found';
|
|
||||||
// something better?
|
|
||||||
} else {
|
|
||||||
valid = true;
|
|
||||||
errors.username = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
// if (users[userIndex].password !== login.password) {
|
|
||||||
if (user && user.password !== login.password) {
|
|
||||||
valid = false;
|
|
||||||
errors.password = 'Wrong Password';
|
|
||||||
// Maybe clear the fields?
|
|
||||||
} else {
|
|
||||||
valid = true;
|
|
||||||
errors.password = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Validation
|
|
||||||
//
|
|
||||||
unsubscribe();
|
|
||||||
|
|
||||||
if (valid) {
|
|
||||||
// yea don't modify this here...
|
|
||||||
currentPage = 'user';
|
|
||||||
// something like: indicate that userIndex is the one we want...
|
|
||||||
console.log('valid Credentials');
|
|
||||||
|
|
||||||
// making sure we start at the top of the page, way less jarring
|
|
||||||
// leave for now just in case...
|
|
||||||
document.body.scrollIntoView();
|
|
||||||
|
|
||||||
// may not actually want a dispatch?
|
|
||||||
// pass data userIndex?
|
|
||||||
// dispatch('loggedIn');
|
|
||||||
// from svelte-spa-router
|
|
||||||
push("/user");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
//
|
|
||||||
const createAccountHandler = () => {
|
|
||||||
console.log('hi from accunt handler');
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<header class="grid-container">
|
|
||||||
|
|
||||||
<!-- <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 !user.logedIn}
|
|
||||||
<ScrollTo element={bottomHalf}/>
|
|
||||||
{:else}
|
|
||||||
<div class="logout" on:click={logout}>Log Out</div>
|
|
||||||
{/if}
|
|
||||||
<!-- one of these will be login and it will scroll you down to the login part -->
|
|
||||||
</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/>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="register" bind:this={bottomHalf}>
|
|
||||||
|
|
||||||
<!-- My beautiful tabs are useless now, whatever, kill your darlings... -->
|
|
||||||
<!-- i could have a toggle tab to login or create a new account -->
|
|
||||||
<!-- This shit is kinda unnecessary cuz there is no Create Account option... -->
|
|
||||||
|
|
||||||
<Tabs items={items} {activeItem} on:tabChange={tabChange}/>
|
|
||||||
{#if activeItem === 'Login'}
|
|
||||||
<div class="card">
|
|
||||||
<Card>
|
|
||||||
<h2>Login</h2>
|
|
||||||
<form on:submit|preventDefault={loginHandler}>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="text" id="username" placeholder="username" bind:value={login.username}>
|
|
||||||
<div class="error">{ errors.username }</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="password" id="password" placeholder="password" bind:value={login.password}>
|
|
||||||
<div class="error">{ errors.password }</div>
|
|
||||||
</div>
|
|
||||||
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
|
|
||||||
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
|
|
||||||
<button>Login</button>
|
|
||||||
</form>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
{:else if activeItem = 'Create Account'}
|
|
||||||
<!-- Create Account -->
|
|
||||||
<div class="card">
|
|
||||||
<Card>
|
|
||||||
<h2>Create Account</h2>
|
|
||||||
<form on:submit|preventDefault={createAccountHandler}>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="text" id="username" placeholder="username" bind:value={login.username}>
|
|
||||||
<div class="error">{ errors.username }</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="password" id="password" placeholder="password" bind:value={login.password}>
|
|
||||||
<div class="error">{ errors.password }</div>
|
|
||||||
</div>
|
|
||||||
<!-- type="" but flat={} cuz type is a string but flat is a bool-->
|
|
||||||
<!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
|
|
||||||
<button>Login</button>
|
|
||||||
</form>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<!-- below this i could say, this is where i might have put an explanation of what you can do on this page but fuck you i didn't -->
|
|
||||||
<!-- or maybe in the end i will, something like: Fun, Game, Colors, enjoy Friendship, or don't, it's your choice! -->
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
|
|
||||||
<!-- </div> -->
|
|
||||||
|
|
||||||
|
|
||||||
<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{
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
/* padding-bottom: 0; */
|
|
||||||
margin-bottom: 0px;
|
|
||||||
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;
|
|
||||||
/* grid-column: span 6; */
|
|
||||||
/* tmp? */
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid bisque;
|
|
||||||
}
|
|
||||||
header nav{
|
|
||||||
/* make it a flexbox? */
|
|
||||||
grid-column: 7 / 13;
|
|
||||||
grid-row: 1;
|
|
||||||
justify-self: end;
|
|
||||||
/* tmp? */
|
|
||||||
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;
|
|
||||||
grid-column: 5 / span 4;
|
|
||||||
justify-self: center;
|
|
||||||
/* tmp */
|
|
||||||
border: 1px solid black;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
header h2 div{
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* the login / register part */
|
|
||||||
|
|
||||||
/* What do i want?
|
|
||||||
I want it to be the same size as a full screen so you don't see the canvas at all anymore */
|
|
||||||
|
|
||||||
/* doesn't work... */
|
|
||||||
/* body{
|
|
||||||
background: bisque;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.bottom-half{
|
|
||||||
/* doesn't quite work... */
|
|
||||||
background: bisque;
|
|
||||||
/* also doesn't work... */
|
|
||||||
/* height: 1vw; */
|
|
||||||
|
|
||||||
/* testing */
|
|
||||||
/* position: absolute; */
|
|
||||||
}
|
|
||||||
|
|
||||||
section.register{
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error{
|
|
||||||
font-size: 0.8em;
|
|
||||||
font-weight: bold;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,305 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
import { location } from 'svelte-spa-router';
|
|
||||||
// this is how you access /:first for example
|
|
||||||
// export let params = {}
|
|
||||||
// <p>Your name is: <b>{params.first}</b> <b>{#if params.last}{params.last}{/if}</b></p>
|
|
||||||
|
|
||||||
// If i export these vars, maybe as an nice tidy object, i could pass whatever i like to them
|
|
||||||
// The current user, some other user, whatever, and thus reuse this Componente for the user and their friends or whatever
|
|
||||||
// will have to coordinate with Back, will know more once the Game stats are in the back
|
|
||||||
// wait maybe this won't work, cuz like it's still going through a route, i would have to update a Store Var each time...
|
|
||||||
// not sure if that's what i want...
|
|
||||||
|
|
||||||
|
|
||||||
// maybe the rank is determined dynamically just in the front based on win loss ratio or something no one cares about
|
|
||||||
// why bother storing that shit in the back...
|
|
||||||
// maybe i need a Rank.svelte component
|
|
||||||
// ohhh i could make above a certain rank glitter! like that CSS tutorial showed me!
|
|
||||||
|
|
||||||
let user;
|
|
||||||
let rank = '';
|
|
||||||
let avatar;
|
|
||||||
|
|
||||||
// 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() => {
|
|
||||||
// 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) {
|
|
||||||
rank = 'Bitch Ass Loser!'
|
|
||||||
} else if (user.loseGame === user.winGame) {
|
|
||||||
rank = 'Fine i guess...'
|
|
||||||
} else {
|
|
||||||
rank = 'Yea you da Boss!'
|
|
||||||
}
|
|
||||||
|
|
||||||
await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
|
|
||||||
.then(response => {return response.blob()})
|
|
||||||
.then(data => {
|
|
||||||
const url = URL.createObjectURL(data);
|
|
||||||
avatar = url;
|
|
||||||
});
|
|
||||||
|
|
||||||
// tmp
|
|
||||||
// console.log('mounted Profile Display')
|
|
||||||
// console.log(user);
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
// Glittery Stars and such for Rank
|
|
||||||
|
|
||||||
let index = 0, interval = 1000;
|
|
||||||
|
|
||||||
const rand = (min, max) =>
|
|
||||||
Math.floor(Math.random() * (max - min + 1)) + min;
|
|
||||||
|
|
||||||
// it's unhappy that "star" isn't typeset, no idea what to do about it...
|
|
||||||
const animate = (star) => {
|
|
||||||
// the if seems to have fixed the type issue
|
|
||||||
if (star) {
|
|
||||||
star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
|
|
||||||
star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
|
|
||||||
|
|
||||||
star.style.animation = "none";
|
|
||||||
star.offsetHeight;
|
|
||||||
star.style.animation = "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is the part i invented, it was kinda a fucking nightmare...
|
|
||||||
let stars = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < 3; i++) {
|
|
||||||
setTimeout(() => {
|
|
||||||
animate(stars[i]);
|
|
||||||
|
|
||||||
setInterval(() => animate(stars[i]), 1000);
|
|
||||||
}, index++ * (interval / 3))
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- is this if excessive? -->
|
|
||||||
<div class="outer">
|
|
||||||
{#if user !== undefined}
|
|
||||||
<main>
|
|
||||||
<!-- <img class="icon" src="img/default_user_icon.png" alt="default user icon"> -->
|
|
||||||
<!-- <img class="icon" src="{user.image_url}" alt="default user icon"> -->
|
|
||||||
<img class="avatar" src="{avatar}" alt="default user icon">
|
|
||||||
<div class="username">{user.username}</div>
|
|
||||||
<div class="rank">Rank:
|
|
||||||
<span class="glitter">
|
|
||||||
<span bind:this={stars[0]} class="glitter-star">
|
|
||||||
<svg viewBox="0 0 512 512">
|
|
||||||
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span bind:this={stars[1]} class="glitter-star">
|
|
||||||
<svg viewBox="0 0 512 512">
|
|
||||||
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span bind:this={stars[2]} class="glitter-star">
|
|
||||||
<svg viewBox="0 0 512 512">
|
|
||||||
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span class="glitter-text">{rank}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<section class="main-stats">
|
|
||||||
<h4>Match Statistics</h4>
|
|
||||||
<p>Total: {user.stats.totalGame}</p>
|
|
||||||
<p>Victories: {user.stats.winGame}</p>
|
|
||||||
<p>Losses: {user.stats.loseGame}</p>
|
|
||||||
<p>Draws: {user.stats.drawGame}</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
<div>testing when there's tons of stuff</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
div.outer{
|
|
||||||
max-width: 960px;
|
|
||||||
margin: 40px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The main part */
|
|
||||||
main{
|
|
||||||
max-width: 960px;
|
|
||||||
margin: 40px auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Normal CSS stuff */
|
|
||||||
.avatar{
|
|
||||||
max-width: 150px;
|
|
||||||
/* padding: 5px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The variable rich section */
|
|
||||||
section.main-stats{
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 40px auto;
|
|
||||||
text-align: center;
|
|
||||||
/* i think i want to use a grid? */
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
/* not sure about this, maybe top should be larger? */
|
|
||||||
grid-template-rows: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* the stuff in the grid*/
|
|
||||||
section.main-stats h4{
|
|
||||||
grid-column: 1 / span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.username{
|
|
||||||
font-size: 1.5em;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.rank {
|
|
||||||
/* color: black; */
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Glittery Star Stuff */
|
|
||||||
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--purple: rgb(123, 31, 162);
|
|
||||||
--violet: rgb(103, 58, 183);
|
|
||||||
--pink: rgb(244, 143, 177);
|
|
||||||
/* make shit gold? */
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes background-pan {
|
|
||||||
from {
|
|
||||||
background-position: 0% center;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
background-position: -200% center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scale {
|
|
||||||
from, to {
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
div > .glitter {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
div > .glitter > .glitter-star {
|
|
||||||
--size: clamp(20px, 1.5vw, 30px);
|
|
||||||
|
|
||||||
animation: scale 700ms ease forwards;
|
|
||||||
display: block;
|
|
||||||
height: var(--size);
|
|
||||||
left: var(--star-left);
|
|
||||||
position: absolute;
|
|
||||||
top: var(--star-top);
|
|
||||||
width: var(--size);
|
|
||||||
}
|
|
||||||
|
|
||||||
div > .glitter > .glitter-star > svg {
|
|
||||||
animation: rotate 1000ms linear infinite;
|
|
||||||
display: block;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
div > .glitter > .glitter-star > svg > path {
|
|
||||||
fill: var(--violet);
|
|
||||||
}
|
|
||||||
|
|
||||||
div > .glitter > .glitter-text {
|
|
||||||
animation: background-pan 3s linear infinite;
|
|
||||||
/* background-image: linear-gradient( */
|
|
||||||
background: linear-gradient(
|
|
||||||
to right,
|
|
||||||
var(--purple),
|
|
||||||
var(--violet),
|
|
||||||
var(--pink),
|
|
||||||
var(--purple)
|
|
||||||
);
|
|
||||||
background-size: 200%;
|
|
||||||
|
|
||||||
/* Keep these for Safari and chrome */
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
|
|
||||||
/* These are for Firefox */
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { loginStatus } from '../stores/loginStatusStore';
|
|
||||||
|
|
||||||
// Cherif's code
|
|
||||||
|
|
||||||
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;
|
|
||||||
// });
|
|
||||||
// })()
|
|
||||||
|
|
||||||
// $: submit = 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, please try again. You have ${maxTry} before end session`;
|
|
||||||
// maxTry--;
|
|
||||||
// }
|
|
||||||
// if (maxTry === 0)
|
|
||||||
// {
|
|
||||||
// await fetch("http://transcendance:8080/auth/logout",
|
|
||||||
// {
|
|
||||||
// method : 'POST',
|
|
||||||
// })
|
|
||||||
// .then(response => response.json())
|
|
||||||
// .then(push("/login"));
|
|
||||||
// }
|
|
||||||
// if (response.status === 200)
|
|
||||||
// {
|
|
||||||
// push("/");
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// My code
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let auth;
|
|
||||||
// we're expecting secret and otpauth
|
|
||||||
|
|
||||||
onMount( async() => {
|
|
||||||
// auth = await fetch('http://transcendance:8080/api/v2/auth/2fa/generate', {
|
|
||||||
// method: 'POST'
|
|
||||||
// })
|
|
||||||
// .then((resp) => resp.json());
|
|
||||||
// console.log(auth.secret);
|
|
||||||
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// testing loginStatus Custom Store
|
|
||||||
|
|
||||||
const toggleTFA = () => {
|
|
||||||
loginStatus.toggleTFA();
|
|
||||||
console.log($loginStatus.tfa);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// testing
|
|
||||||
|
|
||||||
let auth2
|
|
||||||
const TFA = async() => {
|
|
||||||
// ok no idea what goes in here...
|
|
||||||
auth2 = await fetch('http://transcendance:8080/api/v2/auth/2fa/generate', {
|
|
||||||
method: 'POST'
|
|
||||||
})
|
|
||||||
// .then((resp) => resp.json());
|
|
||||||
|
|
||||||
// console.log(auth2.secret);
|
|
||||||
console.log(auth2);
|
|
||||||
};
|
|
||||||
|
|
||||||
// if ($loginStatus.tfa && $loginStatus.fortyTwo)
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h1>2FA Test</h1>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button on:click={TFA}>TFA</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{#if auth2}
|
|
||||||
<p>{auth2.json()}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<img src={qrCodeImg} alt="A QRCodeImg you must scan with google authenticator" id="qrcodeImg" />
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <p>FortyTwo: {$loginStatus.fortyTwo}</p>
|
|
||||||
<p>TFA: {$loginStatus.tfa}</p>
|
|
||||||
<p>isLogged: {loginStatus.isLogged}</p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button on:click={toggleTFA}>toggleTFA</button>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
|
|
||||||
// The User Page can have several Flavors ?
|
|
||||||
// like a HomePage vibe, and an AccountPage vibe or whatever, but we'll still be serving this page just with diff props
|
|
||||||
|
|
||||||
import UserStore from "./UserStore";
|
|
||||||
import Header from "../components/Header.svelte";
|
|
||||||
import Footer from "../components/Footer.svelte";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import { loginStatus } from '../stores/loginStatusStore';
|
|
||||||
import { push } from "svelte-spa-router";
|
|
||||||
|
|
||||||
let dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
// i fucking hate these vars, the will have to go
|
|
||||||
export let pages;
|
|
||||||
export let currentPage;
|
|
||||||
export let userId;
|
|
||||||
|
|
||||||
// This shit is so redundant...
|
|
||||||
let types = ['home', 'account']
|
|
||||||
export let currentType = 'account';
|
|
||||||
|
|
||||||
// this is also stupid...
|
|
||||||
let sidebar = true;
|
|
||||||
|
|
||||||
|
|
||||||
// would i prefer to forward this?
|
|
||||||
let clickedHome = () => {
|
|
||||||
console.log('clicked home');
|
|
||||||
// do something...
|
|
||||||
currentType = 'home';
|
|
||||||
};
|
|
||||||
|
|
||||||
let clickedLogout = async() => {
|
|
||||||
console.log('clicked logout');
|
|
||||||
await fetch('http://transcendance:8080/api/v2/auth/logout',);
|
|
||||||
// $loginStatus = false;
|
|
||||||
// maybe use replace() ?
|
|
||||||
push('/');
|
|
||||||
};
|
|
||||||
|
|
||||||
// All the variables that will eventually be replaced by the real values
|
|
||||||
|
|
||||||
let username = 'Username';
|
|
||||||
let games = { total: 7, won: 4, lost: 3};
|
|
||||||
let rank = 'gold or whatever the fuck who cares...';
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- remove ={clickedHome} if you want to forward the event to App.svelte-->
|
|
||||||
<!-- god this is some gross code... -->
|
|
||||||
<Header on:clickedHome={clickedHome} currentType="{currentType === 'home' ? 'home' : 'regular'}" on:clickedLogout={clickedLogout}/>
|
|
||||||
|
|
||||||
<!-- The Wave -->
|
|
||||||
<!-- <div class="spacer layer1"></div> -->
|
|
||||||
|
|
||||||
<!-- this is the thing that will let me offset -->
|
|
||||||
<div class='{sidebar ? "main-grid" : "none"}'>
|
|
||||||
{#if sidebar}
|
|
||||||
<section class="sidebar">
|
|
||||||
<p>i am a sidebar</p>
|
|
||||||
</section>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<main class:offset={sidebar}>
|
|
||||||
<!-- what the fuck do we even want in here? messges, about the user, STATISTICS!!! -->
|
|
||||||
<!-- <div>some stuff goes here</div> -->
|
|
||||||
<img class="icon" src="img/default_user_icon.png" alt="default user icon">
|
|
||||||
<div>{username}</div>
|
|
||||||
<div>Rank: {rank}</div>
|
|
||||||
<section class="main-stats">
|
|
||||||
<h4>Match Statistics</h4>
|
|
||||||
<p>Total: {games.total}</p>
|
|
||||||
<p>Victories: {games.won}</p>
|
|
||||||
<p>Losses: {games.lost}</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* from Haikei */
|
|
||||||
/* for any Haikei image */
|
|
||||||
.spacer{
|
|
||||||
aspect-ratio: 900/300;
|
|
||||||
width: 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
/* the specific image we use, you need both classes */
|
|
||||||
.layer1{
|
|
||||||
background-image: url('/img/wave-haikei.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
div.main-grid{
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(12, 1fr);
|
|
||||||
/* max-height: calc(100vh - 30vh); */
|
|
||||||
height: 85vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.sidebar{
|
|
||||||
grid-column: 1 / span 2;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The main part */
|
|
||||||
main{
|
|
||||||
max-width: 960px;
|
|
||||||
margin: 40px auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
main.offset{
|
|
||||||
grid-column: 3 / span 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Normal CSS stuff */
|
|
||||||
.icon{
|
|
||||||
max-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The variable rich section */
|
|
||||||
section.main-stats{
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 40px auto;
|
|
||||||
text-align: center;
|
|
||||||
/* i think i want to use a grid? */
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
/* not sure about this, maybe top should be larger? */
|
|
||||||
grid-template-rows: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* the stuff in the grid*/
|
|
||||||
section.main-stats h4{
|
|
||||||
grid-column: 1 / span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
import { writable } from "svelte/store";
|
|
||||||
|
|
||||||
// ok yea this doesn't make a lot of sense, what am i trying to do?
|
|
||||||
// have an array of objects that are all the users?
|
|
||||||
// or an object that is the one user?
|
|
||||||
// For now as a placeholder i'll have one user in one obj
|
|
||||||
|
|
||||||
// should it not be a const? yea seems like it
|
|
||||||
// export const users = writable(
|
|
||||||
const UserStore = writable(
|
|
||||||
[{
|
|
||||||
// this is an example user
|
|
||||||
id: 1,
|
|
||||||
username: 'chaboi',
|
|
||||||
email: 'nope@fu.com',
|
|
||||||
// surely there's a better way to do this!
|
|
||||||
password: '1234',
|
|
||||||
// maybe an object listing friends' usernames?
|
|
||||||
friends: 0,
|
|
||||||
loggedIn: false,
|
|
||||||
// i imagine the user uploading their Avatare and it being put somehwere in the DB which could be referenced like a URL
|
|
||||||
// so if this field is empty then use the default avatar
|
|
||||||
avatar: '',
|
|
||||||
// online, offline, gaming
|
|
||||||
status: 'offline',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
username: 'itsame',
|
|
||||||
email: 'mario@nintendo.com',
|
|
||||||
// surely there's a better way to do this!
|
|
||||||
password: '1234',
|
|
||||||
// maybe an object listing friends' usernames?
|
|
||||||
friends: 0,
|
|
||||||
loggedIn: false,
|
|
||||||
// i imagine the user uploading their Avatare and it being put somehwere in the DB which could be referenced like a URL
|
|
||||||
// so if this field is empty then use the default avatar
|
|
||||||
avatar: '',
|
|
||||||
// online, offline, gaming
|
|
||||||
status: 'offline',
|
|
||||||
}]
|
|
||||||
);
|
|
||||||
|
|
||||||
export default UserStore;
|
|
||||||
// export default users;
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
import { writable } from "svelte/store";
|
|
||||||
|
|
||||||
// an alternative way of doing things where i have a svelte store connected to localStorage
|
|
||||||
|
|
||||||
// do in need to adapt this to work with 2fa?
|
|
||||||
|
|
||||||
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
|
|
||||||
});
|
|
||||||
|
|
||||||
export const userLogout = () => userStore.set(null);
|
|
||||||
|
|
||||||
|
|
||||||
// export const tmpStore = userStore
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
import { writable } from "svelte/store";
|
|
||||||
|
|
||||||
// This is a "Custom Store" see that chapter in the Svelte Tutorial, should be fine
|
|
||||||
// NVM this is definitely overkill
|
|
||||||
// function createLogin() {
|
|
||||||
// const { subscribe, update } = writable(false);
|
|
||||||
|
|
||||||
// return {
|
|
||||||
// subscribe,
|
|
||||||
// login: () => update(s => s = true),
|
|
||||||
// logout: () => update(s => s = false),
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// export const loginStatus = createLogin();
|
|
||||||
|
|
||||||
// export const loginStatus = writable({
|
|
||||||
// 42: false,
|
|
||||||
// tfa: false,
|
|
||||||
// });
|
|
||||||
|
|
||||||
// function createLoginStatus() {
|
|
||||||
|
|
||||||
// //ok it really hated all this
|
|
||||||
|
|
||||||
// // const store = writable({
|
|
||||||
// // fortyTwo: false,
|
|
||||||
// // tfa: false,
|
|
||||||
// // });
|
|
||||||
|
|
||||||
// // return {
|
|
||||||
// // ...store,
|
|
||||||
// // subscribe,
|
|
||||||
// // // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
|
|
||||||
// // toggle42: () => store.update( fortyTwo => !fortyTwo ),
|
|
||||||
// // // toggleTFA: () => update( l => l.tfa = !l.tfa ),
|
|
||||||
// // toggleTFA: () => store.update( tfa => !tfa ),
|
|
||||||
// // isLogged: () => store.fortyTwo && store.tfa,
|
|
||||||
// // // isLogged: this.fortyTwo && this.tfa,
|
|
||||||
// // // it really doesn't like "this."
|
|
||||||
// // // isLogged: () => (this.tfa && this.fortyTwo),
|
|
||||||
// // // this. ? or (l) => l.tfa ... ?
|
|
||||||
// // }
|
|
||||||
|
|
||||||
|
|
||||||
// // doesn't seem to work...
|
|
||||||
// const { subscribe, update } = writable({
|
|
||||||
// fortyTwo: false,
|
|
||||||
// tfa: false,
|
|
||||||
// });
|
|
||||||
|
|
||||||
// return {
|
|
||||||
// subscribe,
|
|
||||||
// // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
|
|
||||||
// toggle42: () => update( fortyTwo => !fortyTwo ),
|
|
||||||
// // toggleTFA: () => update( l => l.tfa = !l.tfa ),
|
|
||||||
// toggleTFA: () => update( tfa => !tfa ),
|
|
||||||
// // isLogged: () => fortyTwo && tfa,
|
|
||||||
// // isLogged: this.fortyTwo && this.tfa,
|
|
||||||
// // it really doesn't like "this."
|
|
||||||
// // isLogged: () => (this.tfa && this.fortyTwo),
|
|
||||||
// // this. ? or (l) => l.tfa ... ?
|
|
||||||
// isLogged() {
|
|
||||||
// return fortyTwo && tfa;
|
|
||||||
// },
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // possible other way of doing this
|
|
||||||
|
|
||||||
// // const store = writable({
|
|
||||||
// // fortyTwo: false,
|
|
||||||
// // tfa: false,
|
|
||||||
// // });
|
|
||||||
|
|
||||||
// // return {
|
|
||||||
// // ...store,
|
|
||||||
// // subscribe,
|
|
||||||
// // // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
|
|
||||||
// // toggle42: () => store.update( l.fortyTwo => !l.fortyTwo ),
|
|
||||||
// // toggleTFA: () => store.update( l => l.tfa = !l.tfa ),
|
|
||||||
// // isLogged: store.fortyTwo && store.tfa,
|
|
||||||
// // // isLogged: () => (this.tfa && this.fortyTwo),
|
|
||||||
// // // this. ? or (l) => l.tfa ... ?
|
|
||||||
// // }
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
function createLoginStatus() {
|
|
||||||
const { subscribe, update } = writable({
|
|
||||||
fortyTwo: false,
|
|
||||||
tfa: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
function toggle42() {
|
|
||||||
update( (old) => ({...old, fortyTwo: !old.fortyTwo}) );
|
|
||||||
};
|
|
||||||
|
|
||||||
function toggleTFA() {
|
|
||||||
// update( () => {
|
|
||||||
// self.tfa = !self.tfa;
|
|
||||||
// return self;
|
|
||||||
// })
|
|
||||||
// console.log("testing");
|
|
||||||
update( (old) => ({...old, tfa: !old.tfa}) );
|
|
||||||
};
|
|
||||||
|
|
||||||
function isLogged() {
|
|
||||||
// return (l) => {l.fortyTwo && l.tfa};
|
|
||||||
// return self.fortyTwo && self.tfa;
|
|
||||||
// return fortyTwo && tfa;
|
|
||||||
};
|
|
||||||
|
|
||||||
return { subscribe, update, toggle42, toggleTFA, isLogged };
|
|
||||||
}
|
|
||||||
|
|
||||||
export const loginStatus = createLoginStatus();
|
|
||||||
|
|
||||||
// OK let's try a totally new approach
|
|
||||||
|
|
||||||
// const _loginStatus = writable({
|
|
||||||
// fortyTwo: false,
|
|
||||||
// tfa: false,
|
|
||||||
// })
|
|
||||||
|
|
||||||
// export const loginStatus = {
|
|
||||||
// subscribe: _loginStatus.subscribe,
|
|
||||||
// set: _loginStatus.set,
|
|
||||||
// update: _loginStatus.update,
|
|
||||||
// toggle42: () =>
|
|
||||||
// }
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: 'Monocode-Regular-Demo';
|
|
||||||
src:url('/fonts/Monocode-Regular-Demo.ttf.woff') format('woff'),
|
|
||||||
url('Monocode-Regular-Demo.ttf.svg#Monocode-Regular-Demo') format('svg'),
|
|
||||||
url('Monocode-Regular-Demo.ttf.eot'),
|
|
||||||
url('Monocode-Regular-Demo.ttf.eot?#iefix') format('embedded-opentype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Air-Conditioner';
|
|
||||||
src:url('/fonts/Air-Conditioner.ttf.woff') format('woff'),
|
|
||||||
url('Air-Conditioner.ttf.svg#Air-Conditioner') format('svg'),
|
|
||||||
url('Air-Conditioner.ttf.eot'),
|
|
||||||
url('Air-Conditioner.ttf.eot?#iefix') format('embedded-opentype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: '1968-Odyssey-3D';
|
|
||||||
src:url('/fonts/1968-Odyssey-3D.ttf.woff') format('woff'),
|
|
||||||
url('1968-Odyssey-3D.ttf.svg#1968-Odyssey-3D') format('svg'),
|
|
||||||
url('1968-Odyssey-3D.ttf.eot'),
|
|
||||||
url('1968-Odyssey-3D.ttf.eot?#iefix') format('embedded-opentype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: '1968-Odyssey-Gradient';
|
|
||||||
src:url('/fonts/1968-Odyssey-Gradient.ttf.woff') format('woff'),
|
|
||||||
url('1968-Odyssey-Gradient.ttf.svg#1968-Odyssey-Gradient') format('svg'),
|
|
||||||
url('1968-Odyssey-Gradient.ttf.eot'),
|
|
||||||
url('1968-Odyssey-Gradient.ttf.eot?#iefix') format('embedded-opentype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'AddFatMan';
|
|
||||||
src:url('/fonts/AddFatMan.ttf.woff') format('woff'),
|
|
||||||
url('/fonts/AddFatMan.ttf.svg#AddFatMan') format('svg'),
|
|
||||||
url('/fonts/AddFatMan.ttf.eot'),
|
|
||||||
url('/fonts/AddFatMan.ttf.eot?#iefix') format('embedded-opentype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Bondi';
|
|
||||||
src:url('/fonts/Bondi.ttf.woff') format('woff'),
|
|
||||||
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
|
|
||||||
url('/fonts/Bondi.ttf.eot'),
|
|
||||||
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
@@ -1,177 +0,0 @@
|
|||||||
<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>
|
|
||||||
Reference in New Issue
Block a user