diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx | 222 |
1 files changed, 144 insertions, 78 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx index b0168e505..799978683 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx @@ -15,9 +15,9 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Translate, useTranslator } from "../../i18n/index.js"; @@ -26,94 +26,160 @@ import { InputProps, useField } from "./useField.js"; export type Props<T> = InputProps<T>; const TokenStatus = ({ prev, post }: any) => { - if ((prev === undefined || prev === null) && (post === undefined || post === null)) - return null - return (prev === post) ? null : ( - post === null ? - <span class="tag is-danger is-align-self-center ml-2"><Translate>Deleting</Translate></span> : - <span class="tag is-warning is-align-self-center ml-2"><Translate>Changing</Translate></span> + if ( + (prev === undefined || prev === null) && + (post === undefined || post === null) ) -} + return null; + return prev === post ? null : post === null ? ( + <span class="tag is-danger is-align-self-center ml-2"> + <Translate>Deleting</Translate> + </span> + ) : ( + <span class="tag is-warning is-align-self-center ml-2"> + <Translate>Changing</Translate> + </span> + ); +}; -export function InputSecured<T>({ name, readonly, placeholder, tooltip, label, help }: Props<keyof T>): VNode { +export function InputSecured<T>({ + name, + readonly, + placeholder, + tooltip, + label, + help, +}: Props<keyof T>): VNode { const { error, value, initial, onChange, toStr, fromStr } = useField<T>(name); const [active, setActive] = useState(false); - const [newValue, setNuewValue] = useState("") + const [newValue, setNuewValue] = useState(""); - const i18n = useTranslator() + const i18n = useTranslator(); - return <Fragment> - <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"> - {!active ? - <Fragment> - <div class="field has-addons"> - <button class="button" - onClick={(): void => { setActive(!active); }} > - <div class="icon is-left"><i class="mdi mdi-lock-reset" /></div> - <span><Translate>Manage access token</Translate></span> - </button> - <TokenStatus prev={initial} post={value} /> - </div> - </Fragment> : - <Fragment> - <div class="field has-addons"> - <div class="control"> - <a class="button is-static">secret-token:</a> - </div> - <div class="control is-expanded"> - <input class="input" type="text" - placeholder={placeholder} readonly={readonly || !active} - disabled={readonly || !active} - name={String(name)} value={newValue} - onInput={(e): void => { - setNuewValue(e.currentTarget.value) - }} /> - {help} - </div> - <div class="control"> - <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><Translate>Update</Translate></span> - </button> - </div> - </div> - </Fragment> - } - {error ? <p class="help is-danger">{error}</p> : null} - </div> - </div> - {active && + return ( + <Fragment> <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="level" style={{ width: '100%' }}> - <div class="level-right is-flex-grow-1"> - <div class="level-item"> - <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><Translate>Remove</Translate></span> + {!active ? ( + <Fragment> + <div class="field has-addons"> + <button + class="button" + onClick={(): void => { + setActive(!active); + }} + > + <div class="icon is-left"> + <i class="mdi mdi-lock-reset" /> + </div> + <span> + <Translate>Manage access token</Translate> + </span> </button> + <TokenStatus prev={initial} post={value} /> </div> - <div class="level-item"> - <button class="button " onClick={(): void => { onChange(initial!); setActive(!active); setNuewValue(""); }} > - <div class="icon is-left"><i class="mdi mdi-lock-open-variant" /></div> - <span><Translate>Cancel</Translate></span> - </button> + </Fragment> + ) : ( + <Fragment> + <div class="field has-addons"> + <div class="control"> + <a class="button is-static">secret-token:</a> + </div> + <div class="control is-expanded"> + <input + class="input" + type="text" + placeholder={placeholder} + readonly={readonly || !active} + disabled={readonly || !active} + name={String(name)} + value={newValue} + onInput={(e): void => { + setNuewValue(e.currentTarget.value); + }} + /> + {help} + </div> + <div class="control"> + <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> + <Translate>Update</Translate> + </span> + </button> + </div> + </div> + </Fragment> + )} + {error ? <p class="help is-danger">{error}</p> : null} + </div> + </div> + {active && ( + <div class="field is-horizontal"> + <div class="field-body is-flex-grow-3"> + <div class="level" style={{ width: "100%" }}> + <div class="level-right is-flex-grow-1"> + <div class="level-item"> + <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> + <Translate>Remove</Translate> + </span> + </button> + </div> + <div class="level-item"> + <button + class="button " + onClick={(): void => { + onChange(initial!); + setActive(!active); + setNuewValue(""); + }} + > + <div class="icon is-left"> + <i class="mdi mdi-lock-open-variant" /> + </div> + <span> + <Translate>Cancel</Translate> + </span> + </button> + </div> </div> </div> - </div> </div> - </div> - } - </Fragment >; + )} + </Fragment> + ); } |