/
ActionsView.svelte
71 lines (67 loc) · 2.97 KB
/
ActionsView.svelte
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
<script lang="typescript">
import { localize } from '@core/i18n'
import { NetworkProtocol } from '@core/network'
import { activeProfile, logout } from '@core/profile'
import { getInitials } from '@core/utils'
import { Icon as IconTypes } from '@lib/auxiliary/icon'
import { FontWeight, Icon, NetworkIcon, Text, TextType } from 'shared/components'
import { profileRouter } from '../../../../../lib/routers'
import features from '@features/features'
import { NetworkStatusButton, ProfileActionButton } from '../../../../../components/'
let networkProtocol: NetworkProtocol
$: networkProtocol = $activeProfile.networkProtocol
let initials: string
$: initials = getInitials($activeProfile.name, 1)
function handleLogoutClick(): void {
void logout()
}
</script>
{#if $activeProfile?.id}
<div class="w-full flex flex-col space-y-14">
<div class="flex flex-col">
<div class="flex flex-row justify-center">
<div class="relative">
<div class="h-16 w-16 rounded-full bg-blue-500 flex items-center justify-center">
<Text type={TextType.h5} classes="text-white">{initials}</Text>
</div>
<div class="absolute right-0 bottom-0">
<NetworkIcon {networkProtocol} height={14} width={14} />
</div>
</div>
</div>
<Text
type={TextType.h4}
color="gray-800"
darkColor="white"
fontWeight={FontWeight.semibold}
lineHeight="5"
classes="text-center pt-4"
>
{$activeProfile.name}
</Text>
<div class="flex justify-center">
<button class="inline-flex p-1" on:click={handleLogoutClick}>
<Icon width="16" height="16" icon={IconTypes.Logout} classes="text-blue-500 my-auto" />
<Text type={TextType.p} overrideColor classes="text-blue-500 pl-1">
{localize('views.dashboard.profileModal.logout')}
</Text>
</button>
</div>
</div>
<div class="flex flex-col space-y-6">
{#if features?.dashboard?.profileActions?.networkStatus?.enabled}
<NetworkStatusButton onClick={() => $profileRouter.next({ networkStatus: true })} />
{/if}
{#if features?.settings?.enabled}
<ProfileActionButton
primaryText={localize('views.dashboard.profileModal.allSettings')}
secondaryText={localize('views.dashboard.profileModal.profileApplication')}
icon={IconTypes.Settings}
iconColor="blue-500"
color="transparent"
onClick={() => $profileRouter.next({ settings: true })}
/>
{/if}
</div>
</div>
{/if}