Add "createchannel" endpoint
This commit is contained in:
N-Pex
parent
9ec91b3f2a
commit
0dc449feaa
7 changed files with 331 additions and 25 deletions
|
|
@ -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;
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
280
src/components/CreateChannel.vue
Normal file
280
src/components/CreateChannel.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<div class="getlink-title">{{ $t("getlink.title") }}</div>
|
||||
<div class="getlink-info">{{ $t("getlink.info") }}</div>
|
||||
<v-icon class="create-image">$vuetify.icons.getlink</v-icon>
|
||||
<div class="create-title">{{ $t("getlink.title") }}</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="getlink-subtitle">{{ $t("getlink.ready_to_share") }}</div>
|
||||
<div class="create-title">{{ $t("getlink.hello", { user: $matrix.currentUserDisplayName }) }}</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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue