@ -282,32 +282,60 @@ export function InteractionDialog(props: {
)
}
export function AssignModuleForm ( props : { module s : Module [ ] ; onAssign : ( module Id : string , kind : Kind ) = > void } ) {
export function AssignModuleForm ( props : {
module s : Module [ ]
onAssign : ( module Id : string , kind : Kind , creds ? : { username : string ; password : string } ) = > void
} ) {
const [ module Id , setModuleId ] = useState ( '' )
const mod = props . module s.find ( ( m ) = > m . id === module Id )
const [ kind , setKind ] = useState < Kind | ' ' > ( '' )
const [ username , setUsername ] = useState ( '' )
const [ password , setPassword ] = useState ( '' )
// SMS is a gateway service — its login is required at assign time so the balance pull works.
const needsCreds = mod ? . code === 'SMS'
const ready = module Id !== '' && kind !== '' && ( ! needsCreds || ( username . trim ( ) !== '' && password . trim ( ) !== '' ) )
const reset = ( ) = > { setModuleId ( '' ) ; setKind ( '' ) ; setUsername ( '' ) ; setPassword ( '' ) }
return (
< Toolbar >
< select
className = "wf" value = { module Id }
onChange = { ( e ) = > { setModuleId ( e . target . value ) ; setKind ( '' ) } }
>
< option value = "" > Assign module … < / option >
{ props . module s.filter ( ( m ) = > m . active ) . map ( ( m ) = > < option key = { m . id } value = { m . id } > { m . name } < / option > ) }
< / select >
{ mod !== undefined && (
< select className = "wf" value = { kind } onChange = { ( e ) = > setKind ( e . target . value as Kind ) } >
< option value = "" > Kind … < / option >
{ mod . allowedKinds . map ( ( k ) = > < option key = { k } value = { k } > { KIND_LABEL [ k ] } < / option > ) }
< div className = "wf-card" style = { { padding : '10px 14px' , marginBottom : 10 } } >
< Toolbar >
< select
className = "wf" value = { module Id }
onChange = { ( e ) = > { setModuleId ( e . target . value ) ; setKind ( '' ) ; setUsername ( '' ) ; setPassword ( '' ) } }
>
< option value = "" > Assign module … < / option >
{ props . module s.filter ( ( m ) = > m . active ) . map ( ( m ) = > < option key = { m . id } value = { m . id } > { m . name } < / option > ) }
< / select >
{ mod !== undefined && (
< select className = "wf" value = { kind } onChange = { ( e ) = > setKind ( e . target . value as Kind ) } >
< option value = "" > Kind … < / option >
{ mod . allowedKinds . map ( ( k ) = > < option key = { k } value = { k } > { KIND_LABEL [ k ] } < / option > ) }
< / select >
) }
{ needsCreds && (
< >
< input className = "wf mono" style = { { width : 150 } } placeholder = "SMS username *" aria - label = "SMS username"
value = { username } onChange = { ( e ) = > setUsername ( e . target . value ) } / >
< input className = "wf mono" style = { { width : 150 } } placeholder = "SMS password *" aria - label = "SMS password"
value = { password } onChange = { ( e ) = > setPassword ( e . target . value ) } / >
< / >
) }
< Button
tone = "primary" disabled = { ! ready }
onClick = { ( ) = > {
if ( ! ready ) return
props . onAssign ( module Id , kind as Kind , needsCreds ? { username : username.trim ( ) , password : password.trim ( ) } : undefined )
reset ( )
} }
>
Assign
< / Button >
< / Toolbar >
{ needsCreds && (
< span style = { { fontSize : 12 , color : 'var(--text-dim)' } } >
SMS needs the provider gateway login — username and password are required so the balance can be pulled .
< / span >
) }
< Button
tone = "primary"
onClick = { ( ) = > { if ( module Id !== '' && kind !== '' ) { props . onAssign ( module Id , kind ) ; setModuleId ( '' ) ; setKind ( '' ) } } }
>
Assign
< / Button >
< / Toolbar >
< / div >
)
}