merchant-backoffice

commit 90e4e00bcfac3940475473f3a44978b89060b81e
parent 6ca26ca2dafa4db313e436a022082bc79f9c08ee
Author: Sebastian <sebasjm@gmail.com>
Date:   Wed,  3 Mar 2021 14:38:54 -0300

add left label to inputsecured

Diffstat:
M
packages/frontend/src/components/form/InputSecured.tsx
 | 
12
+++++++-----

1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/packages/frontend/src/components/form/InputSecured.tsx b/packages/frontend/src/components/form/InputSecured.tsx
@@ -21,7 +21,6 @@
 import { Fragment, h, VNode } from "preact";
 import { Message, useMessage } from "preact-messages";
 import { useState } from "preact/hooks";
-import { DeleteModal } from "../modal";
 import { useField } from "./Field";
 
 export interface Props<T> {
@@ -46,7 +45,7 @@ export function InputSecured<T>({ name, readonly }: Props<T>): VNode {
   const tooltip = useMessage(`fields.instance.${name}.tooltip`, {});
 
   const [active, setActive] = useState(false);
-  const [newValue, setNuewValue] = useState(toStr(value))
+  const [newValue, setNuewValue] = useState("")
 
   return <div class="field is-horizontal">
     <div class="field-label is-normal">
@@ -71,6 +70,9 @@ export function InputSecured<T>({ name, readonly }: Props<T>): VNode {
         <Fragment>
           <div class="field has-addons">
             <div class="control">
+              <a class="button is-static">secret-token:</a>
+            </div>
+            <div class="control">
               <input class="input" type="password"
                 placeholder={placeholder} readonly={readonly || !active}
                 disabled={readonly || !active}
@@ -81,21 +83,21 @@ export function InputSecured<T>({ name, readonly }: Props<T>): VNode {
               <Message id={`fields.instance.${name}.help`}> </Message>
             </div>
             <div class="control">
-              <button class="button is-info" disabled={fromStr(newValue) === value} onClick={(): void => { onChange(fromStr(newValue)); setActive(!active); }} >
+              <button class="button is-info" disabled={fromStr(newValue) === value} onClick={(): void => { onChange(fromStr(newValue)); setActive(!active); setNuewValue(""); }} >
                 <div class="icon is-left"><i class="mdi mdi-lock-outline" /></div>
                 <span>Update</span>
               </button>
             </div>
           </div>
           <div class="control">
-            <button class="button is-danger" disabled={null === value} onClick={(): void => { onChange(null!); setActive(!active); }} >
+            <button class="button is-danger" disabled={null === value || undefined === value} onClick={(): void => { onChange(null!); setActive(!active); setNuewValue("");}} >
               <div class="icon is-left"><i class="mdi mdi-lock-open-variant" /></div>
               <span>Remove</span>
             </button>
           </div>
           <div class="field ml-4">
             <div class="control">
-              <button class="button " onClick={(): void => { onChange(initial!); setActive(!active); }} >
+              <button class="button " onClick={(): void => { onChange(initial!); setActive(!active); setNuewValue(""); }} >
                 <div class="icon is-left"><i class="mdi mdi-lock-open-variant" /></div>
                 <span>Cancel update</span>
               </button>