Add tsx syntax to KeyValueView.tsx.
This commit is contained in:
Kitteh
parent
eae3598611
commit
0309dac899
|
|
@ -2,7 +2,7 @@ import { Component, JSX, createRef } from "preact";
|
|||
|
||||
export type FormProps = {
|
||||
onSubmit: (form: FormData) => unknown;
|
||||
children?: JSX.Element|JSX.Element[];
|
||||
children?: JSX.Element | JSX.Element[];
|
||||
};
|
||||
|
||||
export class Form extends Component<FormProps, unknown> {
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
|
||||
import { JSX } from "preact";
|
||||
|
||||
export type MarginProps = {
|
||||
children?: JSX.Element|JSX.Element[];
|
||||
children?: JSX.Element | JSX.Element[];
|
||||
};
|
||||
|
||||
export function Margin(props: MarginProps): JSX.Element {
|
||||
return (
|
||||
<div class="uk-margin">
|
||||
{props.children}
|
||||
</div>
|
||||
)
|
||||
return <div class="uk-margin">{props.children}</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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> {
|
||||
|
|
|
|||
|
|
@ -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
99
src/pages/Secrets/KeyValue/KeyValueView.tsx
Normal 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");
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue