Welcome, {username}!

\n \n

You are now logged in to the protected area.

VSCode Placeholder

This is where the VSCode editor would be implemented.

\n );\n }\n\n return (\n

Login

\n {error &&

{error}

}\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n \n if (url.pathname === \"/auth\") {\n return authenticate(request);\n } else if (url.pathname === \"/login\" || url.pathname === \"/\") {\n return new Response(`\n \n \n \n \n \n Protected Area Login\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n } else {\n return protectedRoute(request);\n }\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n\n#root {\n background-color: white;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n max-width: 800px;\n width: 100%;\n}\n\nh1 {\n margin-top: 0;\n}\n\nform {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n margin-bottom: 5px;\n}\n\ninput {\n margin-bottom: 10px;\n padding: 5px;\n}\n\nbutton {\n padding: 10px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 3px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #0056b3;\n}\n`;","createdAt",["D",1740151974276],"version",6,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","AIWB","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycU91M051U0JoMFZtclVEaFY2MDNCUmlFbTYifQ","forkedVal",{"_113":135,"_129":136,"_98":137,"_118":138,"_139":-5},"b2e28a1e-bc78-11ef-b0f1-e6cdfca9ef9f","pomdtr","vscode",20,"prDisabledHint","interval","slug","AIWB/vs_code","description","Manage your blobs using VS Code ! Just fork this val to install it, and authenticate with your account email. ","versions",[147,150,154,158,162,165,169],{"_118":119,"_148":-5,"_116":149,"_113":111},"prId",["D",1740151974276],{"_118":151,"_148":-5,"_116":152,"_113":153},5,["D",1740151935344],"0722428a-f069-11ef-a005-e6cdfca9ef9f",{"_118":155,"_148":-5,"_116":156,"_113":157},4,["D",1740151832218],"c9aa9696-f068-11ef-b901-e6cdfca9ef9f",{"_118":159,"_148":-5,"_116":160,"_113":161},3,["D",1740151647736],"5bb43084-f068-11ef-9a43-e6cdfca9ef9f",{"_118":90,"_148":-5,"_116":163,"_113":164},["D",1740151566553],"2b50b868-f068-11ef-b3eb-e6cdfca9ef9f",{"_118":166,"_148":-5,"_116":167,"_113":168},1,["D",1740151404940],"cafb96a4-f067-11ef-8331-e6cdfca9ef9f",{"_118":31,"_148":-5,"_116":170,"_113":171},["D",1740150738860],"3dfa7c30-f066-11ef-9e8e-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":179,"_180":181,"_94":182},"single","redirect","/v/AIWB/vs_code/versions",{"_113":168,"_114":183,"_118":166,"_116":184,"_185":99,"_100":101,"_108":109,"_129":130,"_11":96,"_186":-5,"_187":-5,"_188":-5,"_176":26,"_141":142},"import { create, verify } from \"https://deno.land/x/djwt@v2.8/mod.ts\";\nimport { ValTownFS } from \"https://jsr.io/@smallweb/vscode/0.0.2/fs/val_town.ts\";\nimport { VSCode } from \"https://jsr.io/@smallweb/vscode/0.0.2/mod.ts\";\n\nconst fs = new ValTownFS();\nconst vscode = new VSCode({\n fs,\n});\n\nconst SECRET_KEY = \"your-secret-key\"; // In a real application, use a secure, environment-specific secret\n\nasync function generateToken(username: string): Promise {\n const payload = {\n iss: \"val-town\",\n exp: Date.now() / 1000 + 60 * 60, // 1 hour from now\n username: username,\n };\n return await create({ alg: \"HS256\", typ: \"JWT\" }, payload, SECRET_KEY);\n}\n\nasync function verifyToken(token: string): Promise {\n try {\n await verify(token, SECRET_KEY);\n return true;\n } catch {\n return false;\n }\n}\n\nasync function authenticate(request: Request): Promise {\n const url = new URL(request.url);\n const username = url.searchParams.get(\"username\");\n const password = url.searchParams.get(\"password\");\n\n // In a real application, you would validate the username and password against a database\n if (username === \"demo\" && password === \"password\") {\n const token = await generateToken(username);\n return new Response(JSON.stringify({ token }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } else {\n return new Response(\"Invalid credentials\", { status: 401 });\n }\n}\n\nasync function protectedRoute(request: Request): Promise {\n const token = request.headers.get(\"Authorization\")?.split(\" \")[1];\n if (!token || !(await verifyToken(token))) {\n return new Response(\"Unauthorized\", { status: 401 });\n }\n return vscode.fetch(request);\n}\n\nexport default async function(request: Request): Promise {\n const url = new URL(request.url);\n \n if (url.pathname === \"/auth\") {\n return authenticate(request);\n } else {\n return protectedRoute(request);\n }\n}",["D",1740151404940],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

vs_code

Version 1