Fix team name validation in UI

Although it _should_ be valid to have an unescaped `-`, at least
Google Chrome and Firefox complain about an "Invalid character in
character class" and completely skip validation, leading to confusion
as to why team creation fails.

Also fixed the validation message to state the minimum number of
characters and applied red text color on invalid input.

juice-balancer/ui/src/Components.js

@@ -27,6 +27,10 @@ export const Input = styled.input`
   font-size: 14px;
   display: block;
   width: 100%;
+
+  &:invalid {
+    color: red;
+  }
 `;
 export const Label = styled.label`
   font-weight: 300;

juice-balancer/ui/src/pages/JoinPage.js

@@ -11,7 +11,7 @@ import { TeamDisplayCard } from '../cards/TeamDisplayCard';
 const messages = defineMessages({
   teamnameValidationConstraints: {
     id: 'teamname_validation_constraints',
-    defaultMessage: "Teamnames must consist of lowercase letter, number or '-'",
+    defaultMessage: "Teamnames must have at least 3 characters and consist of lowercase letter, number or '-'",
   },
 });
 
@@ -107,7 +107,7 @@ export const JoinPage = injectIntl(({ intl }) => {
             name="teamname"
             value={teamname}
             title={formatMessage(messages.teamnameValidationConstraints)}
-            pattern="^[a-z0-9]([-a-z0-9])+[a-z0-9]$"
+            pattern="^[a-z0-9]([\-a-z0-9])+[a-z0-9]$"
             maxLength="16"
             onChange={({ target }) => setTeamname(target.value)}
           />