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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
import { useCallback } from 'react';
import styled from 'styled-components';
import { colors } from '../../config.json';
import { messages } from '../../shared/gettext';
import { useAppContext } from '../context';
import { transitions, useHistory } from '../lib/history';
import { RoutePath } from '../lib/routes';
import { useBoolean } from '../lib/utilityHooks';
import { useSelector } from '../redux/store';
import * as AppButton from './AppButton';
import { measurements, tinyText } from './common-styles';
import ErrorView from './ErrorView';
import { Footer } from './Layout';
import { ModalAlert, ModalMessage, ModalMessageList } from './Modal';
import { ModalAlertType } from './Modal';
export default function Launch() {
const daemonAllowed = useSelector((state) => state.userInterface.daemonAllowed);
const footer = daemonAllowed === false ? <MacOsPermissionFooter /> : <DefaultFooter />;
return (
<ErrorView footer={footer}>
{messages.pgettext('launch-view', 'Connecting to Mullvad system service...')}
</ErrorView>
);
}
const StyledFooter = styled(Footer)({
backgroundColor: colors.blue,
padding: `0 14px ${measurements.viewMargin}`,
transition: 'opacity 250ms ease-in-out',
});
const StyledFooterInner = styled.div({
display: 'flex',
flexDirection: 'column',
flex: 1,
backgroundColor: colors.darkBlue,
borderRadius: '8px',
margin: 0,
padding: '16px',
});
const StyledFooterMessage = styled.span(tinyText, {
color: colors.white,
margin: `8px 0 ${measurements.buttonVerticalMargin} 0`,
});
function MacOsPermissionFooter() {
const { showLaunchDaemonSettings } = useAppContext();
const openSettings = useCallback(async () => {
await showLaunchDaemonSettings();
}, []);
return (
<StyledFooter>
<StyledFooterInner>
<StyledFooterMessage>
{messages.pgettext(
'launch-view',
'Permission for the Mullvad VPN service has been revoked. Please go to System Settings and allow Mullvad VPN under the “Allow in the Background” setting.',
)}
</StyledFooterMessage>
<AppButton.BlueButton onClick={openSettings}>
{messages.gettext('Go to System Settings')}
</AppButton.BlueButton>
</StyledFooterInner>
</StyledFooter>
);
}
function DefaultFooter() {
const history = useHistory();
const [dialogVisible, showDialog, hideDialog] = useBoolean();
const openSendProblemReport = useCallback(() => {
hideDialog();
history.push(RoutePath.problemReport, { transition: transitions.show });
}, [hideDialog, history.push]);
return (
<>
<StyledFooter>
<StyledFooterInner>
<StyledFooterMessage>
{messages.pgettext(
'launch-view',
'Unable to contact the Mullvad system service, your connection might be unsecure. Please troubleshoot or send a problem report by clicking the Learn more button.',
)}
</StyledFooterMessage>
<AppButton.BlueButton onClick={showDialog}>
{messages.gettext('Learn more')}
</AppButton.BlueButton>
</StyledFooterInner>
</StyledFooter>
<ModalAlert
isOpen={dialogVisible}
type={ModalAlertType.info}
close={hideDialog}
buttons={[
<AppButton.GreenButton key="problem-report" onClick={openSendProblemReport}>
{messages.pgettext('launch-view', 'Send problem report')}
</AppButton.GreenButton>,
<AppButton.BlueButton key="back" onClick={hideDialog}>
{messages.gettext('Back')}
</AppButton.BlueButton>,
]}>
<ModalMessage>
{messages.pgettext(
'launch-view',
'The system service component of the app hasn’t started or can’t be contacted. The system service is responsible for the security, kill switch, and the VPN tunnel. To troubleshoot please try:',
)}
</ModalMessage>
<ModalMessage>
<ModalMessageList>
<li>{messages.pgettext('launch-view', 'Restarting your computer.')}</li>
<li>{messages.pgettext('launch-view', 'Reinstalling the app.')}</li>
</ModalMessageList>
</ModalMessage>
<ModalMessage>
{messages.pgettext(
'launch-view',
'If these steps do not work please send a problem report.',
)}
</ModalMessage>
</ModalAlert>
</>
);
}
|
