chaos/VaultUI
1
0
Fork 0
Code Issues Activity

move all input things into their own files

Browse source
This commit is contained in:
ChaotiCryptidz 2022-01-22 13:09:39 +00:00
parent 8132de764d
commit 634292cb8b
33 changed files with 394 additions and 328 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/ui/elements/forms/Checkbox.tsx Normal file
View file

@ -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}
/>
)
}

0
src/ui/elements/Form.tsx → src/ui/elements/forms/Form.tsx
View file

9
src/ui/elements/forms/InputProps.tsx Normal file
View file

@ -0,0 +1,9 @@
export type InputProps = {
name?: string;
value?: string;
placeholder?: string;
onChange?: () => void;
required?: boolean;
checked?: boolean;
extraProps?: {};
}

17
src/ui/elements/forms/NumberInput.tsx Normal file
View file

@ -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}
/>
)
}

17
src/ui/elements/forms/PasswordInput.tsx Normal file
View file

@ -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}
/>
)
}

33
src/ui/elements/forms/Select.tsx Normal file
View file

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

16
src/ui/elements/forms/TextArea.tsx Normal file
View file

@ -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}
/>
)
}

17
src/ui/elements/forms/TextInput.tsx Normal file
View file

@ -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}
/>
)
}

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

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

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

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

16
src/ui/pages/Login_Token.tsx
View file

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

30
src/ui/pages/Login_Username.tsx
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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} />
</>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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")}
/>

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

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

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

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

54
src/ui/pages/Settings/GeneralSettings.tsx
View file

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

53
src/ui/pages/Settings/KeyValueSettings.tsx
View file

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

26
src/ui/pages/Unseal_Form.tsx
View file

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