Merge branch '582-create-channel-flow' into 'dev'
Add the /createchannel endpoint See merge request keanuapp/keanuapp-weblite!288
This commit is contained in:
N Pex
commit
b00c734f37
15 changed files with 465 additions and 81 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",
|
||||
|
|
|
|||
|
|
@ -49,8 +49,7 @@
|
|||
<!-- Handle resizes, e.g. when soft keyboard is shown/hidden -->
|
||||
<resize-observer ref="chatContainerResizer" @notify="handleChatContainerResize" />
|
||||
|
||||
<CreatedRoomWelcomeHeader v-if="showCreatedRoomWelcomeHeader" v-on:close="closeCreateRoomWelcomeHeader" />
|
||||
<DirectChatWelcomeHeader v-if="showDirectChatWelcomeHeader" v-on:close="closeDirectChatWelcomeHeader" />
|
||||
<component :is="roomWelcomeHeader" v-on:close="closeRoomWelcomeHeader"></component>
|
||||
|
||||
<div v-for="(event, index) in filteredEvents" :key="event.getId()" :eventId="event.getId()">
|
||||
<!-- DAY Marker, shown for every new day in the timeline -->
|
||||
|
|
@ -328,14 +327,15 @@
|
|||
<script>
|
||||
import Vue from "vue";
|
||||
import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
|
||||
import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE } from "../plugins/utils";
|
||||
import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE, ROOM_TYPE_CHANNEL } from "../plugins/utils";
|
||||
import MessageOperations from "./messages/MessageOperations.vue";
|
||||
import ChatHeader from "./ChatHeader";
|
||||
import ChatHeaderPrivate from "./ChatHeaderPrivate.vue";
|
||||
import VoiceRecorder from "./VoiceRecorder";
|
||||
import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
|
||||
import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
|
||||
import DirectChatWelcomeHeader from "./DirectChatWelcomeHeader";
|
||||
import WelcomeHeaderRoom from "./welcome_headers/WelcomeHeaderRoom";
|
||||
import WelcomeHeaderDirectChat from "./welcome_headers/WelcomeHeaderDirectChat";
|
||||
import WelcomeHeaderChannel from "./welcome_headers/WelcomeHeaderChannel";
|
||||
import NoHistoryRoomWelcomeHeader from "./NoHistoryRoomWelcomeHeader.vue";
|
||||
import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
|
||||
import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
|
||||
|
|
@ -391,8 +391,8 @@ export default {
|
|||
MessageOperations,
|
||||
VoiceRecorder,
|
||||
RoomInfoBottomSheet,
|
||||
CreatedRoomWelcomeHeader,
|
||||
DirectChatWelcomeHeader,
|
||||
WelcomeHeaderRoom,
|
||||
WelcomeHeaderDirectChat,
|
||||
NoHistoryRoomWelcomeHeader,
|
||||
MessageOperationsBottomSheet,
|
||||
StickerPickerBottomSheet,
|
||||
|
|
@ -455,10 +455,7 @@ export default {
|
|||
lastRR: null,
|
||||
|
||||
/** If we just created this room, show a small welcome header with info */
|
||||
hideCreatedRoomWelcomeHeader: false,
|
||||
|
||||
/** For direct chats, show a small welcome header with info about the other party */
|
||||
hideDirectChatWelcomeHeader: false,
|
||||
hideRoomWelcomeHeader: false,
|
||||
|
||||
/** An array of recent emojis. Used in the "message operations" popup. */
|
||||
recentEmojis: [],
|
||||
|
|
@ -688,14 +685,21 @@ export default {
|
|||
return this.room && this.room.getJoinRule() == "public";
|
||||
},
|
||||
|
||||
showCreatedRoomWelcomeHeader() {
|
||||
return !this.hideCreatedRoomWelcomeHeader && this.roomCreatedByUsRecently && !this.isDirectRoom;
|
||||
showRoomWelcomeHeader() {
|
||||
return this.roomWelcomeHeader != null;
|
||||
},
|
||||
|
||||
showDirectChatWelcomeHeader() {
|
||||
return !this.hideDirectChatWelcomeHeader && this.roomCreatedByUsRecently && this.isDirectRoom;
|
||||
roomWelcomeHeader() {
|
||||
if (!this.hideRoomWelcomeHeader && this.roomCreatedByUsRecently) {
|
||||
if (this.roomDisplayType == ROOM_TYPE_CHANNEL) {
|
||||
return WelcomeHeaderChannel;
|
||||
}
|
||||
if (this.isDirectRoom) {
|
||||
return WelcomeHeaderDirectChat;
|
||||
}
|
||||
return WelcomeHeaderRoom;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
chatContainerStyle() {
|
||||
if (this.$config.chat_backgrounds && this.room && this.roomId) {
|
||||
const roomType = this.isDirectRoom ? "direct" : this.isPublicRoom ? "public" : "invite";
|
||||
|
|
@ -788,8 +792,7 @@ export default {
|
|||
this.timelineWindow = null;
|
||||
this.typingMembers = [];
|
||||
this.initialLoadDone = false;
|
||||
this.hideDirectChatWelcomeHeader = false;
|
||||
this.hideCreatedRoomWelcomeHeader = false;
|
||||
this.hideRoomWelcomeHeader = false;
|
||||
|
||||
// Stop RR timer
|
||||
this.stopRRTimer();
|
||||
|
|
@ -961,7 +964,7 @@ export default {
|
|||
// unknownRelations.forEach((event) => this.room.relations.aggregateChildEvent(event));
|
||||
|
||||
this.setInitialLoadDone();
|
||||
if (initialEventId && !this.showCreatedRoomWelcomeHeader) {
|
||||
if (initialEventId && !this.showRoomWelcomeHeader) {
|
||||
const event = this.room.findEventById(initialEventId);
|
||||
this.$nextTick(() => {
|
||||
if (event && event.parentThread) {
|
||||
|
|
@ -970,7 +973,7 @@ export default {
|
|||
self.scrollToEvent(initialEventId);
|
||||
}
|
||||
});
|
||||
} else if (this.showCreatedRoomWelcomeHeader || this.showDirectChatWelcomeHeader) {
|
||||
} else if (this.showRoomWelcomeHeader) {
|
||||
self.onScroll();
|
||||
}
|
||||
self.restartRRTimer();
|
||||
|
|
@ -1806,18 +1809,8 @@ export default {
|
|||
this.$analytics.event("Audio", "Voice message sent");
|
||||
},
|
||||
|
||||
closeCreateRoomWelcomeHeader() {
|
||||
this.hideCreatedRoomWelcomeHeader = true;
|
||||
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();
|
||||
});
|
||||
},
|
||||
|
||||
closeDirectChatWelcomeHeader() {
|
||||
this.hideDirectChatWelcomeHeader = true;
|
||||
closeRoomWelcomeHeader() {
|
||||
this.hideRoomWelcomeHeader = true;
|
||||
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
|
||||
|
|
|
|||
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>
|
||||
|
|
@ -87,7 +87,7 @@ import MessageOperations from "./messages/MessageOperations.vue";
|
|||
import ChatHeader from "./ChatHeader.vue";
|
||||
import VoiceRecorder from "./VoiceRecorder.vue";
|
||||
import RoomInfoBottomSheet from "./RoomInfoBottomSheet.vue";
|
||||
import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader.vue";
|
||||
import WelcomeHeaderRoom from "./welcome_headers/WelcomeHeaderRoom.vue";
|
||||
import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet.vue";
|
||||
import StickerPickerBottomSheet from "./StickerPickerBottomSheet.vue";
|
||||
import BottomSheet from "./BottomSheet.vue";
|
||||
|
|
@ -136,7 +136,7 @@ export default {
|
|||
MessageOperations,
|
||||
VoiceRecorder,
|
||||
RoomInfoBottomSheet,
|
||||
CreatedRoomWelcomeHeader,
|
||||
WelcomeHeaderRoom,
|
||||
MessageOperationsBottomSheet,
|
||||
StickerPickerBottomSheet,
|
||||
BottomSheet,
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@
|
|||
/>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content class="pb-0">
|
||||
{{ messageRetention }}
|
||||
{{ messageRetentionDisplay }}
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-action class="pb-0 mb-0">
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
<div class="option-title">{{ $t('room_info.message_retention') }}</div>
|
||||
<div class="option-text">{{ $t('room_info.message_retention_info') }}</div>
|
||||
</div>
|
||||
<div class="text-right">{{ messageRetention }}</div>
|
||||
<div class="text-right">{{ messageRetentionDisplay }}</div>
|
||||
<v-btn v-on:click="showMessageRetentionDialog = true" v-if="canChangeRetentionPolicy" icon size="x-small"><v-icon color="black">edit</v-icon></v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -336,7 +336,6 @@ export default {
|
|||
showLeaveConfirmation: false,
|
||||
showPurgeConfirmation: false,
|
||||
showMessageRetentionDialog: false,
|
||||
messageRetention: "",
|
||||
buildVersion: "",
|
||||
updatingJoinRule: false, // Flag if we are processing update curerntly
|
||||
joinRules: [
|
||||
|
|
@ -446,7 +445,7 @@ export default {
|
|||
methods: {
|
||||
onMessageRetention(retention){
|
||||
const retentionPeriodsFound = this.retentionPeriods.find(rp => rp.value===retention)
|
||||
this.messageRetention = retentionPeriodsFound.text
|
||||
this.messageRetentionDisplay = retentionPeriodsFound.text
|
||||
},
|
||||
onListItemClick(member) {
|
||||
this.activeMember = member
|
||||
|
|
@ -457,16 +456,10 @@ export default {
|
|||
// For this room
|
||||
if (event.getType() == "m.room.member") {
|
||||
this.updateMembers();
|
||||
} else if (event.getType() == "m.room.retention") {
|
||||
this.updateMessageRetention(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateMessageRetention(event) {
|
||||
this.messageRetention = this.roomMessageRetentionDisplay(event);
|
||||
},
|
||||
|
||||
updateMembers() {
|
||||
if (this.room) {
|
||||
const myUserId = this.$matrix.currentUserId;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ import MessageOperations from "./messages/MessageOperations.vue";
|
|||
import ChatHeader from "./ChatHeader";
|
||||
import VoiceRecorder from "./VoiceRecorder";
|
||||
import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
|
||||
import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
|
||||
import WelcomeHeaderRoom from "./welcome_headers/WelcomeHeaderRoom.vue";
|
||||
import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
|
||||
import stickers from "../plugins/stickers";
|
||||
import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
|
||||
|
|
@ -95,7 +95,7 @@ export default {
|
|||
MessageOperations,
|
||||
VoiceRecorder,
|
||||
RoomInfoBottomSheet,
|
||||
CreatedRoomWelcomeHeader,
|
||||
WelcomeHeaderRoom,
|
||||
MessageOperationsBottomSheet,
|
||||
StickerPickerBottomSheet,
|
||||
BottomSheet,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export default {
|
|||
editedRoomTopic: "",
|
||||
isRoomTopicEditMode: false,
|
||||
roomTopicErrorMessage: null,
|
||||
messageRetentionDisplay: "",
|
||||
retentionPeriods: [
|
||||
{
|
||||
text: this.$t("room_info.message_retention_none"),
|
||||
|
|
@ -49,6 +50,7 @@ export default {
|
|||
mounted() {
|
||||
this.$matrix.on("Room.timeline", this.roomInfoMixinOnEvent);
|
||||
this.updatePermissions();
|
||||
this.updateMessageRetention();
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
|
|
@ -253,14 +255,19 @@ export default {
|
|||
},
|
||||
|
||||
roomInfoMixinOnEvent(event) {
|
||||
if (event.getRoomId() !== this.roomId) {
|
||||
return; // Not for this room
|
||||
}
|
||||
if (event.getType() == "m.room.join_rules" || event.getType() == "m.room.guest_access") {
|
||||
this.updatePermissions();
|
||||
if (this.room && this.room.roomId == event.getRoomId()) {
|
||||
if (event.getType() == "m.room.join_rules" || event.getType() == "m.room.guest_access") {
|
||||
this.updatePermissions();
|
||||
} else if (event.getType() == "m.room.retention") {
|
||||
this.updateMessageRetention(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateMessageRetention(event) {
|
||||
this.messageRetentionDisplay = this.roomMessageRetentionDisplay(event);
|
||||
},
|
||||
|
||||
privatePartyAvatar(size) {
|
||||
const other = this.privateParty;
|
||||
if (other) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
85
src/components/welcome_headers/WelcomeHeaderChannel.vue
Normal file
85
src/components/welcome_headers/WelcomeHeaderChannel.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="created-room-welcome-header">
|
||||
<div class="mt-2" v-if="roomJoinRule == 'public'">
|
||||
<i18n path="room_welcome.join_channel" tag="span">
|
||||
<template v-slot:link>
|
||||
<div style="position:relative;display:inline-block">
|
||||
<a @click.stop="copyPublicLink" :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
|
||||
<v-btn v-if="publicRoomLinkCopied" id="btn-copy-room-link" color="#444444" depressed
|
||||
style="position:absolute;left:0;top:0" class="filled-button link-copied-in-place">{{
|
||||
$t("room_info.link_copied") }}</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
<div class="mt-2" v-else-if="roomJoinRule == 'invite'">
|
||||
{{ $t("room_welcome.join_invite") }}
|
||||
</div>
|
||||
<div class="mt-2" v-if="roomMessageRetention() > 0">
|
||||
<i18n path="room_welcome.info_retention" tag="span">
|
||||
<template v-slot:time>
|
||||
<b>{{ messageRetentionDisplay }}</b>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
<div class="mt-2" v-if="roomMessageRetention() > 0">
|
||||
<a href="#" text @click.prevent="showMessageRetentionDialog = true">
|
||||
{{ $t("room_welcome.change") }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<v-btn id="btn-got-it" text @click.stop="$emit('close')" class="text-transform-0">
|
||||
{{ $t("room_welcome.got_it") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<MessageRetentionDialog :show="showMessageRetentionDialog" :room="room" @close="showMessageRetentionDialog = false"
|
||||
v-on:message-retention-update="onMessageRetention" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MessageRetentionDialog from '../MessageRetentionDialog.vue';
|
||||
import roomInfoMixin from "../roomInfoMixin";
|
||||
|
||||
export default {
|
||||
name: "WelcomeHeaderChannel",
|
||||
mixins: [roomInfoMixin],
|
||||
components: {
|
||||
MessageRetentionDialog
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
publicRoomLinkCopied: false,
|
||||
showMessageRetentionDialog: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onMessageRetention(ignoredretention) {
|
||||
this.updateMessageRetention();
|
||||
},
|
||||
copyPublicLink() {
|
||||
const self = this;
|
||||
this.$copyText(this.publicRoomLink).then(
|
||||
function (ignored) {
|
||||
// Success!
|
||||
self.publicRoomLinkCopied = true;
|
||||
setInterval(() => {
|
||||
// Hide again
|
||||
self.publicRoomLinkCopied = false;
|
||||
}, 3000);
|
||||
},
|
||||
function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
|
|
@ -7,10 +7,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import roomInfoMixin from "./roomInfoMixin";
|
||||
import roomInfoMixin from "../roomInfoMixin";
|
||||
|
||||
export default {
|
||||
name: "CreatedRoomWelcomeHeader",
|
||||
name: "WelcomeHeaderDirectChat",
|
||||
mixins: [roomInfoMixin],
|
||||
computed: {
|
||||
roomHistoryDescription() {
|
||||
|
|
@ -38,10 +38,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import roomInfoMixin from "./roomInfoMixin";
|
||||
import roomInfoMixin from "../roomInfoMixin";
|
||||
|
||||
export default {
|
||||
name: "CreatedRoomWelcomeHeader",
|
||||
name: "WelcomeHeaderRoom",
|
||||
mixins: [roomInfoMixin],
|
||||
computed: {
|
||||
roomHistoryDescription() {
|
||||
|
|
@ -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