11import { deprecated_Form as Form , Details } from "@cloudogu/ces-theme-tailwind" ;
22import { Button , H2 , ListWithSearchbar } from "@cloudogu/deprecated-ces-theme-tailwind" ;
33import { TrashIcon } from "@heroicons/react/24/outline" ;
4+ import { useEffect , useState } from "react" ;
45import { twMerge } from "tailwind-merge" ;
56import { t } from "../../helpers/i18nHelpers" ;
67import { useConfirmation } from "../../hooks/useConfirmation" ;
@@ -13,6 +14,7 @@ import HelpLink from "../helpLink";
1314import type { Group } from "../../services/Groups" ;
1415import type { User } from "../../services/Users" ;
1516import type { NotifyFunction , UseFormHandlerFunctions } from "@cloudogu/deprecated-ces-theme-tailwind" ;
17+ import type { ChangeEvent } from "react" ;
1618
1719const MAX_SEARCH_RESULTS = 10 ;
1820
@@ -31,9 +33,18 @@ export interface UserFormProps<T extends User> {
3133export default function UserForm < T extends User > ( props : UserFormProps < T > ) {
3234 const { handler, notification, notify} = useUserFormHandler < T > ( props . initialUser , ( values : T ) => props . onSubmit ( values , notify , handler ) ) ;
3335 const { open, setOpen : toggleModal , targetName : groupName , setTargetName : setGroupName } = useConfirmation ( ) ;
36+ const [ formDisabled , setFormDisabled ] = useState ( false ) ;
37+ useEffect ( ( ) => hasEmptyRequiredFields ( ) , [ ] ) ;
3438
3539 const { admin} = useApplicationContext ( ) . casUser ;
3640
41+ const originalChangeFunction = handler . handleChange ;
42+
43+ handler . handleChange = ( e :ChangeEvent ) => {
44+ originalChangeFunction ( e ) ;
45+ hasEmptyRequiredFields ( ) ;
46+ } ;
47+
3748 const addGroup = ( groupName : string ) : void => {
3849 if ( handler . values . memberOf . indexOf ( groupName ) < 0 ) {
3950 const newGroups = [ ...handler . values . memberOf , groupName ] ;
@@ -83,6 +94,24 @@ export default function UserForm<T extends User>(props: UserFormProps<T>) {
8394 />
8495 ) ;
8596
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+
86115 return (
87116 < >
88117 < ConfirmationDialog
@@ -103,27 +132,27 @@ export default function UserForm<T extends User>(props: UserFormProps<T>) {
103132 { t ( "users.externalUserWarning" ) }
104133 </ span >
105134 ) }
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" ) } >
107136 { t ( "editUser.labels.username" ) }
108137 </ 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" ) } >
110139 { t ( "editUser.labels.givenName" ) }
111140 </ 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" ) } >
113142 { t ( "editUser.labels.surname" ) }
114143 </ 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" ) } >
116145 { t ( "editUser.labels.displayName" ) }
117146 </ 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" ) } >
119148 { t ( "editUser.labels.email" ) }
120149 </ Form . ValidatedTextInput >
121150 { ! props . initialUser . external &&
122151 < >
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" ) } >
124153 { t ( "editUser.labels.password" ) }
125154 </ 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" ) } >
127156 { t ( "editUser.labels.confirmPassword" ) }
128157 </ Form . ValidatedTextInput >
129158 </ >
@@ -156,7 +185,7 @@ export default function UserForm<T extends User>(props: UserFormProps<T>) {
156185 ) }
157186
158187 < 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" >
160189 { t ( "editUser.buttons.save" ) }
161190 </ Button >
162191 { props . additionalButtons as JSX . Element }
0 commit comments