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
|
import {
Checkbox,
Pane,
RadioGroup,
SelectField,
TextInputField,
} from 'evergreen-ui';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import i18n from '../i18n';
import { Translations } from '../translations';
import './style.css';
export const Settings = (props) => {
const { t } = useTranslation();
const encryptionModes = [
{ label: t('wifi.password.encryption.none'), value: '' },
{ label: 'WPA/WPA2/WPA3', value: 'WPA' },
{ label: 'WPA2-EAP', value: 'WPA2-EAP' },
{ label: 'WEP', value: 'WEP' },
];
const eapMethods = [{ label: 'PWD', value: 'PWD' }];
const langSelectDefaultValue = () => {
const t = Translations.filter((t) => t.id === i18n.language);
if (t.length !== 1) {
return 'en-US';
}
return t[0].id;
};
useEffect(() => {
if (props.firstLoad.current && window.innerWidth < 500) {
props.onFirstLoad();
props.onOrientationChange(true);
}
});
return (
<Pane id="settings" maxWidth={props.settings.portrait ? '350px' : '100%'}>
<SelectField
width={300}
inputHeight={38}
label={t('select')}
onChange={(e) => props.onLanguageChange(e.target.value)}
defaultValue={langSelectDefaultValue()}
>
{Translations.map((t) => (
<option key={t.id} value={t.id}>
{t.name}
</option>
))}
</SelectField>
<Checkbox
label={t('button.rotate')}
checked={props.settings.portrait}
onChange={() => props.onOrientationChange(!props.settings.portrait)}
/>
<Checkbox
label={t('wifi.password.hide')}
checked={props.settings.hidePassword}
onChange={() =>
props.onHidePasswordChange(!props.settings.hidePassword)
}
/>
<Checkbox
label={t('wifi.name.hiddenSSID')}
checked={props.settings.hiddenSSID}
onChange={() => props.onHiddenSSIDChange(!props.settings.hiddenSSID)}
/>
<Checkbox
label={t('cards.tip.hide')}
checked={props.settings.hideTip}
onChange={() => props.onHideTipChange(!props.settings.hideTip)}
/>
<TextInputField
type="number"
width={300}
label={t('cards.additional')}
value={props.settings.additionalCards}
onChange={(e) => props.onAdditionalCardsChange(e.target.value)}
/>
<RadioGroup
label={t('wifi.password.encryption')}
size={16}
value={props.settings.encryptionMode}
options={encryptionModes}
onChange={(e) => props.onEncryptionModeChange(e.target.value)}
/>
<RadioGroup
label={t('wifi.encryption.eapMethod')}
size={16}
value={props.settings.eapMethod}
options={eapMethods}
className={`
${props.settings.encryptionMode !== 'WPA2-EAP' && 'hidden'}
`}
onChange={(e) => props.onEapMethodChange(e.target.value)}
/>
</Pane>
);
};
|
