49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { isLoggedIn, getLoggedInHandle } from '../lib/auth'
|
|
|
|
export function renderHeader(currentHandle: string, oauth: boolean = true): string {
|
|
const loggedIn = isLoggedIn()
|
|
const handle = getLoggedInHandle()
|
|
|
|
let loginBtn = ''
|
|
if (oauth) {
|
|
loginBtn = loggedIn
|
|
? `<button type="button" class="header-btn user-btn" id="logout-btn" title="Logout">${handle || 'logout'}</button>`
|
|
: `<button type="button" class="header-btn login-btn" id="login-btn" title="Login"><img src="/icon/user.svg" alt="Login" class="login-icon"></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)
|
|
}
|
|
})
|
|
}
|