Add "createchannel" endpoint

src/assets/css/create.scss

@@ -1,16 +1,16 @@
 @import "@/assets/css/main.scss";
 
-.getlink-root {
+.create-root {
   background-color: $background;
 
-  .getlink-loggedin {
+  .create-loggedin {
     text-align: center;
     button {
       min-width: 200px !important;
     }
   }
 
-  .getlink-image {
+  .create-image {
     text-align: center;
     max-width: 325px;
     max-height: 257px;
@@ -21,7 +21,18 @@
     }
   }
 
-  .getlink-title {
+  .create-image-small {
+    text-align: center;
+    max-width: 72px;
+    max-height: 72px;
+    width: 100%;
+    .v-icon__component {
+      width: unset;
+      height: unset;
+    }
+  }
+
+  .create-title {
     color: #000;
     text-align: center;
     font-family: "Poppins";
@@ -34,7 +45,7 @@
     margin-top: 50px;
   }
 
-  .getlink-info {
+  .create-info {
     color: #000;
     text-align: center;
     font-feature-settings: "clig" off, "liga" off;
@@ -47,7 +58,7 @@
     margin: 15px 9px 40px 9px;
   }
 
-  .getlink-subtitle {
+  .create-subtitle {
     color: #000;
     text-align: center;
     font-feature-settings: "clig" off, "liga" off;
@@ -95,7 +106,7 @@
     color: black;
   }
 
-  .getlink-share {
+  .create-share {
     color: #161616;
     text-align: center;
     font-family: "Inter";
@@ -118,7 +129,7 @@
     }
   }
 
-  .getlink-buttons {
+  .create-buttons {
     display: flex;
     align-items: center;
     flex-direction: column;

src/assets/translations/en.json

@@ -137,7 +137,10 @@
     "got_it": "Got it",
     "no_past_messages": "Welcome! For your security, past messages are not available.",
     "direct_info": "Hi, {you}. You’re in a private chat with {user}.",
-    "direct_private_chat": "Direct Message"
+    "direct_private_chat": "Direct Message",
+    "join_channel": "All set! Invite people to join you: {link}",
+    "info_retention": "🕓 Messages sent within {time} are viewable by anyone with the link.",
+    "change": "Change"
   },
   "new_room": {
     "new_room": "New Room",
@@ -202,6 +205,14 @@
     "share_qr": "Share QR",
     "qr_image_copied": "Image copied to clipboard"
   },
+  "createchannel": {
+    "title": "Create a Channel",
+    "info": "Broadcast news or knowledge in any format—video, podcast, text, pictures or PDFs.",
+    "channel_name": "Name your channel",
+    "channel_topic": "Describe it",
+    "name_required": "Channel name is required",
+    "error_channel": "Failed to create channel"
+  },
   "profile": {
     "title": "My Profile",
     "temporary_identity": "This identity is temporary. Set a password to use it again",

src/components/CreateChannel.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="pa-4 create-root fill-height">
+    <YouAre v-if="loggedIn" class="mt-4" />
+    <div class="text-center">
+      <v-avatar class="create-image-small" size="50" color="#ededed" @click.stop="showAvatarPicker">
+        <v-img v-if="roomAvatar" :src="roomAvatar" />
+        <v-icon v-else>camera_alt</v-icon>
+      </v-avatar>
+      <div class="create-title">{{ $t("createchannel.title") }}</div>
+      <div class="create-info">{{ $t("createchannel.info") }}</div>
+      <div color="rgba(255,255,255,0.1)" class="text-center">
+        <v-form v-model="isValid" ref="form">
+          <v-text-field v-model="roomName" :label="$t('createchannel.channel_name')" color="black"
+            background-color="white" solo :rules="[(v) => !!v || $t('createchannel.name_required')]" required
+            v-on:keydown="message = null"></v-text-field>
+          <v-text-field v-model="roomTopic" :label="$t('createchannel.channel_topic')" color="black"
+            background-color="#F5F5F5" filled v-on:keydown="message = null"></v-text-field>
+
+          <!-- <div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div> -->
+
+          <div class="error--text" v-if="message != null">{{ this.message }}</div>
+
+          <interactive-auth ref="interactiveAuth" />
+
+          <v-btn :disabled="!isValid || loading" color="primary" depressed block @click.stop="handleNext"
+            :loading="loading" class="filled-button mt-4">{{ $t("getlink.next") }}</v-btn>
+          <v-btn v-if="!loggedIn" color="black" depressed text block @click.stop="goToLoginPage" class="text-button">{{
+      $t("menu.login")
+    }}</v-btn>
+        </v-form>
+      </div>
+    </div>
+
+    <input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
+      accept="image/*" class="d-none" />
+
+    <div :class="{ 'toast-at-bottom': true, 'visible': showQRCopiedToast }">{{ $t("getlink.qr_image_copied") }}</div>
+  </div>
+</template>
+
+<script>
+import rememberMeMixin from "./rememberMeMixin";
+import * as sdk from "matrix-js-sdk";
+import logoMixin from "./logoMixin";
+import InteractiveAuth from './InteractiveAuth.vue';
+import util, { ROOM_TYPE_CHANNEL } from "../plugins/utils";
+import YouAre from "../components/YouAre.vue";
+import User from "../models/user";
+
+export default {
+  name: "CreateChannel",
+  mixins: [rememberMeMixin, logoMixin],
+  components: { InteractiveAuth, YouAre },
+  data() {
+    return this.defaultData();
+  },
+  computed: {
+    loggedIn() {
+      return this.$store.state.auth.status.loggedIn;
+    },
+    currentUser() {
+      return this.$store.state.auth.user;
+    },
+  },
+  watch: {
+  },
+  methods: {
+    defaultData() {
+      return {
+        roomName: "",
+        roomTopic: "",
+        isValid: false,
+        loading: false,
+        message: null,
+        currentLoginServer: "",
+        loadingLoginFlows: false,
+        loginFlows: null,
+        showQRCopiedToast: false,
+        roomAvatar: null,
+        roomAvatarFile: null,
+      };
+    },
+    goHome() {
+      this.$navigation.push({ name: "Home" }, -1);
+    },
+    goToLoginPage() {
+      this.$navigation.push({ name: "Login", params: { showCreateRoomOption: false, redirect: "GetLink" } }, 1);
+    },
+    handleNext() {
+      const prefix = this.$config.userIdPrefix;
+      const user = new User(util.randomUser(prefix), util.randomPass(), false);
+
+      // Reset errors
+      this.message = null;
+      this.loading = true;
+
+      const login = this.loggedIn ? Promise.resolve(this.currentUser) : this.loadLoginFlows().then(() => {
+        return this.$store.dispatch("createUser", { user, registrationFlowHandler: this.$refs.interactiveAuth.registrationFlowHandler })
+      });
+      login
+        .then(
+          (ignoreduser) => {
+            return this.createRoom();
+          })
+        .catch(
+          (ignorederror) => {
+            this.message = this.$t("createchannel.error_channel");
+          })
+        .finally(() => {
+          this.loading = false;
+        })
+    },
+    loadLoginFlows() {
+      var user = Object.assign({}, this.user);
+      return util.getMatrixBaseUrl(user, this.$config)
+        .then((baseUrl) => {
+          if (baseUrl !== this.currentLoginServer) {
+            this.currentLoginServer = baseUrl;
+            this.loadingLoginFlows = true;
+
+            const matrixClient = sdk.createClient({ baseUrl: baseUrl });
+            return matrixClient.loginFlows().then((response) => {
+              console.log("FLOWS", response.flows);
+              this.loginFlows = response.flows.filter(this.supportedLoginFlow);
+              this.loadingLoginFlows = false;
+              if (this.loginFlows.length == 0) {
+                this.message = this.$t('login.no_supported_flow')
+              } else {
+                this.message = null;
+              }
+            });
+          } else {
+            return Promise.resolve();
+          }
+        })
+    },
+    supportedLoginFlow(flow) {
+      return ["m.login.password"].includes(flow.type);
+    },
+    createRoom() {
+      const createRoomOptions = {
+        visibility: "private", // Not listed!
+        name: this.roomName,
+        preset: "public_chat",
+        initial_state:
+          [
+            {
+              type: "m.room.encryption",
+              state_key: "",
+              content: {
+                algorithm: "m.megolm.v1.aes-sha2",
+              },
+            },
+            {
+              type: "m.room.history_visibility",
+              state_key: "",
+              content: {
+                history_visibility: "joined"
+              }
+            },
+            {
+              type: "m.room.retention",
+              state_key: "",
+              content: {
+                max_lifetime: 3600 * 24 * 7 * 1000
+              }
+            }
+          ]
+      };
+      if (this.roomTopic && this.roomTopic.length > 0) {
+        // Add topic
+        createRoomOptions.topic = this.roomTopic;
+      }
+
+      createRoomOptions.creation_content = {
+        type: ROOM_TYPE_CHANNEL
+      }
+
+      let roomId = "";
+
+      return util
+        .getUniqueAliasForRoomName(
+          this.$matrix.matrixClient,
+          this.roomName,
+          this.$matrix.currentUserMXDomain
+        )
+        .then((alias) => {
+          createRoomOptions.room_alias_name = alias;
+        })
+        .then(() => {
+
+          // Set power level event. Need to do that here, because we might not have the userId when the options object is created.
+          const powerLevels = {};
+          powerLevels[this.$matrix.currentUserId] = 100;
+          let powerLevelContent = {
+            users: powerLevels,
+            events_default: 50
+          }
+          powerLevelContent.events = {
+            "m.room.encrypted": 0, // NOTE! Since practically all events in encrypted rooms get sent as "m.room.encrypted" we need to set
+            // power to 0 here. Otherwise we would not be able to send quick reactions or poll responses...
+            "m.poll.response": 0,
+            "org.matrix.msc3381.poll.response": 0,
+            "m.reaction": 0,
+            "m.room.redaction": 0,
+          };
+          createRoomOptions.initial_state.push(
+            {
+              type: "m.room.power_levels",
+              state_key: "",
+              content: powerLevelContent
+            });
+
+          return this.$matrix.matrixClient
+            .createRoom(createRoomOptions)
+            .then(({ room_id, room_alias }) => {
+              roomId = room_alias || room_id;
+              if (!this.roomAvatarFile) {
+                return true;
+              }
+              const self = this;
+              return util.setRoomAvatar(
+                this.$matrix.matrixClient,
+                room_id,
+                this.roomAvatarFile,
+                (p) => {
+                  if (p.total) {
+                    self.status = this.$t("new_room.status_avatar_total", {
+                      count: p.loaded || 0,
+                      total: p.total,
+                    });
+                  } else {
+                    self.status = this.$t("new_room.status_avatar", {
+                      count: p.loaded || 0,
+                    });
+                  }
+                }
+              );
+            });
+        })
+        .then(() => {
+          this.$navigation.push(
+            {
+              name: "Chat",
+              params: { roomId: util.sanitizeRoomId(roomId) },
+            },
+            -1
+          );
+        })
+    },
+
+    /**
+     * Show picker to select room avatar file
+     */
+    showAvatarPicker() {
+      this.$refs.avatar.click();
+    },
+
+    /**
+     * Handle picked avatar
+     */
+    handlePickedAvatar(event) {
+      if (event.target.files && event.target.files[0]) {
+        var reader = new FileReader();
+        reader.onload = (e) => {
+          this.roomAvatar = e.target.result;
+          this.roomAvatarFile = event.target.files[0];
+        };
+        reader.readAsDataURL(event.target.files[0]);
+      }
+    },
+
+
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/create.scss";
+</style>

src/components/GetLink.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="pa-4 getlink-root fill-height">
+  <div class="pa-4 create-root fill-height">
     <div v-if="!loggedIn" class="text-center">
-      <v-icon class="getlink-image">$vuetify.icons.getlink</v-icon>
+      <v-icon class="create-image">$vuetify.icons.getlink</v-icon>
-      <div class="getlink-title">{{ $t("getlink.title") }}</div>
+      <div class="create-title">{{ $t("getlink.title") }}</div>
-      <div class="getlink-info">{{ $t("getlink.info") }}</div>
+      <div class="create-info">{{ $t("getlink.info") }}</div>
       <div color="rgba(255,255,255,0.1)" class="text-center">
         <v-form v-model="isValid" ref="form">
           <v-text-field v-model="user.user_id" :label="$t('getlink.username')" color="black" background-color="white" solo
@@ -23,20 +23,20 @@
         </v-form>
       </div>
     </div>
-    <div v-else style="position:relative" class="getlink-loggedin">
+    <div v-else style="position:relative" class="create-loggedin">
       <!-- Logged in/account created -->
-      <div class="getlink-title">{{ $t("getlink.hello", { user: $matrix.currentUserDisplayName }) }}</div>
+      <div class="create-title">{{ $t("getlink.hello", { user: $matrix.currentUserDisplayName }) }}</div>
-      <div class="getlink-subtitle">{{ $t("getlink.ready_to_share") }}</div>
+      <div class="create-subtitle">{{ $t("getlink.ready_to_share") }}</div>
       <copy-link ref="qr" :locationLink="directMessageLink" i18nQrPopupTitleKey="getlink.scan_title"
         v-on:long-tap="copyQRImage">
         <template v-slot:share>
-          <div v-if="shareSupported" class="clickable getlink-share" @click="shareLink">
+          <div v-if="shareSupported" class="clickable create-share" @click="shareLink">
             <div>{{ $t("getlink.share_qr") }}</div>
             <v-img src="@/assets/icons/ic_share.svg" />
           </div>
         </template>
       </copy-link>
-      <div class="getlink-buttons">
+      <div class="create-buttons">
         <v-btn color="black" depressed @click.stop="goHome" class="outlined-button">{{ $t("getlink.continue") }}</v-btn>
         <v-btn color="black" depressed text block @click.stop="getDifferentLink" class="text-button">{{
           $t("getlink.different_link") }}</v-btn>
@@ -181,9 +181,6 @@ export default {
           })
       }
     },
-    handleCreateRoom() {
-      this.$navigation.push({ name: "CreateRoom" });
-    },
     onUsernameEnter() {
       this.handleLogin();
     },
@@ -246,5 +243,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/getlink.scss";
+@import "@/assets/css/create.scss";
 </style>

src/components/roomTypeMixin.js

@@ -1,4 +1,4 @@
-import { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE, ROOM_TYPE_DEFAULT, STATE_EVENT_ROOM_TYPE } from "../plugins/utils";
+import { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE, ROOM_TYPE_DEFAULT, STATE_EVENT_ROOM_TYPE, ROOM_TYPE_CHANNEL } from "../plugins/utils";
 
 export default {
   data() {
@@ -34,7 +34,7 @@ export default {
       if (e) {
         const roomType = e.getContent().type;
         // Validate value, or return default
-        if ([ROOM_TYPE_FILE_MODE, ROOM_TYPE_VOICE_MODE].includes(roomType)) {
+        if ([ROOM_TYPE_FILE_MODE, ROOM_TYPE_VOICE_MODE, ROOM_TYPE_CHANNEL].includes(roomType)) {
           this.roomDisplayType = roomType;
         } else {
           this.roomDisplayType = ROOM_TYPE_DEFAULT;

src/plugins/utils.js

@@ -12,6 +12,7 @@ export const STATE_EVENT_ROOM_DELETED = "im.keanu.room_deleted";
 export const ROOM_TYPE_DEFAULT = "im.keanu.room_type_default";
 export const ROOM_TYPE_VOICE_MODE = "im.keanu.room_type_voice";
 export const ROOM_TYPE_FILE_MODE = "im.keanu.room_type_file";
+export const ROOM_TYPE_CHANNEL = "im.keanu.room_type_channel";
 
 export const STATE_EVENT_ROOM_TYPE = "im.keanu.room_type";
 

src/router/index.js

@@ -7,6 +7,7 @@ import Login from '../components/Login.vue'
 import Profile from '../components/Profile.vue'
 import CreateRoom from '../components/CreateRoom.vue'
 import GetLink from '../components/GetLink.vue'
+import CreateChannel from '../components/CreateChannel.vue'
 import User from '../models/user'
 import util from '../plugins/utils'
 
@@ -60,6 +61,11 @@ const routes = [
     name: 'GetLink',
     component: GetLink,
   },
+  {
+    path: '/createchannel',
+    name: 'CreateChannel',
+    component: CreateChannel,
+  },
   {
     path: '/login',
     name: 'Login',
@@ -97,7 +103,7 @@ const router = new VueRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  const publicPages = ['/login', '/createroom', '/getlink'];
+  const publicPages = ['/login', '/createroom', '/getlink', '/createchannel'];
   var authRequired = !publicPages.includes(to.path);
   const loggedIn = router.app.$store.state.auth.user;