<Button>

src/main.tsx

@@ -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();

src/pageUtils.ts

@@ -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;

src/pages.tsx

@@ -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) => {
+  <Router
-    pageChecks(e.url, api, settings);
+    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
+    <TOTPDelete path="/secrets/totp/delete/:baseMount/:item" settings={settings} api={api} />
-      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} />

src/translations/en.js

@@ -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",

src/ui/elements/Button.tsx

@@ -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>
+    );
+  }
+}

src/ui/pages/Access/Auth/AuthHome.tsx

@@ -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
+          <Button
-            class="uk-button uk-button-small uk-button-primary"
+            text={i18next.t("common_view")}
+            color="primary"
             onClick={() => {
               onViewClick(props);
             }}
-          >
+          />
-            {i18next.t("common_view")}
-          </button>
         )}
-        <button
+        <Button
-          class="uk-button uk-button-small uk-button-primary"
+          text={i18next.t("auth_home_view_config")}
-          onClick={async () => {
+          color="primary"
-            route(authViewConfigURL(props.path));
+          route={authViewConfigURL(props.path)}
-          }}
+        />
-        >
+
-          {i18next.t("auth_home_view_config")}
+        <Button
-        </button>
+          text={i18next.t("auth_home_edit_config")}
-        <button class="uk-button uk-button-small uk-button-primary" onClick={notImplemented}>
+          color="primary"
-          {i18next.t("auth_home_edit_config")}
+          onClick={notImplemented}
-        </button>
+        />
       </div>
     </div>
   );

src/ui/pages/Access/Auth/userpass/UserPassUserDelete.tsx

@@ -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
+          <Button
-            class="uk-button uk-button-danger"
+            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>
       </>
     );

src/ui/pages/Access/Auth/userpass/UserPassUserEdit.tsx

@@ -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">
+            <Button text={i18next.t("common_edit")} color="primary" type="submit" />
-              {i18next.t("common_edit")}
-            </button>
           </MarginInline>
         </Form>
       </>

src/ui/pages/Access/Auth/userpass/UserPassUserNew.tsx

@@ -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">
+            <Button text={i18next.t("common_create")} color="primary" type="submit" />
-              {i18next.t("common_create")}
-            </button>
           </MarginInline>
         </Form>
       </>

src/ui/pages/Access/Auth/userpass/UserPassUserView.tsx

@@ -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
+            <Button
-              class="uk-button uk-button-danger"
+              text={i18next.t("common_delete")}
-              onClick={async () => {
+              color="danger"
-                route(userPassUserDeleteURL(baseMount, user));
+              route={userPassUserDeleteURL(baseMount, user)}
-              }}
+            />
-            >
+            <Button
-              {i18next.t("common_delete")}
+              text={i18next.t("common_edit")}
-            </button>
+              color="primary"
-            <button
+              route={userPassUserEditURL(baseMount, user)}
-              class="uk-button uk-button-primary"
+            />
-              onClick={async () => {
-                route(userPassUserEditURL(baseMount, user));
-              }}
-            >
-              {i18next.t("common_edit")}
-            </button>
           </p>
 
           <br />

src/ui/pages/Access/Auth/userpass/UserPassUsersList.tsx

@@ -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
+          <Margin>
-            class="uk-button uk-margin uk-button-primary"
+            <Button
-            type="submit"
+              text={i18next.t("common_new")}
-            onClick={async () => {
+              color="primary"
-              route(userPassUserNewURL(baseMount));
+              route={userPassUserNewURL(baseMount)}
-            }}
+            />
-          >
+          </Margin>
-            {i18next.t("common_new")}
-          </button>
 
           <ul>
             {...this.state.users.map((user) => (

src/ui/pages/Login.tsx

@@ -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">
+          <Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
-            {i18next.t("log_in_btn")}
-          </button>
         </MarginInline>
       </Form>
     );
@@ -83,9 +82,7 @@ export class UsernameLoginForm extends Component<DefaultPageProps> {
           />
         </Margin>
         <MarginInline>
-          <button class="uk-button uk-button-primary" type="submit">
+          <Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
-            {i18next.t("log_in_btn")}
-          </button>
         </MarginInline>
       </Form>
     );

src/ui/pages/Policies/PoliciesHome.tsx

@@ -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
+            <Button text={i18next.t("common_new")} color="primary" route={policyNewURL()} />
-              class="uk-button uk-button-primary"
-              onClick={async () => {
-                route(policyNewURL());
-              }}
-            >
-              {i18next.t("common_new")}
-            </button>
           </p>
 
           <Margin>

src/ui/pages/Policies/PolicyDelete.tsx

@@ -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
+          <Button
-            class="uk-button uk-button-danger"
+            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>
       </>
     );

src/ui/pages/Policies/PolicyEdit.tsx

@@ -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()}>
+          <Button
-            {i18next.t("common_edit")}
+            text={i18next.t("common_edit")}
-          </button>
+            color="primary"
+            onClick={() => this.editorSave()}
+          />
         </MarginInline>
       </div>
     );

src/ui/pages/Policies/PolicyNew.tsx

@@ -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">
+            <Button text={i18next.t("common_create")} color="primary" type="submit" />
-              {i18next.t("common_create")}
-            </button>
           </Form>
         </div>
       </>

src/ui/pages/Policies/PolicyView.tsx

@@ -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
+            <Button
-              class="uk-button uk-button-primary"
+              text={i18next.t("common_edit")}
-              onClick={async () => {
+              color="primary"
-                route(policyEditURL(this.state.policyName));
+              route={policyEditURL(this.state.policyName)}
-              }}
+            />
-            >
-              {i18next.t("common_edit")}
-            </button>
             {this.state.policyName !== "default" && (
-              <button
+              <Button
-                class="uk-button uk-button-danger"
+                text={i18next.t("common_delete")}
-                onClick={async () => {
+                color="danger"
-                  route(policyDeleteURL(this.state.policyName));
+                route={policyDeleteURL(this.state.policyName)}
-                }}
+              />
-              >
-                {i18next.t("common_delete")}
-              </button>
             )}
           </p>
 

src/ui/pages/PwGen.tsx

@@ -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">
+            <Button
-              {i18next.t("password_generator_generate_btn")}
+              text={i18next.t("password_generator_generate_btn")}
-            </button>
+              color="primary"
+              type="submit"
+            />
           </Margin>
         </Form>
       </>

src/ui/pages/Secrets/DeleteSecretsEngine.tsx

@@ -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">
+            <Button text={i18next.t("common_delete")} color="danger" type="submit" />
-              {i18next.t("common_delete")}
-            </button>
           </MarginInline>
         </Form>
       </>

src/ui/pages/Secrets/KeyValue/KeyValueDelete.tsx

@@ -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
+          <Button
-            class="uk-button uk-button-danger"
+            text={i18next.t("common_delete")}
+            color="danger"
             onClick={async () => {
               await this.props.api.deleteSecret(baseMount, secretPath, item, version);
-              if (version == "null") {
+              route(buttonRoute);
-                route(kvListURL(baseMount, secretPath));
-              } else {
-                route(kvViewURL(baseMount, secretPath, item, "null"));
-              }
             }}
-          >
+          />
-            {i18next.t("common_delete")}
-          </button>
         </div>
       </>
     );

src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx

@@ -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()}>
+        <Button text={i18next.t("common_edit")} color="primary" onClick={() => this.editorSave()} />
-          {i18next.t("common_edit")}
-        </button>
       </div>
     );
   }

src/ui/pages/Secrets/KeyValue/KeyValueList.tsx

@@ -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
+            <Button
-              class="uk-button uk-button-primary"
+              text={i18next.t("kv_view_new_btn")}
-              onClick={() => {
+              color="primary"
-                route(kvNewURL(baseMount, secretPath));
+              route={kvNewURL(baseMount, secretPath)}
-              }}
+            />
-            >
-              {i18next.t("kv_view_new_btn")}
-            </button>
           )}
           {secretPath.length == 0 && this.state.mountCaps.includes("delete") && (
-            <button
+            <Button
-              class="uk-button uk-button-danger"
+              text={i18next.t("kv_view_delete_btn")}
-              onClick={async () => {
+              color="danger"
-                route(delSecretsEngineURL(baseMount));
+              route={delSecretsEngineURL(baseMount)}
-              }}
+            />
-            >
-              {i18next.t("kv_view_delete_btn")}
-            </button>
           )}
         </p>
         {this.state.mountType == "cubbyhole" && <p>{i18next.t("kv_view_cubbyhole_text")}</p>}

src/ui/pages/Secrets/KeyValue/KeyValueNew.tsx

@@ -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">
+            <Button text={i18next.t("common_create")} color="primary" type="submit" />
-              {i18next.t("common_create")}
-            </button>
           </Form>
         </div>
       </>

src/ui/pages/Secrets/KeyValue/KeyValueView.tsx

