1
1
import { deprecated_Form as Form , Details } from "@cloudogu/ces-theme-tailwind" ;
2
2
import { Button , H2 , ListWithSearchbar } from "@cloudogu/deprecated-ces-theme-tailwind" ;
3
3
import { TrashIcon } from "@heroicons/react/24/outline" ;
4
+ import { useEffect , useState } from "react" ;
4
5
import { twMerge } from "tailwind-merge" ;
5
6
import { t } from "../../helpers/i18nHelpers" ;
6
7
import { useConfirmation } from "../../hooks/useConfirmation" ;
@@ -13,6 +14,7 @@ import HelpLink from "../helpLink";
13
14
import type { Group } from "../../services/Groups" ;
14
15
import type { User } from "../../services/Users" ;
15
16
import type { NotifyFunction , UseFormHandlerFunctions } from "@cloudogu/deprecated-ces-theme-tailwind" ;
17
+ import type { ChangeEvent } from "react" ;
16
18
17
19
const MAX_SEARCH_RESULTS = 10 ;
18
20
@@ -31,9 +33,18 @@ export interface UserFormProps<T extends User> {
31
33
export default function UserForm < T extends User > ( props : UserFormProps < T > ) {
32
34
const { handler, notification, notify} = useUserFormHandler < T > ( props . initialUser , ( values : T ) => props . onSubmit ( values , notify , handler ) ) ;
33
35
const { open, setOpen : toggleModal , targetName : groupName , setTargetName : setGroupName } = useConfirmation ( ) ;
36
+ const [ formDisabled , setFormDisabled ] = useState ( false ) ;
37
+ useEffect ( ( ) => hasEmptyRequiredFields ( ) , [ ] ) ;
34
38
35
39
const { admin} = useApplicationContext ( ) . casUser ;
36
40
41
+ const originalChangeFunction = handler . handleChange ;
42
+
43
+ handler . handleChange = ( e :ChangeEvent ) => {
44
+ originalChangeFunction ( e ) ;
45
+ hasEmptyRequiredFields ( ) ;
46
+ } ;
47
+
37
48
const addGroup = ( groupName : string ) : void => {
38
49
if ( handler . values . memberOf . indexOf ( groupName ) < 0 ) {
39
50
const newGroups = [ ...handler . values . memberOf , groupName ] ;
@@ -83,6 +94,24 @@ export default function UserForm<T extends User>(props: UserFormProps<T>) {
83
94
/>
84
95
) ;
85
96
97
+ const hasEmptyRequiredFields = ( ) : void => {
98
+ const form = document . forms . item ( 0 ) ;
99
+ console . log ( "Check for null values" ) ;
100
+ if ( form ) {
101
+ const inputs : NodeListOf < HTMLInputElement > = form . querySelectorAll ( "input:required" ) ;
102
+ for ( const input of inputs ) {
103
+ if ( ! input . value ) {
104
+ setFormDisabled ( true ) ;
105
+ return ;
106
+ }
107
+ }
108
+ setFormDisabled ( false ) ;
109
+ return ;
110
+ }
111
+ setFormDisabled ( true ) ;
112
+ return ;
113
+ } ;
114
+
86
115
return (
87
116
< >
88
117
< ConfirmationDialog
@@ -103,27 +132,27 @@ export default function UserForm<T extends User>(props: UserFormProps<T>) {
103
132
{ t ( "users.externalUserWarning" ) }
104
133
</ span >
105
134
) }
106
- < Form . ValidatedTextInput type = { "text" } name = { "username" } disabled = { props . disableUsernameField ?? true } data-testid = "username" placeholder = { t ( "users.placeholder.username" ) } hint = { t ( "users.hint.username" ) } >
135
+ < Form . ValidatedTextInput required type = { "text" } name = { "username" } disabled = { props . disableUsernameField ?? true } data-testid = "username" placeholder = { t ( "users.placeholder.username" ) } hint = { t ( "users.hint.username" ) } >
107
136
{ t ( "editUser.labels.username" ) }
108
137
</ Form . ValidatedTextInput >
109
- < Form . ValidatedTextInput disabled = { props . initialUser . external } type = { "text" } name = { "givenname" } data-testid = "givenname" placeholder = { t ( "users.placeholder.givenname" ) } >
138
+ < Form . ValidatedTextInput required disabled = { props . initialUser . external } type = { "text" } name = { "givenname" } data-testid = "givenname" placeholder = { t ( "users.placeholder.givenname" ) } >
110
139
{ t ( "editUser.labels.givenName" ) }
111
140
</ Form . ValidatedTextInput >
112
- < Form . ValidatedTextInput disabled = { props . initialUser . external } type = { "text" } name = { "surname" } data-testid = "surname" placeholder = { t ( "users.placeholder.surname" ) } >
141
+ < Form . ValidatedTextInput required disabled = { props . initialUser . external } type = { "text" } name = { "surname" } data-testid = "surname" placeholder = { t ( "users.placeholder.surname" ) } >
113
142
{ t ( "editUser.labels.surname" ) }
114
143
</ Form . ValidatedTextInput >
115
- < Form . ValidatedTextInput disabled = { props . initialUser . external } type = { "text" } name = { "displayName" } data-testid = "displayName" placeholder = { t ( "users.placeholder.displayName" ) } hint = { t ( "users.hint.displayName" ) } >
144
+ < Form . ValidatedTextInput required disabled = { props . initialUser . external } type = { "text" } name = { "displayName" } data-testid = "displayName" placeholder = { t ( "users.placeholder.displayName" ) } hint = { t ( "users.hint.displayName" ) } >
116
145
{ t ( "editUser.labels.displayName" ) }
117
146
</ Form . ValidatedTextInput >
118
- < Form . ValidatedTextInput disabled = { props . initialUser . external } type = { "text" } name = { "mail" } data-testid = "mail" placeholder = { t ( "users.placeholder.mail" ) } >
147
+ < Form . ValidatedTextInput required disabled = { props . initialUser . external } type = { "text" } name = { "mail" } data-testid = "mail" placeholder = { t ( "users.placeholder.mail" ) } >
119
148
{ t ( "editUser.labels.email" ) }
120
149
</ Form . ValidatedTextInput >
121
150
{ ! props . initialUser . external &&
122
151
< >
123
- < Form . ValidatedTextInput disabled = { props . initialUser . external } type = { "password" } name = { "password" } data-testid = "password" placeholder = { t ( "users.placeholder.password" ) } >
152
+ < Form . ValidatedTextInput required disabled = { props . initialUser . external } type = { "password" } name = { "password" } data-testid = "password" placeholder = { t ( "users.placeholder.password" ) } >
124
153
{ t ( "editUser.labels.password" ) }
125
154
</ Form . ValidatedTextInput >
126
- < Form . ValidatedTextInput disabled = { props . initialUser . external } type = { "password" } name = { "confirmPassword" } data-testid = "confirmPassword" placeholder = { t ( "users.placeholder.confirmPassword" ) } >
155
+ < Form . ValidatedTextInput required disabled = { props . initialUser . external } type = { "password" } name = { "confirmPassword" } data-testid = "confirmPassword" placeholder = { t ( "users.placeholder.confirmPassword" ) } >
127
156
{ t ( "editUser.labels.confirmPassword" ) }
128
157
</ Form . ValidatedTextInput >
129
158
</ >
@@ -156,7 +185,7 @@ export default function UserForm<T extends User>(props: UserFormProps<T>) {
156
185
) }
157
186
158
187
< div className = { "my-4" } >
159
- < Button variant = { "primary" } type = { "submit" } disabled = { ! handler . dirty } data-testid = "save-button" >
188
+ < Button variant = { "primary" } type = { "submit" } disabled = { formDisabled } data-testid = "save-button" >
160
189
{ t ( "editUser.buttons.save" ) }
161
190
</ Button >
162
191
{ props . additionalButtons as JSX . Element }
0 commit comments