blob: 3596d0f111ce9513b7df2109a54e45471a43abb1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { Fragment, VNode, h } from "preact";
import { useBankCoreApiContext } from "../context/config.js";
import { assertUnreachable } from "./WithdrawalOperationPage.js";
import { useBackendState } from "../hooks/backend.js";
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>
</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>Cashouts</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>
}
|
