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(

74
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,52 +15,45 @@ 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: [
makeElement({
tag: "div",
class: "uk-margin",
children: makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
await this.router.setPageContent(
Form(
[
makeElement({
tag: "div",
class: "uk-margin",
children: makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("kv_new_path"),
name: "path",
},
}),
}),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("kv_new_create_btn"),
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("kv_new_path"),
name: "path",
type: "submit",
},
}),
}),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("kv_new_create_btn"),
attributes: {
type: "submit",
},
}),
],
}) 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 = {};

124
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,75 +15,72 @@ export class NewKVEnginePage extends Page {
await this.router.changePage("SECRETS_HOME");
}
async render(): Promise<void> {
const newEngineForm = makeElement({
tag: "form",
children: [
Margin(
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("new_kv_engine_name_input"),
name: "name",
},
}),
),
Margin(
makeElement({
tag: "select",
class: ["uk-select", "uk-form-width-medium"],
attributes: {
name: "version",
},
children: [
Option(i18next.t("new_kv_engine_version_2"), "2"),
Option(i18next.t("new_kv_engine_version_1"), "1"),
],
}),
),
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("new_kv_engine_create_btn"),
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("new_kv_engine_name_input"),
name: "name",
type: "submit",
},
}),
),
Margin(
makeElement({
tag: "select",
class: ["uk-select", "uk-form-width-medium"],
attributes: {
name: "version",
},
children: [
Option(i18next.t("new_kv_engine_version_2"), "2"),
Option(i18next.t("new_kv_engine_version_1"), "1"),
],
}),
),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("new_kv_engine_create_btn"),
attributes: {
type: "submit",
},
}),
],
}) as HTMLFormElement;
],
async (form: HTMLFormElement) => {
const formData = new FormData(form);
await this.router.setPageContent(newEngineForm);
const name = formData.get("name") as string;
const version = formData.get("version") as string;
newEngineForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(newEngineForm);
const name = formData.get("name") as string;
const version = formData.get("version") as string;
try {
await newMount({
name: name,
type: "kv",
options: {
version: version,
},
});
this.state.secretMountType = "kv-v" + version;
this.state.baseMount = name + "/";
await this.router.changePage("KEY_VALUE_VIEW");
} catch (e) {
const error = e as Error;
setErrorText(error.message);
}
});
try {
await newMount({
name: name,
type: "kv",
options: {
version: version,
},
});
this.state.secretMountType = "kv-v" + version;
this.state.baseMount = name + "/";
await this.router.changePage("KEY_VALUE_VIEW");
} catch (e) {
const error = e as Error;
setErrorText(error.message);
}
},
),
);
}
get name(): string {
return i18next.t("new_kv_engine_title");

90
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,58 +14,55 @@ export class NewTOTPEnginePage extends Page {
await this.router.changePage("SECRETS_HOME");
}
async render(): Promise<void> {
const newEngineForm = makeElement({
tag: "form",
children: [
Margin(
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("new_totp_engine_name_input"),
name: "name",
},
}),
),
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("new_totp_engine_create_btn"),
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("new_totp_engine_name_input"),
name: "name",
type: "submit",
},
}),
),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("new_totp_engine_create_btn"),
attributes: {
type: "submit",
},
}),
],
}) as HTMLFormElement;
],
async (form: HTMLFormElement) => {
const formData = new FormData(form);
await this.router.setPageContent(newEngineForm);
const name = formData.get("name") as string;
newEngineForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(newEngineForm);
const name = formData.get("name") as string;
try {
await newMount({
name: name,
type: "totp",
});
this.state.secretMountType = "totp";
this.state.baseMount = name + "/";
await this.router.changePage("TOTP");
} catch (e) {
const error = e as Error;
setErrorText(error.message);
}
});
try {
await newMount({
name: name,
type: "totp",
});
this.state.secretMountType = "totp";
this.state.baseMount = name + "/";
await this.router.changePage("TOTP");
} catch (e) {
const error = e as Error;
setErrorText(error.message);
}
},
),
);
}
get name(): string {
return i18next.t("new_totp_engine_title");

90
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,58 +14,55 @@ export class NewTransitEnginePage extends Page {
await this.router.changePage("SECRETS_HOME");
}
async render(): Promise<void> {
const newEngineForm = makeElement({
tag: "form",
children: [
Margin(
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("new_transit_engine_name_input"),
name: "name",
},
}),
),
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("new_transit_engine_create_btn"),
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("new_transit_engine_name_input"),
name: "name",
type: "submit",
},
}),
),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("new_transit_engine_create_btn"),
attributes: {
type: "submit",
},
}),
],
}) as HTMLFormElement;
],
async (form: HTMLFormElement) => {
const formData = new FormData(form);
await this.router.setPageContent(newEngineForm);
const name = formData.get("name") as string;
newEngineForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(newEngineForm);
const name = formData.get("name") as string;
try {
await newMount({
name: name,
type: "transit",
});
this.state.secretMountType = "transit";
this.state.baseMount = name + "/";
await this.router.changePage("TRANSIT_VIEW");
} catch (e) {
const error = e as Error;
setErrorText(error.message);
}
});
try {
await newMount({
name: name,
type: "transit",
});
this.state.secretMountType = "transit";
this.state.baseMount = name + "/";
await this.router.changePage("TRANSIT_VIEW");
} catch (e) {
const error = e as Error;
setErrorText(error.message);
}
},
),
);
}
get name(): string {
return i18next.t("new_transit_engine_title");

146
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,86 +25,83 @@ export class NewTOTPPage extends Page {
await this.router.changePage("TOTP");
}
async render(): Promise<void> {
const totpForm = makeElement({
tag: "form",
children: [
Margin(
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("totp_new_name_text"),
name: "name",
},
}),
),
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("totp_new_name_text"),
name: "name",
},
tag: "p",
text: i18next.t("totp_new_info"),
}),
),
makeElement({
tag: "p",
text: i18next.t("totp_new_info"),
}),
Margin(
Margin(
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
type: "text",
placeholder: i18next.t("totp_new_uri_input"),
name: "uri",
},
}),
),
Margin(
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
type: "text",
placeholder: i18next.t("totp_new_key_input"),
name: "key",
},
}),
),
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
type: "text",
placeholder: i18next.t("totp_new_uri_input"),
name: "uri",
},
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
),
Margin(
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
type: "text",
placeholder: i18next.t("totp_new_key_input"),
name: "key",
},
}),
),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
MarginInline(
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("totp_new_add_btn"),
attributes: {
type: "submit",
},
}),
),
],
}) as HTMLFormElement;
await this.router.setPageContent(totpForm);
MarginInline(
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("totp_new_add_btn"),
attributes: {
type: "submit",
},
}),
),
],
async (form: HTMLFormElement) => {
const formData = new FormData(form);
totpForm.addEventListener("submit", async (e) => {
e.preventDefault();
const parms = {
url: formData.get("uri") as string,
key: removeDashSpaces(formData.get("key") as string).toUpperCase(),
name: formData.get("name") as string,
generate: false,
};
const formData = new FormData(totpForm);
const parms = {
url: formData.get("uri") as string,
key: removeDashSpaces(formData.get("key") as string).toUpperCase(),
name: formData.get("name") as string,
generate: false,
};
try {
await addNewTOTP(this.state.baseMount, parms);
await this.router.changePage("TOTP");
} catch (e: unknown) {
const error = e as Error;
setErrorText(`API Error: ${error.message}`);
}
});
try {
await addNewTOTP(this.state.baseMount, parms);
await this.router.changePage("TOTP");
} catch (e: unknown) {
const error = e as Error;
setErrorText(`API Error: ${error.message}`);
}
},
),
);
}
async getPageTitle(): Promise<Element | string> {

132
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,79 +13,76 @@ export class NewTransitKeyPage extends Page {
super();
}
async render(): Promise<void> {
const newTransitKeyForm = makeElement({
tag: "form",
children: [
Margin(
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("transit_new_key_name_input"),
name: "name",
},
}),
),
Margin(
makeElement({
tag: "select",
class: ["uk-select", "uk-form-width-medium"],
attributes: {
name: "type",
},
children: [
"aes128-gcm96",
"aes256-gcm96",
"chacha20-poly1305",
"ed25519",
"ecdsa-p256",
"ecdsa-p384",
"ecdsa-p521",
"rsa-2048",
"rsa-3072",
"rsa-4096",
].map((type): HTMLElement => Option(type, type)),
}),
),
makeElement({
tag: "input",
class: ["uk-input", "uk-form-width-medium"],
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("transit_new_key_create_btn"),
attributes: {
required: "true",
type: "text",
placeholder: i18next.t("transit_new_key_name_input"),
name: "name",
type: "submit",
},
}),
),
Margin(
makeElement({
tag: "select",
class: ["uk-select", "uk-form-width-medium"],
attributes: {
name: "type",
},
children: [
"aes128-gcm96",
"aes256-gcm96",
"chacha20-poly1305",
"ed25519",
"ecdsa-p256",
"ecdsa-p384",
"ecdsa-p521",
"rsa-2048",
"rsa-3072",
"rsa-4096",
].map((type): HTMLElement => Option(type, type)),
}),
),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("transit_new_key_create_btn"),
attributes: {
type: "submit",
},
}),
],
}) as HTMLFormElement;
],
async (form: HTMLFormElement) => {
const formData = new FormData(form);
await this.router.setPageContent(newTransitKeyForm);
const name = formData.get("name") as string;
const type = formData.get("type") as string;
newTransitKeyForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(newTransitKeyForm);
const name = formData.get("name") as string;
const type = formData.get("type") as string;
try {
await newTransitKey(this.state.baseMount, {
name: name,
type: type,
});
this.state.secretItem = name;
await this.router.changePage("TRANSIT_VIEW_SECRET");
} catch (e) {
const error = e as Error;
setErrorText(error.message);
}
});
try {
await newTransitKey(this.state.baseMount, {
name: name,
type: type,
});
this.state.secretItem = name;
await this.router.changePage("TRANSIT_VIEW_SECRET");
} catch (e) {
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> {

87
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,54 +15,52 @@ export class SetLanguagePage extends Page {
super();
}
async render(): Promise<void> {
const setLanguageForm = makeElement({
tag: "form",
id: "setLanguageForm",
children: [
Margin(
makeElement({
tag: "select",
class: ["uk-select", "uk-form-width-large"],
attributes: {
name: "language",
},
children: languageIDs.map(function (languageID) {
return makeElement({
tag: "option",
text: i18next.getFixedT(languageID, null)("language_name"),
attributes: { value: languageID },
});
await this.router.setPageContent(
Form(
[
Margin(
makeElement({
tag: "select",
class: ["uk-select", "uk-form-width-large"],
attributes: {
name: "language",
},
children: languageIDs.map(function (languageID) {
return makeElement({
tag: "option",
text: i18next.getFixedT(languageID, null)("language_name"),
attributes: { value: languageID },
});
}),
}),
),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("set_language_btn"),
attributes: {
type: "submit",
},
}),
],
}) as HTMLFormElement;
await this.router.setPageContent(setLanguageForm);
setLanguageForm.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(setLanguageForm);
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("set_language_btn"),
attributes: {
type: "submit",
},
}),
],
async (form: HTMLFormElement) => {
const formData = new FormData(form);
const language = formData.get("language") as string;
this.state.language = language;
const language = formData.get("language") as string;
this.state.language = language;
const t = await i18next.changeLanguage(language);
this.state.pageDirection = t("language_direction");
reloadNavBar(this.router);
await this.router.changePage("HOME");
});
const t = await i18next.changeLanguage(language);
this.state.pageDirection = t("language_direction");
reloadNavBar(this.router);
await this.router.changePage("HOME");
},
),
);
}
get name(): string {
return i18next.t("set_language_title");

20
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 {
},
}),
],
}),
async (form: HTMLFormElement) => {
const formData = new FormData(form);
this.state.apiURL = formData.get("vaultURL") as string;
await this.router.changePage("HOME");
},
),
);
document.getElementById("setVaultURLForm").addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(document.querySelector("#setVaultURLForm"));
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;
async (_) => {
await this.handleKeySubmit();
},
);
this.unsealInputContent.appendChild(this.unsealKeyForm);
this.unsealKeyForm.addEventListener("submit", async (e: Event) => {
e.preventDefault();
await this.handleKeySubmit();
});
}
async makeQRInput(): Promise<void> {