chaos/VaultUI
1
0
Fork 0
Code Issues Activity

<Button>

Browse source
This commit is contained in:
ChaotiCryptidz 2022-01-18 12:06:22 +00:00
parent 3e48cb5bda
commit 2a5a61c23c
40 changed files with 308 additions and 333 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/main.tsx
View file

@ -12,9 +12,9 @@ UIkit.use(Icons);
import Prism from "prismjs";
// Don't Sort These!
import "prismjs/components/prism-hcl";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-json";
import "prismjs/components/prism-json5";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-yaml";
Prism.highlightAll();
@ -24,17 +24,17 @@ Prism.highlightAll();
import translations from "./translations/index.mjs";
// Actual Imports
import { formatDistance } from "./formatDistance";
import { Main } from "./pages";
import { NavBar } from "./ui/elements/NavBar";
import { ThemeLoader } from "./ThemeLoader";
import { api } from "./globalAPI";
import { formatDistance } from "./formatDistance";
import { getCurrentUrl, route } from "preact-router";
import { pageChecks } from "./pageUtils";
import { playground } from "./playground";
import { render } from "preact";
import { settings } from "./globalSettings";
import i18next from "i18next";
import { pageChecks } from "./pageUtils";
async function onLoad(): Promise<void> {
document.documentElement.dir = settings.pageDirection;
@ -52,7 +52,7 @@ async function onLoad(): Promise<void> {
document.body,
);
pageChecks(getCurrentUrl(), api, settings);
await pageChecks(getCurrentUrl(), api, settings);
if (process.env.NODE_ENV == "development") {
await playground();

6
src/pageUtils.ts
View file

@ -10,7 +10,7 @@ export async function pageChecks(url: string, api: API, settings: Settings): Pro
if (settings.language.length == 0) {
route("/set_language", true);
return true
return true;
}
if (url.startsWith("/me") || url.startsWith("/pw_gen")) return;
@ -19,7 +19,7 @@ export async function pageChecks(url: string, api: API, settings: Settings): Pro
if (settings.apiURL.length == 0) {
route("/set_vault_url", false);
return true
return true;
}
if (url.startsWith("/unseal")) return;
@ -27,7 +27,7 @@ export async function pageChecks(url: string, api: API, settings: Settings): Pro
const sealStatus = await api.getSealStatus();
if (sealStatus.sealed) {
route("/unseal", true);
return true
return true;
}
if (url.startsWith("/login")) return;

16
src/pages.tsx
View file

@ -1,7 +1,7 @@
import { api } from "./globalAPI";
import { pageChecks } from "./pageUtils";
import { settings } from "./globalSettings";
import Router from "preact-router";
import { pageChecks } from "./pageUtils";
import { AccessHomePage } from "./ui/pages/Access/AccessHome";
import { AuthHome } from "./ui/pages/Access/Auth/AuthHome";
@ -47,9 +47,11 @@ import { UserPassUserView } from "./ui/pages/Access/Auth/userpass/UserPassUserVi
import { UserPassUsersList } from "./ui/pages/Access/Auth/userpass/UserPassUsersList";
export const Main = () => (
<Router onChange={(e) => {
pageChecks(e.url, api, settings);
}}>
<Router
onChange={async (e) => {
await pageChecks(e.url, api, settings);
}}
>
<Home path="/" settings={settings} api={api} />
<Me path="/me" settings={settings} api={api} />
<Login path="/login" settings={settings} api={api} />
@ -92,11 +94,7 @@ export const Main = () => (
<TOTPList path="/secrets/totp/list/:baseMount" settings={settings} api={api} />
<TOTPNew path="/secrets/totp/new/:baseMount" settings={settings} api={api} />
<TOTPNewGenerated path="/secrets/totp/new_generated/:baseMount" settings={settings} api={api} />
<TOTPDelete
path="/secrets/totp/delete/:baseMount/:item"
settings={settings}
api={api}
/>
<TOTPDelete path="/secrets/totp/delete/:baseMount/:item" settings={settings} api={api} />
<TransitNew path="/secrets/transit/new/:baseMount" settings={settings} api={api} />
<TransitList path="/secrets/transit/list/:baseMount" settings={settings} api={api} />

5
src/translations/en.js vendored
View file

@ -69,6 +69,11 @@ module.exports = {
home_policies_title: "Policies",
home_policies_description: "Manage policies and permissions.",
// Set Vault URL Page
set_vault_url_title: "Set Vault URL",
set_vault_url_placeholder: "Vault URL",
set_vault_url_set_btn: "Set Vault URL",
// Secrets Home Page
secrets_home_page_title: "Secrets",
secrets_home_new_secrets_engine_button: "New Secrets Engine",

34
src/ui/elements/Button.tsx Normal file
View file

@ -0,0 +1,34 @@
import { JSX } from "preact";
import { route } from "preact-router";
export type ButtonProps = {
color: "primary" | "danger" | "secondary";
text: string;
// Either one or the other, pref on route when possible.
route?: string;
onClick?: () => unknown;
type?: "submit" | null;
};
export function Button(props: ButtonProps): JSX.Element {
const classes = "uk-button " + ("uk-button-" + props.color);
if (props.route) {
return (
<button
class={classes}
onClick={() => {
route(props.route);
}}
type={props.type}
>
{props.text}
</button>
);
} else {
return (
<button class={classes} type={props.type} onClick={props.onClick}>
{props.text}
</button>
);
}
}

32
src/ui/pages/Access/Auth/AuthHome.tsx
View file

@ -1,4 +1,5 @@
import { AuthMethod } from "../../../../api/types/auth";
import { Button } from "../../../elements/Button";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { PageTitle } from "../../../elements/PageTitle";
@ -28,26 +29,25 @@ export function AuthListElement(props: AuthListElementProps): JSX.Element {
<span class="uk-text-muted">{` (${props.method.accessor})`}</span>
<div class="uk-margin-top">
{isViewable && (
<button
class="uk-button uk-button-small uk-button-primary"
<Button
text={i18next.t("common_view")}
color="primary"
onClick={() => {
onViewClick(props);
}}
>
{i18next.t("common_view")}
</button>
/>
)}
<button
class="uk-button uk-button-small uk-button-primary"
onClick={async () => {
route(authViewConfigURL(props.path));
}}
>
{i18next.t("auth_home_view_config")}
</button>
<button class="uk-button uk-button-small uk-button-primary" onClick={notImplemented}>
{i18next.t("auth_home_edit_config")}
</button>
<Button
text={i18next.t("auth_home_view_config")}
color="primary"
route={authViewConfigURL(props.path)}
/>
<Button
text={i18next.t("auth_home_edit_config")}
color="primary"
onClick={notImplemented}
/>
</div>
</div>
);

10
src/ui/pages/Access/Auth/userpass/UserPassUserDelete.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
import { PageTitle } from "../../../../elements/PageTitle";
@ -15,15 +16,14 @@ export class UserPassUserDelete extends Component<DefaultPageProps> {
<PageTitle title={i18next.t("userpass_user_delete_title")} />
<div>
<h5>{i18next.t("userpass_user_delete_text")}</h5>
<button
class="uk-button uk-button-danger"
<Button
text={i18next.t("common_delete")}
color="danger"
onClick={async () => {
await this.props.api.deleteUserPassUser(baseMount, user);
route(userPassUserListURL(baseMount));
}}
>
{i18next.t("common_delete")}
</button>
/>
</div>
</>
);

5
src/ui/pages/Access/Auth/userpass/UserPassUserEdit.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
import { Form } from "../../../../elements/Form";
@ -112,9 +113,7 @@ export class UserPassUserEdit extends Component<DefaultPageProps, { user_data: U
</InputWithTitle>
<p class="uk-text-danger" id="errorText" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_edit")}
</button>
<Button text={i18next.t("common_edit")} color="primary" type="submit" />
</MarginInline>
</Form>
</>

5
src/ui/pages/Access/Auth/userpass/UserPassUserNew.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
import { Form } from "../../../../elements/Form";
@ -34,9 +35,7 @@ export class UserPassUserNew extends Component<DefaultPageProps> {
</Margin>
<p class="uk-text-danger" id="errorText" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_create")}
</button>
<Button text={i18next.t("common_create")} color="primary" type="submit" />
</MarginInline>
</Form>
</>

28
src/ui/pages/Access/Auth/userpass/UserPassUserView.tsx
View file

@ -1,10 +1,10 @@
import { Button } from "../../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
import { HeaderAndContent } from "../../../../elements/HeaderAndContent";
import { Margin } from "../../../../elements/Margin";
import { PageTitle } from "../../../../elements/PageTitle";
import { UserType } from "../../../../../api/types/user";
import { route } from "preact-router";
import { toStr } from "../../../../../utils";
import { userPassUserDeleteURL, userPassUserEditURL } from "../../../pageLinks";
import i18next from "i18next";
@ -30,22 +30,16 @@ export class UserPassUserView extends Component<DefaultPageProps, { user_data: U
<div>
<p>
<button
class="uk-button uk-button-danger"
onClick={async () => {
route(userPassUserDeleteURL(baseMount, user));
}}
>
{i18next.t("common_delete")}
</button>
<button
class="uk-button uk-button-primary"
onClick={async () => {
route(userPassUserEditURL(baseMount, user));
}}
>
{i18next.t("common_edit")}
</button>
<Button
text={i18next.t("common_delete")}
color="danger"
route={userPassUserDeleteURL(baseMount, user)}
/>
<Button
text={i18next.t("common_edit")}
color="primary"
route={userPassUserEditURL(baseMount, user)}
/>
</p>
<br />

18
src/ui/pages/Access/Auth/userpass/UserPassUsersList.tsx
View file

@ -1,5 +1,7 @@
import { Button } from "../../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
import { Margin } from "../../../../elements/Margin";
import { PageTitle } from "../../../../elements/PageTitle";
import { route } from "preact-router";
import { userPassUserNewURL, userPassUserViewURL } from "../../../pageLinks";
@ -20,15 +22,13 @@ export class UserPassUsersList extends Component<DefaultPageProps, { users: stri
<>
<PageTitle title={i18next.t("userpass_users_list_title")} />
<div>
<button
class="uk-button uk-margin uk-button-primary"
type="submit"
onClick={async () => {
route(userPassUserNewURL(baseMount));
}}
>
{i18next.t("common_new")}
</button>
<Margin>
<Button
text={i18next.t("common_new")}
color="primary"
route={userPassUserNewURL(baseMount)}
/>
</Margin>
<ul>
{...this.state.users.map((user) => (

9
src/ui/pages/Login.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../elements/Button";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../types/DefaultPageProps";
import { Form } from "../elements/Form";
@ -27,9 +28,7 @@ export class TokenLoginForm extends Component<DefaultPageProps> {
/>
</Margin>
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("log_in_btn")}
</button>
<Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
</MarginInline>
</Form>
);
@ -83,9 +82,7 @@ export class UsernameLoginForm extends Component<DefaultPageProps> {
/>
</Margin>
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("log_in_btn")}
</button>
<Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
</MarginInline>
</Form>
);

10
src/ui/pages/Policies/PoliciesHome.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
import { Margin } from "../../elements/Margin";
@ -26,14 +27,7 @@ export class PoliciesHome extends Component<DefaultPageProps, { policies: string
<PageTitle title={i18next.t("policies_home_title")} />
<div>
<p>
<button
class="uk-button uk-button-primary"
onClick={async () => {
route(policyNewURL());
}}
>
{i18next.t("common_new")}
</button>
<Button text={i18next.t("common_new")} color="primary" route={policyNewURL()} />
</p>
<Margin>

10
src/ui/pages/Policies/PolicyDelete.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
import { PageTitle } from "../../elements/PageTitle";
@ -13,8 +14,9 @@ export class PolicyDelete extends Component<DefaultPageProps> {
<PageTitle title={i18next.t("policy_delete_title", { policy: policyName })} />
<div>
<h5>{i18next.t("policy_delete_text")}</h5>
<button
class="uk-button uk-button-danger"
<Button
text={i18next.t("common_delete")}
color="danger"
onClick={async () => {
try {
await this.props.api.deletePolicy(policyName);
@ -24,9 +26,7 @@ export class PolicyDelete extends Component<DefaultPageProps> {
setErrorText(error.message);
}
}}
>
{i18next.t("common_delete")}
</button>
/>
</div>
</>
);

9
src/ui/pages/Policies/PolicyEdit.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../elements/Button";
import { CodeEditor } from "../../elements/CodeEditor";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
@ -82,9 +83,11 @@ export class PolicyEditor extends Component<PolicyEditorProps, PolicyEditorState
/>
</Margin>
<MarginInline>
<button class="uk-button uk-button-primary" onClick={() => this.editorSave()}>
{i18next.t("common_edit")}
</button>
<Button
text={i18next.t("common_edit")}
color="primary"
onClick={() => this.editorSave()}
/>
</MarginInline>
</div>
);

5
src/ui/pages/Policies/PolicyNew.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
import { Form } from "../../elements/Form";
@ -40,9 +41,7 @@ export class PolicyNew extends Component<DefaultPageProps> {
/>
</Margin>
<p class="uk-text-danger" id="errorText" />
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_create")}
</button>
<Button text={i18next.t("common_create")} color="primary" type="submit" />
</Form>
</div>
</>

28
src/ui/pages/Policies/PolicyView.tsx
View file

@ -1,10 +1,10 @@
import { Button } from "../../elements/Button";
import { CodeBlock } from "../../elements/CodeBlock";
import { Component } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
import { Margin } from "../../elements/Margin";
import { PageTitle } from "../../elements/PageTitle";
import { policyDeleteURL, policyEditURL } from "../pageLinks";
import { route } from "preact-router";
import i18next from "i18next";
export class PolicyView extends Component<
@ -27,23 +27,17 @@ export class PolicyView extends Component<
<PageTitle title={i18next.t("policy_view_title", { policy: this.state.policyName })} />
<div>
<p>
<button
class="uk-button uk-button-primary"
onClick={async () => {
route(policyEditURL(this.state.policyName));
}}
>
{i18next.t("common_edit")}
</button>
<Button
text={i18next.t("common_edit")}
color="primary"
route={policyEditURL(this.state.policyName)}
/>
{this.state.policyName !== "default" && (
<button
class="uk-button uk-button-danger"
onClick={async () => {
route(policyDeleteURL(this.state.policyName));
}}
>
{i18next.t("common_delete")}
</button>
<Button
text={i18next.t("common_delete")}
color="danger"
route={policyDeleteURL(this.state.policyName)}
/>
)}
</p>

9
src/ui/pages/PwGen.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../elements/Button";
import { Component, JSX, createRef } from "preact";
import { CopyableInputBox } from "../elements/CopyableInputBox";
import { DefaultPageProps } from "../../types/DefaultPageProps";
@ -132,9 +133,11 @@ export class PasswordGenerator extends Component<DefaultPageProps, PasswordGener
copyable
/>
<Margin>
<button class="uk-button uk-button-primary uk-margin-bottom" type="submit">
{i18next.t("password_generator_generate_btn")}
</button>
<Button
text={i18next.t("password_generator_generate_btn")}
color="primary"
type="submit"
/>
</Margin>
</Form>
</>

5
src/ui/pages/Secrets/DeleteSecretsEngine.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
import { Form } from "../../elements/Form";
@ -24,9 +25,7 @@ export class DeleteSecretsEngine extends Component<DefaultPageProps> {
<p class="uk-text-danger" id="errorText" />
<MarginInline>
<button class="uk-button uk-button-danger" type="submit">
{i18next.t("common_delete")}
</button>
<Button text={i18next.t("common_delete")} color="danger" type="submit" />
</MarginInline>
</Form>
</>

23
src/ui/pages/Secrets/KeyValue/KeyValueDelete.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { SecretTitleElement } from "../SecretTitleElement";
@ -12,6 +13,13 @@ export class KeyValueDelete extends Component<DefaultPageProps> {
const item = this.props.matches["item"];
const version = this.props.matches["version"];
// If deleting a secret when version is null,
// redirect back to list rather than secret
const buttonRoute =
version == "null"
? kvListURL(baseMount, secretPath)
: kvViewURL(baseMount, secretPath, item, "null");
return (
<>
<SecretTitleElement
@ -23,19 +31,14 @@ export class KeyValueDelete extends Component<DefaultPageProps> {
/>
<div>
<h5>{i18next.t("kv_delete_text")}</h5>
<button
class="uk-button uk-button-danger"
<Button
text={i18next.t("common_delete")}
color="danger"
onClick={async () => {
await this.props.api.deleteSecret(baseMount, secretPath, item, version);
if (version == "null") {
route(kvListURL(baseMount, secretPath));
} else {
route(kvViewURL(baseMount, secretPath, item, "null"));
}
route(buttonRoute);
}}
>
{i18next.t("common_delete")}
</button>
/>
</div>
</>
);

7
src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { CodeEditor } from "../../../elements/CodeEditor";
import { Component, JSX, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
@ -45,7 +46,7 @@ export function validateData(str: string, syntax = "json"): boolean {
try {
parseData(str, syntax);
} catch (e) {
let err = e as Error;
const err = e as Error;
setErrorText(err.message);
return false;
}
@ -169,9 +170,7 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
code={this.getStringKVData(this.state.kvData)}
onUpdate={(code) => this.onCodeUpdate(code)}
/>
<button class="uk-button uk-button-primary" onClick={() => this.editorSave()}>
{i18next.t("common_edit")}
</button>
<Button text={i18next.t("common_edit")} color="primary" onClick={() => this.editorSave()} />
</div>
);
}

27
src/ui/pages/Secrets/KeyValue/KeyValueList.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component, JSX, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { DoesNotExistError } from "../../../../types/internalErrors";
@ -175,24 +176,18 @@ export class KeyValueList extends Component<DefaultPageProps, KeyValueListState>
/>
<p>
{this.state.pathCaps.includes("create") && (
<button
class="uk-button uk-button-primary"
onClick={() => {
route(kvNewURL(baseMount, secretPath));
}}
>
{i18next.t("kv_view_new_btn")}
</button>
<Button
text={i18next.t("kv_view_new_btn")}
color="primary"
route={kvNewURL(baseMount, secretPath)}
/>
)}
{secretPath.length == 0 && this.state.mountCaps.includes("delete") && (
<button
class="uk-button uk-button-danger"
onClick={async () => {
route(delSecretsEngineURL(baseMount));
}}
>
{i18next.t("kv_view_delete_btn")}
</button>
<Button
text={i18next.t("kv_view_delete_btn")}
color="danger"
route={delSecretsEngineURL(baseMount)}
/>
)}
</p>
{this.state.mountType == "cubbyhole" && <p>{i18next.t("kv_view_cubbyhole_text")}</p>}

5
src/ui/pages/Secrets/KeyValue/KeyValueNew.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { Form } from "../../../elements/Form";
@ -36,9 +37,7 @@ export class KeyValueNew extends Component<DefaultPageProps> {
/>
</Margin>
<p class="uk-text-danger" id="errorText" />
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_create")}
</button>
<Button text={i18next.t("common_create")} color="primary" type="submit" />
</Form>
</div>
</>

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

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { CodeBlock } from "../../../elements/CodeBlock";
import { Component, JSX } from "preact";
import { CopyableInputBox } from "../../../elements/CopyableInputBox";
@ -6,7 +7,6 @@ import { DoesNotExistError } from "../../../../types/internalErrors";
import { Grid, GridSizes } from "../../../elements/Grid";
import { SecretTitleElement } from "../SecretTitleElement";
import { kvDeleteURL, kvEditURL, kvVersionsURL } from "../../pageLinks";
import { route } from "preact-router";
import { sortedObjectMap } from "../../../../utils";
import i18next from "i18next";
@ -100,6 +100,18 @@ export class KeyValueView extends Component<DefaultPageProps, KeyValueViewState>
render() {
if (!this.state.secretInfo) return;
// Delete Secret on kv-v1
let deleteButtonText = i18next.t("kv_secret_delete_btn");
if (this.state.kvVersion == "2" && this.state.secretVersion == "null") {
// Delete All
deleteButtonText = i18next.t("kv_secret_delete_all_btn");
} else if (this.state.kvVersion == "2" && this.state.secretVersion != "null") {
// Delete Version X
deleteButtonText = i18next.t("kv_secret_delete_version_btn", {
version: this.state.secretVersion,
});
}
return (
<>
<SecretTitleElement
@ -113,63 +125,39 @@ export class KeyValueView extends Component<DefaultPageProps, KeyValueViewState>
{
// Delete Button
!this.state.isDeleted && this.state.caps.includes("delete") && (
<button
class="uk-button uk-button-danger"
onClick={() => {
route(
kvDeleteURL(
<Button
text={deleteButtonText}
color="danger"
route={kvDeleteURL(
this.state.baseMount,
this.state.secretPath,
this.state.secretItem,
this.state.secretVersion,
),
);
}}
>
{((): string => {
// Delete Secret on kv-v1
let deleteButtonText = i18next.t("kv_secret_delete_btn");
if (this.state.kvVersion == "2" && this.state.secretVersion == "null") {
// Delete All
deleteButtonText = i18next.t("kv_secret_delete_all_btn");
} else if (this.state.kvVersion == "2" && this.state.secretVersion != "null") {
// Delete Version X
deleteButtonText = i18next.t("kv_secret_delete_version_btn", {
version: this.state.secretVersion,
});
}
return deleteButtonText;
})()}
</button>
)}
/>
)
}
{this.state.secretVersion == "null" && this.state.caps.includes("update") && (
<button
class="uk-button uk-button-primary"
onClick={async () => {
route(
kvEditURL(this.state.baseMount, this.state.secretPath, this.state.secretItem),
);
}}
>
{i18next.t("common_edit")}
</button>
)}
{!this.state.isDeleted && this.state.kvVersion == "2" && (
<button
class="uk-button uk-button-secondary"
onClick={async () => {
route(
kvVersionsURL(
<Button
text={i18next.t("common_edit")}
color="primary"
route={kvEditURL(
this.state.baseMount,
this.state.secretPath,
this.state.secretItem,
),
);
}}
>
{i18next.t("kv_secret_versions_btn")}
</button>
)}
/>
)}
{!this.state.isDeleted && this.state.kvVersion == "2" && (
<Button
text={i18next.t("kv_secret_versions_btn")}
color="secondary"
route={kvVersionsURL(
this.state.baseMount,
this.state.secretPath,
this.state.secretItem,
)}
/>
)}
</p>
@ -178,8 +166,9 @@ export class KeyValueView extends Component<DefaultPageProps, KeyValueViewState>
{this.state.isDeleted && (
<>
<p>{i18next.t("kv_secret_deleted_text")}</p>
<button
class="uk-button uk-button-primary"
<Button
text={i18next.t("kv_secret_restore_btn")}
color="primary"
onClick={async () => {
await this.props.api.undeleteSecret(
this.state.baseMount,
@ -187,12 +176,11 @@ export class KeyValueView extends Component<DefaultPageProps, KeyValueViewState>
this.state.secretItem,
this.state.secretVersion,
);
// Is there a better way to force refresh of a Component?
this.setState({});
await this.componentDidMount();
}}
>
{i18next.t("kv_secret_restore_btn")}
</button>
/>
</>
)}
</div>

5
src/ui/pages/Secrets/NewEngines/NewKVEngine.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { Form } from "../../../elements/Form";
@ -36,9 +37,7 @@ export class NewKVEngine extends Component<DefaultPageProps> {
</Margin>
<p class="uk-text-danger" id="errorText" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_create")}
</button>
<Button text={i18next.t("common_create")} color="primary" type="submit" />
</MarginInline>
</Form>
</>

5
src/ui/pages/Secrets/NewEngines/NewTOTPEngine.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { Form } from "../../../elements/Form";
@ -26,9 +27,7 @@ export class NewTOTPEngine extends Component<DefaultPageProps> {
</Margin>
<p class="uk-text-danger" id="errorText" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_create")}
</button>
<Button text={i18next.t("common_create")} color="primary" type="submit" />
</MarginInline>
</Form>
,

5
src/ui/pages/Secrets/NewEngines/NewTransitEngine.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { Form } from "../../../elements/Form";
@ -25,9 +26,7 @@ export class NewTransitEngine extends Component<DefaultPageProps> {
</Margin>
<p class="uk-text-danger" id="errorText" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_create")}
</button>
<Button text={i18next.t("common_create")} color="primary" type="submit" />
</MarginInline>
</Form>
,

15
src/ui/pages/Secrets/SecretsHome.tsx
View file

@ -1,8 +1,8 @@
import { Button } from "../../elements/Button";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../../types/DefaultPageProps";
import { MountType } from "../../../api/types/mount";
import { PageTitle } from "../../elements/PageTitle";
import { route } from "preact-router";
import { sortedObjectMap } from "../../../utils";
import i18next from "i18next";
@ -77,14 +77,11 @@ export class Secrets extends Component<DefaultPageProps, SecretsState> {
<p>
{this.state.capabilities.includes("sudo") &&
this.state.capabilities.includes("create") && (
<button
class="uk-button uk-button-primary"
onClick={() => {
route("/secrets/new_secrets_engine");
}}
>
{i18next.t("secrets_home_new_secrets_engine_button")}
</button>
<Button
text={i18next.t("secrets_home_new_secrets_engine_button")}
color="primary"
route={"/secrets/new_secrets_engine"}
/>
)}
</p>
</div>

10
src/ui/pages/Secrets/TOTP/TOTPDelete.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { SecretTitleElement } from "../SecretTitleElement";
@ -17,17 +18,16 @@ export class TOTPDelete extends Component<DefaultPageProps> {
/>
<div>
<h5>{i18next.t("totp_delete_text")}</h5>
<button
class="uk-button uk-button-danger"
<Button
text={i18next.t("common_delete")}
color="danger"
onClick={async () => {
const baseMount = this.props.matches["baseMount"];
const item = this.props.matches["item"];
await this.props.api.deleteTOTP(baseMount, item);
route(totpListURL(baseMount));
}}
>
{i18next.t("common_delete")}
</button>
/>
</div>
</>
);

61
src/ui/pages/Secrets/TOTP/TOTPList.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { CapabilitiesType } from "../../../../api/types/capabilities";
import { Component, JSX } from "preact";
import { CopyableInputBox } from "../../../elements/CopyableInputBox";
@ -6,9 +7,13 @@ import { DoesNotExistError } from "../../../../types/internalErrors";
import { Grid, GridSizes } from "../../../elements/Grid";
import { MarginInline } from "../../../elements/MarginInline";
import { SecretTitleElement } from "../SecretTitleElement";
import { delSecretsEngineURL, totpNewGeneratedURL, totpNewURL } from "../../pageLinks";
import {
delSecretsEngineURL,
totpDeleteURL,
totpNewGeneratedURL,
totpNewURL,
} from "../../pageLinks";
import { removeDoubleSlash } from "../../../../utils";
import { route } from "preact-router";
import { setErrorText } from "../../../../pageUtils";
import i18next from "i18next";
@ -50,14 +55,11 @@ export class RefreshingTOTPGridItem extends Component<TOTPGridItemProps, { totpV
<div>
<MarginInline>
{this.props.canDelete && (
<button
class="uk-button uk-button-danger"
onClick={async () => {
route("/secrets/totp/delete/" + this.props.baseMount + "/" + this.props.totpKey);
}}
>
{i18next.t("common_delete")}
</button>
<Button
text={i18next.t("common_delete")}
color="danger"
route={totpDeleteURL(this.props.baseMount, this.props.totpKey)}
/>
)}
</MarginInline>
</div>
@ -129,34 +131,25 @@ export class TOTPList extends Component<DefaultPageProps, TOTPListState> {
<div>
<p>
{totpCaps.includes("create") && (
<button
class="uk-button uk-button-primary"
onClick={async () => {
route(totpNewURL(baseMount));
}}
>
{i18next.t("common_new")}
</button>
<Button
text={i18next.t("common_new")}
color="primary"
route={totpNewURL(baseMount)}
/>
)}
{totpCaps.includes("create") && (
<button
class="uk-button uk-button-primary"
onClick={async () => {
route(totpNewGeneratedURL(baseMount));
}}
>
{i18next.t("totp_new_generated")}
</button>
<Button
text={i18next.t("totp_new_generated")}
color="secondary"
route={totpNewGeneratedURL(baseMount)}
/>
)}
{mountCaps.includes("delete") && (
<button
class="uk-button uk-button-danger"
onClick={async () => {
route(delSecretsEngineURL(baseMount));
}}
>
{i18next.t("common_delete")}
</button>
<Button
text={i18next.t("common_delete")}
color="danger"
route={delSecretsEngineURL(baseMount)}
/>
)}
</p>
<div id="totpList">

21
src/ui/pages/Secrets/TOTP/TOTPNew.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component, JSX, createRef } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { Form } from "../../../elements/Form";
@ -95,25 +96,23 @@ export class TOTPNewForm extends Component<
)}
<MarginInline>
<button
class="uk-button uk-button-primary"
type="button"
<Button
text={
!this.state.qrMode
? i18next.t("totp_new_switch_to_qr_btn")
: i18next.t("totp_new_switch_back_to_manual_input_btn")
}
color="primary"
onClick={() => {
this.setState({ qrMode: !this.state.qrMode });
}}
>
{!this.state.qrMode
? i18next.t("totp_new_switch_to_qr_btn")
: i18next.t("totp_new_switch_back_to_manual_input_btn")}
</button>
/>
</MarginInline>
<p id="errorText" class="uk-text-danger" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_create")}
</button>
<Button text={i18next.t("common_create")} color="primary" type="submit" />
</MarginInline>
</Form>
);

19
src/ui/pages/Secrets/TOTP/TOTPNewGenerated.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component, JSX, createRef } from "preact";
import { CopyableInputBox } from "../../../elements/CopyableInputBox";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
@ -9,6 +10,7 @@ import { NewTOTPResp } from "../../../../api/types/totp";
import { SecretTitleElement } from "../SecretTitleElement";
import { route } from "preact-router";
import { setErrorText } from "../../../../pageUtils";
import { totpListURL } from "../../pageLinks";
import i18next from "i18next";
export class TOTPNewGeneratedForm extends Component<
@ -94,9 +96,7 @@ export class TOTPNewGeneratedForm extends Component<
<p id="errorText" class="uk-text-danger" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_create")}
</button>
<Button text={i18next.t("common_create")} color="primary" type="submit" />
</MarginInline>
</Form>
);
@ -106,14 +106,11 @@ export class TOTPNewGeneratedForm extends Component<
<p>{i18next.t("totp_new_generated_warning")}</p>
<img src={"data:image/png;base64," + this.state.exportedData.barcode} />
<CopyableInputBox copyable text={this.state.exportedData.url} />
<button
class="uk-button uk-button-primary"
onClick={async () => {
route("/secrets/totp/list/" + this.props.baseMount);
}}
>
{i18next.t("common_back")}
</button>
<Button
text={i18next.t("common_back")}
color="primary"
route={totpListURL(this.props.baseMount)}
/>
</>
);
}

5
src/ui/pages/Secrets/Transit/TransitDecrypt.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component, render } from "preact";
import { CopyableModal } from "../../../elements/CopyableModal";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
@ -38,9 +39,7 @@ export class TransitDecrypt extends Component<DefaultPageProps> {
<input class="uk-checkbox" name="decodeBase64Checkbox" type="checkbox" />
</InputWithTitle>
<p class="uk-text-danger" id="errorText" />
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("transit_decrypt")}
</button>
<Button text={i18next.t("transit_decrypt")} color="primary" type="submit" />
<div id="modalAttachmentPoint" />
</Form>
</>

5
src/ui/pages/Secrets/Transit/TransitEncrypt.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component, render } from "preact";
import { CopyableModal } from "../../../elements/CopyableModal";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
@ -38,9 +39,7 @@ export class TransitEncrypt extends Component<DefaultPageProps> {
<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")}
</button>
<Button text={i18next.t("transit_encrypt")} color="primary" type="submit" />
<div id="modalAttachmentPoint" />
</Form>
</>

27
src/ui/pages/Secrets/Transit/TransitList.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { CapabilitiesType } from "../../../../api/types/capabilities";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
@ -95,24 +96,18 @@ export class TransitList extends Component<DefaultPageProps, { caps: Capabilitie
<p>
{transitCaps.includes("create") && (
<button
class="uk-button uk-button-primary"
onClick={async () => {
route(transitNewSecretURL(baseMount));
}}
>
{i18next.t("common_new")}
</button>
<Button
text={i18next.t("common_new")}
color="primary"
route={transitNewSecretURL(baseMount)}
/>
)}
{mountCaps.includes("delete") && (
<button
class="uk-button uk-button-danger"
onClick={async () => {
route(delSecretsEngineURL(baseMount));
}}
>
{i18next.t("common_delete")}
</button>
<Button
text={i18next.t("common_delete")}
color="danger"
route={delSecretsEngineURL(baseMount)}
/>
)}
</p>
<TransitViewListItem

5
src/ui/pages/Secrets/Transit/TransitNew.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
import { Form } from "../../../elements/Form";
@ -58,9 +59,7 @@ export class TransitNew extends Component<DefaultPageProps> {
</Margin>
<p class="uk-text-danger" id="errorText" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("common_create")}
</button>
<Button text={i18next.t("common_create")} color="primary" type="submit" />
</MarginInline>
</Form>
</>

5
src/ui/pages/Secrets/Transit/TransitRewrap.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../../../elements/Button";
import { Component, render } from "preact";
import { CopyableModal } from "../../../elements/CopyableModal";
import { DefaultPageProps } from "../../../../types/DefaultPageProps";
@ -74,9 +75,7 @@ export class TransitRewrap extends Component<DefaultPageProps, { transitKey: Tra
/>
</Margin>
<p class="uk-text-danger" id="errorText" />
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("transit_rewrap")}
</button>
<Button text={i18next.t("transit_rewrap")} color="primary" type="submit" />
<div id="modalAttachmentPoint" />
</Form>
</>

5
src/ui/pages/SetLanguage.tsx
View file

@ -2,6 +2,7 @@
import translations from "../../translations/index.mjs";
// ts-unignore
import { Button } from "../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../types/DefaultPageProps";
import { Form } from "../elements/Form";
@ -32,9 +33,7 @@ export class SetLanguage extends Component<DefaultPageProps> {
</Margin>
<p class="uk-text-danger" id="errorText" />
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("set_language_btn")}
</button>
<Button text={i18next.t("set_language_btn")} color="primary" type="submit" />
</MarginInline>
</Form>
</>

10
src/ui/pages/SetVaultURL.tsx
View file

@ -1,30 +1,30 @@
import { Button } from "../elements/Button";
import { Component } from "preact";
import { DefaultPageProps } from "../../types/DefaultPageProps";
import { Form } from "../elements/Form";
import { Margin } from "../elements/Margin";
import { PageTitle } from "../elements/PageTitle";
import { route } from "preact-router";
import i18next from "i18next";
export class SetVaultURL extends Component<DefaultPageProps> {
render() {
return (
<>
<PageTitle title="Set Vault URL" />
<PageTitle title={i18next.t("set_vault_url_title")} />
<Form onSubmit={(data) => this.onSubmit(data)}>
<Margin>
<input
class="uk-input uk-form-width-medium"
name="vaultURL"
type="text"
placeholder="Vault URL"
placeholder={i18next.t("set_vault_url_placeholder")}
required
/>
</Margin>
<p id="errorText" class="uk-text-danger" />
<Margin>
<button class="uk-button uk-button-primary" type="submit">
Set
</button>
<Button text={i18next.t("set_vault_url_set_btn")} color="primary" type="submit" />
</Margin>
</Form>
</>

20
src/ui/pages/Unseal.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "../elements/Button";
import { Component, JSX } from "preact";
import { DefaultPageProps } from "../../types/DefaultPageProps";
import { Form } from "../elements/Form";
@ -35,9 +36,7 @@ export function UnsealFormInput(props: UnsealFormInputProps): JSX.Element {
/>
</MarginInline>
<MarginInline>
<button class="uk-button uk-button-primary" type="submit">
{i18next.t("unseal_submit_key_btn")}
</button>
<Button text={i18next.t("unseal_submit_key_btn")} color="primary" type="submit" />
</MarginInline>
</Form>
);
@ -122,8 +121,13 @@ export class Unseal extends Component<DefaultPageProps, UnsealPageState> {
<QRScanner onScan={(code) => this.submitKey(code)} />
)}
<button
class="uk-button uk-button-primary"
<Button
text={
this.state.mode == UnsealInputModes.QR_INPUT
? i18next.t("unseal_input_btn")
: i18next.t("unseal_qr_btn")
}
color="primary"
onClick={async () => {
let newMethod: string;
if (this.state.mode == UnsealInputModes.FORM_INPUT) {
@ -133,11 +137,7 @@ export class Unseal extends Component<DefaultPageProps, UnsealPageState> {
}
this.setState({ mode: newMethod });
}}
>
{this.state.mode == UnsealInputModes.QR_INPUT
? i18next.t("unseal_input_btn")
: i18next.t("unseal_qr_btn")}
</button>
/>
</div>
</>
);