ok everything still works, now can see the avatar, working on better ProfileSettings
This commit is contained in:
Me
@@ -2,12 +2,9 @@
|
||||
import Canvas from "../pieces/Canvas.svelte";
|
||||
import { push } from "svelte-spa-router";
|
||||
import { onMount } from 'svelte';
|
||||
import { loginStatus } from '../stores/loginStatusStore.js';
|
||||
import { userStore, userLogout } from '../stores/loginStatusStore.js';
|
||||
|
||||
|
||||
// go over agian in detail to make sure this actually does what you want
|
||||
// it needs some work, seems confused a lot of the time...
|
||||
onMount(async () => {
|
||||
console.log('SplashPage testing if logged in')
|
||||
// let user = await fetch('http://transcendance:8080/api/v2/user')
|
||||
@@ -43,9 +40,18 @@
|
||||
// }
|
||||
|
||||
|
||||
// for some reason unlike in ProfileDisplay here the user is never undefined...
|
||||
// ok i think it's because here i declare the user in the call whereas in ProfileDisplay i declare user before...
|
||||
// if (user !== undefined) {
|
||||
// console.log('user not undefined')
|
||||
// }
|
||||
// else
|
||||
// console.log('user undefined')
|
||||
|
||||
// to clean up local storage... as a precaution
|
||||
// this condition isn't good enough...
|
||||
if (user && user.statusCode && user.statusCode === 403) {
|
||||
// if (user && user.statusCode && user.statusCode === 403) {
|
||||
if (user === undefined) {
|
||||
console.log('on mount no user, returned status code 403 so logging out of userStore')
|
||||
userLogout(); // which i think should delete any previous local storage
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
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",
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
|
||||
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
|
||||
@@ -29,6 +30,8 @@
|
||||
user = await fetch('http://transcendance:8080/api/v2/user')
|
||||
.then( (x) => x.json() );
|
||||
|
||||
// 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) {
|
||||
@@ -37,6 +40,14 @@
|
||||
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;
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
|
||||
// Glittery Stars and such for Rank
|
||||
@@ -76,9 +87,9 @@
|
||||
{#if user !== undefined}
|
||||
<main>
|
||||
<!-- <img class="icon" src="img/default_user_icon.png" alt="default user icon"> -->
|
||||
<div>{user.image_url}</div>
|
||||
<img class="icon" src="{user.image_url}" alt="default user icon">
|
||||
<div>{user.username}</div>
|
||||
<!-- <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">
|
||||
@@ -153,8 +164,9 @@
|
||||
}
|
||||
|
||||
/* Normal CSS stuff */
|
||||
.icon{
|
||||
.avatar{
|
||||
max-width: 150px;
|
||||
/* padding: 5px; */
|
||||
}
|
||||
|
||||
/* The variable rich section */
|
||||
@@ -174,9 +186,15 @@
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
||||
div.username{
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
div.rank {
|
||||
/* color: black; */
|
||||
font-size: 1.5em;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import Card from '../../pieces/Card.svelte';
|
||||
import {onMount} from 'svelte';
|
||||
import { push } from 'svelte-spa-router';
|
||||
import { loginStatus } from '../../stores/loginStatusStore'
|
||||
|
||||
let user;
|
||||
|
||||
@@ -49,13 +48,29 @@
|
||||
.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');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// $: uploadAvatar = async() => {
|
||||
// const data = new FormData();
|
||||
// data.append("file", newAvatar[0]);
|
||||
// console.log(data);
|
||||
// await fetch("http://transcendance:8080/api/v2/user/avatar",
|
||||
// {
|
||||
// method : 'POST',
|
||||
// body : data,
|
||||
// })
|
||||
// .then(uploadAvatarSuccess = true)
|
||||
// .catch(errors.image_urlSv = "Something went wrong." )
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { push } from "svelte-spa-router";
|
||||
import { location } from 'svelte-spa-router';
|
||||
import { loginStatus } from "../stores/loginStatusStore.js";
|
||||
import { userStore, userLogout } from "../stores/loginStatusStore.js";
|
||||
|
||||
import active from 'svelte-spa-router/active'
|
||||
@@ -9,15 +8,12 @@
|
||||
|
||||
|
||||
let handleClickLogout = async () => {
|
||||
// dispatch('clickedLogout');
|
||||
await fetch('http://transcendance:8080/api/v2/auth/logout', {
|
||||
method: 'POST',
|
||||
});
|
||||
console.log('clicked logout header')
|
||||
userLogout();
|
||||
// $loginStatus = false;
|
||||
|
||||
push('/');
|
||||
push('/'); // replace?
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,47 +1,12 @@
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
function createLoginStatus() {
|
||||
const { subscribe, update } = writable({
|
||||
fortyTwo: false,
|
||||
tfa: false,
|
||||
});
|
||||
|
||||
function toggle42() {
|
||||
update( (old) => ({...old, fortyTwo: !old.fortyTwo}) );
|
||||
};
|
||||
|
||||
function toggleTFA() {
|
||||
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;
|
||||
// return fortyTwo && tfa;
|
||||
return (old) => (old.fortyTwo && old.tfa);
|
||||
};
|
||||
|
||||
return { subscribe, update, toggle42, toggleTFA, allTrue, allFalse, isLogged };
|
||||
}
|
||||
|
||||
export const loginStatus = createLoginStatus();
|
||||
|
||||
|
||||
// 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
|
||||
|
||||
// ok so this will happen no matter what, basically we are telling it what to do if the store containing the user changes
|
||||
|
||||
Reference in New Issue
Block a user