Improved "create room" flow

Still need to implement the "add friends" screen.

src/assets/css/chat.scss

@@ -435,12 +435,17 @@ $admin-fg: white;
     }
 }
 
-.room-name {
+.room-name, .room-name-inline {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     font-size: 18 * $chat-text-size;
     text-transform: uppercase;
     color: black;
+    text-align: center;
+}
+
+.room-name-inline {
+    text-align: start;
 }
 
 
@@ -523,19 +528,6 @@ $admin-fg: white;
         font-size: 16 * $chat-text-size !important;
     }
 
-    .room-name {
-        text-align: center;
-        margin-top: 15px;
-    }
-    .back {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        margin: 10px 0px;
-        font-weight: bold;
-        font-size: 12 * $chat-text-size;
-    }
-
     .qr {
         width: 120px;
         height: 120px;
@@ -568,6 +560,24 @@ $admin-fg: white;
     }
 }
 
+.header-button-left {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    margin: 10px 0px;
+    font-weight: bold;
+    font-size: 12 * $chat-text-size;
+}
+
+.header-button-right {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    margin: 10px 0px;
+    font-weight: bold;
+    font-size: 12 * $chat-text-size;
+}
+
 .profile {
     background-color: white;
     height: 100%;
@@ -575,19 +585,6 @@ $admin-fg: white;
         background-color: transparent;
         border: none;
     }
-    .room-name {
-        text-align: center;
-        margin-top: 15px;
-    }
-    .back {
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        margin: 10px 0px;
-        font-weight: bold;
-        font-size: 12 * $chat-text-size;
-    }
-
     .v-card {
         background-color: white;
         border-radius: 20px;
@@ -713,4 +710,44 @@ $admin-fg: white;
             font-size: 70 * $chat-text-size !important;
         }
     }
+}
+
+.create-room {
+    .v-avatar {
+        border: 1px solid #808080 !important;
+    }
+
+    .section {
+        background-color: white;
+        border-radius: 20px;
+        padding: 20px;
+        border: 1px solid #808080 !important;
+        position: relative;
+    }
+
+    .link-copied {
+        position: absolute;
+        bottom: 10px;
+        left: 20%;
+        right: 20%;
+        background-color: #888888;
+        height: 50px;
+        border-radius: 25px;
+        color: white;
+        text-align: center;
+        vertical-align: middle;
+        padding-top: 10px;
+    }
+}
+
+.room-link .v-input__slot::before {
+    /* Remove text underline */
+    border-style: none !important;
+}
+    
+.created-room-welcome-header {
+    background-color: #e0e0e0;
+    border-radius: 25px;
+    margin: 20px;
+    padding: 20px;
 }

src/components/Chat.vue

@@ -32,6 +32,8 @@
         @notify="handleChatContainerResize"
       />
 
+      <CreatedRoomWelcomeHeader v-if="showCreatedRoomWelcomeHeader" v-on:close="closeCreateRoomWelcomeHeader" />
+
       <div
         v-for="(event, index) in events"
         :key="event.getId()"
@@ -322,6 +324,7 @@ import MessageOperations from "./messages/MessageOperations.vue";
 import ChatHeader from "./ChatHeader";
 import VoiceRecorder from "./VoiceRecorder";
 import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
+import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
 
 const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
 
@@ -378,6 +381,7 @@ export default {
     MessageOperations,
     VoiceRecorder,
     RoomInfoBottomSheet,
+    CreatedRoomWelcomeHeader
   },
 
   data() {
@@ -424,6 +428,9 @@ export default {
 
       /** Last event we sent a Read Receipt/Read Marker for */
       lastRR: null,
+
+      /** If we just created this room, show a small welcome header with info */
+      showCreatedRoomWelcomeHeader: false
     };
   },
 
