aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Settings.js
blob: 1c28dabce10e6e532bc3e5165ca54610ab8c0095 (plain)
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
import { Checkbox, Pane, RadioGroup, SelectField } from 'evergreen-ui';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import i18n from '../i18n';
import './style.css';

export const Settings = (props) => {
  const { t } = useTranslation();
  const [encryptionModes] = useState([
    { label: 'None', value: '' },
    { label: 'WPA/WPA2/WPA3', value: 'WPA' },
    { label: 'WEP', value: 'WEP' },
  ]);

  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')}
        selected={i18n.language}
        onChange={(e) => props.onLanguageChange(e.target.value)}
      >
        <option value="en-US">English</option>
        <option value="ar">Arabic - العربية</option>
        <option value="ca">Catalan - Català</option>
        <option value="zh-HK">Chinese Hong Kong - 简体中文</option>
        <option value="zh-CN">Chinese Simplified - 简体中文</option>
        <option value="nl-NL">Dutch - Nederlands</option>
        <option value="fr-FR">French - Français</option>
        <option value="de-DE">German - Deutsch</option>
        <option value="hi-IN">Hindi - हिन्दी</option>
        <option value="id-ID">Indonesian</option>
        <option value="it-IT">Italian</option>
        <option value="ja">Japanese - 日本語</option>
        <option value="ko">Korean - 한국어</option>
        <option value="no-NB">Norwegian - Norsk</option>
        <option value="oc">Occitan</option>
        <option value="fa-IR">Persian Iran - فارسی</option>
        <option value="pl-PL">Polish - Polski</option>
        <option value="pt">Portuguese - Português</option>
        <option value="pt-BR">Portuguese - Português brasileiro</option>
        <option value="ru-RU">Russian - Русский</option>
        <option value="es">Spanish - Español</option>
        <option value="tr-TR">Turkish - Türkçe</option>
        <option value="uk-UA">Ukrainian - Українська</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)
        }
      />
      <RadioGroup
        label={t('wifi.password.encryption')}
        size={16}
        value={props.settings.encryptionMode}
        options={encryptionModes}
        onChange={(e) => props.onEncryptionModeChange(e.target.value)}
      />
    </Pane>
  );
};