@@ -28,15 +28,11 @@ import { Form, FormGroup, FormHelperText } from "@patternfly/react-core/dist/esm
28
28
import { HelperText , HelperTextItem } from "@patternfly/react-core/dist/esm/components/HelperText" ;
29
29
import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput" ;
30
30
import { InputGroup } from "@patternfly/react-core/dist/esm/components/InputGroup" ;
31
- import { PencilAltIcon , EyeIcon , EyeSlashIcon , CheckIcon , TimesIcon , PendingIcon , HelpIcon } from "@patternfly/react-icons" ;
32
- import { Spinner } from "@patternfly/react-core/dist/esm/components/Spinner" ;
31
+ import { EyeIcon , EyeSlashIcon , PendingIcon , HelpIcon } from "@patternfly/react-icons" ;
33
32
34
33
import {
35
34
EmptyState , EmptyStateHeader , EmptyStateIcon , EmptyStateBody , EmptyStateFooter , EmptyStateActions
36
35
} from "@patternfly/react-core/dist/esm/components/EmptyState" ;
37
- import {
38
- Text , TextVariants ,
39
- } from "@patternfly/react-core/dist/esm/components/Text" ;
40
36
import { Split , SplitItem } from "@patternfly/react-core/dist/esm/layouts/Split/index.js" ;
41
37
42
38
import { KebabDropdown } from 'cockpit-components-dropdown.jsx' ;
@@ -79,23 +75,31 @@ const VncEditModal = ({ vm, inactive_vnc }) => {
79
75
const config_password = inactive_vnc . password || "" ;
80
76
81
77
const Dialogs = useDialogs ( ) ;
82
- const [ editing , setEditing ] = useState ( false ) ;
83
- const [ applyInProgress , setApplyInProgress ] = useState ( false ) ;
84
78
const [ port , setPort ] = useState ( config_port ) ;
85
79
const [ password , setPassword ] = useState ( config_password ) ;
86
80
const [ showPassword , setShowPassword ] = useState ( false ) ;
87
81
const [ portError , setPortError ] = useState ( null ) ;
82
+ const [ passwordError , setPasswordError ] = useState ( null ) ;
88
83
const [ applyError , setApplyError ] = useState ( null ) ;
89
- const [ applyErrorDetails , setApplyErrorDetails ] = useState ( null ) ;
84
+ const [ applyErrorDetail , setApplyErrorDetail ] = useState ( null ) ;
90
85
91
86
async function apply ( ) {
87
+ let field_errors = 0 ;
92
88
if ( port != "" && ( ! port . match ( "^[0-9]+$" ) || Number ( port ) < 5900 ) ) {
93
89
setPortError ( _ ( "Port must be 5900 or larger." ) ) ;
94
- return ;
90
+ field_errors += 1 ;
95
91
}
96
92
93
+ if ( password . length > 8 ) {
94
+ setPasswordError ( _ ( "Password must be 8 characters or less." ) ) ;
95
+ field_errors += 1 ;
96
+ }
97
+
98
+ if ( field_errors > 0 )
99
+ return ;
100
+
97
101
setPortError ( null ) ;
98
- setApplyInProgress ( true ) ;
102
+ setPasswordError ( null ) ;
99
103
100
104
const vncParams = {
101
105
listen : inactive_vnc . address || "" ,
@@ -111,8 +115,6 @@ const VncEditModal = ({ vm, inactive_vnc }) => {
111
115
setApplyError ( _ ( "VNC settings could not be saved" ) ) ;
112
116
setApplyErrorDetail ( ex . message ) ;
113
117
}
114
-
115
- setApplyInProgress ( false ) ;
116
118
}
117
119
118
120
return (
@@ -124,14 +126,19 @@ const VncEditModal = ({ vm, inactive_vnc }) => {
124
126
isOpen
125
127
onClose = { Dialogs . close }
126
128
footer = {
127
- < >
128
- < Button isDisabled = { ! ! portError } id = "vnc-edit-save" variant = 'primary' onClick = { apply } >
129
- { _ ( "Save" ) }
130
- </ Button >
131
- < Button id = "vnc-edit-cancel" variant = 'link' onClick = { Dialogs . close } >
132
- { _ ( "Cancel" ) }
133
- </ Button >
134
- </ >
129
+ < >
130
+ < Button
131
+ id = "vnc-edit-save"
132
+ isDisabled = { ! ! ( portError || passwordError ) }
133
+ variant = 'primary'
134
+ onClick = { apply }
135
+ >
136
+ { _ ( "Save" ) }
137
+ </ Button >
138
+ < Button id = "vnc-edit-cancel" variant = 'link' onClick = { Dialogs . close } >
139
+ { _ ( "Cancel" ) }
140
+ </ Button >
141
+ </ >
135
142
}
136
143
>
137
144
{ vm . state === 'running' && ! applyError &&
@@ -162,13 +169,20 @@ const VncEditModal = ({ vm, inactive_vnc }) => {
162
169
< TextInput
163
170
type = { showPassword ? "text" : "password" }
164
171
value = { password }
165
- onChange = { ( _ev , val ) => setPassword ( val ) } />
172
+ onChange = { ( _ev , val ) => { setPasswordError ( null ) ; setPassword ( val ) } } />
166
173
< Button
167
174
variant = "control"
168
175
onClick = { ( ) => setShowPassword ( ! showPassword ) } >
169
176
{ showPassword ? < EyeSlashIcon /> : < EyeIcon /> }
170
177
</ Button >
171
178
</ InputGroup >
179
+ { passwordError &&
180
+ < FormHelperText >
181
+ < HelperText >
182
+ < HelperTextItem variant = 'error' > { passwordError } </ HelperTextItem >
183
+ </ HelperText >
184
+ </ FormHelperText >
185
+ }
172
186
</ FormGroup >
173
187
</ Form >
174
188
</ Modal >
@@ -224,15 +238,6 @@ const VncFooter = ({ vm, vnc, inactive_vnc, connected, connectionAddress, onLaun
224
238
< div className = "vm-console-footer" >
225
239
< Split >
226
240
< SplitItem isFilled >
227
- < span > < b > VNC</ b > { connectionAddress } { vnc ? ":" + vnc . port : "" } </ span >
228
- < Button
229
- variant = "link"
230
- onClick = { ( ) => Dialogs . show ( < VncEditModal vm = { vm } inactive_vnc = { inactive_vnc } /> ) }
231
- >
232
- { _ ( "edit" ) }
233
- </ Button >
234
- </ SplitItem >
235
- < SplitItem >
236
241
< Button
237
242
variant = "secondary"
238
243
onClick = { onLaunch }
@@ -244,15 +249,19 @@ const VncFooter = ({ vm, vnc, inactive_vnc, connected, connectionAddress, onLaun
244
249
className = "ct-remote-viewer-popover"
245
250
headerContent = { _ ( "Remote viewer" ) }
246
251
hasAutoWidth
247
- bodyContent = {
252
+ bodyContent = { ( hide ) =>
248
253
< RemoteConnectionInfo
249
- url = { vnc && cockpit . format ( "vnc://$0:$1" , connectionAddress , vnc . port ) } />
254
+ hide = { hide }
255
+ url = { vnc && cockpit . format ( "vnc://$0:$1" , connectionAddress , vnc . port ) }
256
+ onEdit = { ( ) => Dialogs . show ( < VncEditModal vm = { vm } inactive_vnc = { inactive_vnc } /> ) } />
250
257
}
251
258
>
252
259
< Button variant = "plain" >
253
260
< HelpIcon />
254
261
</ Button >
255
262
</ Popover >
263
+ </ SplitItem >
264
+ < SplitItem >
256
265
< KebabDropdown
257
266
toggleButtonId = "vnc-actions"
258
267
position = 'right'
0 commit comments