1 files changed, 47 insertions, 18 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js b/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
index 6758fdc0..392a729e 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
@@ -1,31 +1,60 @@
 import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import Modal from './Modal'
+import { Form, FormGroup, TextInput } from '@patternfly/react-core'
 
-function TextInputModal({ title, label, show, callback, initialValue }) {
+function TextInputModal({ title, label, isOpen, callback, initialValue }) {
     const textInput = useRef(null)
-    const onSubmit = () => {
-        callback(textInput.current.value)
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [isValid, setValid] = useState(true)
+
+    const resetState = () => {
         textInput.current.value = ''
+        setSubmitted(false)
+        setValid(false)
+    }
+    const onSubmit = (event) => {
+        const value = textInput.current.value
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        if (!value) {
+            setValid(false)
+            return false
+        }
+
+        callback(value)
+        resetState()
+        return true
     }
     const onCancel = () => {
         callback(undefined)
-        textInput.current.value = ''
+        resetState()
     }
 
     return (
-        <Modal title={title} show={show} onSubmit={onSubmit} onCancel={onCancel}>
-            <form
-                onSubmit={(e) => {
-                    e.preventDefault()
-                    onSubmit()
-                }}
-            >
-                <div className="form-group">
-                    <label className="form-control-label">{label}</label>
-                    <input type="text" className="form-control" ref={textInput} defaultValue={initialValue} />
-                </div>
-            </form>
+        <Modal title={title} isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormGroup
+                    label={label}
+                    fieldId="text-input"
+                    isRequired
+                    validated={isSubmitted && !isValid ? 'error' : 'default'}
+                    helperTextInvalid="This field cannot be empty"
+                >
+                    <TextInput
+                        id="text-input"
+                        name="text-input"
+                        isRequired
+                        type="text"
+                        ref={textInput}
+                        defaultValue={initialValue}
+                    />
+                </FormGroup>
+            </Form>
         </Modal>
     )
 }
@@ -33,7 +62,7 @@ function TextInputModal({ title, label, show, callback, initialValue }) {
 TextInputModal.propTypes = {
     title: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
     callback: PropTypes.func.isRequired,
     initialValue: PropTypes.string,
 }