46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { isLoggedIn, getLoggedInDid } from '../lib/auth'
|
|
|
|
export function renderHeader(currentHandle: string): string {
|
|
const loggedIn = isLoggedIn()
|
|
const did = getLoggedInDid()
|
|
|
|
const loginBtn = loggedIn
|
|
? `<button type="button" class="header-btn user-btn" id="logout-btn" title="Logout (${did?.slice(0, 20)}...)">✓</button>`
|
|
: `<button type="button" class="header-btn login-btn" id="login-btn" title="Login">↗</button>`
|
|
|
|
return `
|
|
<header id="header">
|
|
<form class="header-form" id="header-form">
|
|
<input
|
|
type="text"
|
|
class="header-input"
|
|
id="header-input"
|
|
placeholder="handle (e.g., syui.ai)"
|
|
value="${currentHandle}"
|
|
>
|
|
<button type="submit" class="header-btn at-btn" title="Browse">@</button>
|
|
${loginBtn}
|
|
</form>
|
|
</header>
|
|
`
|
|
}
|
|
|
|
export function mountHeader(
|
|
container: HTMLElement,
|
|
currentHandle: string,
|
|
onBrowse: (handle: string) => void
|
|
): void {
|
|
container.innerHTML = renderHeader(currentHandle)
|
|
|
|
const form = document.getElementById('header-form') as HTMLFormElement
|
|
const input = document.getElementById('header-input') as HTMLInputElement
|
|
|
|
form?.addEventListener('submit', (e) => {
|
|
e.preventDefault()
|
|
const handle = input.value.trim()
|
|
if (handle) {
|
|
onBrowse(handle)
|
|
}
|
|
})
|
|
}
|