chaos/VaultUI
1
0
Fork 0
Code Issues Activity

Add tsx syntax to KeyValueView.tsx.

Browse source
This commit is contained in:
Kitteh 2021-05-22 11:12:55 +01:00
parent eae3598611
commit 0309dac899
5 changed files with 109 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/elements/ReactForm.tsx
View file

@ -13,7 +13,7 @@ export class Form extends Component<FormProps, unknown> {
<form
onSubmit={(e: Event) => {
e.preventDefault();
console.log(this.ref.current)
console.log(this.ref.current);
this.props.onSubmit(new FormData(this.ref.current));
}}
ref={this.ref}

7
src/elements/ReactMargin.tsx
View file

@ -1,4 +1,3 @@
import { JSX } from "preact";
export type MarginProps = {
@ -6,9 +5,5 @@ export type MarginProps = {
};
export function Margin(props: MarginProps): JSX.Element {
return (
<div class="uk-margin">
{props.children}
</div>
)
return <div class="uk-margin">{props.children}</div>;
}

13
src/pages/Secrets/KeyValue/KeyValueNew.tsx
View file

@ -3,9 +3,9 @@ import { Margin } from "../../../elements/ReactMargin";
import { Page } from "../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement";
import { createOrUpdateSecret } from "../../../api/kv/createOrUpdateSecret";
import { render } from "preact";
import { setErrorText } from "../../../pageUtils";
import i18next from "i18next";
import { render } from "preact";
export class KeyValueNewPage extends Page {
constructor() {
@ -17,11 +17,9 @@ export class KeyValueNewPage extends Page {
}
async render(): Promise<void> {
render((
render(
<div>
<Form onSubmit={
async (formData) => await this.newKVSecretHandleForm(formData)
}>
<Form onSubmit={async (formData) => await this.newKVSecretHandleForm(formData)}>
<Margin>
<input
class="uk-input uk-form-width-medium"
@ -35,8 +33,9 @@ export class KeyValueNewPage extends Page {
{i18next.t("kv_new_create_btn")}
</button>
</Form>
</div>
), this.router.pageContentElement);
</div>,
this.router.pageContentElement,
);
}
async newKVSecretHandleForm(formData: FormData): Promise<void> {

106
src/pages/Secrets/KeyValue/KeyValueView.ts
View file

@ -1,106 +0,0 @@
import { DoesNotExistError } from "../../../types/internalErrors";
import { Page } from "../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement";
import { getSecrets } from "../../../api/kv/getSecrets";
import { makeElement } from "z-makeelement";
import { setErrorText } from "../../../pageUtils";
import i18next from "i18next";
export class KeyValueViewPage extends Page {
constructor() {
super();
}
async goBack(): Promise<void> {
if (this.state.secretPath.length != 0) {
this.state.popSecretPath();
await this.router.changePage("KEY_VALUE_VIEW");
} else {
await this.router.changePage("SECRETS_HOME");
}
}
async render(): Promise<void> {
this.state.secretItem = "";
const kvViewPageContent = makeElement({ tag: "div" });
await this.router.setPageContent(kvViewPageContent);
if (this.state.secretMountType == "cubbyhole") {
kvViewPageContent.appendChild(
makeElement({
tag: "p",
text: i18next.t("kv_view_cubbyhole_text"),
}),
);
}
const newButton = makeElement({
tag: "button",
text: i18next.t("kv_view_new_btn"),
class: ["uk-button", "uk-button-primary", "uk-margin-bottom"],
onclick: async () => {
await this.router.changePage("KEY_VALUE_NEW_SECRET");
},
});
kvViewPageContent.appendChild(newButton);
try {
const res = await getSecrets(
this.state.baseMount,
this.state.secretMountType,
this.state.secretPath,
);
kvViewPageContent.appendChild(
makeElement({
tag: "ul",
class: ["uk-nav", "uk-nav-default"],
children: [
...res.map((secret) => {
return makeElement({
tag: "li",
children: makeElement({
tag: "a",
text: secret,
onclick: async () => {
if (secret.endsWith("/")) {
this.state.pushSecretPath(secret);
await this.router.changePage("KEY_VALUE_VIEW");
} else {
this.state.secretItem = secret;
await this.router.changePage("KEY_VALUE_SECRET");
}
},
}),
});
}),
],
}),
);
} catch (e: unknown) {
const error = e as Error;
if (error == DoesNotExistError) {
// getSecrets also 404's on no keys so dont go all the way back.
if (this.state.secretPath.length != 0) {
return this.goBack();
} else {
kvViewPageContent.appendChild(
makeElement({
tag: "p",
text: i18next.t("kv_view_none_here_text"),
}),
);
}
} else {
setErrorText(error.message);
}
}
}
async getPageTitle(): Promise<Element | string> {
return await SecretTitleElement(this.router);
}
get name(): string {
return i18next.t("kv_view_title");
}
}

99
src/pages/Secrets/KeyValue/KeyValueView.tsx Normal file
View file

@ -0,0 +1,99 @@
import { DoesNotExistError } from "../../../types/internalErrors";
import { Page } from "../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement";
import { getSecrets } from "../../../api/kv/getSecrets";
import { render } from "preact";
import { setErrorText } from "../../../pageUtils";
import i18next from "i18next";
export class KeyValueViewPage extends Page {
constructor() {
super();
}
async goBack(): Promise<void> {
if (this.state.secretPath.length != 0) {
this.state.popSecretPath();
await this.router.changePage("KEY_VALUE_VIEW");
} else {
await this.router.changePage("SECRETS_HOME");
}
}
async render(): Promise<void> {
this.state.secretItem = "";
render(
<>
<div id="buttonsBox">
<button
class="uk-button uk-button-primary uk-margin-bottom"
onClick={async () => {
await this.router.changePage("KEY_VALUE_NEW_SECRET");
}}
>
{i18next.t("kv_view_new_btn")}
</button>
</div>
{this.state.secretMountType == "cubbyhole" && <p>{i18next.t("kv_view_cubbyhole_text")}</p>}
<div id="secretsList" />
</>,
this.router.pageContentElement,
);
let res: string[];
try {
res = await getSecrets(
this.state.baseMount,
this.state.secretMountType,
this.state.secretPath,
);
} catch (e: unknown) {
const error = e as Error;
if (error == DoesNotExistError) {
// getSecrets also 404's on no keys so dont go all the way back.
if (this.state.secretPath.length != 0) {
return this.goBack();
} else {
render(
<p>{i18next.t("kv_view_none_here_text")}</p>,
document.querySelector("#secretsList"),
);
}
} else {
setErrorText(error.message);
return;
}
}
render(
<ul class="uk-nav uk-nav-default">
{...res.map((secret) => (
<li>
<a
onClick={async () => {
if (secret.endsWith("/")) {
this.state.pushSecretPath(secret);
await this.router.changePage("KEY_VALUE_VIEW");
} else {
this.state.secretItem = secret;
await this.router.changePage("KEY_VALUE_SECRET");
}
}}
>
{secret}
</a>
</li>
))}
</ul>,
document.querySelector("#secretsList"),
);
}
async getPageTitle(): Promise<Element | string> {
return await SecretTitleElement(this.router);
}
get name(): string {
return i18next.t("kv_view_title");
}
}