From c1bf5978ac2fb5816280d85a4a84e6782bc075a9 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 11 Oct 2021 18:50:03 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Enable=20the=20create=20button?=
 =?UTF-8?q?=20only=20if=20all=20required=20fields=20have=20been=20filled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/group/GroupCreateBox.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/group/GroupCreateBox.tsx b/frontend/src/components/group/GroupCreateBox.tsx
index ddd7223..f8bce44 100644
--- a/frontend/src/components/group/GroupCreateBox.tsx
+++ b/frontend/src/components/group/GroupCreateBox.tsx
@@ -59,6 +59,11 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
             [viewSet, name, slug, description, members, access],
         )
 
+    const canCreate =
+        React.useMemo(
+            () => name.validity === true && access.validity === true && Boolean(authorization?.state.user?.username),
+            [name, access, authorization],
+        )
 
     if(!authorization?.state.token) {
         return null
@@ -72,11 +77,11 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
                 </Details.Summary>
                 <Details.Content>
                     <Form>
-                        <Form.Field label={"Name"} {...name}/>
-                        <Form.Field label={"Slug"} disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/>
+                        <Form.Field label={"Name"} required {...name}/>
+                        <Form.Field label={"Slug"} required disabled={true} value={slug} validity={slug.length > 0 ? true : undefined}/>
                         <Form.Area label={"Description"} {...description}/>
                         <Form.Multiselect label={"Members"} options={membersOptions ?? {}} {...members}/>
-                        <Form.Field label={"Owner"} disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/>
+                        <Form.Field label={"Owner"} required disabled={true} value={authorization?.state.user?.username} validity={Boolean(authorization?.state.user?.username)}/>
                         <Form.Select
                             label={"Access"}
                             options={{
@@ -94,7 +99,7 @@ export function GroupCreateBox({viewSet}: GroupCreateBoxProps): JSX.Element | nu
                                                    : null
                         }
                         <Form.Row>
-                            <Form.Button onClick={doCreate}>
+                            <Form.Button type={"button"} onClick={doCreate} disabled={!canCreate}>
                                 Create
                             </Form.Button>
                         </Form.Row>