1 files changed, 81 insertions, 42 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
index 16fc5d611..b8cd4c2d2 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021 Taler Systems S.A.
+ (C) 2021-2024 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
@@ -15,63 +15,102 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 import { ComponentChildren, h, VNode } from "preact";
 import { InputProps, useField } from "./useField.js";
 
 export interface Props<T> extends InputProps<T> {
   expand?: boolean;
-  inputType?: 'text' | 'number';
+  inputType?: "text" | "number" | "password";
   addonBefore?: ComponentChildren;
   addonAfter?: ComponentChildren;
+  addonAfterAction?: () => void;
   toStr?: (v?: any) => string;
   fromStr?: (s: string) => any;
-  inputExtra?: any,
-  children?: ComponentChildren,
+  inputExtra?: any;
+  children?: ComponentChildren;
   side?: ComponentChildren;
 }
 
-const defaultToString = (f?: any): string => f || ''
-const defaultFromString = (v: string): any => v as any
+const defaultToString = (f?: any): string => f || "";
+const defaultFromString = (v: string): any => v as any;
 
-export function InputWithAddon<T>({ name, readonly, addonBefore, children, expand, label, placeholder, help, tooltip, inputType, inputExtra, side, addonAfter, toStr = defaultToString, fromStr = defaultFromString }: Props<keyof T>): VNode {
+export function InputWithAddon<T>({
+  name,
+  readonly,
+  addonBefore,
+  children,
+  expand,
+  label,
+  placeholder,
+  help,
+  tooltip,
+  inputType,
+  inputExtra,
+  side,
+  addonAfter,
+  addonAfterAction,
+  toStr = defaultToString,
+  fromStr = defaultFromString,
+}: Props<keyof T>): VNode {
   const { error, value, onChange, required } = useField<T>(name);
 
-  return <div class="field is-horizontal">
-    <div class="field-label is-normal">
-      <label class="label">
-        {label}
-        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
-          <i class="mdi mdi-information" />
-        </span>}
-      </label>
-    </div>
-    <div class="field-body is-flex-grow-3">
-      <div class="field">
-        <div class="field has-addons">
-          {addonBefore && <div class="control">
-            <a class="button is-static">{addonBefore}</a>
-          </div>}
-          <p class={`control${expand ? " is-expanded" :""}${required ? " has-icons-right" : ''}`}>
-            <input {...(inputExtra || {})} class={error ? "input is-danger" : "input"} type={inputType}
-              placeholder={placeholder} readonly={readonly}
-              name={String(name)} value={toStr(value)}
-              onChange={(e): void => onChange(fromStr(e.currentTarget.value))} />
-            {required && <span class="icon has-text-danger is-right">
-              <i class="mdi mdi-alert" />
-            </span>}
-            {help}
-            {children}
-          </p>
-          {addonAfter && <div class="control">
-            <a class="button is-static">{addonAfter}</a>
-          </div>}
+  return (
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">
+          {label}
+          {tooltip && (
+            <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+              <i class="mdi mdi-information" />
+            </span>
+          )}
+        </label>
+      </div>
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <div class="field has-addons">
+            {addonBefore && (
+              <div class="control">
+                <a class="button is-static">{addonBefore}</a>
+              </div>
+            )}
+            <p
+              class={`control${expand ? " is-expanded" : ""}${required ? " has-icons-right" : ""
+                }`}
+            >
+              <input
+                {...(inputExtra || {})}
+                class={error ? "input is-danger" : "input"}
+                type={inputType}
+                placeholder={placeholder}
+                readonly={readonly}
+                disabled={readonly}
+                name={String(name)}
+                value={toStr(value)}
+                onChange={(e): void => onChange(fromStr(e.currentTarget.value))}
+              />
+              {required && (
+                <span class="icon has-text-danger is-right">
+                  <i class="mdi mdi-alert" />
+                </span>
+              )}
+              {children}
+            </p>
+            {addonAfter && (
+              <div class="control" onClick={addonAfterAction} style={{ cursor: addonAfterAction ? "pointer" : undefined }}>
+                <a class="button is-static">{addonAfter}</a>
+              </div>
+            )}
+          </div>
+          {error && <p class="help is-danger">{error}</p>}
+          <span class="has-text-grey">{help}</span>
         </div>
-        {error && <p class="help is-danger">{error}</p>}
+        {expand ? <div>{side}</div> : side}
       </div>
-      {side}
+
     </div>
-  </div>;
+  );
 }