Log Me In

{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`;","deleted","label",[98],"permalink","https://www.val.town/x/maxm/logmein/code/mw","extension","actionData","errors"]