chaos/VaultUI
1
0
Fork 0
Code Issues Activity

add search bar for secrets view list

Browse source
This commit is contained in:
ChaotiCryptidz 2022-01-04 21:12:03 +00:00
parent 38c3da2e2c
commit 5a3441a537
2 changed files with 51 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/translations/en.js vendored
View file

@ -148,6 +148,7 @@ module.exports = {
kv_view_new_btn: "New", kv_view_new_btn: "New",
kv_view_delete_btn: "Delete", kv_view_delete_btn: "Delete",
kv_view_none_here_text: "You seem to have no secrets here, would you like to create one?", kv_view_none_here_text: "You seem to have no secrets here, would you like to create one?",
kv_view_search_input_text: "Search",
// TOTP View Page // TOTP View Page
totp_view_title: "TOTP", totp_view_title: "TOTP",

70
src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
View file

@ -1,4 +1,4 @@
import { Component, JSX, render } from "preact"; import { Component, createRef, JSX, render } from "preact";
import { DoesNotExistError } from "../../../../types/internalErrors"; import { DoesNotExistError } from "../../../../types/internalErrors";
import { Page } from "../../../../types/Page"; import { Page } from "../../../../types/Page";
import { SecretTitleElement } from "../SecretTitleElement"; import { SecretTitleElement } from "../SecretTitleElement";
@ -17,14 +17,36 @@ export type KVKeysListProps = {
type KVKeysListState = { type KVKeysListState = {
dataLoaded: boolean; dataLoaded: boolean;
keys: string[]; keys: string[];
searchQuery: string;
}; };
function SecretsList(secrets: string[], page: Page): JSX.Element[] {
return secrets.map((secret) => (
<li>
<a
onClick={async () => {
if (secret.endsWith("/")) {
page.state.pushSecretPath(secret);
await page.router.changePage("KEY_VALUE_VIEW");
} else {
page.state.secretItem = secret;
await page.router.changePage("KEY_VALUE_SECRET");
}
}}
>
{secret}
</a>
</li>
));
}
export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> { export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
constructor() { constructor() {
super(); super();
this.state = { this.state = {
dataLoaded: false, dataLoaded: false,
keys: [], keys: [],
searchQuery: "",
}; };
} }
@ -76,6 +98,8 @@ export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
void this.loadData(); void this.loadData();
} }
searchBarRef = createRef();
render(): JSX.Element { render(): JSX.Element {
if (!this.state.dataLoaded) { if (!this.state.dataLoaded) {
return <p>{i18next.t("content_loading")}</p>; return <p>{i18next.t("content_loading")}</p>;
@ -86,27 +110,31 @@ export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
} }
return ( return (
<ul class="uk-nav uk-nav-default"> <>
{...this.state.keys.map((secret) => ( <input
<li> ref={this.searchBarRef}
<a class="uk-input uk-form-width-medium uk-margin-bottom"
onClick={async () => { name="path"
const page = this.props.page; placeholder={i18next.t("kv_view_search_input_text")}
onInput={async () => {
this.setState({
searchQuery: (this.searchBarRef.current as unknown as HTMLInputElement).value,
});
console.log("meow");
}}
/>
<br />
if (secret.endsWith("/")) { <ul class="uk-nav uk-nav-default">
page.state.pushSecretPath(secret); {...((): JSX.Element[] => {
await page.router.changePage("KEY_VALUE_VIEW"); let secrets: string[] = this.state.keys;
} else { if (this.state.searchQuery.length > 0) {
page.state.secretItem = secret; secrets = secrets.filter((secret) => secret.includes(this.state.searchQuery));
await page.router.changePage("KEY_VALUE_SECRET"); }
} return SecretsList(secrets, this.props.page);
}} })()}
> </ul>
{secret} </>
</a>
</li>
))}
</ul>
); );
} }
} }