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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
import styled from 'styled-components';
import { messages } from '../../shared/gettext';
import { useAppContext } from '../context';
import { Button, Flex } from '../lib/components';
import { colors } from '../lib/foundations';
import { IconBadge } from '../lib/icon-badge';
import { useSelector } from '../redux/store';
import { AppMainHeader } from './app-main-header';
import { bigText, measurements, smallText } from './common-styles';
import CustomScrollbars from './CustomScrollbars';
import { Container, Footer, Layout } from './Layout';
export const StyledCustomScrollbars = styled(CustomScrollbars)({
flex: 1,
});
export const StyledContainer = styled(Container)({
paddingTop: '22px',
minHeight: '100%',
backgroundColor: colors.darkBlue,
});
export const StyledBody = styled.div({
display: 'flex',
flexDirection: 'column',
flex: 1,
padding: `0 ${measurements.horizontalViewMargin}`,
});
export const StyledTitle = styled.span(bigText, {
lineHeight: '38px',
marginBottom: '8px',
color: colors.white,
});
export const StyledMessage = styled.span(smallText, {
marginBottom: measurements.rowVerticalMargin,
color: colors.white,
});
export function DeviceRevokedView() {
const { leaveRevokedDevice } = useAppContext();
const tunnelState = useSelector((state) => state.connection.status);
return (
<Layout>
<AppMainHeader variant="basedOnConnectionStatus" size="basedOnLoginStatus">
<AppMainHeader.AccountButton />
<AppMainHeader.SettingsButton />
</AppMainHeader>
<StyledCustomScrollbars fillContainer>
<StyledContainer>
<StyledBody>
<Flex $justifyContent="center" $margin={{ bottom: 'medium' }}>
<IconBadge state="negative" />
</Flex>
<StyledTitle data-testid="title">
{messages.pgettext('device-management', 'Device is inactive')}
</StyledTitle>
<StyledMessage>
{messages.pgettext(
'device-management',
'You have removed this device. To connect again, you will need to log back in.',
)}
</StyledMessage>
<StyledMessage>
{tunnelState.state !== 'disconnected' &&
messages.pgettext(
'device-management',
'Going to login will unblock the Internet on this device.',
)}
</StyledMessage>
</StyledBody>
<Footer>
<Button
variant={tunnelState.state === 'disconnected' ? 'primary' : 'destructive'}
onClick={leaveRevokedDevice}>
<Button.Text>
{
// TRANSLATORS: Button label for navigating to login.
messages.pgettext('device-management', 'Go to login')
}
</Button.Text>
</Button>
</Footer>
</StyledContainer>
</StyledCustomScrollbars>
</Layout>
);
}
|
