show errors on closed group creation with invalid name or members

_locales/en/messages.json

@@ -2799,5 +2799,25 @@
   },
   "devicePairedSuccessfully": {
     "message": "Device linked successfully"
+  },
+  "invalidGroupName": {
+    "message": "Group Name length must be between 1 to $maxSize$",
+    "description": "Error message displayed on invalid group name",
+    "placeholders": {
+      "maxSize": {
+        "content": "$1",
+        "example": "125"
+      }
+    }
+  },
+  "invalidGroupSize": {
+    "message": "Closed Group size must be between 1 to $maxSize$",
+    "description": "Error message displayed on invalid closed group size",
+    "placeholders": {
+      "maxSize": {
+        "content": "$1",
+        "example": "10"
+      }
+    }
   }
 }

ts/components/session/LeftPaneChannelSection.tsx

@@ -399,11 +399,28 @@ export class LeftPaneChannelSection extends React.Component<Props, State> {
     groupMembers: Array<ContactType>
   ) {
     // Validate groupName and groupMembers length
+    if (groupName.length === 0 ||
+      groupName.length > window.CONSTANTS.MAX_GROUP_NAME_LENGTH) {
+        window.pushToast({
+          title: window.i18n('invalidGroupName', window.CONSTANTS.MAX_GROUP_NAME_LENGTH),
+          type: 'error',
+          id: 'invalidGroupName',
+        });
+
+      return;
+    }
+
+    // >= because we add ourself as a member after this. so a 10 group is already invalid as it will be 11 with ourself
     if (
       groupMembers.length === 0 ||
-      groupName.length === 0 ||
-      groupName.length > window.CONSTANTS.MAX_GROUP_NAME_LENGTH
+      groupMembers.length >= window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
     ) {
+      window.pushToast({
+        title: window.i18n('invalidGroupSize', window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT),
+        type: 'error',
+        id: 'invalidGroupSize',
+      });
+
       return;
     }