chaos/VaultUI
1
0
Fork 0
Code Issues Activity

Move uk-grid to <Grid> so we can call .$deinit(), fixing glitches.

Browse source
This commit is contained in:
Kitteh 2021-05-25 11:54:20 +01:00
parent 3aee334fde
commit 19f3e1f8ca
10 changed files with 134 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/elements/CopyableModal.tsx
View file

@ -2,7 +2,6 @@ import { Component, JSX, createRef } from "preact";
import { addClipboardNotifications } from "../pageUtils";
import ClipboardJS from "clipboard";
import FileSaver from "file-saver";
import UIkit from "uikit";
import i18next from "i18next";
export type CopyableModalProps = {
@ -25,7 +24,6 @@ export class CopyableModal extends Component<CopyableModalProps, unknown> {
componentDidMount(): void {
const clipboard = new ClipboardJS(this.copyButtonRef.current);
addClipboardNotifications(clipboard, 600);
UIkit.modal(this.ref.current).show();
}
render(): JSX.Element {

40
src/elements/Grid.tsx Normal file
View file

@ -0,0 +1,40 @@
import { Component, JSX, createRef } from "preact";
import UIkit from "uikit";
export enum GridSizes {
NORMAL = "uk-grid-small uk-text-left",
MATCHING_TWO_ROWS = "uk-child-width-1-1@s uk-child-width-1-2@m uk-grid-small uk-grid-match",
}
export type GridProps = {
children: JSX.Element | JSX.Element[];
size: GridSizes;
};
type UIkitElement = {
$destroy: () => void;
};
export class Grid extends Component<GridProps, unknown> {
gridElement = createRef<HTMLDivElement>();
componentWillUnmount(): void {
try {
(this.gridElement.current as unknown as UIkitElement).$destroy();
} catch {
// Do Nothing
}
}
componentDidMount(): void {
UIkit.grid(this.gridElement.current);
}
render(): JSX.Element {
return (
<div class={this.props.size} ref={this.gridElement}>
{this.props.children}
</div>
);
}
}

7
src/pages/Access/AccessHome.tsx
View file

@ -1,3 +1,4 @@
import { Grid, GridSizes } from "../../elements/Grid";
import { Page } from "../../types/Page";
import { Tile } from "../../elements/Tile";
import { notImplemented, prePageChecks } from "../../pageUtils";
@ -12,11 +13,11 @@ export class AccessHomePage extends Page {
await this.router.changePage("HOME");
}
async render(): Promise<void> {
await this.router.setPageContent("");
this.router.pageContentElement.innerHTML = "";
if (!(await prePageChecks(this.router))) return;
render(
<div class="uk-child-width-1-1@s uk-child-width-1-2@m uk-grid-small uk-grid-match" uk-grid>
<Grid size={GridSizes.MATCHING_TWO_ROWS}>
<Tile
title={i18next.t("access_auth_methods_title")}
description={i18next.t("access_auth_methods_description")}
@ -41,7 +42,7 @@ export class AccessHomePage extends Page {
icon="unlock"
onclick={async () => notImplemented()}
/>
</div>,
</Grid>,
this.router.pageContentElement,
);
}

43
src/pages/Home.tsx
View file

@ -1,3 +1,5 @@
import { Grid, GridSizes } from "../elements/Grid";
import { Margin } from "../elements/Margin";
import { Page } from "../types/Page";
import { Tile } from "../elements/Tile";
import { TokenInfo } from "../api/types/token";
@ -54,27 +56,26 @@ export class HomePage extends Page {
</span>
</li>
</ul>
<div
class="uk-child-width-1-1@s uk-child-width-1-2@m uk-grid-small uk-grid-match uk-margin-top"
uk-grid
>
<Tile
title={i18next.t("home_secrets_title")}
description={i18next.t("home_secrets_description")}
icon="file-edit"
onclick={async () => {
await this.router.changePage("SECRETS_HOME");
}}
/>
<Tile
title={i18next.t("home_access_title")}
description={i18next.t("home_access_description")}
icon="users"
onclick={async () => {
await this.router.changePage("ACCESS_HOME");
}}
/>
</div>
<Margin>
<Grid size={GridSizes.MATCHING_TWO_ROWS}>
<Tile
title={i18next.t("home_secrets_title")}
description={i18next.t("home_secrets_description")}
icon="file-edit"
onclick={async () => {
await this.router.changePage("SECRETS_HOME");
}}
/>
<Tile
title={i18next.t("home_access_title")}
description={i18next.t("home_access_description")}
icon="users"
onclick={async () => {
await this.router.changePage("ACCESS_HOME");
}}
/>
</Grid>
</Margin>
</div>,
this.router.pageContentElement,
);

5
src/pages/Secrets/KeyValue/KeyValueSecret.tsx
View file

@ -1,5 +1,6 @@
import { Component, JSX, render } from "preact";
import { CopyableInputBox } from "../../../elements/CopyableInputBox";
import { Grid, GridSizes } from "../../../elements/Grid";
import { Page } from "../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement";
import { getCapabilities } from "../../../api/sys/getCapabilities";
@ -35,10 +36,10 @@ export class KVSecretVew extends Component<KVSecretViewProps, unknown> {
return (
<>
{Array.from(secretsMap).map((data: [string, string]) => (
<div class="uk-grid uk-grid-small uk-text-left" uk-grid>
<Grid size={GridSizes.NORMAL}>
<CopyableInputBox text={data[0]} copyable />
<CopyableInputBox text={data[1]} copyable />
</div>
</Grid>
))}
</>
);

5
src/pages/Secrets/NewSecretsEngine.tsx
View file

@ -1,3 +1,4 @@
import { Grid, GridSizes } from "../../elements/Grid";
import { Page } from "../../types/Page";
import { Tile } from "../../elements/Tile";
import { render } from "preact";
@ -10,7 +11,7 @@ export class NewSecretsEnginePage extends Page {
async render(): Promise<void> {
render(
<div class="uk-child-width-1-1@s uk-child-width-1-2@m uk-grid-small uk-grid-match" uk-grid>
<Grid size={GridSizes.MATCHING_TWO_ROWS}>
<Tile
title={i18next.t("new_secrets_engine_kv_title")}
description={i18next.t("new_secrets_engine_kv_description")}
@ -32,7 +33,7 @@ export class NewSecretsEnginePage extends Page {
await this.router.changePage("NEW_TRANSIT_ENGINE");
}}
/>
</div>,
</Grid>,
this.router.pageContentElement,
);
}

8
src/pages/Secrets/SecretTitleElement.tsx
View file

@ -20,6 +20,14 @@ export function SecretTitleElement(props: SecretTitleElementProps): JSX.Element
return (
<div>
<a
onClick={async () => {
await router.changePage("SECRETS_HOME");
}}
>
{"/ "}
</a>
<a
onClick={async () => {
state.secretPath = [];

69
src/pages/Secrets/SecretsHome.tsx
View file

@ -82,31 +82,58 @@ export class SecretsHomePage extends Page {
render(
<div>
<p>
{mountsCapabilities.includes("sudo") && mountsCapabilities.includes("create") && (
<button
class="uk-button uk-button-primary"
onClick={async () => {
await this.router.changePage("NEW_SECRETS_ENGINE");
}}
>
{i18next.t("secrets_home_new_secrets_engine_button")}
</button>
)}
</p>
<ul class="uk-nav uk-nav-default">
{Array.from(mountsMap as Map<string, MountType>).map((args: [string, MountType]) => {
const baseMount = args[0];
const mount = args[1];
if (isSupportedMount(mount)) {
return <MountLink page={this} mount={mount} baseMount={baseMount} />;
}
})}
</ul>
<div>
<p>
{mountsCapabilities.includes("sudo") && mountsCapabilities.includes("create") && (
<button
class="uk-button uk-button-primary"
onClick={async () => {
await this.router.changePage("NEW_SECRETS_ENGINE");
}}
>
{i18next.t("secrets_home_new_secrets_engine_button")}
</button>
)}
</p>
</div>
<div class="uk-margin-top">
<ul class="uk-nav uk-nav-default">
{Array.from(mountsMap as Map<string, MountType>).map((args: [string, MountType]) => {
const baseMount = args[0];
const mount = args[1];
if (isSupportedMount(mount)) {
return <MountLink page={this} mount={mount} baseMount={baseMount} />;
}
})}
</ul>
</div>
</div>,
this.router.pageContentElement,
);
}
async renderPageTitle(): Promise<void> {
render(
<div>
<a
onClick={async () => {
await this.router.changePage("HOME");
}}
>
{"/ "}
</a>
<a
onClick={async () => {
await this.router.changePage("HOME");
}}
>
{"secrets/ "}
</a>
</div>,
this.router.pageTitleElement,
);
}
get name(): string {
return i18next.t("secrets_home_page_title");
}

5
src/pages/Secrets/TOTP/TOTPView.tsx
View file

@ -1,6 +1,7 @@
import { Component, JSX, render } from "preact";
import { CopyableInputBox } from "../../../elements/CopyableInputBox";
import { DoesNotExistError } from "../../../types/internalErrors";
import { Grid, GridSizes } from "../../../elements/Grid";
import { MarginInline } from "../../../elements/MarginInline";
import { Page } from "../../../types/Page";
import { PageRouter } from "z-pagerouter";
@ -36,7 +37,7 @@ export class RefreshingTOTPGridItem extends Component<
render(): JSX.Element {
return (
<div class="uk-grid uk-grid-small uk-text-left" uk-grid>
<Grid size={GridSizes.NORMAL}>
<CopyableInputBox text={this.props.totpKey} copyable />
<CopyableInputBox text={this.state.totpValue} copyable />
<div>
@ -53,7 +54,7 @@ export class RefreshingTOTPGridItem extends Component<
</button>
</MarginInline>
</div>
</div>
</Grid>
);
}
}

5
src/pages/Secrets/Transit/TransitViewSecret.tsx
View file

@ -1,3 +1,4 @@
import { Grid, GridSizes } from "../../../elements/Grid";
import { Page } from "../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement";
import { Tile } from "../../../elements/Tile";
@ -18,7 +19,7 @@ export class TransitViewSecretPage extends Page {
const transitKey = await getTransitKey(this.state.baseMount, this.state.secretItem);
render(
<div class="uk-child-width-1-1@s uk-child-width-1-2@m uk-grid-small uk-grid-match" uk-grid>
<Grid size={GridSizes.MATCHING_TWO_ROWS}>
{transitKey.supports_encryption && (
<Tile
title={i18next.t("transit_view_encrypt_text")}
@ -46,7 +47,7 @@ export class TransitViewSecretPage extends Page {
onclick={async () => await this.router.changePage("TRANSIT_REWRAP")}
/>
)}
</div>,
</Grid>,
this.router.pageContentElement,
);
}