From 634292cb8b4ae113b2586e940fc1d0356d6d8dd6 Mon Sep 17 00:00:00 2001
From: ChaotiCryptidz <chaoticryptidz@owo.monster>
Date: Sat, 22 Jan 2022 13:09:39 +0000
Subject: [PATCH] move all input things into their own files

---
 src/ui/elements/forms/Checkbox.tsx            | 17 +++++
 src/ui/elements/{ => forms}/Form.tsx          |  0
 src/ui/elements/forms/InputProps.tsx          |  9 +++
 src/ui/elements/forms/NumberInput.tsx         | 17 +++++
 src/ui/elements/forms/PasswordInput.tsx       | 17 +++++
 src/ui/elements/forms/Select.tsx              | 33 ++++++++
 src/ui/elements/forms/TextArea.tsx            | 16 ++++
 src/ui/elements/forms/TextInput.tsx           | 17 +++++
 .../Access/Auth/userpass/UserPassUserEdit.tsx | 76 +++++--------------
 .../Access/Auth/userpass/UserPassUserNew.tsx  | 24 +++---
 src/ui/pages/Login_Token.tsx                  | 16 ++--
 src/ui/pages/Login_Username.tsx               | 30 +++-----
 src/ui/pages/Policies/PolicyNew.tsx           | 13 ++--
 src/ui/pages/PwGen.tsx                        | 20 ++---
 src/ui/pages/Secrets/DeleteSecretsEngine.tsx  |  2 +-
 .../pages/Secrets/KeyValue/KeyValueEdit.tsx   | 12 +--
 .../pages/Secrets/KeyValue/KeyValueList.tsx   | 48 +++++++-----
 src/ui/pages/Secrets/KeyValue/KeyValueNew.tsx | 13 ++--
 .../pages/Secrets/KeyValue/KeyValueView.tsx   | 12 +--
 .../pages/Secrets/NewEngines/NewKVEngine.tsx  | 20 ++---
 .../Secrets/NewEngines/NewTOTPEngine.tsx      |  7 +-
 .../Secrets/NewEngines/NewTransitEngine.tsx   |  7 +-
 src/ui/pages/Secrets/TOTP/TOTPNew.tsx         | 19 ++---
 .../pages/Secrets/TOTP/TOTPNewGenerated.tsx   | 40 ++++------
 .../pages/Secrets/Transit/TransitDecrypt.tsx  | 11 ++-
 .../pages/Secrets/Transit/TransitEncrypt.tsx  | 11 ++-
 src/ui/pages/Secrets/Transit/TransitNew.tsx   | 23 +++---
 .../pages/Secrets/Transit/TransitRewrap.tsx   | 15 ++--
 src/ui/pages/SetLanguage.tsx                  | 26 ++++---
 src/ui/pages/SetVaultURL.tsx                  | 18 +++--
 src/ui/pages/Settings/GeneralSettings.tsx     | 54 ++++++-------
 src/ui/pages/Settings/KeyValueSettings.tsx    | 53 ++++++-------
 src/ui/pages/Unseal_Form.tsx                  | 26 +++----
 33 files changed, 394 insertions(+), 328 deletions(-)
 create mode 100644 src/ui/elements/forms/Checkbox.tsx
 rename src/ui/elements/{ => forms}/Form.tsx (100%)
 create mode 100644 src/ui/elements/forms/InputProps.tsx
 create mode 100644 src/ui/elements/forms/NumberInput.tsx
 create mode 100644 src/ui/elements/forms/PasswordInput.tsx
 create mode 100644 src/ui/elements/forms/Select.tsx
 create mode 100644 src/ui/elements/forms/TextArea.tsx
 create mode 100644 src/ui/elements/forms/TextInput.tsx

