diff options
| -rw-r--r-- | frontend/helper.ts | 4 | ||||
| -rw-r--r-- | frontend/pwmodal.ts | 23 | ||||
| -rw-r--r-- | frontend/start.ts | 14 | ||||
| -rw-r--r-- | frontend/style.sass | 18 | ||||
| -rw-r--r-- | frontend/ui.ts | 5 |
5 files changed, 62 insertions, 2 deletions
diff --git a/frontend/helper.ts b/frontend/helper.ts index 8453a18..879d322 100644 --- a/frontend/helper.ts +++ b/frontend/helper.ts @@ -9,6 +9,8 @@ interface Opts<E> { for?: string, type?: string, href?: string, + method?: string, + placeholder?: string, onclick?: (e: E) => void, onchange?: (e: E) => void, } @@ -20,9 +22,11 @@ function apply_opts<E extends HTMLElement>(e: E, o: Opts<E>) { // TODO can we do this properly? if (o.for) (e as unknown as HTMLLabelElement).htmlFor = o.for if (o.type && (e instanceof HTMLInputElement || e instanceof HTMLLinkElement)) e.type = o.type + if (o.placeholder && (e instanceof HTMLInputElement)) e.placeholder = o.placeholder if (o.href && (e instanceof HTMLAnchorElement || e instanceof HTMLLinkElement)) e.href = o.href if (o.rel && (e instanceof HTMLAnchorElement || e instanceof HTMLLinkElement)) e.rel = o.rel if (o.title && (e instanceof HTMLAnchorElement || e instanceof HTMLLinkElement)) e.title = o.title + if (o.method && (e instanceof HTMLFormElement)) e.method = o.method if (typeof o?.class == "string") e.classList.add(o.class) if (typeof o?.class == "object") e.classList.add(...o.class) } diff --git a/frontend/pwmodal.ts b/frontend/pwmodal.ts new file mode 100644 index 0000000..3d783c6 --- /dev/null +++ b/frontend/pwmodal.ts @@ -0,0 +1,23 @@ +import { e } from "./helper.ts" + +export let username: string | undefined = undefined; +export let password: string | undefined = undefined; + +export function pw_modal() { + const inp_name = e("input", {type: "text", placeholder: "Username"}) + const inp_pw = e("input", {type: "password", placeholder: "Password"}) + const login_btn = e("button", { + onclick: () => { + username = inp_name.value + password = inp_pw.value + } + }, "Login") + + return e("dialog", {}, + e("form", {method: "dialog"}, + inp_name, + inp_pw, + login_btn, + ) + ) +} diff --git a/frontend/start.ts b/frontend/start.ts index 4b8019d..614d04b 100644 --- a/frontend/start.ts +++ b/frontend/start.ts @@ -1,6 +1,7 @@ import { e } from "./helper.ts" import { bangs } from "./query.ts" import { status } from "./ui.ts" +import { pw_modal } from "./pwmodal.ts" import fuzzysort from "./fuzzysort.js" export function section_info_start() { @@ -59,6 +60,19 @@ export function section_engine_select() { ) } +export function section_admin_btn() { + const modal = pw_modal() + + const btn = e("button", { + class: "open-modal", + onclick: () => modal.showModal() + }, "Admin Login") + + return e("section", {class: "admin-btn"}, + btn, + modal) +} + interface FuzzItem<E> { score: number, obj: E } let bangsSearch: Promise<(query: string) => FuzzItem<{bang: string, name: string, url: string}>[]> | undefined = undefined; diff --git a/frontend/style.sass b/frontend/style.sass index 36fda60..c0a7a5f 100644 --- a/frontend/style.sass +++ b/frontend/style.sass @@ -97,6 +97,24 @@ section.search font-size: large font-weight: 500 +section.admin-btn + button.open-modal + position: absolute + right: 10% + +dialog + background-color: $dark + button + margin-left: 0em + input + display: block + margin-bottom: 5px + label + margin-left: 1em + &::backdrop + backdrop-filter: blur(1px) + background-color: #00000080 + input, button border-radius: 0.5em padding: 0.5em diff --git a/frontend/ui.ts b/frontend/ui.ts index aebd8f7..675a5a8 100644 --- a/frontend/ui.ts +++ b/frontend/ui.ts @@ -1,5 +1,5 @@ import { section_info_search, section_search } from "./search.ts"; -import { section_engine_select, section_info_start } from "./start.ts"; +import { section_engine_select, section_info_start, section_admin_btn } from "./start.ts"; import { section_submit } from "./submit.ts"; export function add_page_content(engine?: string) { @@ -7,7 +7,8 @@ export function add_page_content(engine?: string) { for (const e of [...document.getElementsByTagName("section")]) e.remove() if (engine == "~submit") document.body.append(section_submit()) else if (engine) document.body.append(section_search(engine), section_info_search()) - else document.body.append(section_info_start(), section_engine_select()) + else document.body.append(section_info_start(), section_engine_select(), + section_admin_btn()) } let status_el: HTMLElement |