chaos/VaultUI
1
0
Fork 0
Code Issues Activity

Make a Form element to make creating Forms easier.

Browse source
This commit is contained in:
Kitteh 2021-05-20 16:17:05 +01:00
parent 5a2b22f7fa
commit 5e82683f6c
15 changed files with 459 additions and 493 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/elements/Form.ts Normal file
View file

@ -0,0 +1,18 @@
import { makeElement } from "z-makeelement";
export function Form(
children: Element[],
submit: (form: HTMLFormElement) => unknown,
): HTMLFormElement {
const form = makeElement({
tag: "form",
children: children,
}) as HTMLFormElement;
form.addEventListener("submit", (e: Event) => {
e.preventDefault();
submit(form);
});
return form;
}

88
src/pages/Login.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../elements/Form";
import { Margin } from "../elements/Margin";
import { MarginInline } from "../elements/MarginInline";
import { Page } from "../types/Page";
@ -12,9 +13,8 @@ export class LoginPage extends Page {
super();
}
async render(): Promise<void> {
const tokenLoginForm = makeElement({
tag: "form",
children: [
const tokenLoginForm = Form(
[
Margin(
makeElement({
tag: "input",
@ -38,11 +38,28 @@ export class LoginPage extends Page {
}),
),
],
}) as HTMLFormElement;
async (form: HTMLFormElement) => {
const formData = new FormData(form);
const token = formData.get("token");
this.state.token = token as string;
const usernameLoginForm = makeElement({
tag: "form",
children: [
try {
await lookupSelf();
await this.router.changePage("HOME");
} catch (e: unknown) {
const error = e as Error;
document.getElementById("tokenInput").classList.add("uk-form-danger");
if (error.message == "permission denied") {
setErrorText(i18next.t("token_login_error"));
} else {
setErrorText(error.message);
}
}
},
);
const usernameLoginForm = Form(
[
Margin(
makeElement({
tag: "input",
@ -80,7 +97,24 @@ export class LoginPage extends Page {
}),
),
],
}) as HTMLFormElement;
async (form: HTMLFormElement) => {
const formData = new FormData(form);
try {
const res = await usernameLogin(
formData.get("username") as string,
formData.get("password") as string,
);
this.state.token = res;
await this.router.changePage("HOME");
} catch (e: unknown) {
const error = e as Error;
document.getElementById("usernameInput").classList.add("uk-form-danger");
document.getElementById("passwordInput").classList.add("uk-form-danger");
setErrorText(error.message);
}
},
);
await this.router.setPageContent(
makeElement({
@ -130,44 +164,6 @@ export class LoginPage extends Page {
],
}),
);
tokenLoginForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(tokenLoginForm);
const token = formData.get("token");
this.state.token = token as string;
try {
await lookupSelf();
await this.router.changePage("HOME");
} catch (e: unknown) {
const error = e as Error;
document.getElementById("tokenInput").classList.add("uk-form-danger");
if (error.message == "permission denied") {
setErrorText(i18next.t("token_login_error"));
} else {
setErrorText(error.message);
}
}
});
usernameLoginForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(usernameLoginForm);
try {
const res = await usernameLogin(
formData.get("username") as string,
formData.get("password") as string,
);
this.state.token = res;
await this.router.changePage("HOME");
} catch (e: unknown) {
const error = e as Error;
document.getElementById("usernameInput").classList.add("uk-form-danger");
document.getElementById("passwordInput").classList.add("uk-form-danger");
setErrorText(error.message);
}
});
}
get name(): string {

16
src/pages/PwGen.ts
View file

@ -1,4 +1,5 @@
import { CopyableInputBox, CopyableInputBoxType } from "../elements/CopyableInputBox";
import { Form } from "../elements/Form";
import { Margin } from "../elements/Margin";
import { Option } from "../elements/Option";
import { Page } from "../types/Page";
@ -90,9 +91,8 @@ export class PwGenPage extends Page {
],
}) as HTMLSelectElement;
this.passwordForm = makeElement({
tag: "form",
children: [
this.passwordForm = Form(
[
this.passwordLengthTitle,
Margin(this.passwordLengthRange),
Margin(this.passwordAlphabet),
@ -106,9 +106,8 @@ export class PwGenPage extends Page {
}),
),
],
}) as HTMLFormElement;
this.passwordForm.addEventListener("submit", (e) => this.formEvent(e));
(_) => this.updatePassword(),
);
await this.router.setPageContent(this.passwordForm);
}
@ -119,11 +118,6 @@ export class PwGenPage extends Page {
});
}
formEvent(e: Event): void {
e.preventDefault();
this.updatePassword();
}
updatePassword(): void {
this.passwordLengthTitle.innerText = this.getPasswordLengthText();
this.passwordBox.setText(

24
src/pages/Secrets/KeyValue/KeyValueNew.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../../../elements/Form";
import { Page } from "../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement";
import { createOrUpdateSecret } from "../../../api/kv/createOrUpdateSecret";
@ -14,13 +15,10 @@ export class KeyValueNewPage extends Page {
await this.router.changePage("KEY_VALUE_VIEW");
}
addKVNewForm: HTMLFormElement;
async render(): Promise<void> {
this.addKVNewForm = makeElement({
tag: "form",
id: "addKVNewForm",
children: [
await this.router.setPageContent(
Form(
[
makeElement({
tag: "div",
class: "uk-margin",
@ -49,17 +47,13 @@ export class KeyValueNewPage extends Page {
},
}),
],
}) as HTMLFormElement;
await this.router.setPageContent(this.addKVNewForm);
this.addKVNewForm.addEventListener("submit", async (e: Event) => {
e.preventDefault();
await this.newKVSecretHandleForm();
});
async (form: HTMLFormElement) => await this.newKVSecretHandleForm(form),
),
);
}
async newKVSecretHandleForm(): Promise<void> {
const formData = new FormData(this.addKVNewForm);
async newKVSecretHandleForm(form: HTMLFormElement): Promise<void> {
const formData = new FormData(form);
const path = formData.get("path") as string;
let keyData = {};

20
src/pages/Secrets/NewEngines/NewKVEngine.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../../../elements/Form";
import { Margin } from "../../../elements/Margin";
import { Option } from "../../../elements/Option";
import { Page } from "../../../types/Page";
@ -14,9 +15,9 @@ export class NewKVEnginePage extends Page {
await this.router.changePage("SECRETS_HOME");
}
async render(): Promise<void> {
const newEngineForm = makeElement({
tag: "form",
children: [
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
@ -56,13 +57,8 @@ export class NewKVEnginePage extends Page {
},
}),
],
}) as HTMLFormElement;
await this.router.setPageContent(newEngineForm);
newEngineForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(newEngineForm);
async (form: HTMLFormElement) => {
const formData = new FormData(form);
const name = formData.get("name") as string;
const version = formData.get("version") as string;
@ -82,7 +78,9 @@ export class NewKVEnginePage extends Page {
const error = e as Error;
setErrorText(error.message);
}
});
},
),
);
}
get name(): string {
return i18next.t("new_kv_engine_title");

20
src/pages/Secrets/NewEngines/NewTOTPEngine.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../../../elements/Form";
import { Margin } from "../../../elements/Margin";
import { Page } from "../../../types/Page";
import { makeElement } from "z-makeelement";
@ -13,9 +14,9 @@ export class NewTOTPEnginePage extends Page {
await this.router.changePage("SECRETS_HOME");
}
async render(): Promise<void> {
const newEngineForm = makeElement({
tag: "form",
children: [
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
@ -42,13 +43,8 @@ export class NewTOTPEnginePage extends Page {
},
}),
],
}) as HTMLFormElement;
await this.router.setPageContent(newEngineForm);
newEngineForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(newEngineForm);
async (form: HTMLFormElement) => {
const formData = new FormData(form);
const name = formData.get("name") as string;
@ -64,7 +60,9 @@ export class NewTOTPEnginePage extends Page {
const error = e as Error;
setErrorText(error.message);
}
});
},
),
);
}
get name(): string {
return i18next.t("new_totp_engine_title");

20
src/pages/Secrets/NewEngines/NewTransitEngine.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../../../elements/Form";
import { Margin } from "../../../elements/Margin";
import { Page } from "../../../types/Page";
import { makeElement } from "z-makeelement";
@ -13,9 +14,9 @@ export class NewTransitEnginePage extends Page {
await this.router.changePage("SECRETS_HOME");
}
async render(): Promise<void> {
const newEngineForm = makeElement({
tag: "form",
children: [
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
@ -42,13 +43,8 @@ export class NewTransitEnginePage extends Page {
},
}),
],
}) as HTMLFormElement;
await this.router.setPageContent(newEngineForm);
newEngineForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(newEngineForm);
async (form: HTMLFormElement) => {
const formData = new FormData(form);
const name = formData.get("name") as string;
@ -64,7 +60,9 @@ export class NewTransitEnginePage extends Page {
const error = e as Error;
setErrorText(error.message);
}
});
},
),
);
}
get name(): string {
return i18next.t("new_transit_engine_title");

20
src/pages/Secrets/TOTP/NewTOTP.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../../../elements/Form";
import { Margin } from "../../../elements/Margin";
import { MarginInline } from "../../../elements/MarginInline";
import { Page } from "../../../types/Page";
@ -24,9 +25,9 @@ export class NewTOTPPage extends Page {
await this.router.changePage("TOTP");
}
async render(): Promise<void> {
const totpForm = makeElement({
tag: "form",
children: [
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
@ -81,13 +82,8 @@ export class NewTOTPPage extends Page {
}),
),
],
}) as HTMLFormElement;
await this.router.setPageContent(totpForm);
totpForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(totpForm);
async (form: HTMLFormElement) => {
const formData = new FormData(form);
const parms = {
url: formData.get("uri") as string,
@ -103,7 +99,9 @@ export class NewTOTPPage extends Page {
const error = e as Error;
setErrorText(`API Error: ${error.message}`);
}
});
},
),
);
}
async getPageTitle(): Promise<Element | string> {

20
src/pages/Secrets/Transit/NewTransitKey.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../../../elements/Form";
import { Margin } from "../../../elements/Margin";
import { Option } from "../../../elements/Option";
import { Page } from "../../../types/Page";
@ -12,9 +13,9 @@ export class NewTransitKeyPage extends Page {
super();
}
async render(): Promise<void> {
const newTransitKeyForm = makeElement({
tag: "form",
children: [
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
@ -62,13 +63,8 @@ export class NewTransitKeyPage extends Page {
},
}),
],
}) as HTMLFormElement;
await this.router.setPageContent(newTransitKeyForm);
newTransitKeyForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(newTransitKeyForm);
async (form: HTMLFormElement) => {
const formData = new FormData(form);
const name = formData.get("name") as string;
const type = formData.get("type") as string;
@ -84,7 +80,9 @@ export class NewTransitKeyPage extends Page {
const error = e as Error;
setErrorText(error.message);
}
});
},
),
);
}
async getPageTitle(): Promise<Element | string> {

18
src/pages/Secrets/Transit/TransitDecrypt.ts
View file

@ -1,5 +1,6 @@
import { CopyableModal } from "../../../elements/CopyableModal";
import { FileUploadInput } from "../../../elements/FileUploadInput";
import { Form } from "../../../elements/Form";
import { Margin } from "../../../elements/Margin";
import { Page } from "../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement";
@ -21,14 +22,8 @@ export class TransitDecryptPage extends Page {
transitDecryptForm: HTMLFormElement;
async render(): Promise<void> {
await this.router.setPageContent(
makeElement({
tag: "div",
}),
);
this.transitDecryptForm = makeElement({
tag: "form",
children: [
this.transitDecryptForm = Form(
[
Margin(
makeElement({
tag: "textarea",
@ -73,12 +68,9 @@ export class TransitDecryptPage extends Page {
},
}),
],
}) as HTMLFormElement;
async (_) => await this.transitDecryptFormHandler(),
);
await this.router.setPageContent(this.transitDecryptForm);
this.transitDecryptForm.addEventListener("submit", async (e: Event) => {
e.preventDefault();
await this.transitDecryptFormHandler();
});
}
async transitDecryptFormHandler(): Promise<void> {

20
src/pages/Secrets/Transit/TransitEncrypt.ts
View file

@ -1,5 +1,6 @@
import { CopyableModal } from "../../../elements/CopyableModal";
import { FileUploadInput } from "../../../elements/FileUploadInput";
import { Form } from "../../../elements/Form";
import { Margin } from "../../../elements/Margin";
import { Page } from "../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement";
@ -19,16 +20,9 @@ export class TransitEncryptPage extends Page {
}
transitEncryptForm: HTMLFormElement;
async render(): Promise<void> {
await this.router.setPageContent(
makeElement({
tag: "div",
}),
);
this.transitEncryptForm = makeElement({
tag: "form",
children: [
this.transitEncryptForm = Form(
[
Margin(
makeElement({
tag: "textarea",
@ -73,13 +67,9 @@ export class TransitEncryptPage extends Page {
},
}),
],
}) as HTMLFormElement;
async (_) => await this.transitEncryptFormHandler(),
);
await this.router.setPageContent(this.transitEncryptForm);
this.transitEncryptForm.addEventListener("submit", async (e: Event) => {
e.preventDefault();
await this.transitEncryptFormHandler();
});
}
async transitEncryptFormHandler(): Promise<void> {

14
src/pages/Secrets/Transit/TransitRewrap.ts
View file

@ -1,4 +1,5 @@
import { CopyableModal } from "../../../elements/CopyableModal";
import { Form } from "../../../elements/Form";
import { Margin } from "../../../elements/Margin";
import { Option } from "../../../elements/Option";
import { Page } from "../../../types/Page";
@ -47,9 +48,8 @@ export class TransitRewrapPage extends Page {
});
await this.router.setPageContent("");
this.transitRewrapForm = makeElement({
tag: "form",
children: [
this.transitRewrapForm = Form(
[
makeElement({
tag: "select",
name: "version",
@ -80,13 +80,9 @@ export class TransitRewrapPage extends Page {
},
}),
],
}) as HTMLFormElement;
async (_) => await this.transitRewrapFormHandler(),
);
await this.router.setPageContent(this.transitRewrapForm);
this.transitRewrapForm.addEventListener("submit", async (e: Event) => {
e.preventDefault();
await this.transitRewrapFormHandler();
});
}
async transitRewrapFormHandler(): Promise<void> {

19
src/pages/SetLanguage.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../elements/Form";
import { Margin } from "../elements/Margin";
import { Page } from "../types/Page";
import { makeElement } from "z-makeelement";
@ -14,10 +15,9 @@ export class SetLanguagePage extends Page {
super();
}
async render(): Promise<void> {
const setLanguageForm = makeElement({
tag: "form",
id: "setLanguageForm",
children: [
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "select",
@ -48,11 +48,8 @@ export class SetLanguagePage extends Page {
},
}),
],
}) as HTMLFormElement;
await this.router.setPageContent(setLanguageForm);
setLanguageForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(setLanguageForm);
async (form: HTMLFormElement) => {
const formData = new FormData(form);
const language = formData.get("language") as string;
this.state.language = language;
@ -61,7 +58,9 @@ export class SetLanguagePage extends Page {
this.state.pageDirection = t("language_direction");
reloadNavBar(this.router);
await this.router.changePage("HOME");
});
},
),
);
}
get name(): string {
return i18next.t("set_language_title");

18
src/pages/SetVaultURL.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../elements/Form";
import { Page } from "../types/Page";
import { makeElement } from "z-makeelement";
@ -7,10 +8,8 @@ export class SetVaultURLPage extends Page {
}
async render(): Promise<void> {
await this.router.setPageContent(
makeElement({
tag: "form",
id: "setVaultURLForm",
children: [
Form(
[
makeElement({
tag: "div",
class: "uk-margin",
@ -39,14 +38,13 @@ export class SetVaultURLPage extends Page {
},
}),
],
}),
);
document.getElementById("setVaultURLForm").addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(document.querySelector("#setVaultURLForm"));
async (form: HTMLFormElement) => {
const formData = new FormData(form);
this.state.apiURL = formData.get("vaultURL") as string;
await this.router.changePage("HOME");
});
},
),
);
}
get name(): string {
return "Set Vault URL";

15
src/pages/Unseal.ts
View file

@ -1,3 +1,4 @@
import { Form } from "../elements/Form";
import { MarginInline } from "../elements/MarginInline";
import { Page } from "../types/Page";
import { QRScanner, QRScannerType } from "../elements/QRScanner";
@ -118,9 +119,8 @@ export class UnsealPage extends Page {
}
makeUnsealForm(): void {
this.unsealKeyForm = makeElement({
tag: "form",
children: [
this.unsealKeyForm = Form(
[
MarginInline(
makeElement({
tag: "input",
@ -141,12 +141,11 @@ export class UnsealPage extends Page {
}),
),
],
}) as HTMLFormElement;
this.unsealInputContent.appendChild(this.unsealKeyForm);
this.unsealKeyForm.addEventListener("submit", async (e: Event) => {
e.preventDefault();
async (_) => {
await this.handleKeySubmit();
});
},
);
this.unsealInputContent.appendChild(this.unsealKeyForm);
}
async makeQRInput(): Promise<void> {