diff --git a/src/ui/elements/forms/Checkbox.tsx b/src/ui/elements/forms/Checkbox.tsx
new file mode 100644
index 0000000..e7b58fb
--- /dev/null
+++ b/src/ui/elements/forms/Checkbox.tsx
@@ -0,0 +1,17 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type CheckboxProps = InputProps & {
+  checkboxRef?: RefObject<HTMLInputElement>;
+}
+
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  return (
+    <input
+      class="uk-checkbox"
+      type="checkbox"
+      ref={props.checkboxRef}
+      {...props}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/ui/elements/Form.tsx b/src/ui/elements/forms/Form.tsx
similarity index 100%
rename from src/ui/elements/Form.tsx
rename to src/ui/elements/forms/Form.tsx
diff --git a/src/ui/elements/forms/InputProps.tsx b/src/ui/elements/forms/InputProps.tsx
new file mode 100644
index 0000000..fb1ce06
--- /dev/null
+++ b/src/ui/elements/forms/InputProps.tsx
@@ -0,0 +1,9 @@
+export type InputProps = {
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    onChange?: () => void;
+    required?: boolean;
+    checked?: boolean;
+    extraProps?: {};
+}
\ No newline at end of file
diff --git a/src/ui/elements/forms/NumberInput.tsx b/src/ui/elements/forms/NumberInput.tsx
new file mode 100644
index 0000000..4f6b7e0
--- /dev/null
+++ b/src/ui/elements/forms/NumberInput.tsx
@@ -0,0 +1,17 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type NumberInputProps = InputProps & {
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+export function NumberInput(props: NumberInputProps): JSX.Element {
+  return (
+    <input
+      class="uk-input uk-form-width-medium"
+      type="number"
+      ref={props.inputRef}
+      {...props}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/ui/elements/forms/PasswordInput.tsx b/src/ui/elements/forms/PasswordInput.tsx
new file mode 100644
index 0000000..6c05276
--- /dev/null
+++ b/src/ui/elements/forms/PasswordInput.tsx
@@ -0,0 +1,17 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type PasswordInputProps = InputProps & {
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+export function PasswordInput(props: PasswordInputProps): JSX.Element {
+  return (
+    <input
+      class="uk-input uk-form-width-medium"
+      type="password"
+      ref={props.inputRef}
+      {...props}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/ui/elements/forms/Select.tsx b/src/ui/elements/forms/Select.tsx
new file mode 100644
index 0000000..182d294
--- /dev/null
+++ b/src/ui/elements/forms/Select.tsx
@@ -0,0 +1,33 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type SelectProps = InputProps & {
+  selectRef?: RefObject<HTMLSelectElement>;
+  children?: JSX.Element | JSX.Element[];
+}
+
+export function Select(props: SelectProps): JSX.Element {
+  return (
+    <select
+      class="uk-select uk-form-width-medium"
+      ref={props.selectRef}
+      {...props}
+    >
+      {props.children}
+    </select>
+  )
+}
+
+type SelectOptionProps = {
+  name: string;
+  value: string;
+  selected?: boolean;
+}
+
+export function SelectOption(props: SelectOptionProps): JSX.Element {
+  return (
+    <option label={props.name} value={props.value} selected={props.selected}>
+      {props.name}
+    </option>
+  )
+}
\ No newline at end of file
diff --git a/src/ui/elements/forms/TextArea.tsx b/src/ui/elements/forms/TextArea.tsx
new file mode 100644
index 0000000..1627d32
--- /dev/null
+++ b/src/ui/elements/forms/TextArea.tsx
@@ -0,0 +1,16 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type TextInputProps = InputProps & {
+  textAreaRef?: RefObject<HTMLInputElement>;
+}
+
+export function TextArea(props: TextInputProps): JSX.Element {
+  return (
+    <textarea
+      class="uk-textarea uk-form-width-medium"
+      textAreaRef={props.textAreaRef}
+      {...props}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/ui/elements/forms/TextInput.tsx b/src/ui/elements/forms/TextInput.tsx
new file mode 100644
index 0000000..320a561
--- /dev/null
+++ b/src/ui/elements/forms/TextInput.tsx
@@ -0,0 +1,17 @@
+import { JSX, RefObject } from "preact";
+import { InputProps } from "./InputProps";
+
+type TextInputProps = InputProps & {
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+export function TextInput(props: TextInputProps): JSX.Element {
+  return (
+    <input
+      class="uk-input uk-form-width-medium"
+      type="text"
+      ref={props.inputRef}
+      {...props}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/ui/pages/Access/Auth/userpass/UserPassUserEdit.tsx b/src/ui/pages/Access/Auth/userpass/UserPassUserEdit.tsx
index 5b0eb32..59f6c3b 100644
--- a/src/ui/pages/Access/Auth/userpass/UserPassUserEdit.tsx
+++ b/src/ui/pages/Access/Auth/userpass/UserPassUserEdit.tsx
@@ -2,7 +2,7 @@ import { Button } from "../../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
 import { ErrorMessage, sendErrorNotification } from "../../../../elements/ErrorMessage";
-import { Form } from "../../../../elements/Form";
+import { Form } from "../../../../elements/forms/Form";
 import { InputWithTitle } from "../../../../elements/InputWithTitle";
 import { Margin } from "../../../../elements/Margin";
 import { MarginInline } from "../../../../elements/MarginInline";
@@ -12,6 +12,10 @@ import { route } from "preact-router";
 import { toStr } from "../../../../../utils";
 import { userPassUserViewURL } from "../../../pageLinks";
 import i18next from "i18next";
+import { PasswordInput } from "../../../../elements/forms/PasswordInput";
+import { TextInput } from "../../../../elements/forms/TextInput";
+import { NumberInput } from "../../../../elements/forms/NumberInput";
+import { Checkbox } from "../../../../elements/forms/Checkbox";
 
 const removeEmptyStrings = (arr: string[]) => arr.filter((e) => e.length > 0);
 
@@ -40,12 +44,7 @@ export class UserPassUserEdit extends Component<DefaultPageProps, { user_data: U
         <PageTitle title={i18next.t("userpass_user_edit_title")} />
         <Form onSubmit={(data) => this.onSubmit(data)}>
           <InputWithTitle title={i18next.t("common_password")}>
-            <input
-              class="uk-input uk-form-width-large"
-              name="password"
-              type="password"
-              placeholder={i18next.t("common_password")}
-            />
+            <PasswordInput name="password" />
           </InputWithTitle>
 
           <br />
@@ -55,68 +54,35 @@ export class UserPassUserEdit extends Component<DefaultPageProps, { user_data: U
           </Margin>
 
           <InputWithTitle title={i18next.t("common_cidrs")}>
-            <input
-              class="uk-input uk-form-width-large"
-              name="cidrs"
-              type="text"
-              value={user_data.token_bound_cidrs.join()}
-            />
+            <TextInput name="cidrs" value={user_data.token_bound_cidrs.join()} />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("common_exp_max_ttl")}>
-            <input
-              class="uk-input uk-form-width-large"
-              name="exp_max_ttl"
-              type="number"
-              value={toStr(user_data.token_explicit_max_ttl)}
-            />
+            <NumberInput name="exp_max_ttl" value={toStr(user_data.token_explicit_max_ttl)} />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("common_max_ttl")}>
-            <input
-              class="uk-input uk-form-width-large"
-              name="max_ttl"
-              type="number"
-              value={toStr(user_data.token_max_ttl)}
-            />
+            <NumberInput name="max_ttl" value={toStr(user_data.token_max_ttl)} />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("auth_common_default_policy_attached")}>
-            <input
-              class="uk-checkbox"
-              name="def_pol_attached"
-              type="checkbox"
-              value={toStr(user_data.token_no_default_policy)}
-            />
+            <Checkbox name="def_pol_attached" checked={user_data.token_no_default_policy} />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("auth_common_max_token_uses")}>
-            <input
-              class="uk-input uk-form-width-large"
-              name="max_uses"
-              type="number"
-              value={toStr(user_data.token_num_uses)}
-            />
+            <NumberInput name="max_uses" value={toStr(user_data.token_num_uses)} />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("auth_common_token_peroid")}>
-            <input
-              class="uk-input uk-form-width-large"
-              name="period"
-              type="number"
-              value={toStr(user_data.token_period)}
-            />
+            <NumberInput name="period" value={toStr(user_data.token_period)} />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("auth_common_policies")}>
-            <input
-              class="uk-input uk-form-width-large"
-              name="policies"
-              type="text"
-              value={user_data.token_policies.join()}
-            />
+            <TextInput name="policies" value={user_data.token_policies.join()} />
           </InputWithTitle>
+
           <InputWithTitle title={i18next.t("common_initial_ttl")}>
-            <input
-              class="uk-input uk-form-width-large"
-              name="initial_ttl"
-              type="number"
-              value={toStr(user_data.token_ttl)}
-            />
+            <NumberInput name="initial_ttl" value={toStr(user_data.token_ttl)} />
           </InputWithTitle>
 
           <Margin>
diff --git a/src/ui/pages/Access/Auth/userpass/UserPassUserNew.tsx b/src/ui/pages/Access/Auth/userpass/UserPassUserNew.tsx
index 556ccd2..45be94d 100644
--- a/src/ui/pages/Access/Auth/userpass/UserPassUserNew.tsx
+++ b/src/ui/pages/Access/Auth/userpass/UserPassUserNew.tsx
@@ -2,7 +2,7 @@ import { Button } from "../../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../../elements/ErrorMessage";
-import { Form } from "../../../../elements/Form";
+import { Form } from "../../../../elements/forms/Form";
 import { Margin } from "../../../../elements/Margin";
 import { MarginInline } from "../../../../elements/MarginInline";
 import { PageTitle } from "../../../../elements/PageTitle";
@@ -10,6 +10,9 @@ import { UserType } from "../../../../../api/types/user";
 import { route } from "preact-router";
 import { userPassUserViewURL } from "../../../pageLinks";
 import i18next from "i18next";
+import { TextInput } from "../../../../elements/forms/TextInput";
+import { InputWithTitle } from "../../../../elements/InputWithTitle";
+import { PasswordInput } from "../../../../elements/forms/PasswordInput";
 
 export class UserPassUserNew extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -20,20 +23,15 @@ export class UserPassUserNew extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("userpass_user_new_title")} />
         <Form onSubmit={(data) => this.onSubmit(data)}>
           <Margin>
-            <input
-              class="uk-input uk-form-width-large"
-              name="username"
-              type="text"
-              placeholder={i18next.t("common_username")}
-            />
+            <InputWithTitle title={i18next.t("common_username")}>
+              <TextInput name="username" />
+            </InputWithTitle>
           </Margin>
+
           <Margin>
-            <input
-              class="uk-input uk-form-width-large"
-              name="password"
-              type="password"
-              placeholder={i18next.t("common_password")}
-            />
+            <InputWithTitle title={i18next.t("common_password")}>
+              <PasswordInput name="password" />
+            </InputWithTitle>
           </Margin>
 
           <Margin>
diff --git a/src/ui/pages/Login_Token.tsx b/src/ui/pages/Login_Token.tsx
index 9d992f5..e5b8b71 100644
--- a/src/ui/pages/Login_Token.tsx
+++ b/src/ui/pages/Login_Token.tsx
@@ -2,11 +2,13 @@ import { Button } from "../elements/Button";
 import { Component, JSX, createRef } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
 import { ErrorMessage } from "../elements/ErrorMessage";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { MarginInline } from "../elements/MarginInline";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { PasswordInput } from "../elements/forms/PasswordInput";
+import { InputWithTitle } from "../elements/InputWithTitle";
 
 export class TokenLoginForm extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -15,14 +17,9 @@ export class TokenLoginForm extends Component<DefaultPageProps> {
     return (
       <Form onSubmit={(data) => this.onSubmit(data)}>
         <Margin>
-          <input
-            class="uk-input uk-form-width-medium"
-            id="tokenInput"
-            name="token"
-            type="password"
-            placeholder={i18next.t("log_in_token_input")}
-            required
-          />
+          <InputWithTitle title={i18next.t("log_in_token_input")}>
+            <PasswordInput name="token" required />
+          </InputWithTitle>
         </Margin>
 
         <Margin>
@@ -48,7 +45,6 @@ export class TokenLoginForm extends Component<DefaultPageProps> {
       route("/");
     } catch (e: unknown) {
       const error = e as Error;
-      document.querySelector("#tokenInput").classList.add("uk-form-danger");
 
       let errorMessage: string;
 
diff --git a/src/ui/pages/Login_Username.tsx b/src/ui/pages/Login_Username.tsx
index 8b0acb5..ab9495a 100644
--- a/src/ui/pages/Login_Username.tsx
+++ b/src/ui/pages/Login_Username.tsx
@@ -2,11 +2,14 @@ import { Button } from "../elements/Button";
 import { Component, JSX, createRef } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
 import { ErrorMessage } from "../elements/ErrorMessage";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { MarginInline } from "../elements/MarginInline";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../elements/forms/TextInput";
+import { PasswordInput } from "../elements/forms/PasswordInput";
+import { InputWithTitle } from "../elements/InputWithTitle";
 
 export class UsernameLoginForm extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -15,24 +18,15 @@ export class UsernameLoginForm extends Component<DefaultPageProps> {
     return (
       <Form onSubmit={(data) => this.onSubmit(data)}>
         <Margin>
-          <input
-            class="uk-input uk-form-width-medium"
-            id="usernameInput"
-            name="username"
-            type="text"
-            placeholder={i18next.t("log_in_username_input")}
-            required
-          />
+          <InputWithTitle title={i18next.t("log_in_username_input")}>
+            <TextInput name="username" required />
+          </InputWithTitle>
         </Margin>
+
         <Margin>
-          <input
-            class="uk-input uk-form-width-medium"
-            id="passwordInput"
-            name="password"
-            type="password"
-            placeholder={i18next.t("log_in_password_input")}
-            required
-          />
+          <InputWithTitle title={i18next.t("log_in_password_input")}>
+            <PasswordInput name="password" required />
+          </InputWithTitle>
         </Margin>
 
         <Margin>
@@ -58,8 +52,6 @@ export class UsernameLoginForm extends Component<DefaultPageProps> {
       route("/");
     } catch (e: unknown) {
       const error = e as Error;
-      document.querySelector("#usernameInput").classList.add("uk-form-danger");
-      document.querySelector("#passwordInput").classList.add("uk-form-danger");
       this.errorMessageRef.current.setErrorMessage(error.message);
       this.props.settings.token = previousToken;
     }
diff --git a/src/ui/pages/Policies/PolicyNew.tsx b/src/ui/pages/Policies/PolicyNew.tsx
index 85fb3c4..1aa0dd8 100644
--- a/src/ui/pages/Policies/PolicyNew.tsx
+++ b/src/ui/pages/Policies/PolicyNew.tsx
@@ -2,12 +2,14 @@ import { Button } from "../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../elements/ErrorMessage";
-import { Form } from "../../elements/Form";
+import { Form } from "../../elements/forms/Form";
 import { Margin } from "../../elements/Margin";
 import { PageTitle } from "../../elements/PageTitle";
 import { policyViewURL } from "../pageLinks";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../../elements/forms/TextInput";
+import { InputWithTitle } from "../../elements/InputWithTitle";
 
 export class PolicyNew extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -46,12 +48,9 @@ export class PolicyNew extends Component<DefaultPageProps> {
         <div>
           <Form onSubmit={async (formData) => await this.onFormSubmit(formData)}>
             <Margin>
-              <input
-                class="uk-input uk-form-width-medium"
-                name="name"
-                placeholder={i18next.t("common_name")}
-                required
-              />
+              <InputWithTitle title={i18next.t("common_name")}>
+                <TextInput name="name" required />
+              </InputWithTitle>
             </Margin>
 
             <Margin>
diff --git a/src/ui/pages/PwGen.tsx b/src/ui/pages/PwGen.tsx
index c8ad994..14eac7e 100644
--- a/src/ui/pages/PwGen.tsx
+++ b/src/ui/pages/PwGen.tsx
@@ -2,10 +2,11 @@ import { Button } from "../elements/Button";
 import { Component, JSX, createRef } from "preact";
 import { CopyableInputBox } from "../elements/CopyableInputBox";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { PageTitle } from "../elements/PageTitle";
 import i18next from "i18next";
+import { Select, SelectOption } from "../elements/forms/Select";
 
 const passwordLengthMin = 1;
 const passwordLengthMax = 64;
@@ -100,7 +101,7 @@ export class PasswordGenerator extends Component<DefaultPageProps, PasswordGener
           </Margin>
           <Margin>
             <input
-              class="uk-range uk-width-1-2"
+              class="uk-range"
               name="length"
               type="range"
               value={this.state.length}
@@ -113,17 +114,16 @@ export class PasswordGenerator extends Component<DefaultPageProps, PasswordGener
             />
           </Margin>
           <Margin>
-            <select
-              class="uk-select uk-width-1-2"
-              ref={this.alphabetSelector}
-              onInput={() => {
+            <Select
+              selectRef={this.alphabetSelector}
+              onChange={() => {
                 this.updateAlphabet();
               }}
             >
-              <option value={alphabets.SECURE}>a-z a-Z 0-9 specials</option>
-              <option value={alphabets.SMOL}>a-z 0-9</option>
-              <option value={alphabets.HEX}>A-F 1-9</option>
-            </select>
+              <SelectOption name="a-z a-Z 0-9 specials" value={alphabets.SECURE} />
+              <SelectOption name="a-z 0-9" value={alphabets.SMOL} />
+              <SelectOption name="A-F 1-9" value={alphabets.HEX} />
+            </Select>
           </Margin>
 
           <CopyableInputBox
diff --git a/src/ui/pages/Secrets/DeleteSecretsEngine.tsx b/src/ui/pages/Secrets/DeleteSecretsEngine.tsx
index 21f8162..9dc78e4 100644
--- a/src/ui/pages/Secrets/DeleteSecretsEngine.tsx
+++ b/src/ui/pages/Secrets/DeleteSecretsEngine.tsx
@@ -2,7 +2,7 @@ import { Button } from "../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../elements/ErrorMessage";
-import { Form } from "../../elements/Form";
+import { Form } from "../../elements/forms/Form";
 import { Margin } from "../../elements/Margin";
 import { MarginInline } from "../../elements/MarginInline";
 import { PageTitle } from "../../elements/PageTitle";
diff --git a/src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx b/src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx
index 4e23b32..7045608 100644
--- a/src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx
+++ b/src/ui/pages/Secrets/KeyValue/KeyValueEdit.tsx
@@ -14,6 +14,7 @@ import {
 } from "../../../../utils/dataInterchange";
 import { sortedObjectMap } from "../../../../utils";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../../elements/forms/Select";
 
 export type KVEditProps = DefaultPageProps & {
   baseMount: string;
@@ -112,23 +113,22 @@ export class KVEditor extends Component<KVEditProps, KVEditState> {
     return (
       <div>
         <InputWithTitle title={i18next.t("kv_sec_edit_syntax")}>
-          <select
-            ref={this.syntaxSelectRef}
-            class="uk-select uk-form-width-medium"
+          <Select
+            selectRef={this.syntaxSelectRef}
             onChange={() => {
               this.setState({ syntax: this.syntaxSelectRef.current.value });
             }}
           >
             {SupportedLanguages.map((lang) => {
               return (
-                <option
-                  label={lang.readable}
+                <SelectOption
+                  name={lang.readable}
                   value={lang.name}
                   selected={this.props.settings.kvEditorDefaultLanguage == lang.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
 
         <Margin>
diff --git a/src/ui/pages/Secrets/KeyValue/KeyValueList.tsx b/src/ui/pages/Secrets/KeyValue/KeyValueList.tsx
index 7933afa..11e7def 100644
--- a/src/ui/pages/Secrets/KeyValue/KeyValueList.tsx
+++ b/src/ui/pages/Secrets/KeyValue/KeyValueList.tsx
@@ -7,6 +7,8 @@ import { delSecretsEngineURL, kvListURL, kvNewURL, kvViewURL } from "../../pageL
 import { route } from "preact-router";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { Margin } from "../../../elements/Margin";
 
 export type KVKeysListProps = DefaultPageProps & {
   baseMount: string;
@@ -95,7 +97,7 @@ export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
     }
   }
 
-  searchBarRef = createRef();
+  searchBarRef = createRef<HTMLInputElement>();
 
   render(): JSX.Element {
     if (!this.state.dataLoaded) {
@@ -108,28 +110,32 @@ export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
 
     return (
       <>
-        <input
-          ref={this.searchBarRef}
-          class="uk-input uk-form-width-medium uk-margin-bottom"
-          name="path"
-          placeholder={i18next.t("kv_view_search_input_text")}
-          onInput={async () => {
-            this.setState({
-              searchQuery: (this.searchBarRef.current as unknown as HTMLInputElement).value,
-            });
-          }}
-        />
+        <Margin>
+          <TextInput
+            inputRef={this.searchBarRef}
+            name="path"
+            placeholder={i18next.t("kv_view_search_input_text")}
+            onChange={async () => {
+              this.setState({
+                searchQuery: this.searchBarRef.current.value,
+              });
+            }}
+          />
+        </Margin>
+
         <br />
 
-        <ul class="uk-nav uk-nav-default">
-          {...((): JSX.Element[] => {
-            let secrets: string[] = this.state.keys;
-            if (this.state.searchQuery.length > 0) {
-              secrets = secrets.filter((secret) => secret.includes(this.state.searchQuery));
-            }
-            return SecretsList(this.props.baseMount, this.props.secretPath, secrets);
-          })()}
-        </ul>
+        <Margin>
+          <ul class="uk-nav uk-nav-default">
+            {...((): JSX.Element[] => {
+              let secrets: string[] = this.state.keys;
+              if (this.state.searchQuery.length > 0) {
+                secrets = secrets.filter((secret) => secret.includes(this.state.searchQuery));
+              }
+              return SecretsList(this.props.baseMount, this.props.secretPath, secrets);
+            })()}
+          </ul>
+        </Margin>
       </>
     );
   }
diff --git a/src/ui/pages/Secrets/KeyValue/KeyValueNew.tsx b/src/ui/pages/Secrets/KeyValue/KeyValueNew.tsx
index 2d074ba..f3ae71f 100644
--- a/src/ui/pages/Secrets/KeyValue/KeyValueNew.tsx
+++ b/src/ui/pages/Secrets/KeyValue/KeyValueNew.tsx
@@ -2,12 +2,14 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { kvViewURL } from "../../pageLinks";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
 
 export class KeyValueNew extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -55,12 +57,9 @@ export class KeyValueNew extends Component<DefaultPageProps> {
             }
           >
             <Margin>
-              <input
-                class="uk-input uk-form-width-medium"
-                name="path"
-                placeholder={i18next.t("kv_new_path")}
-                required
-              />
+              <InputWithTitle title={i18next.t("kv_new_path")}>
+                <TextInput name="path" required />
+              </InputWithTitle>
             </Margin>
 
             <Margin>
diff --git a/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx b/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
index 2529859..18ff254 100644
--- a/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
+++ b/src/ui/pages/Secrets/KeyValue/KeyValueView.tsx
@@ -12,6 +12,7 @@ import { kvDeleteURL, kvEditURL, kvVersionsURL } from "../../pageLinks";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
 import { sortedObjectMap } from "../../../../utils";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../../elements/forms/Select";
 
 type KVSecretViewDataProps = DefaultPageProps & { data: Map<string, unknown> };
 
@@ -24,23 +25,22 @@ export class KVSecretCodeVew extends Component<KVSecretViewDataProps, { syntax:
     return (
       <>
         <InputWithTitle title={i18next.t("kv_secret_syntax")}>
-          <select
-            ref={this.syntaxSelectRef}
-            class="uk-select uk-form-width-medium"
+          <Select
+            selectRef={this.syntaxSelectRef}
             onChange={() => {
               this.setState({ syntax: this.syntaxSelectRef.current.value });
             }}
           >
             {SupportedLanguages.map((lang) => {
               return (
-                <option
-                  label={lang.readable}
+                <SelectOption
+                  name={lang.readable}
                   value={lang.name}
                   selected={this.props.settings.kvViewDefaultLanguage == lang.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
         <CodeBlock language={toPrismCode(syntax)} code={codeData} />
       </>
diff --git a/src/ui/pages/Secrets/NewEngines/NewKVEngine.tsx b/src/ui/pages/Secrets/NewEngines/NewKVEngine.tsx
index f6dc189..5d4c7b0 100644
--- a/src/ui/pages/Secrets/NewEngines/NewKVEngine.tsx
+++ b/src/ui/pages/Secrets/NewEngines/NewKVEngine.tsx
@@ -2,13 +2,15 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { PageTitle } from "../../../elements/PageTitle";
 import { kvListURL } from "../../pageLinks";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../../elements/forms/Select";
+import { TextInput } from "../../../elements/forms/TextInput";
 
 export class NewKVEngine extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -19,23 +21,17 @@ export class NewKVEngine extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("new_kv_engine_title")} />
         <Form onSubmit={(data) => this.submit(data)}>
           <Margin>
-            <input
-              class="uk-input uk-form-width-medium"
+            <TextInput
               name="name"
-              type="text"
               placeholder={i18next.t("common_name")}
               required
             />
           </Margin>
           <Margin>
-            <select class="uk-input uk-form-width-medium" name="version">
-              <option label={i18next.t("new_kv_engine_version_2")} value="2">
-                {i18next.t("new_kv_engine_version_2")}
-              </option>
-              <option label={i18next.t("new_kv_engine_version_1")} value="1">
-                {i18next.t("new_kv_engine_version_1")}
-              </option>
-            </select>
+            <Select name="version">
+              <SelectOption name={i18next.t("new_kv_engine_version_2")} value="2" />
+              <SelectOption name={i18next.t("new_kv_engine_version_1")} value="1" />
+            </Select>
           </Margin>
 
           <Margin>
diff --git a/src/ui/pages/Secrets/NewEngines/NewTOTPEngine.tsx b/src/ui/pages/Secrets/NewEngines/NewTOTPEngine.tsx
index aa19448..f1b33bc 100644
--- a/src/ui/pages/Secrets/NewEngines/NewTOTPEngine.tsx
+++ b/src/ui/pages/Secrets/NewEngines/NewTOTPEngine.tsx
@@ -2,13 +2,14 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { PageTitle } from "../../../elements/PageTitle";
 import { route } from "preact-router";
 import { totpListURL } from "../../pageLinks";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
 
 export class NewTOTPEngine extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -19,10 +20,8 @@ export class NewTOTPEngine extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("new_totp_engine_title")} />
         <Form onSubmit={(data) => this.submit(data)}>
           <Margin>
-            <input
-              class="uk-input uk-form-width-medium"
+            <TextInput
               name="name"
-              type="text"
               placeholder={i18next.t("common_name")}
               required
             />
diff --git a/src/ui/pages/Secrets/NewEngines/NewTransitEngine.tsx b/src/ui/pages/Secrets/NewEngines/NewTransitEngine.tsx
index 091e559..d00c26f 100644
--- a/src/ui/pages/Secrets/NewEngines/NewTransitEngine.tsx
+++ b/src/ui/pages/Secrets/NewEngines/NewTransitEngine.tsx
@@ -2,12 +2,13 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { PageTitle } from "../../../elements/PageTitle";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
 
 export class NewTransitEngine extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -18,10 +19,8 @@ export class NewTransitEngine extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("new_transit_engine_title")} />
         <Form onSubmit={(data) => this.submit(data)}>
           <Margin>
-            <input
-              class="uk-input uk-form-width-medium"
+            <TextInput
               name="name"
-              type="text"
               placeholder={i18next.t("common_name")}
               required
             />
diff --git a/src/ui/pages/Secrets/TOTP/TOTPNew.tsx b/src/ui/pages/Secrets/TOTP/TOTPNew.tsx
index f80baf6..8f4dacd 100644
--- a/src/ui/pages/Secrets/TOTP/TOTPNew.tsx
+++ b/src/ui/pages/Secrets/TOTP/TOTPNew.tsx
@@ -2,13 +2,14 @@ import { Button } from "../../../elements/Button";
 import { Component, JSX, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { QRScanner } from "../../../elements/QRScanner";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
 
 function replaceAll(str: string, replace: string, replaceWith: string): string {
   return str.replace(new RegExp(replace, "g"), replaceWith);
@@ -55,11 +56,9 @@ export class TOTPNewForm extends Component<
     return (
       <Form onSubmit={(data) => this.onSubmit(data)}>
         <Margin>
-          <input
-            ref={this.nameInputRef}
-            class="uk-input uk-form-width-medium"
+          <TextInput
+            inputRef={this.nameInputRef}
             name="name"
-            type="text"
             placeholder={i18next.t("common_name")}
             required
           />
@@ -70,21 +69,15 @@ export class TOTPNewForm extends Component<
         {!this.state.qrMode && (
           <>
             <Margin>
-              <input
-                class="uk-input uk-form-width-medium"
+              <TextInput
                 name="key"
-                type="text"
-                hidden={this.state.qrMode}
                 placeholder={i18next.t("totp_new_key_input")}
               />
             </Margin>
 
             <Margin>
-              <input
-                class="uk-input uk-form-width-medium"
+              <TextInput
                 name="uri"
-                type="text"
-                hidden={this.state.qrMode}
                 placeholder={i18next.t("totp_new_uri_input")}
               />
             </Margin>
diff --git a/src/ui/pages/Secrets/TOTP/TOTPNewGenerated.tsx b/src/ui/pages/Secrets/TOTP/TOTPNewGenerated.tsx
index 0b9f7de..1353d88 100644
--- a/src/ui/pages/Secrets/TOTP/TOTPNewGenerated.tsx
+++ b/src/ui/pages/Secrets/TOTP/TOTPNewGenerated.tsx
@@ -3,7 +3,7 @@ import { Component, JSX, createRef } from "preact";
 import { CopyableInputBox } from "../../../elements/CopyableInputBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { InputWithTitle } from "../../../elements/InputWithTitle";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
@@ -12,6 +12,10 @@ import { SecretTitleElement } from "../SecretTitleElement";
 import { route } from "preact-router";
 import { totpListURL } from "../../pageLinks";
 import i18next from "i18next";
+import { NumberInput } from "../../../elements/forms/NumberInput";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { Checkbox } from "../../../elements/forms/Checkbox";
+import { Select, SelectOption, } from "../../../elements/forms/Select";
 
 export class TOTPNewGeneratedForm extends Component<
   { baseMount: string } & DefaultPageProps,
@@ -26,10 +30,8 @@ export class TOTPNewGeneratedForm extends Component<
         <Form onSubmit={(data) => this.onSubmit(data)}>
           <Margin>
             <InputWithTitle title={i18next.t("common_name")}>
-              <input
-                class="uk-input uk-form-width-medium"
+              <TextInput
                 name="name"
-                type="text"
                 placeholder={i18next.t("common_name")}
                 required
               />
@@ -38,59 +40,47 @@ export class TOTPNewGeneratedForm extends Component<
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_issuer")}>
-              <input class="uk-input uk-form-width-medium" name="issuer" type="text" required />
+              <TextInput name="issuer" required />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_account_name")}>
-              <input
-                class="uk-input uk-form-width-medium"
-                name="account_name"
-                type="text"
-                required
-              />
+              <TextInput name="account_name" required />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_algorithm")}>
-              <select class="uk-select uk-form-width-medium" name="algorithm">
+              <Select name="algorithm">
                 {["SHA512", "SHA256", "SHA1"].map((type) => (
-                  <option label={type} value={type}>
-                    {type}
-                  </option>
+                  <SelectOption name={type} value={type} />
                 ))}
-              </select>
+              </Select>
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_key_size")}>
-              <input
-                class="uk-input uk-form-width-medium"
-                name="key_size"
-                type="number"
-                value="20"
-              />
+              <NumberInput name="key_size" value="20" />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_period")}>
-              <input class="uk-input uk-form-width-medium" name="period" type="text" value="30s" />
+              <TextInput name="period" value="30s" />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_digits")}>
-              <input class="uk-input uk-form-width-medium" name="digits" type="number" value="6" />
+              <NumberInput name="digits" value="6" />
             </InputWithTitle>
           </Margin>
 
           <Margin>
             <InputWithTitle title={i18next.t("totp_new_generated_export")}>
-              <input class="uk-checkbox" name="exported" type="checkbox" value="yes" checked />
+              <Checkbox name="exported" checked />
             </InputWithTitle>
           </Margin>
 
diff --git a/src/ui/pages/Secrets/Transit/TransitDecrypt.tsx b/src/ui/pages/Secrets/Transit/TransitDecrypt.tsx
index 40e6fed..5967b2f 100644
--- a/src/ui/pages/Secrets/Transit/TransitDecrypt.tsx
+++ b/src/ui/pages/Secrets/Transit/TransitDecrypt.tsx
@@ -4,12 +4,14 @@ import { CopyableBox } from "../../../elements/CopyableBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
 import { FileUploadInput } from "../../../elements/FileUploadInput";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { InputWithTitle } from "../../../elements/InputWithTitle";
 import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { fileToBase64 } from "../../../../utils/fileToBase64";
 import i18next from "i18next";
+import { Checkbox } from "../../../elements/forms/Checkbox";
+import { TextArea } from "../../../elements/forms/TextArea";
 
 export class TransitDecrypt extends Component<DefaultPageProps, { plaintext: string }> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -33,17 +35,18 @@ export class TransitDecrypt extends Component<DefaultPageProps, { plaintext: str
           {title}
           <Form onSubmit={async (data) => await this.onSubmit(data)}>
             <Margin>
-              <textarea
-                class="uk-textarea uk-form-width-medium"
+              <TextArea
                 name="ciphertext"
                 placeholder={i18next.t("transit_decrypt_input_placeholder")}
               />
             </Margin>
+
             <Margin>
               <FileUploadInput name="ciphertext_file" />
             </Margin>
+
             <InputWithTitle title={i18next.t("transit_decrypt_decode_checkbox")}>
-              <input class="uk-checkbox" name="decodeBase64Checkbox" type="checkbox" />
+              <Checkbox name="decodeBase64Checkbox" />
             </InputWithTitle>
 
             <Margin>
diff --git a/src/ui/pages/Secrets/Transit/TransitEncrypt.tsx b/src/ui/pages/Secrets/Transit/TransitEncrypt.tsx
index f87285c..7796ee7 100644
--- a/src/ui/pages/Secrets/Transit/TransitEncrypt.tsx
+++ b/src/ui/pages/Secrets/Transit/TransitEncrypt.tsx
@@ -4,12 +4,14 @@ import { CopyableBox } from "../../../elements/CopyableBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
 import { FileUploadInput } from "../../../elements/FileUploadInput";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { InputWithTitle } from "../../../elements/InputWithTitle";
 import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { fileToBase64 } from "../../../../utils/fileToBase64";
 import i18next from "i18next";
+import { Checkbox } from "../../../elements/forms/Checkbox";
+import { TextArea } from "../../../elements/forms/TextArea";
 
 export class TransitEncrypt extends Component<DefaultPageProps, { ciphertext: string }> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -33,17 +35,18 @@ export class TransitEncrypt extends Component<DefaultPageProps, { ciphertext: st
           {title}
           <Form onSubmit={async (data) => await this.onSubmit(data)}>
             <Margin>
-              <textarea
-                class="uk-textarea uk-form-width-medium"
+              <TextArea
                 name="plaintext"
                 placeholder={i18next.t("transit_encrypt_input_placeholder")}
               />
             </Margin>
+
             <Margin>
               <FileUploadInput name="plaintext_file" />
             </Margin>
+
             <InputWithTitle title={i18next.t("transit_encrypt_already_encoded_checkbox")}>
-              <input class="uk-checkbox" name="base64Checkbox" type="checkbox" />
+              <Checkbox name="base64Checkbox" />
             </InputWithTitle>
 
             <Margin>
diff --git a/src/ui/pages/Secrets/Transit/TransitNew.tsx b/src/ui/pages/Secrets/Transit/TransitNew.tsx
index 689a59c..68e5222 100644
--- a/src/ui/pages/Secrets/Transit/TransitNew.tsx
+++ b/src/ui/pages/Secrets/Transit/TransitNew.tsx
@@ -2,13 +2,16 @@ import { Button } from "../../../elements/Button";
 import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { route } from "preact-router";
 import { transitViewSecretURL } from "../../pageLinks";
 import i18next from "i18next";
+import { TextInput } from "../../../elements/forms/TextInput";
+import { InputWithTitle } from "../../../elements/InputWithTitle";
+import { Select, SelectOption } from "../../../elements/forms/Select";
 
 export class TransitNew extends Component<DefaultPageProps> {
   errorMessageRef = createRef<ErrorMessage>();
@@ -29,16 +32,12 @@ export class TransitNew extends Component<DefaultPageProps> {
           }}
         >
           <Margin>
-            <input
-              class="uk-input uk-form-width-medium"
-              name="name"
-              placeholder={i18next.t("common_name")}
-              type="text"
-              required
-            />
+            <InputWithTitle title={i18next.t("common_name")}>
+              <TextInput name="name" required />
+            </InputWithTitle>
           </Margin>
           <Margin>
-            <select class="uk-select uk-form-width-medium" name="type">
+            <Select name="type">
               {[
                 "aes128-gcm96",
                 "aes256-gcm96",
@@ -51,11 +50,9 @@ export class TransitNew extends Component<DefaultPageProps> {
                 "rsa-3072",
                 "rsa-4096",
               ].map((type) => (
-                <option label={type} value={type}>
-                  {type}
-                </option>
+                <SelectOption name={type} value={type} />
               ))}
-            </select>
+            </Select>
           </Margin>
 
           <Margin>
diff --git a/src/ui/pages/Secrets/Transit/TransitRewrap.tsx b/src/ui/pages/Secrets/Transit/TransitRewrap.tsx
index 4584abf..dd386a1 100644
--- a/src/ui/pages/Secrets/Transit/TransitRewrap.tsx
+++ b/src/ui/pages/Secrets/Transit/TransitRewrap.tsx
@@ -3,12 +3,14 @@ import { Component, createRef } from "preact";
 import { CopyableBox } from "../../../elements/CopyableBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { ErrorMessage, sendErrorNotification } from "../../../elements/ErrorMessage";
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/forms/Form";
 import { Margin } from "../../../elements/Margin";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { TransitKeyType } from "../../../../api/types/transit";
 import { objectToMap } from "../../../../utils";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../../elements/forms/Select";
+import { TextArea } from "../../../elements/forms/TextArea";
 
 type versionOption = { version: string; label: string };
 
@@ -75,17 +77,14 @@ export class TransitRewrap extends Component<DefaultPageProps, TransitRewrapStat
           {title}
           <Form onSubmit={async (data) => await this.onSubmit(data)}>
             <Margin>
-              <select class="uk-select uk-width-1-2" name="version">
+              <Select name="version">
                 {options.map((option) => (
-                  <option label={option.label} value={option.version}>
-                    {option.label}
-                  </option>
+                  <SelectOption name={option.label} value={option.version} />
                 ))}
-              </select>
+              </Select>
             </Margin>
             <Margin>
-              <textarea
-                class="uk-textarea uk-width-1-2"
+              <TextArea
                 name="ciphertext"
                 placeholder={i18next.t("transit_rewrap_input_placeholder")}
               />
diff --git a/src/ui/pages/SetLanguage.tsx b/src/ui/pages/SetLanguage.tsx
index ece47bb..8530d02 100644
--- a/src/ui/pages/SetLanguage.tsx
+++ b/src/ui/pages/SetLanguage.tsx
@@ -5,13 +5,14 @@ import translations from "../../translations/index.mjs";
 import { Button } from "../elements/Button";
 import { Component } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { MarginInline } from "../elements/MarginInline";
 import { PageTitle } from "../elements/PageTitle";
 import { getTranslationCompletePercentage } from "../../utils/translationUtils";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { Select, SelectOption } from "../elements/forms/Select.js";
 
 export class SetLanguage extends Component<DefaultPageProps> {
   render() {
@@ -20,15 +21,20 @@ export class SetLanguage extends Component<DefaultPageProps> {
         <PageTitle title={i18next.t("set_language_title")} />
         <Form onSubmit={(data) => this.onSubmit(data)}>
           <Margin>
-            <select class="uk-select uk-form-width-large" name="language">
-              {Object.getOwnPropertyNames(translations).map((languageID) => (
-                <option value={languageID} selected={this.props.settings.language == languageID}>
-                  {i18next.getFixedT(languageID, null)("language_name") +
-                    " " +
-                    ("(" + getTranslationCompletePercentage(languageID) + ")")}
-                </option>
-              ))}
-            </select>
+            <Select name="language">
+              {Object.getOwnPropertyNames(translations).map((languageID) => {
+                let languageName = i18next.getFixedT(languageID, null)("language_name");
+                let languageCompletionPercent = getTranslationCompletePercentage(languageID);
+                let name = `${languageName} (${languageCompletionPercent})`
+                return (
+                  <SelectOption
+                    name={name}
+                    value={languageID}
+                    selected={this.props.settings.language == languageID}
+                  />
+                );
+              })}
+            </Select>
           </Margin>
           <p class="uk-text-danger" id="errorText" />
           <MarginInline>
diff --git a/src/ui/pages/SetVaultURL.tsx b/src/ui/pages/SetVaultURL.tsx
index dde57ac..23f3a2d 100644
--- a/src/ui/pages/SetVaultURL.tsx
+++ b/src/ui/pages/SetVaultURL.tsx
@@ -1,11 +1,13 @@
 import { Button } from "../elements/Button";
 import { Component } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { Margin } from "../elements/Margin";
 import { PageTitle } from "../elements/PageTitle";
 import { route } from "preact-router";
 import i18next from "i18next";
+import { TextInput } from "../elements/forms/TextInput";
+import { InputWithTitle } from "../elements/InputWithTitle";
 
 export class SetVaultURL extends Component<DefaultPageProps> {
   render() {
@@ -14,13 +16,13 @@ export class SetVaultURL extends Component<DefaultPageProps> {
         <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={i18next.t("set_vault_url_placeholder")}
-              required
-            />
+            <InputWithTitle title={i18next.t("set_vault_url_placeholder")}>
+              <TextInput
+                name="vaultURL"
+                placeholder={i18next.t("set_vault_url_placeholder")}
+                required
+              />
+            </InputWithTitle>
           </Margin>
 
           <Margin>
diff --git a/src/ui/pages/Settings/GeneralSettings.tsx b/src/ui/pages/Settings/GeneralSettings.tsx
index bb63126..8fcb288 100644
--- a/src/ui/pages/Settings/GeneralSettings.tsx
+++ b/src/ui/pages/Settings/GeneralSettings.tsx
@@ -7,6 +7,8 @@ import i18next from "i18next";
 import { getTranslationCompletePercentage } from "../../../utils/translationUtils";
 import { settingsSavedNotification } from "./Settings";
 import translations from "../../../translations/index.mjs";
+import { Select, SelectOption } from "../../elements/forms/Select";
+import { TextInput } from "../../elements/forms/TextInput";
 
 const Themes = [
   { name: "dark", readable: "Dark" },
@@ -25,9 +27,8 @@ export class GeneralSettings extends Component<DefaultPageProps> {
         <h4>{i18next.t("settings_general_title")}</h4>
 
         <InputWithTitle title={i18next.t("settings_general_theme")}>
-          <select
-            ref={this.themeSelectRef}
-            class="uk-select uk-form-width-medium"
+          <Select
+            selectRef={this.themeSelectRef}
             onChange={() => {
               const newTheme = this.themeSelectRef.current.value;
               this.props.settings.theme = newTheme;
@@ -36,20 +37,18 @@ export class GeneralSettings extends Component<DefaultPageProps> {
           >
             {Themes.map((theme) => {
               return (
-                <option
-                  label={theme.readable}
+                <SelectOption
+                  name={theme.readable}
                   value={theme.name}
                   selected={this.props.settings.theme == theme.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
 
         <InputWithTitle title={i18next.t("settings_general_vault_url")}>
-          <input
-            ref={this.vaultURLInputRef}
-            class="uk-input uk-form-width-medium"
+          <TextInput
             value={this.props.settings.apiURL}
             onChange={() => {
               // TODO: check for api health to see if is valid api url.
@@ -60,9 +59,8 @@ export class GeneralSettings extends Component<DefaultPageProps> {
         </InputWithTitle>
 
         <InputWithTitle title={i18next.t("settings_general_language")}>
-          <select
-            ref={this.languageSelectRef}
-            class="uk-select uk-form-width-medium"
+          <Select
+            selectRef={this.languageSelectRef}
             onChange={async () => {
               const language = this.languageSelectRef.current.value;
               this.props.settings.language = language;
@@ -73,20 +71,24 @@ export class GeneralSettings extends Component<DefaultPageProps> {
               settingsSavedNotification();
             }}
           >
-            {Object.getOwnPropertyNames(translations).map((languageID) => (
-              <option value={languageID} selected={this.props.settings.language == languageID}>
-                {i18next.getFixedT(languageID, null)("language_name") +
-                  " " +
-                  ("(" + getTranslationCompletePercentage(languageID) + ")")}
-              </option>
-            ))}
-          </select>
+            {Object.getOwnPropertyNames(translations).map((languageID) => {
+              let languageName = i18next.getFixedT(languageID, null)("language_name");
+              let languageCompletionPercent = getTranslationCompletePercentage(languageID);
+              let name = `${languageName} (${languageCompletionPercent})`
+              return (
+                <SelectOption
+                  name={name}
+                  value={languageID}
+                  selected={this.props.settings.language == languageID}
+                />
+              );
+            })}
+          </Select>
         </InputWithTitle>
 
         <InputWithTitle title={i18next.t("settings_general_page_direction")}>
-          <select
-            ref={this.pageDirectionRef}
-            class="uk-select uk-form-width-medium"
+          <Select
+            selectRef={this.pageDirectionRef}
             onChange={() => {
               this.props.settings.pageDirection = this.pageDirectionRef.current.value;
               document.documentElement.dir = this.props.settings.pageDirection;
@@ -98,14 +100,14 @@ export class GeneralSettings extends Component<DefaultPageProps> {
               { name: "rtl", readable: i18next.t("settings_general_page_direction_rtl") },
             ].map((direction) => {
               return (
-                <option
-                  label={direction.readable}
+                <SelectOption
+                  name={direction.readable}
                   value={direction.name}
                   selected={this.props.settings.pageDirection == direction.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
       </div>
     );
diff --git a/src/ui/pages/Settings/KeyValueSettings.tsx b/src/ui/pages/Settings/KeyValueSettings.tsx
index 4cb5c75..dfea395 100644
--- a/src/ui/pages/Settings/KeyValueSettings.tsx
+++ b/src/ui/pages/Settings/KeyValueSettings.tsx
@@ -4,6 +4,10 @@ import { InputWithTitle } from "../../elements/InputWithTitle";
 import { SupportedLanguages } from "../../../utils/dataInterchange";
 import { settingsSavedNotification } from "./Settings";
 import i18next from "i18next";
+import { Select, SelectOption } from "../../elements/forms/Select";
+import { NumberInput } from "../../elements/forms/NumberInput";
+import { Checkbox } from "../../elements/forms/Checkbox";
+import { TextInput } from "../../elements/forms/TextInput";
 
 export class KeyValueViewSettings extends Component<DefaultPageProps> {
   viewSyntaxSelectRef = createRef<HTMLSelectElement>();
@@ -13,9 +17,8 @@ export class KeyValueViewSettings extends Component<DefaultPageProps> {
       <div>
         {/* KV View Language */}
         <InputWithTitle title={i18next.t("settings_kv_default_view_language")}>
-          <select
-            ref={this.viewSyntaxSelectRef}
-            class="uk-select uk-form-width-medium"
+          <Select
+            selectRef={this.viewSyntaxSelectRef}
             onChange={() => {
               this.props.settings.kvViewDefaultLanguage = this.viewSyntaxSelectRef.current.value;
               settingsSavedNotification();
@@ -23,23 +26,21 @@ export class KeyValueViewSettings extends Component<DefaultPageProps> {
           >
             {SupportedLanguages.map((lang) => {
               return (
-                <option
-                  label={lang.readable}
+                <SelectOption
+                  name={lang.readable}
                   value={lang.name}
                   selected={this.props.settings.kvViewDefaultLanguage == lang.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
 
         {/* KV View Indent */}
         <InputWithTitle title={i18next.t("settings_kv_view_indent")}>
-          <input
-            ref={this.viewIndentInputRef}
-            class="uk-input uk-form-width-medium"
-            type="number"
-            value={this.props.settings.kvViewIndent}
+          <NumberInput
+            inputRef={this.viewIndentInputRef}
+            value={String(this.props.settings.kvViewIndent).toString()}
             onChange={() => {
               const value = this.viewIndentInputRef.current.value;
               const indent = parseInt(value);
@@ -61,9 +62,8 @@ export class KeyValueEditorSettings extends Component<DefaultPageProps> {
       <div>
         {/* KV Editor Language */}
         <InputWithTitle title={i18next.t("settings_kv_default_editor_language")}>
-          <select
-            ref={this.editorSyntaxSelectRef}
-            class="uk-select uk-form-width-medium"
+          <Select
+            selectRef={this.editorSyntaxSelectRef}
             onChange={() => {
               this.props.settings.kvEditorDefaultLanguage =
                 this.editorSyntaxSelectRef.current.value;
@@ -72,23 +72,21 @@ export class KeyValueEditorSettings extends Component<DefaultPageProps> {
           >
             {SupportedLanguages.map((lang) => {
               return (
-                <option
-                  label={lang.readable}
+                <SelectOption
+                  name={lang.readable}
                   value={lang.name}
                   selected={this.props.settings.kvEditorDefaultLanguage == lang.name}
                 />
               );
             })}
-          </select>
+          </Select>
         </InputWithTitle>
 
         {/* KV Editor Indent */}
         <InputWithTitle title={i18next.t("settings_kv_editor_indent")}>
-          <input
-            ref={this.editorIndentInputRef}
-            class="uk-input uk-form-width-medium"
-            type="number"
-            value={this.props.settings.kvEditorIndent}
+          <NumberInput
+            inputRef={this.editorIndentInputRef}
+            value={String(this.props.settings.kvEditorIndent).toString()}
             onChange={() => {
               const value = this.editorIndentInputRef.current.value;
               const indent = parseInt(value);
@@ -116,10 +114,8 @@ export class KeyValueSettings extends Component<DefaultPageProps> {
 
         {/* Always view in code mode */}
         <InputWithTitle title={i18next.t("settings_kv_always_view_in_code_mode")}>
-          <input
-            ref={this.codeModeToggleRef}
-            class="uk-checkbox"
-            type="checkbox"
+          <Checkbox
+            checkboxRef={this.codeModeToggleRef}
             checked={this.props.settings.kvAlwaysCodeView}
             onChange={() => {
               const value = this.codeModeToggleRef.current.checked;
@@ -131,9 +127,8 @@ export class KeyValueSettings extends Component<DefaultPageProps> {
 
         {/* hide values on keys */}
         <InputWithTitle title={i18next.t("settings_kv_hide_values")}>
-          <input
-            ref={this.hideKeysRef}
-            class="uk-input"
+          <TextInput
+            inputRef={this.hideKeysRef}
             value={this.props.settings.kvHideKeyValues.join(",")}
             onChange={() => {
               const value = this.hideKeysRef.current.value;
diff --git a/src/ui/pages/Unseal_Form.tsx b/src/ui/pages/Unseal_Form.tsx
index 9aba36b..95cde47 100644
--- a/src/ui/pages/Unseal_Form.tsx
+++ b/src/ui/pages/Unseal_Form.tsx
@@ -1,8 +1,10 @@
 import { Button } from "../elements/Button";
-import { Form } from "../elements/Form";
+import { Form } from "../elements/forms/Form";
 import { JSX } from "preact/jsx-runtime";
 import { MarginInline } from "../elements/MarginInline";
 import i18next from "i18next";
+import { PasswordInput } from "../elements/forms/PasswordInput";
+import { InputWithTitle } from "../elements/InputWithTitle";
 
 type FormUnsealProps = {
   onKeySubmit: (key: string) => void;
@@ -10,19 +12,17 @@ type FormUnsealProps = {
 
 export function UnsealForm(props: FormUnsealProps): JSX.Element {
   return (
-    <Form
-      onSubmit={(data: FormData) => {
-        props.onKeySubmit(data.get("unsealKey") as string);
-      }}
-    >
+    <Form onSubmit={(data: FormData) => {
+      props.onKeySubmit(data.get("unsealKey") as string);
+    }}>
       <MarginInline>
-        <input
-          class="uk-input uk-form-width-medium"
-          name="unsealKey"
-          type="password"
-          placeholder={i18next.t("unseal_key_input_placeholder")}
-          required
-        />
+        <InputWithTitle title={i18next.t("unseal_key_input_placeholder")}>
+          <PasswordInput
+            name="unsealKey"
+            placeholder={i18next.t("unseal_key_input_placeholder")}
+            required
+          />
+        </InputWithTitle>
       </MarginInline>
 
       <MarginInline>