Merge branch '362-room-creation-validation-fixes' into 'dev'

CreateRoom validation improvements

Closes #362

See merge request keanuapp/keanuapp-weblite!115

src/components/CreateRoom.vue

@@ -52,6 +52,7 @@
             :disabled="step > steps.INITIAL"
             autofocus
             solo
+            @update:error="updateErrorState"
           ></v-text-field>
           <div class="text-left font-weight-light" v-show="roomName.length> 0">{{ $t("new_room.room_topic") }}</div>
           <v-text-field
@@ -63,13 +64,14 @@
             :disabled="step > steps.INITIAL"
             solo
           ></v-text-field>
+          <div class="error--text" v-if="roomCreationErrorMsg"> {{roomCreationErrorMsg}}</div>
           <v-btn
             id="btn-room-create"
             color="black"
             depressed
             class="filled-button"
             @click.stop="onCreate"
-            :disabled="status ? true : roomName.length === 0 || roomName.length > 50"
+            :disabled="isDisabled"
             >
               <div v-if="status && !enterRoomDialog" class="text-center">
                 {{ status }}
@@ -298,7 +300,12 @@ export default {
         name: ""
       },
       enterRoomDialog: false,
-      roomNamerules: [v => v.length <= 50 || this.$t("new_room.room_name_limit_error_msg")],
+      roomNamerules: [
+        v => v.length <= 50 || this.$t("new_room.room_name_limit_error_msg"),
+        v => !v.includes(':') || this.$t("new_room.colon_not_allowed")
+      ],
+      roomNameHasError: false,
+      roomCreationErrorMsg: ""
     };
   },
 
@@ -318,6 +325,9 @@ export default {
     },
   },
   computed: {
+    isDisabled() {
+      return this.status ? true : this.roomName.length === 0 || this.roomName.length > 50 || this.roomNameHasError
+    },
     roomAvatarLetter() {
       if (!this.roomName) {
         return null;
@@ -337,6 +347,9 @@ export default {
   },
 
   methods: {
+    updateErrorState(errorState) {
+      this.roomNameHasError = errorState
+    },
     goBack() {
       if (this.step == steps.NAME_SET) {
         this.step = steps.INITIAL;
@@ -578,10 +591,8 @@ export default {
           return roomId;
         })
         .catch((error) => {
-          this.status =
-            (error.data && error.data.error) ||
-            error.message ||
-            error.toString();
+          this.status = ""
+          this.roomCreationErrorMsg =  (error.data && error.data.error) || error.message || error.toString();
           this.step = steps.INITIAL; // revert
           return null;
         });