aboutsummaryrefslogtreecommitdiff
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/anastasis-webui/src/components/fields/TextInput.tsx29
-rw-r--r--packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx1
2 files changed, 21 insertions, 9 deletions
diff --git a/packages/anastasis-webui/src/components/fields/TextInput.tsx b/packages/anastasis-webui/src/components/fields/TextInput.tsx
index efa95d84e..55643b4a1 100644
--- a/packages/anastasis-webui/src/components/fields/TextInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/TextInput.tsx
@@ -2,6 +2,7 @@ import { h, VNode } from "preact";
import { useLayoutEffect, useRef, useState } from "preact/hooks";
export interface TextInputProps {
+ inputType?: "text" | "number" | "multiline" | "password";
label: string;
grabFocus?: boolean;
disabled?: boolean;
@@ -12,13 +13,22 @@ export interface TextInputProps {
bind: [string, (x: string) => void];
}
-export function TextInput(props: TextInputProps): VNode {
+const TextInputType = function ({ inputType, grabFocus, ...rest }: any): VNode {
const inputRef = useRef<HTMLInputElement>(null);
useLayoutEffect(() => {
- if (props.grabFocus) {
+ if (grabFocus) {
inputRef.current?.focus();
}
- }, [props.grabFocus]);
+ }, [grabFocus]);
+
+ return inputType === "multiline" ? (
+ <textarea {...rest} rows={5} ref={inputRef} style={{ height: "unset" }} />
+ ) : (
+ <input {...rest} type={inputType} ref={inputRef} />
+ );
+};
+
+export function TextInput(props: TextInputProps): VNode {
const value = props.bind[0];
const [dirty, setDirty] = useState(false);
const showError = dirty && props.error;
@@ -33,21 +43,22 @@ export function TextInput(props: TextInputProps): VNode {
)}
</label>
<div class="control has-icons-right">
- <input
+ <TextInputType
+ inputType={props.inputType}
value={value}
+ grabFocus={props.grabFocus}
disabled={props.disabled}
placeholder={props.placeholder}
class={showError ? "input is-danger" : "input"}
- onKeyPress={(e) => {
- if (e.key === 'Enter' && props.onConfirm) {
- props.onConfirm()
+ onKeyPress={(e: any) => {
+ if (e.key === "Enter" && props.onConfirm) {
+ props.onConfirm();
}
}}
- onInput={(e) => {
+ onInput={(e: any) => {
setDirty(true);
props.bind[1]((e.target as HTMLInputElement).value);
}}
- ref={inputRef}
style={{ display: "block" }}
/>
</div>
diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
index 6d4ffbf88..ccef8b942 100644
--- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
@@ -83,6 +83,7 @@ export function SecretEditorScreen(): VNode {
</div>
<div class="block">
<TextInput
+ inputType="multiline"
disabled={!!secretFile}
onConfirm={goNextIfNoErrors}
label="Enter the secret as text:"