diff options
Diffstat (limited to 'packages/merchant-backoffice-ui')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/login/index.tsx | 18 |
1 files changed, 16 insertions, 2 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/login/index.tsx b/packages/merchant-backoffice-ui/src/paths/login/index.tsx index 1c98b7c9b..6c33dd06e 100644 --- a/packages/merchant-backoffice-ui/src/paths/login/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/login/index.tsx @@ -20,12 +20,14 @@ */ import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { ComponentChildren, h, VNode } from "preact"; +import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useCallback, useEffect, useState } from "preact/hooks"; import { useBackendContext } from "../../context/backend.js"; import { useInstanceContext } from "../../context/instance.js"; import { AccessToken, LoginToken } from "../../declaration.js"; import { useCredentialsChecker } from "../../hooks/backend.js"; +import { NotificationCard } from "../../components/menu/index.js"; +import { Notification } from "../../utils/types.js"; interface Props { onConfirm: (token: LoginToken | undefined) => void; @@ -40,6 +42,8 @@ export function LoginPage({ onConfirm }: Props): VNode { const { admin, id } = useInstanceContext(); const { requestNewLoginToken } = useCredentialsChecker(); const [token, setToken] = useState(""); + const [notif, setNotif] = useState<Notification | undefined>(undefined); + const { i18n } = useTranslationContext(); @@ -53,6 +57,10 @@ export function LoginPage({ onConfirm }: Props): VNode { onConfirm({ token, expiration }); } else { onConfirm(undefined); + setNotif({ + message: "Your password is incorrect", + type: "ERROR", + }); } }, [id, token]) @@ -71,6 +79,7 @@ export function LoginPage({ onConfirm }: Props): VNode { class="modal-card-body" style={{ border: "1px solid", borderTop: 0, borderBottom: 0 }} > + <p> <i18n.Translate>Need the access token for the instance.</i18n.Translate> </p> @@ -120,7 +129,8 @@ export function LoginPage({ onConfirm }: Props): VNode { </div>) } - return ( + return (<Fragment> + <NotificationCard notification={notif} /> <div class="columns is-centered" style={{ margin: "auto" }}> <div class="column is-two-thirds "> <div class="modal-card" style={{ width: "100%", margin: 0 }}> @@ -143,6 +153,7 @@ export function LoginPage({ onConfirm }: Props): VNode { </label> </div> <div class="field-body"> + <div class="field"> <p class="control is-expanded"> <input @@ -178,10 +189,13 @@ export function LoginPage({ onConfirm }: Props): VNode { > <i18n.Translate>Confirm</i18n.Translate> </AsyncButton> + </footer> </div> </div> </div> + </Fragment> + ); } |