diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/ProfileNavigation.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/ProfileNavigation.tsx | 214 |
1 files changed, 150 insertions, 64 deletions
diff --git a/packages/demobank-ui/src/pages/ProfileNavigation.tsx b/packages/demobank-ui/src/pages/ProfileNavigation.tsx index bd9883b1b..a6615d578 100644 --- a/packages/demobank-ui/src/pages/ProfileNavigation.tsx +++ b/packages/demobank-ui/src/pages/ProfileNavigation.tsx @@ -1,72 +1,158 @@ +/* + This file is part of GNU Taler + (C) 2022-2024 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/> + */ import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, VNode, h } from "preact"; +import { VNode, h } from "preact"; +import { privatePages } from "../Routing.js"; import { useBankCoreApiContext } from "../context/config.js"; -import { assertUnreachable } from "./WithdrawalOperationPage.js"; import { useBackendState } from "../hooks/backend.js"; +import { assertUnreachable } from "@gnu-taler/taler-util"; -export function ProfileNavigation({ current }: { current: "details" | "delete" | "credentials" | "cashouts" }): VNode { - const { i18n } = useTranslationContext() - const { config } = useBankCoreApiContext() +export function ProfileNavigation({ + current, +}: { + current: "details" | "delete" | "credentials" | "cashouts"; +}): VNode { + const { i18n } = useTranslationContext(); + const { config } = useBankCoreApiContext(); const { state: credentials } = useBackendState(); - const nonAdminUser = credentials.status !== "loggedIn" ? false : !credentials.isUserAdministrator - return <div> - <div class="sm:hidden"> - <label for="tabs" class="sr-only"><i18n.Translate>Select a section</i18n.Translate></label> - <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" onChange={(e) => { - const op = e.currentTarget.value as typeof current - switch (op) { - case "details": { - window.location.href = "#/my-profile"; - return; - } - case "delete": { - window.location.href = "#/delete-my-account"; - return; - } - case "credentials": { - window.location.href = "#/my-password"; - return; - } - case "cashouts": { - window.location.href = "#/my-cashouts"; - return; - } - default: assertUnreachable(op) - } - }}> - <option value="details" selected={current == "details"}><i18n.Translate>Details</i18n.Translate></option> - {!config.allow_deletions ? undefined : - <option value="delete" selected={current == "delete"}><i18n.Translate>Delete</i18n.Translate></option> - } - <option value="credentials" selected={current == "credentials"}><i18n.Translate>Credentials</i18n.Translate></option> - {config.allow_conversion ? - <option value="cashouts" selected={current == "cashouts"}><i18n.Translate>Cashouts</i18n.Translate></option> - : undefined} - </select> - </div> - <div class="hidden sm:block"> - <nav class="isolate flex divide-x divide-gray-200 rounded-lg shadow" aria-label="Tabs"> - <a href="#/my-profile" data-selected={current == "details"} class="rounded-l-lg text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10" > - <span><i18n.Translate>Details</i18n.Translate></span> - <span aria-hidden="true" data-selected={current == "details"} class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span> - </a> - {!config.allow_deletions ? undefined : - <a href="#/delete-my-account" data-selected={current == "delete"} aria-current="page" class=" text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"> - <span><i18n.Translate>Delete</i18n.Translate></span> - <span aria-hidden="true" data-selected={current == "delete"} class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span> + const nonAdminUser = + credentials.status !== "loggedIn" + ? false + : !credentials.isUserAdministrator; + return ( + <div> + <div class="sm:hidden"> + <label for="tabs" class="sr-only"> + <i18n.Translate>Select a section</i18n.Translate> + </label> + <select + id="tabs" + name="tabs" + class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" + onChange={(e) => { + const op = e.currentTarget.value as typeof current; + switch (op) { + case "details": { + window.location.href = privatePages.myAccountDetails.url({}); + return; + } + case "delete": { + window.location.href = privatePages.myAccountDelete.url({}); + return; + } + case "credentials": { + window.location.href = privatePages.myAccountPassword.url({}); + return; + } + case "cashouts": { + window.location.href = privatePages.myAccountCashouts.url({}); + return; + } + default: + assertUnreachable(op); + } + }} + > + <option value="details" selected={current == "details"}> + <i18n.Translate>Details</i18n.Translate> + </option> + {!config.allow_deletions ? undefined : ( + <option value="delete" selected={current == "delete"}> + <i18n.Translate>Delete</i18n.Translate> + </option> + )} + <option value="credentials" selected={current == "credentials"}> + <i18n.Translate>Credentials</i18n.Translate> + </option> + {config.allow_conversion ? ( + <option value="cashouts" selected={current == "cashouts"}> + <i18n.Translate>Cashouts</i18n.Translate> + </option> + ) : undefined} + </select> + </div> + <div class="hidden sm:block"> + <nav + class="isolate flex divide-x divide-gray-200 rounded-lg shadow" + aria-label="Tabs" + > + <a + href={privatePages.myAccountDetails.url({})} + data-selected={current == "details"} + class="rounded-l-lg text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10" + > + <span> + <i18n.Translate>Details</i18n.Translate> + </span> + <span + aria-hidden="true" + data-selected={current == "details"} + class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5" + ></span> </a> - } - <a href="#/my-password" data-selected={current == "credentials"} aria-current="page" class=" text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"> - <span><i18n.Translate>Credentials</i18n.Translate></span> - <span aria-hidden="true" data-selected={current == "credentials"} class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span> - </a> - {config.allow_conversion && nonAdminUser ? - <a href="#/my-cashouts" data-selected={current == "cashouts"} class="rounded-r-lg text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"> - <span><i18n.Translate>Cashouts</i18n.Translate></span> - <span aria-hidden="true" data-selected={current == "cashouts"} class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span> + {!config.allow_deletions ? undefined : ( + <a + href={privatePages.myAccountDelete.url({})} + data-selected={current == "delete"} + aria-current="page" + class=" text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10" + > + <span> + <i18n.Translate>Delete</i18n.Translate> + </span> + <span + aria-hidden="true" + data-selected={current == "delete"} + class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5" + ></span> + </a> + )} + <a + href={privatePages.myAccountPassword.url({})} + data-selected={current == "credentials"} + aria-current="page" + class=" text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10" + > + <span> + <i18n.Translate>Credentials</i18n.Translate> + </span> + <span + aria-hidden="true" + data-selected={current == "credentials"} + class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5" + ></span> </a> - : undefined} - </nav> + {config.allow_conversion && nonAdminUser ? ( + <a + href={privatePages.myAccountCashouts.url({})} + data-selected={current == "cashouts"} + class="rounded-r-lg text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10" + > + <span> + <i18n.Translate>Cashouts</i18n.Translate> + </span> + <span + aria-hidden="true" + data-selected={current == "cashouts"} + class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5" + ></span> + </a> + ) : undefined} + </nav> + </div> </div> - </div> -}
\ No newline at end of file + ); +} |