-
Notifications
You must be signed in to change notification settings - Fork 2
/
PageAccounts.tsx
70 lines (64 loc) 路 2.17 KB
/
PageAccounts.tsx
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
import {
Alert,
AlertIcon,
Button,
Flex,
Heading,
Stack,
StackDivider,
Text,
} from '@chakra-ui/react';
import { signIn } from 'next-auth/react';
import { useTranslation } from 'react-i18next';
import { FiGithub, FiGitlab } from 'react-icons/fi';
import { Page, PageContent } from '@/app/layout';
import { Icon } from '@/components';
import { trpc } from '@/utils/trpc';
export const PageAccounts = () => {
const { t } = useTranslation('account');
const { data, isLoading: areAccountsLoading } = trpc.useQuery(['account.me']);
const githubAccount = data?.find((account) => account.provider === 'github');
const gitlabAccount = data?.find((account) => account.provider === 'gitlab');
const isLoading = areAccountsLoading;
return (
<Page containerSize="lg">
<PageContent>
<Stack>
<Heading size="md" mb="4">
{t('account:profile.title')}
</Heading>
<Stack w="full" divider={<StackDivider />}>
<Flex flex="1" justify="space-between" alignItems="center">
<Text>GitHub</Text>
<Button
leftIcon={<Icon icon={FiGithub} />}
isDisabled={!!githubAccount}
isLoading={isLoading}
>
{githubAccount ? githubAccount.username ?? 'Linked' : 'Link'}
</Button>
</Flex>
<Stack>
<Flex flex="1" justify="space-between" alignItems="center">
<Text>GitLab</Text>
<Button
leftIcon={<Icon icon={FiGitlab} />}
isDisabled={!!gitlabAccount}
isLoading={isLoading}
onClick={() => signIn('gitlab')}
>
{gitlabAccount ? gitlabAccount.username ?? 'Linked' : 'Link'}
</Button>
</Flex>
<Alert borderRadius="md" status="warning">
<AlertIcon />
At the moment, you can link your GitLab account but the issue
export using GitLab API is not supported yet.
</Alert>
</Stack>
</Stack>
</Stack>
</PageContent>
</Page>
);
};