@@ -573,6 +580,17 @@ export default {
 
   methods: {
     onRoomJoined(initialEventId) {
+
+      // Was this room just created (by you)? Show a small info header in
+      // that case!
+      const createEvent = this.room.currentState.getStateEvents("m.room.create","");
+      if (createEvent) {
+        const creatorId = createEvent.getContent().creator;
+        if (creatorId == this.$matrix.currentUserId && createEvent.getLocalAge() < (2000 * 60000) /* 2 minutes */) {
+          this.showCreatedRoomWelcomeHeader = true;
+        }
+      }
+
       // Listen to events
       this.$matrix.on("Room.timeline", this.onEvent);
       this.$matrix.on("RoomMember.typing", this.onUserTyping);
@@ -621,8 +639,10 @@ export default {
             })
             .finally(() => {
               self.initialLoadDone = true;
-              if (initialEventId) {
+              if (initialEventId && !this.showCreatedRoomWelcomeHeader) {
                 self.scrollToEvent(initialEventId);
+              } else if (this.showCreatedRoomWelcomeHeader) {
+                self.onScroll();
               }
               self.restartRRTimer();
             });
@@ -1229,6 +1249,16 @@ export default {
       this.sendAttachment(text);
       this.showRecorder = false;
     },
+
+    closeCreateRoomWelcomeHeader() {
+      this.showCreatedRoomWelcomeHeader = false;
+      this.$nextTick(() => {
+        // We change the layout when removing the welcome header, so call
+        // onScroll here to handle updates (e.g. remove the "scroll to last" if we now
+        // can see all messages).
+        this.onScroll();
+      });
+    }
   },
 };
 </script>

src/components/ChatHeader.vue

@@ -12,7 +12,7 @@
       </v-col>
 
       <v-col class="ma-0 pa-0 flex-shrink-1 flex-nowrap" style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked">
-        <div class="d-flex flex-nowrap room-name">{{ room.summary.info.title }} <!--<v-icon>expand_more</v-icon>--></div>
+        <div class="d-flex flex-nowrap room-name-inline">{{ room.summary.info.title }} <!--<v-icon>expand_more</v-icon>--></div>
         <div class="num-members">{{ memberCount }}{{ memberCount > 1 ? " members" : " member" }}</div>
       </v-col>
       <v-col cols="auto" class="text-end ma-0 pa-0">

src/components/CreateRoom.vue

@@ -1,91 +1,180 @@
 <template>
-  <div class="profile">
+  <div class="create-room">
-    <div class="chat-header">
+    <div>
       <v-container fluid>
-        <div class="room-name">Create Group</div>
+        <div class="room-name">New Group</div>
         <v-btn
           text
-          class="back"
+          class="header-button-left"
           v-show="$navigation && $navigation.canPop()"
-          @click.stop="$navigation.pop"
+          @click.stop="goBack"
+          :disabled="step > steps.NAME_SET"
         >
-          <v-icon>close</v-icon>
+          <v-icon>arrow_back</v-icon>
+          <span>BACK</span>
+        </v-btn>
+        <v-btn
+          text
+          :disabled="
+            !roomName || (step != steps.INITIAL && step != steps.CREATED)
+          "
+          class="header-button-right"
+          @click.stop="next"
+        >
+          <span>{{ step == steps.CREATED ? "Done" : "Next" }}</span>
         </v-btn>
       </v-container>
     </div>
 
-    <v-card class="members ma-3 pa-3" flat>
+    <v-container fluid style="margin-top: 40px">
-      <div class="text-center">
+      <v-row>
-        <v-avatar
+        <v-col cols="auto">
-          size="120"
+          <v-avatar size="50" color="#ededed" @click.stop="showAvatarPicker">
-          color="#ededed"
+            <v-img v-if="roomAvatar" :src="roomAvatar" />
-          style="margin-bottom: 40px"
+            <v-icon v-else>camera_alt</v-icon>
-          @click.stop="showAvatarPicker"
+          </v-avatar>
+        </v-col>
+        <v-col>
+          <v-text-field
+            v-model="roomName"
+            label="Name group"
+            color="black"
+            background-color="white"
+            v-on:keyup.enter="$refs.topic.focus()"
+            :disabled="step > steps.INITIAL"
+          ></v-text-field>
+        </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">Join permissions</div>
+        <div class="h2 text-left">Set Join Permissions</div>
+        <div>
+          These permissions determine how people can join the group and how
+          easily others can be invited. They can be changed anytime.
+        </div>
+        <v-select
+          :disabled="step >= steps.CREATING"
+          :items="joinRules"
+          class="mt-4"
+          v-model="joinRule"
+          item-value="id"
         >
-          <v-img v-if="roomAvatar" :src="roomAvatar" />
+          <template v-slot:selection="{ item }">
-          <span v-else style="font-size: 80px" class="white--text">{{
+            {{ item.text }}
-            roomAvatarLetter
+          </template>
-          }}</span>
+          <template v-slot:item="{ active, item, attrs, on }">
-        </v-avatar>
+            <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
+              <v-list-item-avatar>
+                <v-icon class="grey lighten-1" dark>{{ item.icon }}</v-icon>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title v-text="item.text"></v-list-item-title>
+                <v-list-item-subtitle
+                  v-text="item.descr"
+                ></v-list-item-subtitle>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-btn icon v-if="active">
+                  <v-icon color="grey lighten-1">check</v-icon>
+                </v-btn>
+              </v-list-item-action>
+            </v-list-item>
+          </template>
+        </v-select>
+
+        <v-divider style="margin-bottom: 20px" />
+
         <v-text-field
-          v-model="roomName"
+          v-if="publicRoomLink"
-          label="Name"
+          :value="publicRoomLink"
-          color="black"
+          class="room-link"
-          background-color="white"
+          readonly
-          outlined
+          filled
-          v-on:keyup.enter="$refs.topic.focus()"
+          background-color="transparent"
-          :disabled="loading"
+          append-icon="content_copy"
-        ></v-text-field>
+          type="text"
-        <v-text-field
+          @click:append.stop="copyRoomLink"
-          ref="topic"
-          v-model="roomTopic"
-          label="Topic (optional)"
-          color="black"
-          background-color="white"
-          outlined
-          v-on:keyup.enter="$refs.create.$el.focus()"
-          :disabled="loading"
         ></v-text-field>
         <v-btn
-          ref="create"
+          v-else-if="joinRule == 'public'"
-          class="btn-dark"
+          :loading="step == steps.CREATING"
-          large
           block
-          @click.stop="create"
+          depressed
-          :loading="loading"
+          class="outlined-button"
-          :disabled="loading"
+          @click.stop="getPublicLink"
-          >Create</v-btn
+          ><v-icon class="mr-2">link</v-icon>Get link</v-btn
         >
+        <v-btn
+          v-else-if="joinRule == 'invite'"
+          block
+          depressed
+          class="outlined-button"
+          @click.stop="addPeople"
+          ><v-icon class="mr-2">person_add</v-icon>Add people</v-btn
+        >
+
+        <div v-if="publicRoomLinkCopied" class="link-copied">Link copied!</div>
+
         <div v-if="status">{{ status }}</div>
-        <input
-          ref="avatar"
-          type="file"
-          name="avatar"
-          @change="handlePickedAvatar($event)"
-          accept="image/*"
-          style="display: none"
-        />
       </div>
-    </v-card>
+    </v-fade-transition>
   </div>
 </template>
 
 <script>
 import util from "../plugins/utils";
 
+const steps = Object.freeze({
+  INITIAL: 0,
+  NAME_SET: 1,
+  CREATING: 2,
+  CREATED: 3,
+});
+
 export default {
   name: "CreateRoom",
   data() {
     return {
+      steps,
+      step: steps.INITIAL,
+      roomId: null,
       roomName: "",
       roomTopic: "",
       roomAvatar: null,
       roomAvatarFile: null,
-      loading: false,
       status: "",
+      joinRule: 0,
+      joinRules: [
+        {
+          id: "public",
+          text: "Anyone with a link",
+          icon: "link",
+          descr: "Get a link to share",
+        },
+        {
+          id: "invite",
+          text: "Only people added",
+          icon: "person_add",
+          descr: "Choose from a list or search by account ID",
+        },
+      ],
+      publicRoomLink: null,
+      publicRoomLinkCopied: false,
     };
   },
 
+  mounted() {
+    this.joinRule = this.joinRules[0].id; // Set default
+  },
+
+  watch: {
+    joinRule() {
+      console.log("Join rule changed to", this.joinRule);
+    },
+  },
   computed: {
     roomAvatarLetter() {
       if (!this.roomName) {
@@ -96,25 +185,126 @@ export default {
   },
 
   methods: {
-    create() {
+    goBack() {
-      this.loading = true;
+      if (this.step == steps.NAME_SET) {
+        this.step = steps.INITIAL;
+      } else {
+        this.$navigation.pop();
+      }
+    },
+    next() {
+      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) {
+        // Create room with deafult setting
+        this.createRoom().then((roomId) => {
+          this.roomId = roomId;
+          this.openRoom(); // Open room (if id is set!)
+        });
+      }
+    },
+
+    openRoom() {
+      if (this.roomId) {
+        this.$navigation.push(
+          {
+            name: "Chat",
+            params: { roomId: util.sanitizeRoomId(this.roomId) },
+          },
+          -1
+        );
+      }
+    },
+
+    getPublicLink() {
+      this.createRoom().then((roomId) => {
+        this.roomId = roomId;
+        var room = null;
+        if (roomId) {
+          room = this.$matrix.getRoom(roomId);
+        }
+        if (room) {
+          this.publicRoomLink = this.$router.getRoomLink(
+            room.getCanonicalAlias() || roomId
+          );
+        }
+      });
+    },
+    addPeople() {
+      // For now, jump straight to create
+      this.createRoom().then((roomId) => {
+        this.roomId = roomId;
+        this.$matrix.setCurrentRoomId(roomId);
+        this.$navigation.push(
+          {
+            name: "Invite"
+          },
+          1
+        );
+      });
+    },
+    createRoomDebug() {
+      this.step = steps.CREATING;
+      return new Promise((resolve, ignoredreject) => {
+        setTimeout(() => {
+          this.step = steps.CREATED;
+          resolve("#NpexPublicRoom2:neo.keanu.im");
+        }, 5000);
+      });
+    },
+    createRoom() {
+      this.step = steps.CREATING;
       var roomId;
       this.status = "Creating room";
-      this.$matrix.matrixClient
+      var createRoomOptions = {};
-        .createRoom({
+      if (this.joinRule == "public") {
+        createRoomOptions = {
           visibility: "private", // Not listed!
-          room_alias_name: this.roomName.replace(/\s/g,'').toLowerCase(),
+          room_alias_name: this.roomName.replace(/\s/g, "").toLowerCase(),
           name: this.roomName,
-          topic: this.roomTopic,
           preset: "public_chat",
-          initial_state: [{
+          initial_state: [
-            type: 'm.room.encryption',
+            {
-            state_key: '',
+              type: "m.room.encryption",
-            content: {
+              state_key: "",
-                algorithm: 'm.megolm.v1.aes-sha2',
+              content: {
-            }
+                algorithm: "m.megolm.v1.aes-sha2",
-          }],
+              },
-        })
+            },
+          ],
+        };
+      } else {
+        //if (this.joinRule == "invite") {
+        createRoomOptions = {
+          visibility: "private", // Not listed!
+          name: this.roomName,
+          preset: "private_chat",
+          initial_state: [
+            {
+              type: "m.room.encryption",
+              state_key: "",
+              content: {
+                algorithm: "m.megolm.v1.aes-sha2",
+              },
+            },
+            {
+              type: "m.room.guest_access",
+              state_key: "",
+              content: {
+                guest_access: "forbidden",
+              },
+            },
+          ],
+        };
+      }
+      if (this.roomTopic && this.roomTopic.length > 0) {
+        // Add topic
+        createRoomOptions.topic = this.roomTopic;
+      }
+      return this.$matrix.matrixClient
+        .createRoom(createRoomOptions)
         .then(({ room_id, room_alias }) => {
           roomId = room_alias || room_id;
           if (!this.roomAvatarFile) {
@@ -137,19 +327,16 @@ export default {
         })
         .then(() => {
           this.status = "";
-          this.$navigation.push(
+          this.step = steps.CREATED;
-            { name: "Chat", params: { roomId: util.sanitizeRoomId(roomId) } },
+          return roomId;
-            -1
-          );
         })
         .catch((error) => {
           this.status =
             (error.data && error.data.error) ||
             error.message ||
             error.toString();
-        })
+          this.step = steps.NAME_SET; // revert
-        .finally(() => {
+          return null;
-          this.loading = false;
         });
     },
 
@@ -157,7 +344,9 @@ export default {
      * Show picker to select room avatar file
      */
     showAvatarPicker() {
-      this.$refs.avatar.click();
+      if (this.step == steps.INITIAL) {
+        this.$refs.avatar.click();
+      }
     },
 
     /**
@@ -173,6 +362,24 @@ export default {
         reader.readAsDataURL(event.target.files[0]);
       }
     },
+
+    copyRoomLink() {
+      const self = this;
+      this.$copyText(this.publicRoomLink).then(
+        function (ignored) {
+          // Success!
+          self.publicRoomLinkCopied = true;
+          setInterval(() => {
+            // Hide again
+            self.publicRoomLinkCopied = false;
+          }, 3000);
+        },
+        function (e) {
+          // Failure!
+          console.log(e);
+        }
+      );
+    },
   },
 };
 </script>

src/components/CreatedRoomWelcomeHeader.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="created-room-welcome-header">
+    <div class="h4">Welcome!</div>
+    <div class="mt-2">Here are a few things to know about your group:</div>
+    <div class="mt-2" v-if="roomJoinRule == 'public'">Anyone can join by opening this link: {{ publicRoomLink }}</div>
+    <div class="mt-2" v-else-if="roomJoinRule == 'invite'">Only people you invite can join.</div>
+    <div class="mt-2">You can change 'join permissions' and 'message history' at any time in the group settings.</div>
+    <div class="text-right">
+      <v-btn text @click.stop="$emit('close')">Got it</v-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import roomInfoMixin from "./roomInfoMixin";
+
+export default {
+  name: "CreatedRoomWelcomeHeader",
+  mixins: [roomInfoMixin],
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/Invite.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="create-room">
+    <div>
+      <v-container fluid>
+        <div class="room-name">Add Friends</div>
+        <!-- <v-btn
+          text
+          class="header-button-left"
+          v-show="$navigation && $navigation.canPop()"
+          @click.stop="goBack"
+        >
+          <v-icon>arrow_back</v-icon>
+          <span>BACK</span>
+        </v-btn> -->
+        <v-btn text class="header-button-right" @click.stop="done">
+          <span>Done</span>
+        </v-btn>
+      </v-container>
+    </div>
+
+    <div>Not yet implemented</div>
+  </div>
+</template>
+
+<script>
+import util from "../plugins/utils";
+
+export default {
+  name: "Invite",
+
+  methods: {
+    done() {
+      this.$navigation.push(
+        {
+          name: "Chat",
+          params: { roomId: util.sanitizeRoomId(this.$matrix.currentRoomId) },
+        },
+        -1
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/Profile.vue

@@ -5,7 +5,7 @@
         <div class="room-name">My Profile</div>
             <v-btn
               text
-              class="back"
+              class="header-button-right"
               v-show="$navigation && $navigation.canPop()"
               @click.stop="$navigation.pop"
             >

src/components/RoomInfo.vue

@@ -5,7 +5,7 @@
         <div class="room-name">Info</div>
         <v-btn
           text
-          class="back"
+          class="header-button-left"
           v-show="$navigation && $navigation.canPop()"
           @click.stop="$navigation.pop"
         >
@@ -216,15 +216,6 @@ export default {
       return "";
     },
 
-    publicRoomLink() {
-      if (this.room && this.roomJoinRule == "public") {
-        return this.$router.getRoomLink(
-          this.room.getCanonicalAlias() || this.room.roomId
-        );
-      }
-      return null;
-    },
-
     joinedMembers() {
       if (!this.room) {
         return [];

src/components/roomInfoMixin.js

@@ -39,6 +39,15 @@ export default {
       }
       return "";
     },
+
+    publicRoomLink() {
+      if (this.room && this.roomJoinRule == "public") {
+        return this.$router.getRoomLink(
+          this.room.getCanonicalAlias() || this.room.roomId
+        );
+      }
+      return null;
+    },
   },
   watch: {
     room: {

src/router/index.js

@@ -48,7 +48,7 @@ const routes = [
     name: 'CreateRoom',
     component: CreateRoom,
     meta: {
-      title: 'Create'
+      title: 'Create room'
     }
   },
   {
@@ -62,6 +62,14 @@ const routes = [
     name: 'Join',
     component: Join
   },
+  {
+    path: '/invite',
+    name: 'Invite',
+    component: () => import('../components/Invite.vue'),
+    meta: {
+      title: 'Add Friends'
+    }
+  }
 ]
 
 const router = new VueRouter({