feat(ui): add CreateUserDialog
parent
52f1138fdf
commit
dc16f3387b
|
@ -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
|
Loading…
Reference in New Issue