taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

show/hide key

Browse Source
This commit is contained in:
Sebastian 2023-03-13 00:24:28 -03:00
parent a1af7945d1
commit 3267f56dc3
No known key found for this signature in database
GPG Key ID: 173909D1A5F66069
4 changed files with 65 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
View File

@ -23,7 +23,7 @@ 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;
toStr?: (v?: any) => string;

31
packages/merchant-backoffice-ui/src/components/modal/index.tsx
View File

@ -20,7 +20,7 @@
*/
import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
import { ComponentChildren, h, VNode } from "preact";
import { ComponentChildren, Fragment, h, VNode } from "preact";
import { useState } from "preact/hooks";
import { useInstanceContext } from "../../context/instance.js";
import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js";
@ -65,16 +65,25 @@ export function ConfirmModal({
<section class="modal-card-body">{children}</section>
<footer class="modal-card-foot">
<div class="buttons is-right" style={{ width: "100%" }}>
<button class="button " onClick={onCancel}>
<i18n.Translate>Cancel</i18n.Translate>
</button>
<button
class={danger ? "button is-danger " : "button is-info "}
disabled={disabled}
onClick={onConfirm}
>
<i18n.Translate>{label}</i18n.Translate>
</button>
{onConfirm ? (
<Fragment>
<button class="button " onClick={onCancel}>
<i18n.Translate>Cancel</i18n.Translate>
</button>
<button
class={danger ? "button is-danger " : "button is-info "}
disabled={disabled}
onClick={onConfirm}
>
<i18n.Translate>{label}</i18n.Translate>
</button>
</Fragment>
) : (
<button class="button " onClick={onCancel}>
<i18n.Translate>Close</i18n.Translate>
</button>
)}
</div>
</footer>
</div>

14
packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx
View File

@ -96,20 +96,30 @@ export function QrPage({ template, id: templateId, onBack }: Props): VNode {
: template.pos_algorithm === 2
? `otpauth://totp/${issuer}:${templateId}?secret=${template.pos_key}&issuer=${issuer}&algorithm=SHA1&digits=8&period=30`
: undefined;
const keySlice = template.pos_key?.substring(0, 4);
const oauthUriWithoutSecret = !template.pos_algorithm
? undefined
: template.pos_algorithm === 1
? `otpauth://totp/${issuer}:${templateId}?secret=${keySlice}...&issuer=${issuer}&algorithm=SHA1&digits=8&period=30`
: template.pos_algorithm === 2
? `otpauth://totp/${issuer}:${templateId}?secret=${keySlice}...&issuer=${issuer}&algorithm=SHA1&digits=8&period=30`
: undefined;
return (
<div>
{oauthUri && (
<ConfirmModal
description="Setup TOTP"
active={setupTOTP}
onConfirm={() => {
onCancel={() => {
setSetupTOTP(false);
}}
>
<p>Scan this qr code with your TOTP device</p>
<QR text={oauthUri} />
<pre style={{ textAlign: "center" }}>
<a href={oauthUri}>{oauthUri}</a>
<a href={oauthUri}>{oauthUriWithoutSecret}</a>
</pre>
</ConfirmModal>
)}

34
packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx
View File

@ -57,6 +57,7 @@ export function UpdatePage({ template, onUpdate, onBack }: Props): VNode {
const { i18n } = useTranslationContext();
const backend = useBackendContext();
const [showKey, setShowKey] = useState(false);
const [state, setState] = useState<Partial<Entity>>(template);
const errors: FormErrors<Entity> = {
@ -161,14 +162,26 @@ export function UpdatePage({ template, onUpdate, onBack }: Props): VNode {
convert={(v) => Number(v)}
/>
{state.pos_algorithm && state.pos_algorithm > 0 ? (
<Input<Entity>
<InputWithAddon<Entity>
name="pos_key"
label={i18n.str`Point-of-sale key`}
inputType={showKey ? "text" : "password"}
help=""
expand
tooltip={i18n.str`Useful to validate the purchase`}
addonAfter={
<span class="icon">
{showKey ? (
<i class="mdi mdi-eye" />
) : (
<i class="mdi mdi-eye-off" />
)}
</span>
}
side={
<span data-tooltip={i18n.str`generate random secret key`}>
<span>
<button
data-tooltip={i18n.str`generate random secret key`}
class="button is-info mr-3"
onClick={(e) => {
const pos_key = randomBase32Key();
@ -177,6 +190,23 @@ export function UpdatePage({ template, onUpdate, onBack }: Props): VNode {
>
<i18n.Translate>random</i18n.Translate>
</button>
<button
data-tooltip={
showKey
? i18n.str`show secret key`
: i18n.str`hide secret key`
}
class="button is-info mr-3"
onClick={(e) => {
setShowKey(!showKey);
}}
>
{showKey ? (
<i18n.Translate>hide</i18n.Translate>
) : (
<i18n.Translate>show</i18n.Translate>
)}
</button>
</span>
}
/>