audio streaming app
plyr.fm
Merge pull request #40 from zzstoatzz/fix/artist-page-auth-and-button-sizing
fix: restore authentication state on artist page and unify button sizing
authored by
nate nowack
and committed by
GitHub
00e76f51
4b93e701
+53
-3
+1
-1
frontend/src/lib/components/Header.svelte
+1
-1
frontend/src/lib/components/Header.svelte
+52
-2
frontend/src/routes/u/[handle]/+page.svelte
+52
-2
frontend/src/routes/u/[handle]/+page.svelte
···
2
2
import { onMount } from 'svelte';
3
3
import { page } from '$app/stores';
4
4
import { API_URL } from '$lib/config';
5
-
import type { Track, Artist } from '$lib/types';
5
+
import type { Track, Artist, User } from '$lib/types';
6
6
import TrackItem from '$lib/components/TrackItem.svelte';
7
7
import Header from '$lib/components/Header.svelte';
8
8
import { player } from '$lib/player.svelte';
···
16
16
let tracks: Track[] = $state(data.tracks); // initialize with server data
17
17
let loading = $state(true);
18
18
let error = $state('');
19
+
let user: User | null = $state(null);
20
+
let isAuthenticated = $state(false);
21
+
22
+
async function checkAuth() {
23
+
const sessionId = localStorage.getItem('session_id');
24
+
if (!sessionId) {
25
+
isAuthenticated = false;
26
+
return;
27
+
}
28
+
29
+
try {
30
+
const response = await fetch(`${API_URL}/auth/me`, {
31
+
headers: {
32
+
'Authorization': `Bearer ${sessionId}`
33
+
}
34
+
});
35
+
36
+
if (response.ok) {
37
+
user = await response.json();
38
+
isAuthenticated = true;
39
+
} else {
40
+
localStorage.removeItem('session_id');
41
+
isAuthenticated = false;
42
+
}
43
+
} catch (e) {
44
+
console.error('auth check failed:', e);
45
+
isAuthenticated = false;
46
+
}
47
+
}
48
+
49
+
async function handleLogout() {
50
+
const sessionId = localStorage.getItem('session_id');
51
+
if (!sessionId) return;
52
+
53
+
try {
54
+
await fetch(`${API_URL}/auth/logout`, {
55
+
method: 'POST',
56
+
headers: {
57
+
'Authorization': `Bearer ${sessionId}`
58
+
}
59
+
});
60
+
} catch (e) {
61
+
console.error('logout failed:', e);
62
+
}
63
+
64
+
localStorage.removeItem('session_id');
65
+
user = null;
66
+
isAuthenticated = false;
67
+
}
19
68
20
69
async function loadArtistAndTracks() {
21
70
loading = true;
···
62
111
}
63
112
64
113
onMount(() => {
114
+
checkAuth();
65
115
loadArtistAndTracks();
66
116
});
67
117
</script>
···
101
151
</div>
102
152
{:else if artist}
103
153
104
-
<Header user={null} isAuthenticated={false} onLogout={async () => {}} />
154
+
<Header {user} {isAuthenticated} onLogout={handleLogout} />
105
155
106
156
<main>
107
157
<section class="artist-header">