Check team and project name validity

CHANGELOG.md

@@ -24,6 +24,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Added the possibility to copy volume tracings to own account
 - During the import of multiple NML files, the user can select an option to automatically create a group per file so that the imported trees are organized in a hierarchy. [#2908](https://github.com/scalableminds/webknossos/pull/2908)
 - Added functions to the front-end API to activate a tree and to change the color of a tree. [#2997](https://github.com/scalableminds/webknossos/pull/2997)
+- When a new team or project is created, invalid names will be directly marked in red. [#3034](https://github.com/scalableminds/webknossos/pull/3034)
 - Comments can now contain references to nodes (`#<nodeid>`) or positions (`#(<x,y,z>)`). Clicking on such a reference activates the respective node or position and centers it. [#2950](https://github.com/scalableminds/webknossos/pull/2950)
 
 ### Changed

app/assets/javascripts/admin/project/project_create_view.js

@@ -99,8 +99,14 @@ class ProjectCreateView extends React.PureComponent<Props, State> {
                 rules: [
                   {
                     required: true,
+                    pattern: "^[a-zA-Z0-9_-]*$",
+                    message: "The project name must not contain whitespace or special characters.",
+                  },
+                  {
+                    min: 3,
+                    required: true,
+                    message: "The project name must be at least 3 characters long.",
                   },
-                  { min: 3 },
                 ],
               })(<Input autoFocus disabled={isEditMode} />)}
             </FormItem>

app/assets/javascripts/admin/team/create_team_modal_view.js

@@ -1,69 +1,60 @@
 // @flow
 import * as React from "react";
-import { Modal, Input, Button } from "antd";
+import { Modal, Input, Form } from "antd";
 import { createTeam } from "admin/admin_rest_api";
 
+const FormItem = Form.Item;
+
 type Props = {
   onOk: Function,
   onCancel: Function,
   isVisible: boolean,
+  form: Object,
 };
 
-type State = {
-  newTeamName: string,
-};
-
-class CreateTeamModalView extends React.PureComponent<Props, State> {
-  state = {
-    newTeamName: "",
-  };
-
+class CreateTeamModalForm extends React.PureComponent<Props> {
   onOk = async () => {
-    if (this.state.newTeamName !== "") {
+    this.props.form.validateFields(async (err, values) => {
+      if (err) {
+        return;
+      }
       const newTeam = {
-        name: this.state.newTeamName,
+        name: values.teamName,
         roles: [{ name: "admin" }, { name: "user" }],
       };
 
       const team = await createTeam(newTeam);
-      this.setState({
-        newTeamName: "",
-      });
 
       this.props.onOk(team);
-    }
+    });
   };
 
-  isInputValid(): boolean {
-    return this.state.newTeamName !== "";
-  }
-
   render() {
+    const { getFieldDecorator } = this.props.form;
     return (
       <Modal
-        title="Add a New Team"
         visible={this.props.isVisible}
+        title="Add a New Team"
+        okText="Ok"
         onCancel={this.props.onCancel}
-        footer={
-          <div>
-            <Button onClick={this.props.onCancel}>Cancel</Button>
-            <Button type="primary" onClick={this.onOk} disabled={!this.isInputValid()}>
-              Ok
-            </Button>
-          </div>
-        }
+        onOk={this.onOk}
       >
-        <Input
-          value={this.state.newTeamName}
-          onChange={(event: SyntheticInputEvent<*>) =>
-            this.setState({ newTeamName: event.target.value })
-          }
-          icon="tag-o"
-          placeholder="Team Name"
-          autoFocus
-        />
+        <Form layout="vertical">
+          <FormItem label="Team Name">
+            {getFieldDecorator("teamName", {
+              rules: [
+                {
+                  required: true,
+                  pattern: "^[A-Za-z0-9\\-_\\. ß]+$",
+                  message: "The team name must not contain any special characters.",
+                },
+              ],
+            })(<Input icon="tag-o" placeholder="Team Name" autoFocus />)}
+          </FormItem>
+        </Form>
       </Modal>
     );
   }
 }
+const CreateTeamModalView = Form.create()(CreateTeamModalForm);
 export default CreateTeamModalView;