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

CreateRoom validation improvements

Closes #362

See merge request keanuapp/keanuapp-weblite!115

src/assets/translations/bo.json

@@ -70,7 +70,8 @@
         "name_room": "ཁ་བརྡ་ཁང་ལ་མིང་ཐོགས།",
         "room_topic": "གལ་ཏེ་འདོད་པ་ཡོད་ན། ཚོགས་པའི་སྐོར་གྱི་འགྲེལ་བཤད་ཐུང་ངུ་ཞིག་འབྲི་ཆོག",
         "create": "བཟོས།",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "menu": {
         "logout": "ཕྱིར་ཐོན།",

src/assets/translations/de.json

@@ -96,7 +96,8 @@
         "next": "Nächste",
         "name_room": "Raum benennen",
         "room_topic": "Füge eine Beschreibung hinzu, wenn du möchtest",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "device_list": {
         "title": "GERÄTE",

src/assets/translations/en.json

@@ -106,7 +106,8 @@
     "status_creating": "Creating room",
     "status_avatar_total": "Uploading avatar: {count} of {total}",
     "status_avatar": "Uploading avatar: {count}",
-    "room_name_limit_error_msg": "Maximum 50 characters allowed"
+    "room_name_limit_error_msg": "Maximum 50 characters allowed",
+    "colon_not_allowed": "Colon is not allowed"
   },
   "device_list": {
     "title": "DEVICES",

src/assets/translations/es.json

@@ -122,7 +122,8 @@
         "new_room": "Nueva Sala",
         "create": "Crear",
         "room_topic": "Añade una descripción si quieres",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "room_welcome": {
         "join_public": "Cualquiera puede unirse abriendo este vínculo: {link}",

src/assets/translations/fi.json

@@ -28,7 +28,8 @@
         "add_people": "Lisää ihmisiä",
         "link_copied": "Linkki kopioitu!",
         "public_info": "Kuka tahansa, jolla on linkki",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "purge_room": {
         "n_seconds": "{seconds} sekuntia",

src/assets/translations/fr.json

@@ -96,7 +96,8 @@
         "public_info": "Quiconque avec un lien",
         "join_permissions_info": "Ces autorisations déterminent comment les personnes peuvent rejoindre le salon et avec quelle facilité d’autres personnes peuvent être invitées. Elles peuvent être modifiées à tout moment.",
         "status_creating": "Création du salon",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "device_list": {
         "title": "APPAREILS",

src/assets/translations/it.json

@@ -95,7 +95,8 @@
         "invite_info": "Solo le persone aggiunte",
         "join_permissions_info": "Questi permessi determinano come le persone possono entrare nella stanza e quanto facilmente gli altri possono essere invitati. Possono essere cambiati in qualsiasi momento.",
         "public_info": "Chiunque abbia un collegamento",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "device_list": {
         "title": "DISPOSITIVI",

src/assets/translations/nb_NO.json

@@ -115,7 +115,8 @@
         "next": "Neste",
         "create": "Opprett",
         "new_room": "Nytt rom",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "room_welcome": {
         "room_history_is": "Romhistorikken er {type}.",

src/assets/translations/pt_BR.json

@@ -119,7 +119,8 @@
         "status_creating": "Criando a sala",
         "status_avatar_total": "Enviando o avatar: {count} de {total}",
         "status_avatar": "Enviando avatar: {count}",
-        "room_name_limit_error_msg": "O máximo de 50 caracteres são permitidos"
+        "room_name_limit_error_msg": "O máximo de 50 caracteres são permitidos",
+        "colon_not_allowed": ""
     },
     "device_list": {
         "title": "DISPOSITIVOS",

src/assets/translations/ro.json

@@ -167,7 +167,8 @@
         "next": "Următorul",
         "create": "Creați",
         "new_room": "Cameră nouă",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "room_welcome": {
         "got_it": "L-am prins",

src/assets/translations/ug.json

@@ -84,7 +84,8 @@
         "next": "كېيىنكى",
         "create": "قۇرۇش",
         "new_room": "يېڭى مۇنازىرەخانا",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "room": {
         "purge_failed": "مۇنازىرەخانىنى يۇيۇش مەغلۇب بولدى!",

src/assets/translations/zh_Hans.json

@@ -217,7 +217,8 @@
         "new_room": "新的聊天室",
         "room_topic": "如果您愿意，请添加说明",
         "create": "创建",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "",
+        "colon_not_allowed": ""
     },
     "room_welcome": {
         "got_it": "知道了",

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 =
+          this.status = ""
-            (error.data && error.data.error) ||
+          this.roomCreationErrorMsg =  (error.data && error.data.error) || error.message || error.toString();
-            error.message ||
-            error.toString();
           this.step = steps.INITIAL; // revert
           return null;
         });