feat(ui): add CreateUserDialog

pull/5925/head
Pavel Zavora 2022-06-06 08:36:29 +02:00
parent 52f1138fdf
commit dc16f3387b
1 changed files with 64 additions and 0 deletions

View File

@ -0,0 +1,64 @@
import React, {useCallback, useState} from 'react'
import {
Form,
Input,
OverlayBody,
OverlayContainer,
OverlayHeading,
OverlayTechnology,
} from 'src/reusable_ui'
interface Props {
create: (user: {name: string; password: string}) => void
setVisible: (visible: boolean) => void
visible: boolean
}
const CreateUserDialog = ({visible = true, setVisible, create}: Props) => {
const [name, setName] = useState('')
const [password, setPassword] = useState('')
const cancel = useCallback(() => {
setName('')
setPassword('')
setVisible(false)
}, [])
return (
<OverlayTechnology visible={visible}>
<OverlayContainer maxWidth={650}>
<OverlayHeading title="New User" onDismiss={cancel} />
<OverlayBody>
<Form>
<Form.Element label="User Name">
<Input
value={name}
onChange={e => setName(e.target.value)}
placeholder={'Name new user'}
/>
</Form.Element>
<Form.Element label="Password">
<Input
value={password}
onChange={e => setPassword(e.target.value)}
/>
</Form.Element>
<Form.Footer>
<div className="form-group text-center form-group-submit col-xs-12">
<button className="btn btn-sm btn-default" onClick={cancel}>
Cancel
</button>
<button
className="btn btn-sm btn-success"
disabled={!(name && password)}
onClick={() => create({name, password})}
>
Create
</button>{' '}
</div>
</Form.Footer>
</Form>
</OverlayBody>
</OverlayContainer>
</OverlayTechnology>
)
}
export default CreateUserDialog