mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +02:00
feat: accounts
This commit is contained in:
TrèsAbhi committed
1 parent
bc9e1c3007
commit
afd99a1dfe
1 file changed
+124
-3
@@ -9,18 +9,27 @@ import {
|
|||||||
} from '@radix-ui/react-icons';
|
} from '@radix-ui/react-icons';
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
|
Button,
|
||||||
|
Dialog,
|
||||||
Flex,
|
Flex,
|
||||||
Grid,
|
Grid,
|
||||||
IconButton,
|
IconButton,
|
||||||
|
Inset,
|
||||||
|
Popover,
|
||||||
ScrollArea,
|
ScrollArea,
|
||||||
Separator,
|
Separator,
|
||||||
Text,
|
Text,
|
||||||
} from '@radix-ui/themes';
|
} from '@radix-ui/themes';
|
||||||
import { usePathname } from 'next/navigation';
|
import { usePathname } from 'next/navigation';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import { REGIONS } from '../../constants/regions';
|
||||||
import { TOOLS } from '../../constants/tools';
|
import { TOOLS } from '../../constants/tools';
|
||||||
|
import { WARGAMING_APPLICATION_ID } from '../../constants/wargamingApplicationID';
|
||||||
import { imgur, ImgurSize } from '../../core/blitzkit/imgur';
|
import { imgur, ImgurSize } from '../../core/blitzkit/imgur';
|
||||||
|
import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
|
||||||
import { PatreonIcon } from '../../icons/Patreon';
|
import { PatreonIcon } from '../../icons/Patreon';
|
||||||
|
import { WargamingIcon } from '../../icons/Wargaming';
|
||||||
|
import strings from '../../lang/en-US.json';
|
||||||
import * as App from '../../stores/app';
|
import * as App from '../../stores/app';
|
||||||
import { Link } from '../Link';
|
import { Link } from '../Link';
|
||||||
import * as styles from './index.css';
|
import * as styles from './index.css';
|
||||||
@@ -125,9 +134,121 @@ export default function Navbar() {
|
|||||||
>
|
>
|
||||||
<GearIcon />
|
<GearIcon />
|
||||||
</Link>
|
</Link>
|
||||||
<IconButton variant="ghost" color="gray">
|
<Popover.Root>
|
||||||
<PersonIcon />
|
<Popover.Trigger>
|
||||||
</IconButton>
|
<IconButton variant="ghost" color="gray">
|
||||||
|
<PersonIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
|
<Popover.Content
|
||||||
|
align="end"
|
||||||
|
width="320px"
|
||||||
|
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||||
|
>
|
||||||
|
{(logins.patreon || logins.wargaming) && (
|
||||||
|
<Flex direction="column" gap="2">
|
||||||
|
<Text align="center" color="gray">
|
||||||
|
Logged in accounts
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{logins.patreon && (
|
||||||
|
<Flex align="center" gap="2" justify="center">
|
||||||
|
<PatreonIcon width={15} height={15} />
|
||||||
|
<Text>Patreon</Text>
|
||||||
|
<Button
|
||||||
|
color="red"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() =>
|
||||||
|
mutateApp((draft) => {
|
||||||
|
draft.logins.patreon = undefined;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{logins.wargaming && (
|
||||||
|
<Flex align="center" gap="2" justify="center">
|
||||||
|
<WargamingIcon width={15} height={15} />
|
||||||
|
<Text>Wargaming</Text>
|
||||||
|
<Button
|
||||||
|
color="red"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() =>
|
||||||
|
mutateApp((draft) => {
|
||||||
|
draft.logins.wargaming = undefined;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!logins.patreon !== !logins.wargaming && (
|
||||||
|
<Inset side="x">
|
||||||
|
<Separator my="4" size="4" />
|
||||||
|
</Inset>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(!logins.patreon || !logins.wargaming) && (
|
||||||
|
<Flex direction="column" gap="2">
|
||||||
|
<Text align="center" color="gray">
|
||||||
|
Log in with...
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{!logins.patreon && (
|
||||||
|
<Link style={{ width: '100%' }} href={patreonLoginUrl()}>
|
||||||
|
<Button style={{ width: '100%' }} color="tomato">
|
||||||
|
<PatreonIcon width={15} height={15} /> Patreon
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!logins.wargaming && (
|
||||||
|
<Dialog.Root>
|
||||||
|
<Dialog.Trigger>
|
||||||
|
<Button color="red">
|
||||||
|
<WargamingIcon width={15} height={15} /> Wargaming
|
||||||
|
</Button>
|
||||||
|
</Dialog.Trigger>
|
||||||
|
|
||||||
|
<Dialog.Content width="fit-content">
|
||||||
|
<Flex direction="column" gap="4" align="center">
|
||||||
|
<Text color="gray">Choose your region</Text>
|
||||||
|
|
||||||
|
<Flex gap="2" wrap="wrap">
|
||||||
|
{REGIONS.map((region) => (
|
||||||
|
<Dialog.Close key={region}>
|
||||||
|
<Link
|
||||||
|
href={
|
||||||
|
typeof window !== 'undefined'
|
||||||
|
? `https://api.worldoftanks.${region}/wot/auth/login/?application_id=${WARGAMING_APPLICATION_ID}&redirect_uri=${encodeURIComponent(
|
||||||
|
`${location.origin}/auth/wargaming?return=${location.origin}${location.pathname}`,
|
||||||
|
)}`
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button color="red">
|
||||||
|
{strings.common.regions.normal[region]}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</Dialog.Close>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|||||||
Reference in new issue
Block a user