Add "createchannel" endpoint
This commit is contained in:
N-Pex
parent
9ec91b3f2a
commit
0dc449feaa
7 changed files with 331 additions and 25 deletions
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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue