mirror/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-02-05 13:28:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Serve HTML success page on auth callback

Browse Source 
Replace the plain text response with a styled HTML confirmation page for the local authentication callback. The handler now sets Content-Type to text/html and returns a responsive, animated "Authentication Successful" page (with checkmark graphic and Puter branding) while preserving the existing token extraction from the callback URL's search params.
This commit is contained in:
Nariman Jelveh
2026-02-01 12:34:26 -08:00
parent 22606f29b2
commit bfea66a1d6
1 changed files with 91 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/puter-js/src/init.cjs
View File

@@ -35,8 +35,97 @@ const getAuthToken = (guiOrigin = 'https://puter.com') => {
return new Promise((resolve) => {
const requestListener = function (/**@type {IncomingMessage} */ req, res) {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Authentication Granted! You maty now close this window.');
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Authentication Successful - Puter</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: #404C71;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background: white;
border-radius: 16px;
padding: 48px;
text-align: center;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
max-width: 420px;
margin: 20px;
}
.checkmark {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #00c853 0%, #00e676 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
animation: scaleIn 0.5s ease-out;
}
.checkmark svg {
width: 40px;
height: 40px;
stroke: white;
stroke-width: 3;
fill: none;
animation: drawCheck 0.6s ease-out 0.3s forwards;
stroke-dasharray: 50;
stroke-dashoffset: 50;
}
@keyframes scaleIn {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes drawCheck {
to { stroke-dashoffset: 0; }
}
h1 {
color: #1a1a2e;
font-size: 24px;
font-weight: 600;
margin-bottom: 12px;
}
p {
color: #64748b;
font-size: 16px;
line-height: 1.6;
}
.puter-logo {
margin-top: 32px;
opacity: 0.6;
font-size: 14px;
color: #94a3b8;
}
</style>
</head>
<body>
<div class="container">
<div class="checkmark">
<svg viewBox="0 0 24 24">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<h1>Authentication Successful</h1>
<p>You're all set! You may now close this window and return to your terminal.</p>
<div class="puter-logo">Powered by Puter</div>
</div>
</body>
</html>`);
resolve(new URL(req.url, 'http://localhost/').searchParams.get('token'));
};