diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/admin/Home.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/admin/Home.tsx | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/admin/Home.tsx b/packages/demobank-ui/src/pages/admin/Home.tsx new file mode 100644 index 000000000..e1ec6cfe0 --- /dev/null +++ b/packages/demobank-ui/src/pages/admin/Home.tsx @@ -0,0 +1,162 @@ +import { notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Fragment, VNode, h } from "preact"; +import { useState } from "preact/hooks"; +import { Cashouts } from "../../components/Cashouts/index.js"; +import { ShowCashoutDetails } from "../business/Home.js"; +import { handleNotOkResult } from "../HomePage.js"; +import { ShowAccountDetails } from "../ShowAccountDetails.js"; +import { UpdateAccountPassword } from "../UpdateAccountPassword.js"; +import { AdminAccount } from "./Account.js"; +import { AccountList } from "./AccountList.js"; +import { CreateNewAccount } from "./CreateNewAccount.js"; +import { RemoveAccount } from "./RemoveAccount.js"; + +/** + * Query account information and show QR code if there is pending withdrawal + */ +interface Props { + onRegister: () => void; +} +export type AccountAction = "show-details" | + "show-cashout" | + "update-password" | + "remove-account" | + "show-cashouts-details"; + +export function AdminHome({ onRegister }: Props): VNode { + const [action, setAction] = useState<{ + type: AccountAction, + account: string + }>() + + const [createAccount, setCreateAccount] = useState(false); + + const { i18n } = useTranslationContext(); + + if (action) { + switch (action.type) { + case "show-details": return <ShowCashoutDetails + id={action.account} + onLoadNotOk={handleNotOkResult(i18n, onRegister)} + onCancel={() => { + setAction(undefined); + }} + /> + case "show-cashout": return ( + <div> + <div> + <h1 class="nav welcome-text"> + <i18n.Translate>Cashout for account {action.account}</i18n.Translate> + </h1> + </div> + <Cashouts + account={action.account} + onSelected={(id) => { + setAction({ + type: "show-cashouts-details", + account: action.account + }); + }} + /> + <p> + <input + class="pure-button" + type="submit" + value={i18n.str`Close`} + onClick={async (e) => { + e.preventDefault(); + setAction(undefined); + }} + /> + </p> + </div> + ) + case "update-password": return <UpdateAccountPassword + account={action.account} + onLoadNotOk={handleNotOkResult(i18n, onRegister)} + onUpdateSuccess={() => { + notifyInfo(i18n.str`Password changed`); + setAction(undefined); + }} + onClear={() => { + setAction(undefined); + }} + /> + case "remove-account": return <RemoveAccount + account={action.account} + onLoadNotOk={handleNotOkResult(i18n, onRegister)} + onUpdateSuccess={() => { + notifyInfo(i18n.str`Account removed`); + setAction(undefined); + }} + onClear={() => { + setAction(undefined); + }} + /> + case "show-cashouts-details": return <ShowAccountDetails + account={action.account} + onLoadNotOk={handleNotOkResult(i18n, onRegister)} + onChangePassword={() => { + setAction({ + type: "update-password", + account: action.account, + }) + }} + onUpdateSuccess={() => { + notifyInfo(i18n.str`Account updated`); + setAction(undefined); + }} + onClear={() => { + setAction(undefined); + }} + /> + } + } + + if (createAccount) { + return ( + <CreateNewAccount + onClose={() => setCreateAccount(false)} + onCreateSuccess={(password) => { + notifyInfo( + i18n.str`Account created with password "${password}". The user must change the password on the next login.`, + ); + setCreateAccount(false); + }} + /> + ); + } + + return ( + <Fragment> + <div> + <h1 class="nav welcome-text"> + <i18n.Translate>Admin panel</i18n.Translate> + </h1> + </div> + + <p> + <div style={{ display: "flex", justifyContent: "space-between" }}> + <div></div> + <div> + <input + class="pure-button pure-button-primary content" + type="submit" + value={i18n.str`Create account`} + onClick={async (e) => { + e.preventDefault(); + + setCreateAccount(true); + }} + /> + </div> + </div> + </p> + + <AdminAccount onRegister={onRegister} /> + + <AccountList account={undefined} onAction={(type,account) => setAction({account, type})} onRegister={onRegister}/> + + </Fragment> + ); +}
\ No newline at end of file |