Pod name validator

src/ContainerRenameModal.jsx

@@ -7,6 +7,7 @@ import {
 import cockpit from 'cockpit';
 
 import * as client from './client.js';
+import * as utils from './util.js';
 import { ErrorNotification } from './Notification.jsx';
 import { useDialogs } from "dialogs.jsx";
 
@@ -24,7 +25,7 @@ const ContainerRenameModal = ({ container, version, updateContainerAfterEvent })
             setName(value);
             if (value === "") {
                 setNameError(_("Container name is required."));
-            } else if (/^[a-zA-Z0-9][a-zA-Z0-9_\\.-]*$/.test(value)) {
+            } else if (utils.is_valid_container_name(value)) {
                 setNameError(null);
             } else {
                 setNameError(_("Invalid characters. Name can only contain letters, numbers, and certain punctuation (_ . -)."));

src/PodCreateModal.jsx

@@ -11,6 +11,7 @@ import { PublishPort } from './PublishPort.jsx';
 import { DynamicListForm } from './DynamicListForm.jsx';
 import { Volume } from './Volume.jsx';
 import * as client from './client.js';
+import * as utils from './util.js';
 import cockpit from 'cockpit';
 import { useDialogs } from "dialogs.jsx";
 
@@ -20,6 +21,7 @@ const systemOwner = "system";
 
 export const PodCreateModal = ({ props, user }) => {
     const [podName, setPodName] = useState(dockerNames.getRandomName());
+    const [nameError, setNameError] = useState(null);
     const [publish, setPublish] = useState([]);
     const [volumes, setVolumes] = useState([]);
     const [owner, setOwner] = useState(props.systemServiceAvailable ? systemOwner : user);
@@ -77,18 +79,26 @@ export const PodCreateModal = ({ props, user }) => {
     };
 
     const onValueChanged = (key, value) => {
-        if (key === "podName")
+        if (key === "podName") {
             setPodName(value);
-        // TODO: add name validation
+        } else if (utils.is_valid_container_name(value)) {
+            setNameError(null);
+        } else {
+            setNameError(_("Invalid characters. Name can only contain letters, numbers, and certain punctuation (_ . -)."));
+        }
     };
 
     const defaultBody = (
         <Form>
-            <FormGroup fieldId='create-pod-dialog-name' label={_("Name")} className="ct-m-horizontal">
+            <FormGroup fieldId='create-pod-dialog-name' label={_("Name")} className="ct-m-horizontal"
+                    validated={nameError ? "error" : "default"}
+                    helperTextInvalid={nameError}>
                 <TextInput id='create-pod-dialog-name'
                        className="pod-name"
                        placeholder={_("Pod name")}
                        value={podName}
+                       validated={nameError ? "error" : "default"}
+                       aria-label={nameError}
                        onChange={value => onValueChanged('podName', value)} />
             </FormGroup>
             <FormGroup isInline hasNoPaddingTop fieldId='create-pod-dialog-owner' label={_("Owner")}>
@@ -132,7 +142,8 @@ export const PodCreateModal = ({ props, user }) => {
                 title={_("Create pod")}
                 footer={<>
                     {dialogError && <ErrorNotification errorMessage={dialogError} errorDetail={dialogErrorDetail} />}
-                    <Button variant='primary' id="create-pod-create-btn" onClick={() => onCreateClicked()}>
+                    <Button variant='primary' id="create-pod-create-btn" onClick={() => onCreateClicked()}
+                            isDisabled={nameError}>
                         {_("Create")}
                     </Button>
                     <Button variant='link' className='btn-cancel' onClick={Dialogs.close}>

src/util.js

@@ -140,3 +140,7 @@ export function unquote_cmdline(text) {
 export function image_name(image) {
     return image.RepoTags ? image.RepoTags[0] : "<none>:<none>";
 }
+
+export function is_valid_container_name(name) {
+    return /^[a-zA-Z0-9][a-zA-Z0-9_\\.-]*$/.test(name);
+}