@@ -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
+                <Button
-                  class="uk-button uk-button-danger"
+                  text={deleteButtonText}
-                  onClick={() => {
+                  color="danger"
-                    route(
+                  route={kvDeleteURL(
-                      kvDeleteURL(
+                    this.state.baseMount,
-                        this.state.baseMount,
+                    this.state.secretPath,
-                        this.state.secretPath,
+                    this.state.secretItem,
-                        this.state.secretItem,
+                    this.state.secretVersion,
-                        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
+              <Button
-                class="uk-button uk-button-primary"
+                text={i18next.t("common_edit")}
-                onClick={async () => {
+                color="primary"
-                  route(
+                route={kvEditURL(
-                    kvEditURL(this.state.baseMount, this.state.secretPath, this.state.secretItem),
+                  this.state.baseMount,
-                  );
+                  this.state.secretPath,
-                }}
+                  this.state.secretItem,
-              >
+                )}
-                {i18next.t("common_edit")}
+              />
-              </button>
             )}
             {!this.state.isDeleted && this.state.kvVersion == "2" && (
-              <button
+              <Button
-                class="uk-button uk-button-secondary"
+                text={i18next.t("kv_secret_versions_btn")}
-                onClick={async () => {
+                color="secondary"
-                  route(
+                route={kvVersionsURL(
-                    kvVersionsURL(
+                  this.state.baseMount,
-                      this.state.baseMount,
+                  this.state.secretPath,
-                      this.state.secretPath,
+                  this.state.secretItem,
-                      this.state.secretItem,
+                )}
-                    ),
+              />
-                  );
-                }}
-              >
-                {i18next.t("kv_secret_versions_btn")}
-              </button>
             )}
           </p>
 
@@ -178,8 +166,9 @@ export class KeyValueView extends Component<DefaultPageProps, KeyValueViewState>
           {this.state.isDeleted && (
             <>
               <p>{i18next.t("kv_secret_deleted_text")}</p>
-              <button
+              <Button
-                class="uk-button uk-button-primary"
+                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>

src/ui/pages/Secrets/NewEngines/NewKVEngine.tsx

@@ -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">
+            <Button text={i18next.t("common_create")} color="primary" type="submit" />
-              {i18next.t("common_create")}
-            </button>
           </MarginInline>
         </Form>
       </>

src/ui/pages/Secrets/NewEngines/NewTOTPEngine.tsx

@@ -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">
+            <Button text={i18next.t("common_create")} color="primary" type="submit" />
-              {i18next.t("common_create")}
-            </button>
           </MarginInline>
         </Form>
         ,

src/ui/pages/Secrets/NewEngines/NewTransitEngine.tsx

@@ -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">
+            <Button text={i18next.t("common_create")} color="primary" type="submit" />
-              {i18next.t("common_create")}
-            </button>
           </MarginInline>
         </Form>
         ,

src/ui/pages/Secrets/SecretsHome.tsx

@@ -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
+                    <Button
-                      class="uk-button uk-button-primary"
+                      text={i18next.t("secrets_home_new_secrets_engine_button")}
-                      onClick={() => {
+                      color="primary"
-                        route("/secrets/new_secrets_engine");
+                      route={"/secrets/new_secrets_engine"}
-                      }}
+                    />
-                    >
-                      {i18next.t("secrets_home_new_secrets_engine_button")}
-                    </button>
                   )}
               </p>
             </div>

src/ui/pages/Secrets/TOTP/TOTPDelete.tsx

@@ -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
+          <Button
-            class="uk-button uk-button-danger"
+            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>
       </>
     );

src/ui/pages/Secrets/TOTP/TOTPList.tsx

@@ -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
+              <Button
-                class="uk-button uk-button-danger"
+                text={i18next.t("common_delete")}
-                onClick={async () => {
+                color="danger"
-                  route("/secrets/totp/delete/" + this.props.baseMount + "/" + this.props.totpKey);
+                route={totpDeleteURL(this.props.baseMount, this.props.totpKey)}
-                }}
+              />
-              >
-                {i18next.t("common_delete")}
-              </button>
             )}
           </MarginInline>
         </div>
@@ -129,34 +131,25 @@ export class TOTPList extends Component<DefaultPageProps, TOTPListState> {
         <div>
           <p>
             {totpCaps.includes("create") && (
-              <button
+              <Button
-                class="uk-button uk-button-primary"
+                text={i18next.t("common_new")}
-                onClick={async () => {
+                color="primary"
-                  route(totpNewURL(baseMount));
+                route={totpNewURL(baseMount)}
-                }}
+              />
-              >
-                {i18next.t("common_new")}
-              </button>
             )}
             {totpCaps.includes("create") && (
-              <button
+              <Button
-                class="uk-button uk-button-primary"
+                text={i18next.t("totp_new_generated")}
-                onClick={async () => {
+                color="secondary"
-                  route(totpNewGeneratedURL(baseMount));
+                route={totpNewGeneratedURL(baseMount)}
-                }}
+              />
-              >
-                {i18next.t("totp_new_generated")}
-              </button>
             )}
             {mountCaps.includes("delete") && (
-              <button
+              <Button
-                class="uk-button uk-button-danger"
+                text={i18next.t("common_delete")}
-                onClick={async () => {
+                color="danger"
-                  route(delSecretsEngineURL(baseMount));
+                route={delSecretsEngineURL(baseMount)}
-                }}
+              />
-              >
-                {i18next.t("common_delete")}
-              </button>
             )}
           </p>
           <div id="totpList">

src/ui/pages/Secrets/TOTP/TOTPNew.tsx

@@ -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
+          <Button
-            class="uk-button uk-button-primary"
+            text={
-            type="button"
+              !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">
+          <Button text={i18next.t("common_create")} color="primary" type="submit" />
-            {i18next.t("common_create")}
-          </button>
         </MarginInline>
       </Form>
     );

src/ui/pages/Secrets/TOTP/TOTPNewGenerated.tsx

@@ -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">
+            <Button text={i18next.t("common_create")} color="primary" type="submit" />
-              {i18next.t("common_create")}
-            </button>
           </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
+          <Button
-            class="uk-button uk-button-primary"
+            text={i18next.t("common_back")}
-            onClick={async () => {
+            color="primary"
-              route("/secrets/totp/list/" + this.props.baseMount);
+            route={totpListURL(this.props.baseMount)}
-            }}
+          />
-          >
-            {i18next.t("common_back")}
-          </button>
         </>
       );
     }

