Log Me In

This is a big secret in here!

Logout

Reset

\n `,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } },\n );\n}\n\nexport default await logMeInMiddleware(import.meta.url, handler);",[],[100],{"_104":169,"_96":170,"_140":171,"_142":-5,"_143":131,"_144":130,"_146":147,"_106":172,"_101":173,"_150":151,"_152":174,"_154":26,"_155":175,"_99":176},"1a611578-e584-11ef-8778-e6cdfca9ef9f","mw","ce38b34a-e56a-11ef-a69d-e6cdfca9ef9f",["D",1738954101273],172,"/** @jsxImportSource npm:react */\nimport { extractProjectValInfo } from \"https://esm.town/v/maxm/extractProjectValInfo\";\nimport { renderToString } from \"npm:react-dom/server\";\nimport { type Config, DB } from \"./db\";\nimport { getSessionKey, setSession } from \"./sessionCookie\";\n\ntype Handler = (r: Request) => Promise | Response;\n\nexport async function logMeInMiddleware(\n importMetaUrl: string,\n handle: Handler,\n): Promise {\n const projectInfo = extractProjectValInfo(importMetaUrl);\n const db = new DB(projectInfo.projectName);\n await db.migrate();\n return async (r: Request) => {\n const url = new URL(r.url);\n if (url.pathname === LOGOUT_URL) {\n await db.dropAllSessions();\n return new Response(null, { status: 302, headers: { location: \"/\" } });\n }\n const sessionKey = getSessionKey(r.headers);\n let [activeSession, config] = await Promise.all([sessionKey && db.validateSession(sessionKey), db.getConfig()]);\n if (activeSession === true) {\n if (url.pathname === RESET_URL) {\n await db.deleteConfig();\n await db.dropAllSessions();\n return new Response(null, { status: 302, headers: { location: \"/\" } });\n }\n return handle(r);\n }\n return await (new MiddlewareState({ config, db, req: r, projectInfo })).landingPage();\n };\n}\n\nfunction htmlTemplateResponse(body: JSX.Element, options?: Partial): Response {\n const headers = { \"content-type\": \"text/html charset=utf-8\" };\n return new Response(\n renderToString(\n \n \n Log Me In\n \n \n \n \n \n

{body}

\n \n ,\n ),\n { ...options, headers: { ...headers, ...options?.headers } },\n );\n}\n\nclass MiddlewareState {\n #config: Config | undefined;\n #db: DB;\n #req: Request;\n #projectInfo: ReturnType;\n constructor(\n { config, db, req, projectInfo }: {\n config: Config | undefined;\n db: DB;\n req: Request;\n projectInfo: ReturnType;\n },\n ) {\n this.#config = config;\n this.#db = db;\n this.#req = req;\n this.#projectInfo = projectInfo;\n }\n\n async landingPage(): Promise {\n const url = new URL(this.#req.url);\n if (this.#config && this.#config.login_type === \"email\") {\n return this.emailLoginHandler();\n }\n if (url.pathname === EMAIL_LOGIN_URL) {\n return this.emailLoginHandler();\n }\n if (url.pathname === PASSWORD_URL) {\n }\n return htmlTemplateResponse(\n

Log Me In

\n {this.#projectInfo.username}! Welcome to your project: {this.#projectInfo.projectName}\n

Let's lock down this HTTP Val so that only you can access it, pick from the options below:

\n Set a Password\n Login With Email\n

,\n );\n }\n\n async emailLoginHandler(): Promise {\n let error: null | string = null;\n try {\n if (this.#req.method === \"POST\") {\n const form = await this.#req.formData();\n const email = form.get(\"email\");\n if (typeof email !== \"string\" || email === \"\") {\n throw new Error(\"Email is required\");\n }\n let sessionKey = await this.#db.login(email, this.#config);\n const resp = new Response(null, { status: 302, headers: { location: \"/\" } });\n setSession(sessionKey, resp.headers);\n return resp;\n }\n } catch (e) {\n error = e instanceof Error ? e.message : String(e);\n }\n return htmlTemplateResponse(\n

Log Me In

\n {(() => {\n if (this.#config && this.#config.login_type === \"email\") {\n return

Log In With Email

;\n }\n return (\n <>\n

\n Let's set up email login.\n

\n You can only log in with your the email address to your val town. Type it in below, and we'll send you\n an email to log in.\n

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

,\n );\n }\n}\n\nconst EMAIL_LOGIN_URL = \"/.logmein/email\";\nconst PASSWORD_URL = \"/.logmein/password\";\nexport const LOGOUT_URL = \"/.logmein/logout\";\nexport const RESET_URL = \"/.logmein/reset\";\n\nconst css = `\n* {\n box-sizing: border-box;\n}\nbody {\n margin: 0;\n font-family: 'Inter', sans-serif;\n background-color: #f5f5f5;\n color: #333;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n.error {\n color: red;\n}\n\n.container {\n width: 100%;\n max-width: 400px;\n padding: 20px;\n}\n\n.section {\n background-color: white;\n border-radius: 8px;\n padding: 30px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n margin-bottom: 20px;\n}\n\nh2, h3 {\n margin-top: 0;\n color: #1a1a1a;\n text-align: center;\n}\n\ninput {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 16px;\n}\n\n.button, button {\n width: 100%;\n text-decoration: none;\n padding: 10px;\n display: inline-block;\n border: none;\n border-radius: 4px;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.3s;\n background-color: #007bff;\n color: white;\n font-weight: 600;\n text-align: center;\n}\n\n.button:hover {\n background-color: #0056b3;\n}\n\n.cta-buttons {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 20px;\n}\n\n.cta-button {\n margin: 0;\n}\n\np {\n text-align: center;\n margin-bottom: 20px;\n}\n\n.source-link {\n position: fixed;\n bottom: 10px;\n right: 10px;\n color: #6c757d;\n text-decoration: none;\n font-size: 12px;\n}\n\n.source-link:hover {\n text-decoration: underline;\n}\n`;",[],[170],{"_104":178,"_96":179,"_140":180,"_142":-5,"_143":131,"_144":181,"_146":147,"_106":182,"_101":183,"_150":151,"_152":184,"_154":26,"_155":185,"_99":186},"6a133138-e583-11ef-8c84-e6cdfca9ef9f","sessionCookie","b043f140-e571-11ef-84fd-e6cdfca9ef9f",271,["D",1738953805484],29,"import { Cookie, deleteCookie, getCookies, setCookie } from \"https://deno.land/std/http/cookie.ts\";\nexport const SESSION_COOKIE_NAME = \"logmein_session\";\nfunction setSessionCookie(key: string): Cookie {\n return {\n name: SESSION_COOKIE_NAME,\n value: key,\n path: \"/\",\n httpOnly: true,\n secure: true,\n sameSite: \"None\",\n };\n}\n\nexport function getSessionKey(headers: Headers): string | undefined {\n return getCookies(headers)[SESSION_COOKIE_NAME];\n}\n\nexport function setSession(key: string, headers: Headers) {\n const cookie = setSessionCookie(key);\n setCookie(headers, cookie);\n}",[],[179],"files",[137,158,168,177],"counts",{"_191":32,"_192":193,"_194":32,"_195":32},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_104":159,"_96":100,"_140":160,"_142":-5,"_143":131,"_144":161,"_146":147,"_106":200,"_101":163,"_150":164,"_152":165,"_154":26,"_99":201},["D",1738954082423],[100],"upstream","routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_94":95,"_96":97,"_98":42,"_99":100,"_102":205,"_198":209,"_212":213,"_326":327},{"_104":105,"_96":97,"_106":206,"_108":-5,"_109":110,"_111":-5,"_112":-5,"_11":113,"_114":-5,"_115":26,"_116":117,"_118":117,"_119":120,"_121":120,"_122":120,"_123":117,"_124":26,"_20":207,"_128":208},["D",1738943209626],{"_94":95,"_126":127},{"_101":130,"_96":42,"_104":131,"_132":105,"_133":-5,"_134":-5},{"_104":159,"_96":100,"_140":160,"_142":-5,"_143":131,"_144":161,"_146":147,"_106":210,"_101":163,"_150":164,"_152":165,"_154":26,"_99":211},["D",1738954082423],[100],"history",[214,216,222,228,234,240,246,252,258,264,270,276,282,288,294,300,305,311,316,321],{"_104":159,"_140":160,"_96":100,"_150":164,"_152":165,"_142":-5,"_143":131,"_101":163,"_144":161,"_154":26,"_106":215,"_146":147},["D",1738954082423],{"_104":217,"_140":160,"_96":100,"_150":164,"_152":218,"_142":-5,"_143":131,"_101":219,"_144":220,"_154":26,"_106":221,"_146":26},"0c60f510-e584-11ef-ab12-e6cdfca9ef9f","import { logMeInMiddleware, LOGOUT_URL, RESET_URL } from \"https://esm.town/v/maxm/logmein/mw\";\n\nasync function handler(req: Request): Promise {\n return new Response(\n `\n

This is a big secret in here!

Logout

\n `,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } },\n );\n}\n\nexport default await logMeInMiddleware(import.meta.url, handler);",18,284,["D",1738954077784],{"_104":223,"_140":160,"_96":100,"_150":164,"_152":224,"_142":-5,"_143":131,"_101":225,"_144":226,"_154":26,"_106":227,"_146":26},"05f7e0da-e584-11ef-892d-e6cdfca9ef9f","import { logMeInMiddleware, LOGOUT_URL } from \"https://esm.town/v/maxm/logmein/mw\";\n\nasync function handler(req: Request): Promise {\n return new Response(\n `\n

This is a big secret in here!

Logout

\n `,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } },\n );\n}\n\nexport default await logMeInMiddleware(import.meta.url, handler);",17,283,["D",1738954067025],{"_104":229,"_140":160,"_96":100,"_150":164,"_152":230,"_142":-5,"_143":131,"_101":231,"_144":232,"_154":26,"_106":233,"_146":26},"b947fc20-e583-11ef-b4ab-e6cdfca9ef9f","import { logMeInMiddleware, LOGOUT_URL } from \"https://esm.town/v/maxm/logmein/mw\";\n\nasync function handler(req: Request): Promise {\n return new Response(\n `\n

This is a big secret in here!

Logout

\n `,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } },\n );\n}\n\nexport default await logMeInMiddleware(import.meta.url, handler);",16,274,["D",1738953938366],{"_104":235,"_140":160,"_96":100,"_150":164,"_152":236,"_142":-5,"_143":131,"_101":237,"_144":238,"_154":26,"_106":239,"_146":26},"0cb52f56-e582-11ef-b71b-e6cdfca9ef9f","import { LOGOUT_URL, middleware } from \"https://esm.town/v/maxm/logmein/mw\";\n\nasync function handler(req: Request): Promise {\n return new Response(\n `\n

This is a big secret in here!

Logout

\n `,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } },\n );\n}\n\nexport default await middleware(import.meta.url, handler);",15,261,["D",1738953219339],{"_104":241,"_140":160,"_96":100,"_150":164,"_152":242,"_142":-5,"_143":131,"_101":243,"_144":244,"_154":26,"_106":245,"_146":26},"f2c5a59e-e581-11ef-a750-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\n\nasync function handler(req: Request): Promise {\n return new Response(\n `\n

This is a big secret in here!

Logout

\n `,\n { headers: { \"content-type\": \"text/html; charset=utf-8\" } },\n );\n}\n\nexport default await middleware(import.meta.url, handler);",14,258,["D",1738953175820],{"_104":247,"_140":160,"_96":100,"_150":164,"_152":248,"_142":-5,"_143":131,"_101":249,"_144":250,"_154":26,"_106":251,"_146":26},"41423128-e574-11ef-9018-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\n\nasync function handler(req: Request): Promise {\n return new Response(\"This is a big secret in here!\");\n}\n\nexport default await middleware(import.meta.url, handler);",13,156,["D",1738947294551],{"_104":253,"_140":160,"_96":100,"_150":164,"_152":254,"_142":-5,"_143":131,"_101":255,"_144":256,"_154":26,"_106":257,"_146":26},"20b822fa-e574-11ef-bf87-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\n\nasync function handler(req: Request): Promise {\n return new Response(\"Hello, World!\");\n}\n\nexport default await middleware(import.meta.url, handler);",12,155,["D",1738947239953],{"_104":259,"_140":160,"_96":100,"_150":164,"_152":260,"_142":-5,"_143":131,"_101":261,"_144":262,"_154":26,"_106":263,"_146":26},"18a8f0bc-e574-11ef-a6f8-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\n\nconst handler = async function(req: Request): Promise {\n return new Response(\"Hello, World!\");\n};\n\nconst handler = await middleware(import.meta.url);\nexport default handler;",11,154,["D",1738947226440],{"_104":265,"_140":160,"_96":100,"_150":164,"_152":266,"_142":-5,"_143":131,"_101":267,"_144":268,"_154":26,"_106":269,"_146":26},"a874ff16-e573-11ef-ac35-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\nconst handler = await middleware(import.meta.url, async function(req: Request): Promise {\n return new Response(\"Hello, World!\");\n});\nexport default handler;",10,152,["D",1738947038196],{"_104":271,"_140":160,"_96":100,"_150":164,"_152":272,"_142":-5,"_143":131,"_101":273,"_144":274,"_154":26,"_106":275,"_146":26},"a7682490-e573-11ef-a1a9-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\nconst handler = await middleware(import.meta.url, async function(req: Request): Promise {\n return new Response(\"Hello, World!\");\n}\nexport default handler;",9,151,["D",1738947036433],{"_104":277,"_140":160,"_96":100,"_150":164,"_152":278,"_142":-5,"_143":131,"_101":279,"_144":280,"_154":26,"_106":281,"_146":26},"a653ec38-e573-11ef-acd1-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\nconst handler = await middleware(import.meta.url, async function(req: Request): Promise {\n return new Response(\"Hello, World!\");\n}}\nexport default handler;",8,150,["D",1738947034620],{"_104":283,"_140":160,"_96":100,"_150":164,"_152":284,"_142":-5,"_143":131,"_101":285,"_144":286,"_154":26,"_106":287,"_146":26},"a36c285a-e573-11ef-b824-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\nconst handler = await middleware(import.meta.url, async function(req: Request): Promise {\n \n}}\nexport default handler;",7,149,["D",1738947029748],{"_104":289,"_140":160,"_96":100,"_150":164,"_152":290,"_142":-5,"_143":131,"_101":291,"_144":292,"_154":26,"_106":293,"_146":26},"9fefd924-e573-11ef-8e39-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\nconst handler = await middleware(import.meta.url, async function(req: Request): Promise {\n \n}}\nexport default , async function(req: Request): Promise {\n return Response.json({ ok: true });\n});",6,148,["D",1738947023902],{"_104":295,"_140":160,"_96":100,"_150":164,"_152":296,"_142":-5,"_143":131,"_101":297,"_144":298,"_154":26,"_106":299,"_146":26},"76dc5756-e573-11ef-abf0-e6cdfca9ef9f","import { middleware } from \"https://esm.town/v/maxm/logmein/mw\";\nexport default middleware(import.meta.url, async function(req: Request): Promise {\n return Response.json({ ok: true });\n});",5,147,["D",1738946954984],{"_104":301,"_140":160,"_96":100,"_150":164,"_152":296,"_142":-5,"_143":131,"_101":302,"_144":303,"_154":26,"_106":304,"_146":26},"1d152dce-e573-11ef-a924-e6cdfca9ef9f",4,144,["D",1738946804361],{"_104":306,"_140":160,"_96":100,"_150":164,"_152":307,"_142":-5,"_143":131,"_101":308,"_144":309,"_154":26,"_106":310,"_146":26},"21c0c028-e56d-11ef-8f11-e6cdfca9ef9f","import {Middleware} from \"https://esm.town/v/maxm/logmein/mw\"\nexport default Middleware(import.meta.url, async function (req: Request): Promise {\n return Response.json({ ok: true })\n})",3,24,["D",1738944235218],{"_104":312,"_140":160,"_96":100,"_150":164,"_152":313,"_142":-5,"_143":131,"_101":91,"_144":314,"_154":26,"_106":315,"_146":26},"15b109b4-e56d-11ef-912b-e6cdfca9ef9f","import {Middleware} from \"https://esm.town/v/maxm/logmein/mw\"\nexport default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",23,["D",1738944214980],{"_104":317,"_140":160,"_96":100,"_150":164,"_152":318,"_142":-5,"_143":131,"_101":193,"_144":319,"_154":26,"_106":320,"_146":26},"0684fc34-e56d-11ef-83c7-e6cdfca9ef9f","export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",22,["D",1738944189526],{"_104":322,"_140":160,"_96":323,"_150":164,"_152":318,"_142":-5,"_143":131,"_101":32,"_144":324,"_154":26,"_106":325,"_146":26},"042c2778-e56d-11ef-b8de-e6cdfca9ef9f","qualitySilverDonkey",21,["D",1738944185593],"versions",[328,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348],{"_198":214,"_329":216},"previous",{"_198":216,"_329":222},{"_198":222,"_329":228},{"_198":228,"_329":234},{"_198":234,"_329":240},{"_198":240,"_329":246},{"_198":246,"_329":252},{"_198":252,"_329":258},{"_198":258,"_329":264},{"_198":264,"_329":270},{"_198":270,"_329":276},{"_198":276,"_329":282},{"_198":282,"_329":288},{"_198":288,"_329":294},{"_198":294,"_329":300},{"_198":300,"_329":305},{"_198":305,"_329":311},{"_198":311,"_329":316},{"_198":316,"_329":321},{"_198":321,"_329":-5},"routes/_app","actionData","errors"]

History for demo