chaos/VaultUI
1
0
Fork 0
Code Issues Activity

Add tsx syntax to TransitEncrypt.

Browse source
This commit is contained in:
Kitteh 2021-05-23 15:28:07 +01:00
parent 8841ff02c7
commit f53eeb62cc
3 changed files with 91 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/pages/Secrets/Transit/TransitDecrypt.tsx
View file

@ -69,13 +69,13 @@ export class TransitDecryptPage extends Page {
}
render(
<CopyableModal
id="transitDecryptModal"
id="transitResultModal"
name={i18next.t("transit_decrypt_decryption_result_modal_title")}
contentString={plaintext}
/>,
document.querySelector("#modalAttachmentPoint"),
);
UIkit.modal(document.querySelector("#transitDecryptModal")).show();
UIkit.modal(document.querySelector("#transitResultModal")).show();
} catch (e: unknown) {
const error = e as Error;
setErrorText(`API Error: ${error.message}`);

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

@ -1,113 +0,0 @@
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";
import { fileToBase64 } from "../../../htmlUtils";
import { makeElement } from "z-makeelement";
import { setErrorText } from "../../../pageUtils";
import { transitEncrypt } from "../../../api/transit/transitEncrypt";
import i18next from "i18next";
export class TransitEncryptPage extends Page {
constructor() {
super();
}
async goBack(): Promise<void> {
await this.router.changePage("TRANSIT_VIEW_SECRET");
}
transitEncryptForm: HTMLFormElement;
async render(): Promise<void> {
this.transitEncryptForm = Form(
[
Margin(
makeElement({
tag: "textarea",
class: ["uk-textarea", "uk-form-width-medium"],
attributes: {
placeholder: i18next.t("transit_encrypt_input_placeholder"),
name: "plaintext",
},
}),
),
Margin(FileUploadInput("plaintext_file")),
Margin([
makeElement({
tag: "div",
class: "uk-form-label",
text: i18next.t("transit_encrypt_already_encoded_checkbox"),
}),
makeElement({
tag: "div",
class: ["uk-form-controls", "uk-form-controls-text"],
children: makeElement({
tag: "input",
class: "uk-checkbox",
attributes: {
type: "checkbox",
name: "base64Checkbox",
},
}),
}),
]),
makeElement({
tag: "p",
id: "errorText",
class: "uk-text-danger",
}),
makeElement({
tag: "button",
class: ["uk-button", "uk-button-primary"],
text: i18next.t("transit_encrypt_encrypt_btn"),
attributes: {
type: "submit",
},
}),
],
async (_) => await this.transitEncryptFormHandler(),
);
await this.router.setPageContent(this.transitEncryptForm);
}
async transitEncryptFormHandler(): Promise<void> {
const formData = new FormData(this.transitEncryptForm);
const base64Checkbox = formData.get("base64Checkbox") as string;
let plaintext = formData.get("plaintext") as string;
const plaintext_file = formData.get("plaintext_file") as File;
if (plaintext_file.size > 0) {
plaintext = (await fileToBase64(plaintext_file)).replace("data:text/plain;base64,", "");
plaintext = base64Checkbox == "on" ? atob(plaintext) : plaintext;
} else {
plaintext = base64Checkbox == "on" ? plaintext : btoa(plaintext);
}
try {
const res = await transitEncrypt(this.state.baseMount, this.state.secretItem, {
plaintext: plaintext,
});
const modal = CopyableModal(
i18next.t("transit_encrypt_encryption_result_modal_title"),
res.ciphertext,
);
this.router.pageContentElement.appendChild(modal);
modal.show();
} catch (e: unknown) {
const error = e as Error;
setErrorText(`API Error: ${error.message}`);
}
}
async getPageTitle(): Promise<Element | string> {
return await SecretTitleElement(this.router, i18next.t("transit_encrypt_suffix"));
}
get name(): string {
return i18next.t("transit_encrypt_title");
}
}

89
src/pages/Secrets/Transit/TransitEncrypt.tsx Normal file
View file

@ -0,0 +1,89 @@
import { CopyableModal } from "../../../elements/ReactCopyableModal";
import { FileUploadInput } from "../../../elements/ReactFileUploadInput";
import { Form } from "../../../elements/ReactForm";
import { InputWithTitle } from "../../../elements/ReactInputWithTitle";
import { Margin } from "../../../elements/ReactMargin";
import { Page } from "../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement";
import { fileToBase64 } from "../../../htmlUtils";
import { render } from "preact";
import { setErrorText } from "../../../pageUtils";
import { transitEncrypt } from "../../../api/transit/transitEncrypt";
import UIkit from "uikit";
import i18next from "i18next";
export class TransitEncryptPage extends Page {
constructor() {
super();
}
async goBack(): Promise<void> {
await this.router.changePage("TRANSIT_VIEW_SECRET");
}
async render(): Promise<void> {
render(
<Form onSubmit={async (data) => await this.onSubmit(data)}>
<Margin>
<textarea
class="uk-textarea uk-form-width-medium"
name="plaintext"
placeholder={i18next.t("transit_encrypt_input_placeholder")}
/>
</Margin>
<Margin>
<FileUploadInput name="plaintext_file" />
</Margin>
<InputWithTitle title={i18next.t("transit_encrypt_already_encoded_checkbox")}>
<input class="uk-checkbox" name="base64Checkbox" type="checkbox" />
</InputWithTitle>
<p class="uk-text-danger" id="errorText" />
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("transit_encrypt_encrypt_btn")}
</button>
<div id="modalAttachmentPoint" />
</Form>,
this.router.pageContentElement,
);
}
async onSubmit(data: FormData): Promise<void> {
const base64Checkbox = data.get("base64Checkbox") as string;
let plaintext = data.get("plaintext") as string;
const plaintext_file = data.get("plaintext_file") as File;
if (plaintext_file.size > 0) {
plaintext = (await fileToBase64(plaintext_file)).replace("data:text/plain;base64,", "");
plaintext = base64Checkbox == "on" ? atob(plaintext) : plaintext;
} else {
plaintext = base64Checkbox == "on" ? plaintext : btoa(plaintext);
}
try {
const res = await transitEncrypt(this.state.baseMount, this.state.secretItem, {
plaintext: plaintext,
});
render(
<CopyableModal
id="transitResultModal"
name={i18next.t("transit_encrypt_encryption_result_modal_title")}
contentString={res.ciphertext}
/>,
document.querySelector("#modalAttachmentPoint"),
);
UIkit.modal(document.querySelector("#transitResultModal")).show();
} catch (e: unknown) {
const error = e as Error;
setErrorText(`API Error: ${error.message}`);
}
}
async getPageTitle(): Promise<Element | string> {
return await SecretTitleElement(this.router, i18next.t("transit_encrypt_suffix"));
}
get name(): string {
return i18next.t("transit_encrypt_title");
}
}