src/ui/pages/Secrets/Transit/TransitDecrypt.tsx

@@ -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">
+          <Button text={i18next.t("transit_decrypt")} color="primary" type="submit" />
-            {i18next.t("transit_decrypt")}
-          </button>
           <div id="modalAttachmentPoint" />
         </Form>
       </>

src/ui/pages/Secrets/Transit/TransitEncrypt.tsx

@@ -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">
+          <Button text={i18next.t("transit_encrypt")} color="primary" type="submit" />
-            {i18next.t("transit_encrypt")}
-          </button>
           <div id="modalAttachmentPoint" />
         </Form>
       </>

src/ui/pages/Secrets/Transit/TransitList.tsx

@@ -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
+            <Button
-              class="uk-button uk-button-primary"
+              text={i18next.t("common_new")}
-              onClick={async () => {
+              color="primary"
-                route(transitNewSecretURL(baseMount));
+              route={transitNewSecretURL(baseMount)}
-              }}
+            />
-            >
-              {i18next.t("common_new")}
-            </button>
           )}
           {mountCaps.includes("delete") && (
-            <button
+            <Button
-              class="uk-button uk-button-danger"
+              text={i18next.t("common_delete")}
-              onClick={async () => {
+              color="danger"
-                route(delSecretsEngineURL(baseMount));
+              route={delSecretsEngineURL(baseMount)}
-              }}
+            />
-            >
-              {i18next.t("common_delete")}
-            </button>
           )}
         </p>
         <TransitViewListItem

src/ui/pages/Secrets/Transit/TransitNew.tsx

@@ -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">
+            <Button text={i18next.t("common_create")} color="primary" type="submit" />
-              {i18next.t("common_create")}
-            </button>
           </MarginInline>
         </Form>
       </>

src/ui/pages/Secrets/Transit/TransitRewrap.tsx

@@ -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">
+          <Button text={i18next.t("transit_rewrap")} color="primary" type="submit" />
-            {i18next.t("transit_rewrap")}
-          </button>
           <div id="modalAttachmentPoint" />
         </Form>
       </>

src/ui/pages/SetLanguage.tsx

@@ -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">
+            <Button text={i18next.t("set_language_btn")} color="primary" type="submit" />
-              {i18next.t("set_language_btn")}
-            </button>
           </MarginInline>
         </Form>
       </>

src/ui/pages/SetVaultURL.tsx

@@ -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">
+            <Button text={i18next.t("set_vault_url_set_btn")} color="primary" type="submit" />
-              Set
-            </button>
           </Margin>
         </Form>
       </>

src/ui/pages/Unseal.tsx

@@ -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">
+        <Button text={i18next.t("unseal_submit_key_btn")} color="primary" type="submit" />
-          {i18next.t("unseal_submit_key_btn")}
-        </button>
       </MarginInline>
     </Form>
   );
@@ -122,8 +121,13 @@ export class Unseal extends Component<DefaultPageProps, UnsealPageState> {
             <QRScanner onScan={(code) => this.submitKey(code)} />
           )}
 
-          <button
+          <Button
-            class="uk-button uk-button-primary"
+            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>
       </>
     );