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

Issue #127.
2021-05-27 12:16:12 +02:00 · 2021-05-27 12:16:12 +02:00 · 6ca7a2040d
commit 6ca7a2040d
parent 11c09cd767
5 changed files with 112 additions and 25 deletions
--- a/src/assets/translations/en.json
+++ b/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",
-    "done": "Done",
+    "new_room": "New Room",
+    "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",
-    "create_room": "Create group"
+    "view_details": "View details"
  },
  "voice_recorder": {
    "swipe_to_cancel": "Swipe to cancel",
--- a/src/components/CreateRoom.vue
+++ b/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-col cols="auto">
+      <v-row align="center">
+        <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="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
+      <!-- <div class="section ma-3" flat v-if="step > steps.INITIAL"> -->
+    <!--    <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;
-      } else if (this.step == steps.NAME_SET) {
+      //  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;
        });
    },
--- a/src/components/CreatedRoomWelcomeHeader.vue
+++ b/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="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-else-if="roomJoinRule == 'invite'">{{$t('room_welcome.join_invite')}}</div>
-    <div class="mt-2">{{$t('room_welcome.info_permissions')}}</div>
+    <div class="h4">{{ $t("room_welcome.welcome") }}</div>
+    <div class="mt-2">{{ $t("room_welcome.info") }}</div>
+    <div class="mt-2" v-if="roomIsEncrypted">
+      {{ $t("room_welcome.encrypted") }}
+    </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>

--- a/src/components/roomInfoMixin.js
+++ b/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: {
--- a/src/services/matrix.service.js
+++ b/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(() => {