18
18
*/
19
19
20
20
import { FC , FormEvent } from 'react' ;
21
- import { Form , Button } from 'react-bootstrap' ;
21
+ import { Form , Button , Row , Col } from 'react-bootstrap' ;
22
22
import { useTranslation } from 'react-i18next' ;
23
23
24
24
import Progress from '../Progress' ;
@@ -46,13 +46,36 @@ const sqlData = [
46
46
} ,
47
47
] ;
48
48
49
+ const sslModes = [
50
+ {
51
+ value : 'require' ,
52
+ } ,
53
+ {
54
+ value : 'verify-ca' ,
55
+ } ,
56
+ {
57
+ value : 'verify-full' ,
58
+ } ,
59
+ ] ;
60
+
49
61
const Index : FC < Props > = ( { visible, data, changeCallback, nextCallback } ) => {
50
62
const { t } = useTranslation ( 'translation' , { keyPrefix : 'install' } ) ;
51
63
52
64
const checkValidated = ( ) : boolean => {
53
65
let bol = true ;
54
- const { db_type, db_username, db_password, db_host, db_name, db_file } =
55
- data ;
66
+ const {
67
+ db_type,
68
+ db_username,
69
+ db_password,
70
+ db_host,
71
+ db_name,
72
+ db_file,
73
+ ssl_enabled,
74
+ ssl_mode,
75
+ key_file,
76
+ cert_file,
77
+ pem_file,
78
+ } = data ;
56
79
57
80
if ( db_type . value !== 'sqlite3' ) {
58
81
if ( ! db_username . value ) {
@@ -63,7 +86,6 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
63
86
errorMsg : t ( 'db_username.msg' ) ,
64
87
} ;
65
88
}
66
-
67
89
if ( ! db_password . value ) {
68
90
bol = false ;
69
91
data . db_password = {
@@ -81,7 +103,6 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
81
103
errorMsg : t ( 'db_host.msg' ) ,
82
104
} ;
83
105
}
84
-
85
106
if ( ! db_name . value ) {
86
107
bol = false ;
87
108
data . db_name = {
@@ -90,6 +111,34 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
90
111
errorMsg : t ( 'db_name.msg' ) ,
91
112
} ;
92
113
}
114
+ if ( db_type . value === 'postgres' ) {
115
+ if ( ssl_enabled . value && ssl_mode . value !== 'require' ) {
116
+ if ( ! key_file . value ) {
117
+ bol = false ;
118
+ data . key_file = {
119
+ value : '' ,
120
+ isInvalid : true ,
121
+ errorMsg : t ( 'key_file.msg' ) ,
122
+ } ;
123
+ }
124
+ if ( ! pem_file . value ) {
125
+ bol = false ;
126
+ data . pem_file = {
127
+ value : '' ,
128
+ isInvalid : true ,
129
+ errorMsg : t ( 'pem_file.msg' ) ,
130
+ } ;
131
+ }
132
+ if ( ! cert_file . value ) {
133
+ bol = false ;
134
+ data . cert_file = {
135
+ value : '' ,
136
+ isInvalid : true ,
137
+ errorMsg : t ( 'cert_file.msg' ) ,
138
+ } ;
139
+ }
140
+ }
141
+ }
93
142
} else if ( ! db_file . value ) {
94
143
bol = false ;
95
144
data . db_file = {
@@ -179,12 +228,147 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
179
228
} ) ;
180
229
} }
181
230
/>
182
-
183
231
< Form . Control . Feedback type = "invalid" >
184
232
{ data . db_password . errorMsg }
185
233
</ Form . Control . Feedback >
186
234
</ Form . Group >
187
-
235
+ { data . db_type . value === 'postgres' && (
236
+ < Form . Group controlId = "ssl_enabled" className = "mb-3" >
237
+ < Form . Label > { t ( 'ssl_enabled.label' ) } </ Form . Label >
238
+ < Form . Check
239
+ type = "switch"
240
+ label = { `${
241
+ data . ssl_enabled . value
242
+ ? t ( 'ssl_enabled_on.label' )
243
+ : t ( 'ssl_enabled_off.label' )
244
+ } `}
245
+ checked = { data . ssl_enabled . value }
246
+ onChange = { ( e ) => {
247
+ changeCallback ( {
248
+ ssl_enabled : {
249
+ value : e . target . checked ,
250
+ isInvalid : false ,
251
+ errorMsg : '' ,
252
+ } ,
253
+ ssl_mode : {
254
+ value : 'require' ,
255
+ isInvalid : false ,
256
+ errorMsg : '' ,
257
+ } ,
258
+ key_file : {
259
+ value : '' ,
260
+ isInvalid : false ,
261
+ errorMsg : '' ,
262
+ } ,
263
+ cert_file : {
264
+ value : '' ,
265
+ isInvalid : false ,
266
+ errorMsg : '' ,
267
+ } ,
268
+ pem_file : {
269
+ value : '' ,
270
+ isInvalid : false ,
271
+ errorMsg : '' ,
272
+ } ,
273
+ } ) ;
274
+ } }
275
+ />
276
+ </ Form . Group >
277
+ ) }
278
+ { data . db_type . value === 'postgres' && data . ssl_enabled . value && (
279
+ < Form . Group controlId = "sslmodeOptionsDropdown" className = "mb-3" >
280
+ < Form . Label > { t ( 'ssl_mode.label' ) } </ Form . Label >
281
+ < Form . Select
282
+ value = { data . ssl_mode . value }
283
+ onChange = { ( e ) => {
284
+ changeCallback ( {
285
+ ssl_mode : {
286
+ value : e . target . value ,
287
+ isInvalid : false ,
288
+ errorMsg : '' ,
289
+ } ,
290
+ } ) ;
291
+ } } >
292
+ { sslModes . map ( ( item ) => {
293
+ return (
294
+ < option value = { item . value } key = { item . value } >
295
+ { item . value }
296
+ </ option >
297
+ ) ;
298
+ } ) }
299
+ </ Form . Select >
300
+ </ Form . Group >
301
+ ) }
302
+ { data . db_type . value === 'postgres' &&
303
+ data . ssl_enabled . value &&
304
+ ( data . ssl_mode . value === 'verify-ca' ||
305
+ data . ssl_mode . value === 'verify-full' ) && (
306
+ < Row className = "mb-3" >
307
+ < Form . Group as = { Col } controlId = "key_file" >
308
+ < Form . Control
309
+ placeholder = { t ( 'key_file.placeholder' ) }
310
+ aria-label = "key_file"
311
+ aria-describedby = "basic-addon1"
312
+ isInvalid = { data . key_file . isInvalid }
313
+ onChange = { ( e ) => {
314
+ changeCallback ( {
315
+ key_file : {
316
+ value : e . target . value ,
317
+ isInvalid : false ,
318
+ errorMsg : '' ,
319
+ } ,
320
+ } ) ;
321
+ } }
322
+ required
323
+ />
324
+ < Form . Control . Feedback type = "invalid" >
325
+ { `${ data . key_file . errorMsg } ` }
326
+ </ Form . Control . Feedback >
327
+ </ Form . Group >
328
+ < Form . Group as = { Col } controlId = "cert_file" >
329
+ < Form . Control
330
+ placeholder = { t ( 'cert_file.placeholder' ) }
331
+ aria-label = "cert_file"
332
+ aria-describedby = "basic-addon1"
333
+ isInvalid = { data . cert_file . isInvalid }
334
+ onChange = { ( e ) => {
335
+ changeCallback ( {
336
+ cert_file : {
337
+ value : e . target . value ,
338
+ isInvalid : false ,
339
+ errorMsg : '' ,
340
+ } ,
341
+ } ) ;
342
+ } }
343
+ required
344
+ />
345
+ < Form . Control . Feedback type = "invalid" >
346
+ { `${ data . cert_file . errorMsg } ` }
347
+ </ Form . Control . Feedback >
348
+ </ Form . Group >
349
+ < Form . Group as = { Col } controlId = "pem_file" >
350
+ < Form . Control
351
+ placeholder = { t ( 'pem_file.placeholder' ) }
352
+ aria-label = "pem_file"
353
+ aria-describedby = "basic-addon1"
354
+ isInvalid = { data . pem_file . isInvalid }
355
+ onChange = { ( e ) => {
356
+ changeCallback ( {
357
+ pem_file : {
358
+ value : e . target . value ,
359
+ isInvalid : false ,
360
+ errorMsg : '' ,
361
+ } ,
362
+ } ) ;
363
+ } }
364
+ required
365
+ />
366
+ < Form . Control . Feedback type = "invalid" >
367
+ { `${ data . pem_file . errorMsg } ` }
368
+ </ Form . Control . Feedback >
369
+ </ Form . Group >
370
+ </ Row >
371
+ ) }
188
372
< Form . Group controlId = "db_host" className = "mb-3" >
189
373
< Form . Label > { t ( 'db_host.label' ) } </ Form . Label >
190
374
< Form . Control
@@ -206,7 +390,6 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
206
390
{ data . db_host . errorMsg }
207
391
</ Form . Control . Feedback >
208
392
</ Form . Group >
209
-
210
393
< Form . Group controlId = "name" className = "mb-3" >
211
394
< Form . Label > { t ( 'db_name.label' ) } </ Form . Label >
212
395
< Form . Control
0 commit comments