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 | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx new file mode 100644 index 000000000..c9b0f43b9 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx @@ -0,0 +1,119 @@ +/* + This file is part of GNU Taler + (C) 2021 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 { Fragment, h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { Translate, useTranslator } from "../../i18n"; +import { InputProps, useField } from "./useField"; + +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> + ) +} + +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 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 && + <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> + } + </Fragment >; +} |