\n ${session.user.avatar ? \n ` $\"${session.user.handle}\"$ ` : \n `

${session.user.handle.charAt(0).toUpperCase()}

`\n }\n

@${session.user.handle}

\n ${session.user.displayName ? `

${session.user.displayName}

` : ''}\n

\n \n

\n `;\n\n // Add logout event listener\n const logoutBtn = this.container.querySelector(\"#logout-btn\");\n if (logoutBtn) {\n logoutBtn.addEventListener(\"click\", () => {\n blueskyAuth.logout();\n });\n }\n }\n\n private renderLoggedOutState() {\n this.container.innerHTML = `\n

\n \n

\n `;\n\n // Add form event listener\n const form = this.container.querySelector(\"#login-form\") as HTMLFormElement;\n if (form) {\n form.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n const formData = new FormData(form);\n const username = formData.get(\"username\") as string;\n \n if (username) {\n try {\n const submitBtn = form.querySelector(\"button[type='submit']\") as HTMLButtonElement;\n submitBtn.textContent = \"Logging in...\";\n submitBtn.disabled = true;\n \n await blueskyAuth.login(username);\n } catch (error) {\n console.error(\"Login error:\", error);\n this.showError(error instanceof Error ? error.message : \"Login failed\");\n \n const submitBtn = form.querySelector(\"button[type='submit']\") as HTMLButtonElement;\n submitBtn.textContent = \"Login\";\n submitBtn.disabled = false;\n }\n }\n });\n }\n }\n\n private showError(message: string) {\n // Remove existing error messages\n const existingError = this.container.querySelector(\".error-message\");\n if (existingError) {\n existingError.remove();\n }\n\n // Create new error message\n const errorDiv = document.createElement(\"div\");\n errorDiv.className = \"error-message\";\n errorDiv.textContent = message;\n errorDiv.style.color = \"#dc3545\";\n errorDiv.style.fontSize = \"14px\";\n errorDiv.style.marginTop = \"8px\";\n errorDiv.style.padding = \"8px\";\n errorDiv.style.backgroundColor = \"#f8d7da\";\n errorDiv.style.border = \"1px solid #f5c6cb\";\n errorDiv.style.borderRadius = \"4px\";\n\n const form = this.container.querySelector(\"#login-form\");\n if (form) {\n form.appendChild(errorDiv);\n }\n\n // Auto-remove error after 5 seconds\n setTimeout(() => {\n if (errorDiv.parentNode) {\n errorDiv.parentNode.removeChild(errorDiv);\n }\n }, 5000);\n }\n\n onLogin(callback: (session: BlueskySession) => void): void {\n this.onLoginCallback = callback;\n }\n\n onLogout(callback: () => void): void {\n this.onLogoutCallback = callback;\n }\n\n isLoggedIn(): boolean {\n return blueskyAuth.isLoggedIn();\n }\n\n getSession(): BlueskySession | null {\n return blueskyAuth.getSession();\n }\n}\n","deleted","label",[171,154],"frontend","permalink","https://www.val.town/x/wilhelm/qbat/code/frontend/login-component.ts","extension","actionData","errors"]

Log in with Bluesky