Add input length validation for team names

src/components/teams/EditTeam.vue

@@ -15,6 +15,9 @@
 								<input v-focus :class="{ 'disabled': teamMemberService.loading}" :disabled="teamMemberService.loading" class="input" type="text" id="teamtext" placeholder="The team text is here..." v-model="team.name">
 							</div>
 						</div>
+						<p class="help is-danger" v-if="showError && team.name.length <= 5">
+							Please specify at least five characters.
+						</p>
 						<div class="field">
 							<label class="label" for="teamdescription">Description</label>
 							<div class="control">
@@ -142,7 +145,7 @@
 	import TeamModel from '../../models/team'
 	import TeamMemberService from '../../services/teamMember'
 	import TeamMemberModel from '../../models/teamMember'
-	
+
 	export default {
 		name: "EditTeam",
 		data() {
@@ -156,6 +159,8 @@
 				showUserDeleteModal: false,
 				user: auth.user,
 				userIsAdmin: false,
+
+				showError: false,
 			}
 		},
 		beforeMount() {
@@ -193,6 +198,12 @@
 					})
 			},
 			submit() {
+				if (this.team.name.length <= 4) {
+					this.showError = true
+					return
+				}
+				this.showError = false
+
 				this.teamService.update(this.team)
 					.then(response => {
 						this.team = response

src/components/teams/NewTeam.vue

@@ -8,7 +8,12 @@
 		<form @submit.prevent="newTeam" @keyup.esc="back()">
 			<div class="field is-grouped">
 				<p class="control is-expanded" v-bind:class="{ 'is-loading': teamService.loading}">
-					<input v-focus class="input" v-bind:class="{ 'disabled': teamService.loading}" v-model="team.name" type="text" placeholder="The team's name goes here...">
+					<input
+							v-focus
+							class="input"
+							:class="{ 'disabled': teamService.loading}" v-model="team.name"
+							type="text"
+							placeholder="The team's name goes here..."/>
 				</p>
 				<p class="control">
 					<button type="submit" class="button is-success noshadow">
@@ -19,6 +24,9 @@
 					</button>
 				</p>
 			</div>
+			<p class="help is-danger" v-if="showError && team.name.length <= 5">
+				Please specify at least five characters.
+			</p>
 		</form>
 	</div>
 </template>
@@ -35,6 +43,7 @@
 			return {
 				teamService: TeamService,
 				team: TeamModel,
+				showError: false,
 			}
 		},
 		beforeMount() {
@@ -50,9 +59,16 @@
 		},
 		methods: {
 			newTeam() {
+
+				if (this.team.name.length <= 4) {
+					this.showError = true
+					return
+				}
+				this.showError = false
+
 				this.teamService.create(this.team)
 					.then(response => {
-						router.push({name:'editTeam', params:{id: response.id}})
+						router.push({name: 'editTeam', params: {id: response.id}})
 						this.success({message: 'The team was successfully created.'}, this)
 					})
 					.catch(e => {