diff options
author | Sebastian <sebasjm@gmail.com> | 2023-10-21 20:25:38 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-10-21 20:25:50 -0300 |
commit | 2ac73949e7cb8de44e56f2fecae617efab15671e (patch) | |
tree | 144a97d71bc9fa964675ef0cc764087ceb14e8eb /packages/demobank-ui/src/pages/ShowAccountDetails.tsx | |
parent | 4b98b693d696d90f30f0a6546b0e1f4bc181a5f2 (diff) | |
download | wallet-core-2ac73949e7cb8de44e56f2fecae617efab15671e.tar.xz |
more ui
Diffstat (limited to 'packages/demobank-ui/src/pages/ShowAccountDetails.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/ShowAccountDetails.tsx | 123 |
1 files changed, 45 insertions, 78 deletions
diff --git a/packages/demobank-ui/src/pages/ShowAccountDetails.tsx b/packages/demobank-ui/src/pages/ShowAccountDetails.tsx index c65b90503..21724474a 100644 --- a/packages/demobank-ui/src/pages/ShowAccountDetails.tsx +++ b/packages/demobank-ui/src/pages/ShowAccountDetails.tsx @@ -1,25 +1,24 @@ -import { HttpStatusCode, TalerCorebankApi, TalerError, TranslatedString } from "@gnu-taler/taler-util"; -import { HttpResponsePaginated, RequestError, notify, notifyError, useTranslationContext } from "@gnu-taler/web-util/browser"; -import { VNode, h } from "preact"; +import { TalerCorebankApi, TalerError, TranslatedString } from "@gnu-taler/taler-util"; +import { notify, notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { ErrorLoading } from "../components/ErrorLoading.js"; import { Loading } from "../components/Loading.js"; import { useBankCoreApiContext } from "../context/config.js"; import { useAccountDetails } from "../hooks/access.js"; import { useBackendState } from "../hooks/backend.js"; -import { buildRequestErrorMessage, undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js"; +import { undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js"; import { assertUnreachable } from "./HomePage.js"; import { LoginForm } from "./LoginForm.js"; import { AccountForm } from "./admin/AccountForm.js"; +import { ProfileNavigation } from "./ProfileNavigation.js"; export function ShowAccountDetails({ account, onClear, onUpdateSuccess, - onChangePassword, }: { onClear?: () => void; - onChangePassword: () => void; onUpdateSuccess: () => void; account: string; }): VNode { @@ -27,6 +26,8 @@ export function ShowAccountDetails({ const { state: credentials } = useBackendState(); const creds = credentials.status !== "loggedIn" ? undefined : credentials const { api } = useBankCoreApiContext() + const accountIsTheCurrentUser = credentials.status === "loggedIn" ? + credentials.username === account : false const [update, setUpdate] = useState(false); const [submitAccount, setSubmitAccount] = useState<TalerCorebankApi.AccountData | undefined>(); @@ -47,11 +48,7 @@ export function ShowAccountDetails({ } async function doUpdate() { - if (!update) { - setUpdate(true); - return; - } - if (!submitAccount || !creds) return; + if (!update || !submitAccount || !creds) return; await withRuntimeErrorHandling(i18n, async () => { const resp = await api.updateAccount(creds, { cashout_address: submitAccount.cashout_payto_uri, @@ -62,8 +59,9 @@ export function ShowAccountDetails({ is_exchange: false, name: submitAccount.name, }); - + if (resp.type === "ok") { + notifyInfo(i18n.str`Account updated`); onUpdateSuccess(); } else { switch (resp.case) { @@ -87,21 +85,23 @@ export function ShowAccountDetails({ } return ( - <div> + <Fragment> + {accountIsTheCurrentUser ? + <ProfileNavigation current="details" /> + : + <h1 class="text-base font-semibold leading-6 text-gray-900"> + <i18n.Translate>Account "{account}"</i18n.Translate> + </h1> + + } + <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg"> <div class="px-4 sm:px-0"> <h2 class="text-base font-semibold leading-7 text-gray-900"> - {update ? - <i18n.Translate>Update account</i18n.Translate> - : - <i18n.Translate>Account details</i18n.Translate> - } - </h2> - <div class="mt-4"> <div class="flex items-center justify-between"> <span class="flex flex-grow flex-col"> - <span class="text-sm text-black font-medium leading-6 " id="availability-label"> - <i18n.Translate>change the account details</i18n.Translate> + <span class="text-sm text-black font-semibold leading-6 " id="availability-label"> + <i18n.Translate>Change details</i18n.Translate> </span> </span> <button type="button" data-enabled={!update} class="bg-indigo-600 data-[enabled=true]:bg-gray-200 relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full ring-2 border-gray-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description" @@ -111,69 +111,36 @@ export function ShowAccountDetails({ <span aria-hidden="true" data-enabled={!update} class="translate-x-5 data-[enabled=true]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span> </button> </div> - </div> - + </h2> </div> + <AccountForm + focus={update} + username={account} template={result.body} purpose={update ? "update" : "show"} onChange={(a) => setSubmitAccount(a)} > - - </AccountForm> - - <p class="buttons-account"> - <div - style={{ - display: "flex", - justifyContent: "space-between", - flexFlow: "wrap-reverse", - }} - > - <div> - {onClear ? ( - <input - class="pure-button" - type="submit" - value={i18n.str`Close`} - onClick={async (e) => { - e.preventDefault(); - onClear(); - }} - /> - ) : undefined} - </div> - <div style={{ display: "flex" }}> - <div> - <input - id="select-exchange" - class="pure-button pure-button-primary content" - disabled={update && !submitAccount} - type="submit" - value={i18n.str`Change password`} - onClick={async (e) => { - e.preventDefault(); - onChangePassword(); - }} - /> - </div> - <div> - <input - id="select-exchange" - class="pure-button pure-button-primary content" - disabled={update && !submitAccount} - type="submit" - value={update ? i18n.str`Confirm` : i18n.str`Update`} - onClick={async (e) => { - e.preventDefault(); - doUpdate() - }} - /> - </div> - </div> + <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"> + {onClear ? + <button type="button" class="text-sm font-semibold leading-6 text-gray-900" + onClick={onClear} + > + <i18n.Translate>Cancel</i18n.Translate> + </button> + : <div /> + } + <button type="submit" + class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + disabled={!update || !submitAccount} + onClick={doUpdate} + > + <i18n.Translate>Update</i18n.Translate> + </button> </div> - </p> + </AccountForm> </div> - </div> + </Fragment> ); } + |