-
Notifications
You must be signed in to change notification settings - Fork 355
/
NetworkInfoForm.tsx
112 lines (104 loc) · 2.35 KB
/
NetworkInfoForm.tsx
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
import { JSONSchema6 } from 'json-schema';
import * as React from 'react';
import { Flex, Heading } from 'rendition';
import { Form } from 'rendition/dist/unstable';
import { Network, NetworkInfo } from './App';
import { RenditionUiSchema } from 'rendition/dist/unstable/unstable-typings';
const getSchema = (availableNetworks: Network[]): JSONSchema6 => ({
type: 'object',
properties: {
ssid: {
title: 'SSID',
type: 'string',
default: availableNetworks[0]?.ssid,
oneOf: availableNetworks.map((network) => ({
const: network.ssid,
title: network.ssid,
})),
},
identity: {
title: 'User',
type: 'string',
default: '',
},
passphrase: {
title: 'Passphrase',
type: 'string',
default: '',
},
},
required: ['ssid'],
});
const getUiSchema = (isEnterprise: boolean): RenditionUiSchema => ({
ssid: {
'ui:placeholder': 'Select SSID',
'ui:options': {
emphasized: true,
},
},
identity: {
'ui:options': {
emphasized: true,
},
'ui:widget': !isEnterprise ? 'hidden' : undefined,
},
passphrase: {
'ui:widget': 'password',
'ui:options': {
emphasized: true,
},
},
});
const isEnterpriseNetwork = (
networks: Network[],
selectedNetworkSsid?: string,
) => {
return networks.some(
(network) =>
network.ssid === selectedNetworkSsid && network.security === 'enterprise',
);
};
interface NetworkInfoFormProps {
availableNetworks: Network[];
onSubmit: (data: NetworkInfo) => void;
}
export const NetworkInfoForm = ({
availableNetworks,
onSubmit,
}: NetworkInfoFormProps) => {
const [data, setData] = React.useState<NetworkInfo>({});
const isSelectedNetworkEnterprise = isEnterpriseNetwork(
availableNetworks,
data.ssid,
);
return (
<Flex
flexDirection="column"
alignItems="center"
justifyContent="center"
m={4}
mt={5}
>
<Heading.h3 align="center" mb={4}>
Hi! Please choose your WiFi from the list
</Heading.h3>
<Form
width={['100%', '80%', '60%', '40%']}
onFormChange={({ formData }) => {
setData(formData);
}}
onFormSubmit={({ formData }) => onSubmit(formData)}
value={data}
schema={getSchema(availableNetworks)}
uiSchema={getUiSchema(isSelectedNetworkEnterprise)}
submitButtonProps={{
width: '60%',
mx: '20%',
mt: 3,
disabled: availableNetworks.length <= 0,
}}
submitButtonText={'Connect'}
/>
</Flex>
);
};