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

cleaned up everything, basically all comments and console.logs are gone

Browse Source
This commit is contained in:
Me
2023-01-17 21:29:41 +01:00
parent 11f54bde83
commit 3b72079663
16 changed files with 10 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { onMount } from "svelte";
import { push } from "svelte-spa-router";
let qrCodeImg;
@@ -57,21 +56,18 @@
</script>
<!-- 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}>
<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>
@@ -83,18 +79,13 @@
<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 {

15
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplayOneUser.svelte
View File

@@ -18,15 +18,12 @@
</script>
<div class="background-pages">
{#if oneUser}
<GenerateUserDisplay user={oneUser}/>
{:else}
<h2>Sorry</h2>
<div>Failed to load user {params.username}</div>
{/if}
<!-- This is where i might toss in an Invite to Game button ? -->
{#if oneUser}
<GenerateUserDisplay user={oneUser}/>
{:else}
<h2>Sorry</h2>
<div>Failed to load user {params.username}</div>
{/if}
</div>
<style>

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

@@ -11,9 +11,8 @@
let avatar, newAvatar;
let uploadAvatarSuccess = false;
// tbh i might not need this...
let set = { username: '', tfa: false };
let nameTmp; // annoying...
let nameTmp;
const errors = { username: '', checkbox: '', avatar: ''};
let success = {username: '', avatar: '' };
@@ -24,7 +23,6 @@
if (!user) {
console.log('User did not load, something more official should prolly happen')
}
// i don't unerstand why this is necessary but it really doesn't like it otherwise
nameTmp = user.username;
set.tfa = user.isEnabledTwoFactorAuth;
@@ -82,8 +80,6 @@
const data = new FormData();
data.append("file", newAvatar[0]);
// tmp
console.log(data);
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user/avatar`,
{
@@ -136,8 +132,6 @@
<form on:submit|preventDefault={settingsHandler}>
<div class="form-field">
<div class="label">New Username</div>
<!-- it really hates {user.username} and ${user.username} -->
<!-- <input type="text" placeholder="current username: ${user.username}" bind:value={set.username}> -->
<input type="text" placeholder="{nameTmp}" bind:value={set.username}>
<div class="success">{success.username}</div>
<div class="error">{errors.username}</div>
@@ -152,18 +146,15 @@
</Card>
<Card>
<!-- ok so it can't actually show us the file we upload until we've uploaded it... -->
{#if avatar}
<img class="avatar" src={avatar} alt="your avatar"/>
{/if}
<form on:submit|preventDefault={uploadAvatar}>
<!-- not convinced this has any utility. -->
<!-- <input type="text" bind:value={postVar} placeholder={"choose your file"}/> -->
<div class="form-field">
<div class="label">Pick a new Avatar</div>
<input type="file" bind:files={newAvatar}/>
<div class="error">{errors.avatar}</div>
<div class="success">{success.avatar}</div>
<div class="success">{success.avatar}</div>
</div>
<Button type={!newAvatar ? "primary" : "secondary"}>Upload Avatar</Button>
</form>
@@ -174,38 +165,23 @@
</main>
<style>
main {
text-align: center;
/* display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px; */
}
div.cards{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
/* text-align: center; */
margin-bottom: 10px;
}
img {
/* we want the image to display as the same size no matter the resolution */
/* max-width: fit-content; */
/* max-width: 100px; */
width: 60px;
/* ok this works but i'm guessing i'll need to add some @media ... */
/* padding: 10px; */
/* this doesn't work either when nothing loads and it's just the words... don't love that */
}
form {
/* max-width: 500px; */
text-align: center;
}
@@ -223,7 +199,6 @@
color: #333;
}
.error{
font-size: 1vw;
font-weight: bold;

6
srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
View File

@@ -496,18 +496,12 @@
.box {
--width: 70vw;
--height: 60vh;
/* --height: auto; */
position: absolute;
width: var(--width);
/* width: auto; */
/* height: var(--height); */
height: auto;
left: calc(50% - var(--width) / 2);
/* left: 0px; */
top: calc(50% - var(--height) / 2);
/* top: 0px; */
/* top: calc(50% - ); */
/* display: flex; */
align-items: center;
padding: 8px;
border: 2px solid white;

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

@@ -7,8 +7,6 @@
background: white;
padding: 20px;
border-radius: 6px;
/* this softens the corners */
box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
}
</style>

16
srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
View File

@@ -3,7 +3,6 @@
export let user;
let rank = '';
let avatar;
if (user.stats.loseGame > user.stats.winGame) {
rank = "Come on, you can do better"
@@ -47,13 +46,11 @@
<div class="outer">
{#if user}
<main>
<!-- <img class="avatar" src="{avatar}" alt="user avatar"> -->
{#await fetchAvatar(user.username) then avatar}
<img class="avatar" src="{avatar}" alt="user avatar">
{:catch error}
<p class="errorA">Avatar was unable to load</p>
{/await}
<!-- <div class="error">{errors.avatar}</div> -->
<div class="username">{user.username}</div>
<div class="rank">Rank:
<span class="glitter">
@@ -102,11 +99,8 @@
text-align: center;
}
/* Normal CSS stuff */
.avatar{
max-width: 150px;
/* width: 1em; */
/* padding: 5px; */
}
/* The variable rich section */
@@ -114,10 +108,8 @@
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);
}
@@ -139,12 +131,6 @@
font-weight: bold;
}
.error{
font-size: 1vw;
font-weight: bold;
color: red;
}
.errorA{
font-size: 0.5em;
font-weight: bold;
@@ -173,8 +159,6 @@
}
/* Glittery Star Stuff */

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

@@ -2,11 +2,6 @@
import { push } from "svelte-spa-router";
import { location } from 'svelte-spa-router';
// no need, it's just for links
import active from 'svelte-spa-router/active'
// or i could leave them all and not display if they're active?
$: current = $location;
let handleClickLogout = async () =>

8
srcs/requirements/svelte/api_front/src/pieces/Tabs.svelte
View File

@@ -24,7 +24,6 @@
.tab.big{
margin-bottom: 50px;
/* guessing at size */
}
.tab.medium{
margin-bottom: 40px;
@@ -32,7 +31,6 @@
}
.tab.small{
margin-bottom: 10px;
/* need it small */
}
ul{
display: flex;
@@ -41,15 +39,12 @@
list-style-type: none;
}
li{
/* margin: 0 16px; */
/* font-size: 18px; */
color: #555;
cursor: pointer;
}
li.big{
margin: 0 20px;
font-size: 22px;
/* guessing at size */
}
li.medium{
margin: 0 16px;
@@ -59,7 +54,6 @@
li.small{
margin: 8px;
font-size: 10px;
/* need it small */
}
.active{
@@ -79,7 +73,6 @@
li.default{
margin: 0 16px;
font-size: 18px;
/* the OG size */
}
@media screen and (max-width: 700px) {
@@ -93,5 +86,4 @@
}
}
</style>

1
srcs/requirements/svelte/api_front/src/pieces/utils.ts
View File

@@ -6,7 +6,6 @@ export async function fetchAvatar(username?: string)
url += `?username=${username}`;
}
// throw new Error("HTTP ")
return fetch(url)
.then((response) => {
if (!response.ok) {

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

@@ -12,11 +12,9 @@ import { fetchUser } from "../pieces/utils";
async function checkLogin(detail) {
const user = await fetchUser();
if (!user || !user.username) {
// console.log('failed to be logged in')
return false;
}
else {
// console.log('successfully logged in')
return true;
}
}

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

@@ -5,8 +5,6 @@ import ProfileSettings from '../pages/profile/ProfileSettings.svelte';
import ProfileUsers from '../pages/profile/ProfileUsers.svelte';
import ProfileDisplayOneUser from "../pages/profile/ProfileDisplayOneUser.svelte";
import DisplayAUser from '../pieces/DisplayAUser.svelte';
// establishing the prefix here very clearly so we can have a coherent repeatable structure
export const prefix = '/profile';
@@ -15,6 +13,5 @@ export const profileRoutes = {
'/settings': ProfileSettings,
'/users': ProfileUsers,
'/users/:username': ProfileDisplayOneUser,
// '/users/:username': DisplayAUser,
'*': NotFound
};