commit 6dc70f3df6ec6c431137ef83f2975de9a987de3f
parent f119f4aae40623bb0c15f61f58a65a40ce233eab
Author: Sebastian <sebasjm@gmail.com>
Date: Mon, 13 Jan 2025 13:43:16 -0300
new input type: secret
Diffstat:
7 files changed, 96 insertions(+), 0 deletions(-)
diff --git a/packages/web-util/src/forms/field-types.ts b/packages/web-util/src/forms/field-types.ts
@@ -11,6 +11,7 @@ import { InputInteger } from "./fields/InputInteger.js";
import { InputSelectMultiple } from "./fields/InputSelectMultiple.js";
import { InputSelectOne } from "./fields/InputSelectOne.js";
import { InputText } from "./fields/InputText.js";
+import { InputSecret } from "./fields/InputSecret.js";
import { InputTextArea } from "./fields/InputTextArea.js";
import { InputToggle } from "./fields/InputToggle.js";
import { Group } from "./Group.js";
@@ -33,6 +34,7 @@ type FieldType<T extends object = any, K extends keyof T = any> = {
choiceHorizontal: Parameters<typeof InputChoiceHorizontal<T, K>>[0];
absoluteTimeText: Parameters<typeof InputAbsoluteTime<T, K>>[0];
integer: Parameters<typeof InputInteger<T, K>>[0];
+ secret: Parameters<typeof InputSecret<T, K>>[0];
toggle: Parameters<typeof InputToggle<T, K>>[0];
amount: Parameters<typeof InputAmount<T, K>>[0];
};
@@ -64,6 +66,7 @@ export type UIFormField =
properties: FieldType["choiceHorizontal"];
}
| { type: "integer"; properties: FieldType["integer"] }
+ | { type: "secret"; properties: FieldType["secret"] }
| { type: "toggle"; properties: FieldType["toggle"] }
| {
type: "absoluteTimeText";
@@ -99,6 +102,7 @@ export const UIFormConfiguration: UIFormFieldMap = {
//@ts-ignore
choiceHorizontal: InputChoiceHorizontal,
integer: InputInteger,
+ secret: InputSecret,
//@ts-ignore
selectOne: InputSelectOne,
//@ts-ignore
diff --git a/packages/web-util/src/forms/fields/InputSecret.stories.tsx b/packages/web-util/src/forms/fields/InputSecret.stories.tsx
@@ -0,0 +1,57 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "../../tests/hook.js";
+import { DefaultForm as TestedComponent } from "../forms-ui.js";
+import { FormDesign, UIHandlerId } from "../forms-types.js";
+
+export default {
+ title: "Input secret",
+};
+
+type TargetObject = {
+ pwd: string;
+};
+const initial: TargetObject = {
+ pwd: 5,
+};
+
+const design: FormDesign = {
+ type: "double-column",
+ sections: [
+ {
+ title: "this is a simple form" as TranslatedString,
+ fields: [
+ {
+ type: "secret",
+ label: "Password" as TranslatedString,
+ id: "pwd" as UIHandlerId,
+ },
+ ],
+ },
+ ],
+};
+
+export const SimpleComment = tests.createExample(TestedComponent, {
+ initial,
+ design,
+});
diff --git a/packages/web-util/src/forms/fields/InputSecret.tsx b/packages/web-util/src/forms/fields/InputSecret.tsx
@@ -0,0 +1,9 @@
+import { VNode, h } from "preact";
+import { InputLine } from "./InputLine.js";
+import { UIFormProps } from "../FormProvider.js";
+
+export function InputSecret<T extends object, K extends keyof T>(
+ props: UIFormProps<T, K>,
+): VNode {
+ return <InputLine type="password" {...props} />;
+}
diff --git a/packages/web-util/src/forms/forms-types.ts b/packages/web-util/src/forms/forms-types.ts
@@ -54,6 +54,7 @@ export type UIFormElementConfig =
| UIFormFieldChoiseStacked
| UIFormFieldFile
| UIFormFieldInteger
+ | UIFormFieldSecret
| UIFormFieldSelectMultiple
| UIFormFieldSelectOne
| UIFormFieldText
@@ -124,6 +125,10 @@ type UIFormFieldInteger = {
min?: Integer;
} & UIFormFieldBaseConfig;
+type UIFormFieldSecret = {
+ type: "secret";
+} & UIFormFieldBaseConfig;
+
export interface SelectUiChoice {
label: string;
description?: string;
@@ -310,6 +315,11 @@ const codecForUiFormFieldInteger = (): Codec<UIFormFieldInteger> =>
.property("min", codecOptional(codecForNumber()))
.build("UIFormFieldInteger");
+const codecForUiFormFieldSecret = (): Codec<UIFormFieldSecret> =>
+ codecForUIFormFieldBaseConfigTemplate<UIFormFieldSecret>()
+ .property("type", codecForConstString("secret"))
+ .build("UIFormFieldSecret");
+
const codecForUiFormFieldSelectMultiple =
(): Codec<UIFormFieldSelectMultiple> =>
codecForUIFormFieldBaseConfigTemplate<UIFormFieldSelectMultiple>()
@@ -358,6 +368,7 @@ const codecForUiFormField = (): Codec<UIFormElementConfig> =>
.alternative("choiceStacked", codecForUiFormFieldChoiceStacked())
.alternative("file", codecForUiFormFieldFile())
.alternative("integer", codecForUiFormFieldInteger())
+ .alternative("secret", codecForUiFormFieldSecret())
.alternative("selectMultiple", codecForUiFormFieldSelectMultiple())
.alternative("selectOne", codecForUiFormFieldSelectOne())
.alternative("text", codecForUiFormFieldText())
diff --git a/packages/web-util/src/forms/forms-utils.ts b/packages/web-util/src/forms/forms-utils.ts
@@ -177,6 +177,19 @@ export function convertFormConfigToUiField(
},
} as UIFormField;
}
+ case "secret": {
+ return {
+ type: "secret",
+ properties: {
+ ...converBaseFieldsProps(i18n_, config),
+ ...converInputFieldsProps(
+ form,
+ config,
+ getConverterByFieldType(config.type, config),
+ ),
+ },
+ } as UIFormField;
+ }
case "selectMultiple": {
return {
type: "selectMultiple",
diff --git a/packages/web-util/src/forms/index.stories.ts b/packages/web-util/src/forms/index.stories.ts
@@ -10,3 +10,4 @@ export * as a10 from "./fields/InputSelectOne.stories.js";
export * as a11 from "./fields/InputText.stories.js";
export * as a12 from "./fields/InputTextArea.stories.js";
export * as a13 from "./fields/InputToggle.stories.js";
+export * as a14 from "./fields/InputSecret.stories.js";
diff --git a/packages/web-util/src/forms/index.ts b/packages/web-util/src/forms/index.ts
@@ -25,6 +25,7 @@ export * from "./fields/InputLine.js";
export * from "./fields/InputSelectMultiple.js";
export * from "./fields/InputSelectOne.js";
export * from "./fields/InputText.js";
+export * from "./fields/InputSecret.js";
export * from "./fields/InputTextArea.js";
export * from "./fields/InputToggle.js";
export * from "./TimePicker.js";
