markury/shark
1
0
Fork 0
mirror of https://github.com/markuryy/shark.git synced 2025-12-12 11:41:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(auth): style OAuth callback and clean up logic

Browse Source
This commit is contained in:
Markury
2025-10-15 13:07:03 -04:00
parent 7f719bec11
commit e19c25e94b
1 changed files with 82 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/routes/services/spotify/+page.svelte
View File

@@ -18,6 +18,7 @@
// OAuth state // OAuth state
let isWaitingForCallback = $state(false); let isWaitingForCallback = $state(false);
let oauthUnlisten: (() => void) | null = $state(null);
onMount(async () => { onMount(async () => {
await loadSpotifyAuth(); await loadSpotifyAuth();
@@ -50,13 +51,84 @@
// Save credentials // Save credentials
await saveClientCredentials(clientIdInput.trim(), clientSecretInput.trim()); await saveClientCredentials(clientIdInput.trim(), clientSecretInput.trim());
// Set up OAuth callback listener first // Clean up any existing OAuth listener
onUrl((callbackUrl) => { if (oauthUnlisten) {
oauthUnlisten();
}
// Set up OAuth callback listener and store unlisten function
oauthUnlisten = await onUrl((callbackUrl) => {
handleOAuthCallback(callbackUrl); handleOAuthCallback(callbackUrl);
}); });
// Start OAuth server on fixed port // Start OAuth server on fixed port with custom styled response
const port = await start({ ports: [OAUTH_PORT] }); const port = await start({
ports: [OAUTH_PORT],
response: `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spotify Authorization Complete</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
background: #008080;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.window {
background: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
padding: 3px;
max-width: 500px;
width: 100%;
}
.title-bar {
background: linear-gradient(90deg, navy, #1084d0);
padding: 3px 5px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
font-weight: bold;
font-size: 11px;
}
.window-body {
background: silver;
padding: 16px;
margin: 3px;
}
h1 {
font-size: 16px;
margin-bottom: 12px;
}
p {
font-size: 11px;
line-height: 1.5;
margin-bottom: 8px;
}
</style>
</head>
<body>
<div class="window">
<div class="title-bar">
<span>Spotify Authorization</span>
</div>
<div class="window-body">
<h1>Authorization Complete</h1>
<p>You have successfully authorized Shark with your Spotify account.</p>
<p>You can close this window and return to the app.</p>
</div>
</div>
</body>
</html>
`
}); });
console.log(`[Spotify] OAuth server started on port ${port}`); console.log(`[Spotify] OAuth server started on port ${port}`);
@@ -81,6 +153,12 @@
} }
} }
async function handleOAuthCallback(callbackUrl: string) {
// Immediately remove the listener to prevent duplicate calls from hot reload
if (oauthUnlisten) {
oauthUnlisten();
oauthUnlisten = null;
}
try { try {
// Parse the callback URL // Parse the callback URL