Simplify room creation and improve "room welcome header" for new rooms.

Issue #127.

src/assets/translations/en.json

@@ -11,7 +11,8 @@
     "send": "Send",
     "back": "BACK",
     "login": "Login",
-    "logout": "Logout"
+    "logout": "Logout",
+    "new_room": "New Room"
   },
   "message": {
     "you": "You",
@@ -56,16 +57,19 @@
   "room_welcome": {
     "welcome": "Welcome!",
     "info": "Here are a few things to know about your group:",
-    "join_public": "Anyone can join by opening this link: {link}",
+    "encrypted": "Messages are end-to-end encrypted.",
+    "room_history_is": "Room history is {type}.",
+    "join_public": "Anyone can join by opening this link: {link}.",
     "join_invite": "Only people you invite can join.",
     "info_permissions": "You can change 'join permissions' and 'message history' at any time in the group settings.",
     "got_it": "Got it"
   },
   "new_room": {
-    "new_room": "New Group",
+    "new_room": "New Room",
-    "done": "Done",
+    "create": "Create",
     "next": "Next",
     "name_room": "Name group",
+    "room_topic": "Add a description if you like",
     "join_permissions": "Join permissions",
     "set_join_permissions": "Set Join Permissions",
     "join_permissions_info": "These permissions determine how people can join the group and how easily others can be invited. They can be changed anytime.",
@@ -161,8 +165,7 @@
   },
   "room_info_sheet": {
     "this_room": "This group",
-    "view_details": "View details",
+    "view_details": "View details"
-    "create_room": "Create group"
   },
   "voice_recorder": {
     "swipe_to_cancel": "Swipe to cancel",

src/components/CreateRoom.vue

@@ -13,7 +13,7 @@
           <v-icon>arrow_back</v-icon>
           <span>{{ $t("menu.back") }}</span>
         </v-btn>
-        <v-btn
+        <!-- <v-btn
           text
           :disabled="
             !roomName || (step != steps.INITIAL && step != steps.CREATED)
@@ -24,7 +24,7 @@
           <span>{{
             step == steps.CREATED ? $t("new_room.done") : $t("new_room.next")
           }}</span>
-        </v-btn>
+        </v-btn> -->
       </v-container>
     </div>
     <v-container class="join-user-info">
@@ -75,14 +75,16 @@
     </v-container>
 
     <v-container fluid style="margin-top: 40px">
-      <v-row>
+      <v-row align="center">
-        <v-col cols="auto">
+        <v-col align="center">
           <v-avatar size="50" color="#ededed" @click.stop="showAvatarPicker">
             <v-img v-if="roomAvatar" :src="roomAvatar" />
             <v-icon v-else>camera_alt</v-icon>
           </v-avatar>
         </v-col>
-        <v-col>
+      </v-row>
+      <v-row cols="12" align="center">
+        <v-col cols="8" offset="2" align="center">
           <v-text-field
             v-model="roomName"
             :label="$t('new_room.name_room')"
@@ -91,13 +93,30 @@
             v-on:keyup.enter="$refs.topic.focus()"
             :disabled="step > steps.INITIAL"
           ></v-text-field>
+          <v-text-field
+            v-model="roomTopic"
+            v-show="roomName.length > 0"
+            :label="$t('new_room.room_topic')"
+            color="black"
+            background-color="white"
+            v-on:keyup.enter="$refs.create.focus()"
+            :disabled="step > steps.INITIAL"
+          ></v-text-field>
+          <v-btn
+              color="black"
+              depressed
+              class="filled-button"
+              @click.stop="next"
+              :disabled="roomName.length == 0"
+              >{{$t('new_room.create')}}</v-btn
+            >
         </v-col>
       </v-row>
     </v-container>
 
     <v-fade-transition>
-      <div class="section ma-3" flat v-if="step > steps.INITIAL">
+      <!-- <div class="section ma-3" flat v-if="step > steps.INITIAL"> -->
-        <div class="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
+    <!--    <div class="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
         <div class="h2 text-left">
           {{ $t("new_room.set_join_permissions") }}
         </div>
@@ -168,9 +187,9 @@
         <div v-if="publicRoomLinkCopied" class="link-copied">
           {{ $t("new_room.link_copied") }}
         </div>
-
+-->
         <div v-if="status">{{ status }}</div>
-      </div>
+      <!-- </div> -->
     </v-fade-transition>
     <input
       ref="avatar"
@@ -188,7 +207,7 @@ import util from "../plugins/utils";
 
 const steps = Object.freeze({
   INITIAL: 0,
-  NAME_SET: 1,
+  //NAME_SET: 1,
   CREATING: 2,
   CREATED: 3,
 });
@@ -273,8 +292,8 @@ export default {
       if (this.step == steps.CREATED) {
         this.openRoom();
       } else if (this.step == steps.INITIAL) {
-        this.step = steps.NAME_SET;
+      //  this.step = steps.NAME_SET;
-      } else if (this.step == steps.NAME_SET) {
+      //} else if (this.step == steps.NAME_SET) {
         // Create room with deafult setting
         this.createRoom().then((roomId) => {
           this.roomId = roomId;
@@ -476,7 +495,7 @@ export default {
             (error.data && error.data.error) ||
             error.message ||
             error.toString();
-          this.step = steps.NAME_SET; // revert
+          this.step = steps.INITIAL; // revert
           return null;
         });
     },

src/components/CreatedRoomWelcomeHeader.vue

@@ -1,12 +1,28 @@
 <template>
   <div class="created-room-welcome-header">
-    <div class="h4">{{$t('room_welcome.welcome')}}</div>
+    <div class="h4">{{ $t("room_welcome.welcome") }}</div>
-    <div class="mt-2">{{$t('room_welcome.info')}}</div>
+    <div class="mt-2">{{ $t("room_welcome.info") }}</div>
-    <div class="mt-2" v-if="roomJoinRule == 'public'">{{$t('room_welcome.join_public', {link: publicRoomLink}) }}</div>
+    <div class="mt-2" v-if="roomIsEncrypted">
-    <div class="mt-2" v-else-if="roomJoinRule == 'invite'">{{$t('room_welcome.join_invite')}}</div>
+      {{ $t("room_welcome.encrypted") }}
-    <div class="mt-2">{{$t('room_welcome.info_permissions')}}</div>
+    </div>
+    <div class="mt-2" v-if="roomHistoryDescription">
+      {{ roomHistoryDescription }}
+    </div>
+    <div class="mt-2" v-if="roomJoinRule == 'public'">
+      <i18n path="room_welcome.join_public" tag="span">
+        <template v-slot:link>
+          <a :href="publicRoomLink">{{ publicRoomLink }}</a>
+        </template>
+      </i18n>
+    </div>
+    <div class="mt-2" v-else-if="roomJoinRule == 'invite'">
+      {{ $t("room_welcome.join_invite") }}
+    </div>
+    <div class="mt-2">{{ $t("room_welcome.info_permissions") }}</div>
     <div class="text-right">
-      <v-btn text @click.stop="$emit('close')">{{$t('room_welcome.got_it')}}</v-btn>
+      <v-btn text @click.stop="$emit('close')">{{
+        $t("room_welcome.got_it")
+      }}</v-btn>
     </div>
   </div>
 </template>
@@ -17,6 +33,30 @@ import roomInfoMixin from "./roomInfoMixin";
 export default {
   name: "CreatedRoomWelcomeHeader",
   mixins: [roomInfoMixin],
+  computed: {
+    roomHistoryDescription() {
+      const visibility = this.$matrix.getRoomHistoryVisibility(this.room);
+      switch (visibility) {
+        case "world_readable":
+          return this.$t("room_welcome.room_history_is", {
+            type: this.$t("message.room_history_world_readable"),
+          });
+        case "shared":
+          return this.$t("room_welcome.room_history_is", {
+            type: this.$t("message.room_history_shared"),
+          });
+        case "invited":
+          return this.$t("room_welcome.room_history_is", {
+            type: this.$t("message.room_history_invited"),
+          });
+        case "joined":
+          return this.$t("room_welcome.room_history_is", {
+            type: this.$t("message.room_history_joined"),
+          });
+      }
+      return null;
+    },
+  },
 };
 </script>
 

src/components/roomInfoMixin.js

@@ -41,6 +41,13 @@ export default {
       return "";
     },
 
+    roomIsEncrypted() {
+      if (this.room) {
+        return this.$matrix.matrixClient.isRoomEncrypted(this.room.roomId);
+      }
+      return false;
+    },
+
     publicRoomLink() {
       if (this.room && this.roomJoinRule == "public") {
         return this.$router.getRoomLink(
@@ -49,6 +56,13 @@ export default {
       }
       return null;
     },
+
+    roomHistory() {
+      if (this.room) {
+        return this.room.shouldEncryptForInvitedMembers()
+      }
+      return false;
+    }
   },
   watch: {
     room: {

src/services/matrix.service.js

@@ -440,6 +440,17 @@ export default {
                     return null;
                 },
 
+                getRoomHistoryVisibility(room) {
+                    if (room) {
+                        const historyVisibility = room.currentState.getStateEvents(
+                            "m.room.history_visibility",
+                            ""
+                        );
+                        return historyVisibility && historyVisibility.getContent().history_visibility;
+                    }
+                    return null;
+                },
+
                 leaveRoom(roomId) {
                     return this.matrixClient.leave(roomId, undefined)
                         .then(() => {