From dc16f3387b0f420dda337081a8532409791b6c6d Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Mon, 6 Jun 2022 08:36:29 +0200
Subject: [PATCH] feat(ui): add CreateUserDialog

---
 .../components/influxdb/CreateUserDialog.tsx  | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 ui/src/admin/components/influxdb/CreateUserDialog.tsx

diff --git a/ui/src/admin/components/influxdb/CreateUserDialog.tsx b/ui/src/admin/components/influxdb/CreateUserDialog.tsx
new file mode 100644
index 000000000..881985dcc
--- /dev/null
+++ b/ui/src/admin/components/influxdb/CreateUserDialog.tsx
@@ -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