Updated New Room Page
This commit is contained in:
N Pex
parent
5294069b20
commit
a700e19990
30 changed files with 1263 additions and 763 deletions
|
|
@ -30,6 +30,7 @@
|
|||
v-on:remove-file="currentFileInputs.splice($event, 1)"
|
||||
v-on:reset="resetAttachments"
|
||||
:attachments="currentFileInputs"
|
||||
v-on:close="closeFileMode"
|
||||
/>
|
||||
|
||||
<div v-if="!useVoiceMode && !useFileModeNonAdmin" :class="{'chat-content': true, 'flex-grow-1': true, 'flex-shrink-1': true, 'invisible': !initialLoadDone}" ref="chatContainer"
|
||||
|
|
@ -699,8 +700,7 @@ export default {
|
|||
},
|
||||
useFileModeNonAdmin: {
|
||||
get: function() {
|
||||
if (!this.$config.experimental_file_mode) return false;
|
||||
return (util.roomDisplayTypeOverride(this.room) || this.roomDisplayType) === ROOM_TYPE_FILE_MODE && !this.canCreatePoll; // TODO - Check user or admin
|
||||
return this.roomDisplayType === ROOM_TYPE_FILE_MODE && !this.canCreatePoll; // TODO - Check user or admin
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1556,6 +1556,7 @@ export default {
|
|||
const text = withText || "";
|
||||
const promise = this.sendAttachments(text, this.currentFileInputs);
|
||||
promise.then(() => {
|
||||
this.sendingAttachments = [];
|
||||
this.currentFileInputs = null;
|
||||
this.attachmentCaption = undefined;
|
||||
this.sendingStatus = this.sendStatuses.INITIAL;
|
||||
|
|
@ -2113,6 +2114,14 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
closeFileMode() {
|
||||
this.resetAttachments();
|
||||
this.$matrix.leaveRoomAndNavigate(this.room.roomId)
|
||||
.catch((err) => {
|
||||
console.log("Error leaving", err);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
135
src/components/Create.vue
Normal file
135
src/components/Create.vue
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div class="create-root fill-height">
|
||||
<div class="mt-4 d-flex flex-row align-center">
|
||||
<v-btn id="btn-back" text class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack">
|
||||
<v-icon>arrow_back</v-icon>
|
||||
</v-btn>
|
||||
<YouAre class="flex-grow-1 text-end" v-if="loggedIn" />
|
||||
</div>
|
||||
<div class="mt-40 text-center px-4">
|
||||
<div class="create-title no-icon h3-bold">{{ $t("create.title") }}</div>
|
||||
<div class="room-type" @click="createRoom" v-if="$config.roomTypes.includes('group_chat')">
|
||||
<div class="room-type__icon">
|
||||
<v-icon>$vuetify.icons.room_type_room</v-icon>
|
||||
</div>
|
||||
<div class="room-type__name">{{ $t("create.room_type_room_name") }}</div>
|
||||
<div class="room-type__description">{{ $t("create.room_type_room_description") }}</div>
|
||||
</div>
|
||||
<div class="room-type" @click="createChannel" v-if="$config.roomTypes.includes('channel')">
|
||||
<div class="room-type__icon">
|
||||
<v-icon>$vuetify.icons.room_type_channel</v-icon>
|
||||
</div>
|
||||
<div class="room-type__name">{{ $t("create.room_type_channel_name") }}</div>
|
||||
<div class="room-type__description">{{ $t("create.room_type_channel_description") }}</div>
|
||||
</div>
|
||||
<div class="room-type" @click="createFiledrop" v-if="$config.roomTypes.includes('file_drop')">
|
||||
<div class="room-type__icon">
|
||||
<v-icon>$vuetify.icons.room_type_filedrop</v-icon>
|
||||
</div>
|
||||
<div class="room-type__name">{{ $t("create.room_type_filedrop_name") }}</div>
|
||||
<div class="room-type__description">{{ $t("create.room_type_filedrop_description") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import YouAre from "../components/YouAre.vue";
|
||||
|
||||
export default {
|
||||
name: "Create",
|
||||
components: { YouAre },
|
||||
computed: {
|
||||
loggedIn() {
|
||||
return this.$store.state.auth.status.loggedIn;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$navigation.pop();
|
||||
},
|
||||
createRoom() {
|
||||
this.$navigation.push({ name: "CreateRoom" });
|
||||
},
|
||||
createChannel() {
|
||||
this.$navigation.push({ name: "CreateChannel" });
|
||||
},
|
||||
createFiledrop() {
|
||||
this.$navigation.push({ name: "CreateFileDrop" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/typography.scss";
|
||||
@import "@/assets/css/create.scss";
|
||||
|
||||
.create-title {
|
||||
margin-bottom: 24 * $chat-text-size;
|
||||
}
|
||||
|
||||
.room-type {
|
||||
padding: 15 * $chat-text-size;
|
||||
margin-bottom: 12 * $chat-text-size;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 8 * $chat-text-size;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #efeffe;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
border: 2px solid $very-very-purple;
|
||||
}
|
||||
|
||||
&:active::after {
|
||||
border: 1px solid $poll-hilite-color;
|
||||
}
|
||||
|
||||
.room-type__icon svg {
|
||||
color: transparent;
|
||||
}
|
||||
&:hover .room-type__icon svg, &:active .room-type__icon svg {
|
||||
color: $very-very-purple;
|
||||
}
|
||||
|
||||
.room-type__name {
|
||||
color: black;
|
||||
font-family: Inter;
|
||||
font-size: 16 * $chat-text-size;
|
||||
font-weight: 600;
|
||||
line-height: 18.72 * $chat-text-size;
|
||||
letter-spacing: 0.40 * $chat-text-size;
|
||||
text-align: center;
|
||||
text-underline-position: from-font;
|
||||
text-decoration-skip-ink: none;
|
||||
margin-top: 8 * $chat-text-size;
|
||||
margin-bottom: 6 * $chat-text-size;
|
||||
}
|
||||
|
||||
.room-type__description {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-family: Inter;
|
||||
font-size: 13 * $chat-text-size;
|
||||
font-weight: 400;
|
||||
line-height: 15.21 * $chat-text-size;
|
||||
letter-spacing: 0.40 * $chat-text-size;
|
||||
text-align: center;
|
||||
text-underline-position: from-font;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,39 +1,46 @@
|
|||
<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-root fill-height">
|
||||
<div class="mt-4 d-flex flex-row align-center">
|
||||
<v-btn id="btn-back" text class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack"
|
||||
:disabled="creatingRoom">
|
||||
<v-icon>arrow_back</v-icon>
|
||||
</v-btn>
|
||||
<YouAre class="flex-grow-1 text-end" v-if="loggedIn" />
|
||||
</div>
|
||||
<div class="mt-40 px-4 text-center">
|
||||
<CreateRoomAvatar v-model="roomAvatar" />
|
||||
<div class="create-title h3-bold">{{ $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>
|
||||
<v-form v-model="formIsValid">
|
||||
<v-text-field v-model="roomName" :label="$t('createchannel.channel_name')" v-bind="{ ...roomNameInputFields }"
|
||||
v-on="{ ...roomNameInputListeners }"></v-text-field>
|
||||
<v-text-field v-model="roomTopic" :label="$t('createchannel.channel_topic')"
|
||||
v-bind="{ ...roomTopicInputFields }" v-on="{ ...roomTopicInputListeners }"></v-text-field>
|
||||
<div class="caption-2 text-center mt-2 mb-8">{{ $t('createchannel.channel_topic_label') }}</div>
|
||||
<div class="error--text" v-if="errorMessage != null">{{ this.errorMessage }}</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>
|
||||
<div class="create-buttons">
|
||||
<!-- Create button -->
|
||||
<v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" depressed @click.stop="handleNext"
|
||||
class="filled-button mt-4">
|
||||
<div v-if="creatingRoom" class="text-center">
|
||||
{{ creatingRoomStatus }}
|
||||
<v-progress-circular v-if="creatingRoom" :indeterminate="creatingRoomProgress == null"
|
||||
:value="creatingRoomProgress" color="primary" width="2" size="20"></v-progress-circular>
|
||||
</div>
|
||||
<span v-else>{{ $t("getlink.next") }}</span>
|
||||
</v-btn>
|
||||
<v-btn v-if="!loggedIn" color="black" depressed text @click.stop="goToLoginPage" class="text-button">{{
|
||||
$t("menu.login")
|
||||
}}</v-btn>
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -47,14 +54,19 @@ import util, { ROOM_TYPE_CHANNEL } from "../plugins/utils";
|
|||
import YouAre from "../components/YouAre.vue";
|
||||
import User from "../models/user";
|
||||
import { CHANNEL_POWER_LEVELS } from "../services/matrix.service";
|
||||
import createRoomMixin from "./createRoomMixin";
|
||||
import CreateRoomAvatar from "./create/CreateRoomAvatar.vue";
|
||||
|
||||
export default {
|
||||
name: "CreateChannel",
|
||||
mixins: [rememberMeMixin, logoMixin],
|
||||
components: { InteractiveAuth, YouAre },
|
||||
mixins: [rememberMeMixin, logoMixin, createRoomMixin],
|
||||
components: { InteractiveAuth, YouAre, CreateRoomAvatar },
|
||||
data() {
|
||||
return this.defaultData();
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit("setCurrentRoomId", null);
|
||||
},
|
||||
computed: {
|
||||
loggedIn() {
|
||||
return this.$store.state.auth.status.loggedIn;
|
||||
|
|
@ -63,53 +75,80 @@ export default {
|
|||
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);
|
||||
this.$navigation.push({ name: "Login", params: { showCreateRoomOption: false, redirect: "CreateChannel" } }, 1);
|
||||
},
|
||||
handleNext() {
|
||||
preCreateRoom() {
|
||||
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;
|
||||
})
|
||||
return login;
|
||||
},
|
||||
generateAliasForRoom() {
|
||||
return true;
|
||||
},
|
||||
getRoomCreationOptions() {
|
||||
const createRoomOptions = {
|
||||
visibility: "private", // Not listed!
|
||||
name: this.roomName,
|
||||
preset: "public_chat",
|
||||
initial_state:
|
||||
[
|
||||
{
|
||||
type: "m.room.history_visibility",
|
||||
state_key: "",
|
||||
content: {
|
||||
history_visibility: "shared"
|
||||
}
|
||||
},
|
||||
{
|
||||
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
|
||||
}
|
||||
|
||||
// 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,
|
||||
state_default: 50,
|
||||
events: CHANNEL_POWER_LEVELS
|
||||
}
|
||||
createRoomOptions.initial_state.push(
|
||||
{
|
||||
type: "m.room.power_levels",
|
||||
state_key: "",
|
||||
content: powerLevelContent
|
||||
});
|
||||
return createRoomOptions;
|
||||
},
|
||||
handleNext() {
|
||||
this.createRoom(this.$t("createchannel.status_creating"), this.$t("createchannel.error_channel"));
|
||||
},
|
||||
loadLoginFlows() {
|
||||
var user = Object.assign({}, this.user);
|
||||
|
|
@ -138,138 +177,11 @@ export default {
|
|||
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: "shared"
|
||||
}
|
||||
},
|
||||
{
|
||||
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,
|
||||
state_default: 50,
|
||||
events: CHANNEL_POWER_LEVELS
|
||||
}
|
||||
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/typography.scss";
|
||||
@import "@/assets/css/create.scss";
|
||||
</style>
|
||||
195
src/components/CreateFileDrop.vue
Normal file
195
src/components/CreateFileDrop.vue
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<div class="create-root fill-height">
|
||||
<div class="mt-4 d-flex flex-row align-center">
|
||||
<v-btn id="btn-back" text class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack"
|
||||
:disabled="creatingRoom">
|
||||
<v-icon>arrow_back</v-icon>
|
||||
</v-btn>
|
||||
<YouAre class="flex-grow-1 text-end" v-if="loggedIn" />
|
||||
</div>
|
||||
<div class="mt-40 px-4 text-center">
|
||||
<CreateRoomAvatar v-model="roomAvatar" class="v-hidden" />
|
||||
<div class="create-title h3-bold">{{ $t("createfiledrop.title") }}</div>
|
||||
<div class="create-info">{{ $t("createfiledrop.info") }}</div>
|
||||
<div color="rgba(255,255,255,0.1)" class="text-center">
|
||||
<v-form v-model="formIsValid">
|
||||
<v-text-field v-model="roomName" :label="$t('createfiledrop.filedrop_name')"
|
||||
v-bind="{ ...roomNameInputFields }" v-on="{ ...roomNameInputListeners }"></v-text-field>
|
||||
|
||||
<div class="error--text" v-if="errorMessage != null">{{ this.errorMessage }}</div>
|
||||
|
||||
<interactive-auth ref="interactiveAuth" />
|
||||
|
||||
<div class="create-buttons">
|
||||
<!-- Create button -->
|
||||
<v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" depressed @click.stop="handleNext"
|
||||
class="filled-button mt-4">
|
||||
<div v-if="creatingRoom" class="text-center">
|
||||
{{ creatingRoomStatus }}
|
||||
<v-progress-circular v-if="creatingRoom" :indeterminate="creatingRoomProgress == null"
|
||||
:value="creatingRoomProgress" color="primary" width="2" size="20"></v-progress-circular>
|
||||
</div>
|
||||
<span v-else>{{ $t("getlink.next") }}</span>
|
||||
</v-btn>
|
||||
<v-btn v-if="!loggedIn" color="black" depressed text @click.stop="goToLoginPage" class="text-button">{{
|
||||
$t("menu.login")
|
||||
}}</v-btn>
|
||||
</div>
|
||||
</v-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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_FILE_MODE } from "../plugins/utils";
|
||||
import YouAre from "../components/YouAre.vue";
|
||||
import User from "../models/user";
|
||||
import createRoomMixin from "./createRoomMixin";
|
||||
import CreateRoomAvatar from "./create/CreateRoomAvatar.vue";
|
||||
|
||||
export default {
|
||||
name: "CreateFileDrop",
|
||||
mixins: [rememberMeMixin, logoMixin, createRoomMixin],
|
||||
components: { InteractiveAuth, YouAre, CreateRoomAvatar },
|
||||
data() {
|
||||
return this.defaultData();
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit("setCurrentRoomId", null);
|
||||
},
|
||||
computed: {
|
||||
loggedIn() {
|
||||
return this.$store.state.auth.status.loggedIn;
|
||||
},
|
||||
currentUser() {
|
||||
return this.$store.state.auth.user;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
defaultData() {
|
||||
return {
|
||||
currentLoginServer: "",
|
||||
loadingLoginFlows: false,
|
||||
loginFlows: null,
|
||||
showQRCopiedToast: false,
|
||||
};
|
||||
},
|
||||
goToLoginPage() {
|
||||
this.$navigation.push({ name: "Login", params: { showCreateRoomOption: false, redirect: "CreateFileDrop" } }, 1);
|
||||
},
|
||||
preCreateRoom() {
|
||||
const prefix = this.$config.userIdPrefix;
|
||||
const user = new User(util.randomUser(prefix), util.randomPass(), false);
|
||||
const login = this.loggedIn ? Promise.resolve(this.currentUser) : this.loadLoginFlows().then(() => {
|
||||
return this.$store.dispatch("createUser", { user, registrationFlowHandler: this.$refs.interactiveAuth.registrationFlowHandler })
|
||||
});
|
||||
return login;
|
||||
},
|
||||
generateAliasForRoom() {
|
||||
return true;
|
||||
},
|
||||
getRoomCreationOptions() {
|
||||
const 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",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "m.room.history_visibility",
|
||||
state_key: "",
|
||||
content: {
|
||||
history_visibility: "joined"
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "m.room.join_rules",
|
||||
state_key: "",
|
||||
content: {
|
||||
join_rule: "public"
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
if (this.roomTopic && this.roomTopic.length > 0) {
|
||||
// Add topic
|
||||
createRoomOptions.topic = this.roomTopic;
|
||||
}
|
||||
|
||||
createRoomOptions.creation_content = {
|
||||
type: ROOM_TYPE_FILE_MODE
|
||||
}
|
||||
|
||||
// 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: 0,
|
||||
}
|
||||
createRoomOptions.initial_state.push(
|
||||
{
|
||||
type: "m.room.power_levels",
|
||||
state_key: "",
|
||||
content: powerLevelContent
|
||||
});
|
||||
return createRoomOptions;
|
||||
},
|
||||
handleNext() {
|
||||
this.createRoom(this.$t("createfiledrop.status_creating"), this.$t("createfiledrop.error_filedrop"));
|
||||
},
|
||||
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);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/typography.scss";
|
||||
@import "@/assets/css/create.scss";
|
||||
</style>
|
||||
|
|
@ -1,112 +1,71 @@
|
|||
<template>
|
||||
<div class="create-room fill-height">
|
||||
<div>
|
||||
<v-container fluid>
|
||||
<div class="room-name no-upper">{{ $t("new_room.new_room") }}</div>
|
||||
<v-btn id="btn-back" text class="header-button-left" v-show="$navigation && $navigation.canPop()"
|
||||
@click.stop="goBack" :disabled="step > steps.NAME_SET">
|
||||
<v-icon>arrow_back</v-icon>
|
||||
<span class="d-none d-sm-block">{{ $t("menu.back") }}</span>
|
||||
</v-btn>
|
||||
<!-- <v-btn
|
||||
text
|
||||
:disabled="
|
||||
!roomName || (step != steps.INITIAL && step != steps.CREATED)
|
||||
"
|
||||
class="header-button-right"
|
||||
@click.stop="onCreate"
|
||||
>
|
||||
<span>{{
|
||||
step == steps.CREATED ? $t("new_room.done") : $t("new_room.next")
|
||||
}}</span>
|
||||
</v-btn> -->
|
||||
</v-container>
|
||||
<div class="create-root fill-height">
|
||||
<div class="mt-4 d-flex flex-row align-center">
|
||||
<v-btn id="btn-back" text class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack"
|
||||
:disabled="creatingRoom">
|
||||
<v-icon>arrow_back</v-icon>
|
||||
</v-btn>
|
||||
<YouAre class="flex-grow-1 text-end" v-if="loggedIn" />
|
||||
</div>
|
||||
<v-container fluid class="mt-40 px-4 text-center">
|
||||
<CreateRoomAvatar v-model="roomAvatar" />
|
||||
<div class="create-title h3-bold">{{ $t("new_room.title") }}</div>
|
||||
<div color="rgba(255,255,255,0.1)" class="text-center">
|
||||
<v-form v-model="formIsValid">
|
||||
<v-text-field v-model="roomName" :label="$t('new_room.name_room')" v-bind="{ ...roomNameInputFields }"
|
||||
v-on="{ ...roomNameInputListeners }"></v-text-field>
|
||||
<v-text-field v-model="roomTopic" :label="$t('new_room.room_topic')" v-bind="{ ...roomTopicInputFields }"
|
||||
v-on="{ ...roomTopicInputListeners }"></v-text-field>
|
||||
|
||||
<v-container fluid class="mt-40">
|
||||
<v-row align="center">
|
||||
<v-col align="center">
|
||||
<v-avatar size="50" color="#ededed" @click.stop="showAvatarPicker">
|
||||
<v-img v-if="roomAvatar" :src="roomAvatar" />
|
||||
<v-icon v-else>camera_alt</v-icon>
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row cols="12" align="center" justify="center">
|
||||
<v-col sm="8" align="center">
|
||||
<div class="text-start font-weight-light">{{ $t("new_room.name_room") }}</div>
|
||||
<v-text-field v-model="roomName" color="black" :rules="roomNamerules" counter="50" maxlength="50"
|
||||
background-color="white" v-on:keyup.enter="$refs.topic.focus()" :disabled="step > steps.INITIAL" autofocus
|
||||
solo @update:error="updateErrorState"></v-text-field>
|
||||
<div class="text-start font-weight-light" v-show="roomName.length > 0">{{ $t("new_room.room_topic") }}</div>
|
||||
<v-textarea v-model="roomTopic" v-show="roomName.length > 0" ref="topic" color="black" background-color="white"
|
||||
v-on:keydown.enter.prevent="
|
||||
() => {
|
||||
$refs.create.$el.focus()
|
||||
}
|
||||
" :disabled="step > steps.INITIAL" solo full-width auto-grow rows="1" no-resize hide-details></v-textarea>
|
||||
<!-- Message History (public room) -->
|
||||
<v-card class="ma-0 mt-10" flat>
|
||||
<v-card-text class="with-right-label">
|
||||
<div>
|
||||
<div class="paragraph-bold">{{ $t('room_info.message_history') }}</div>
|
||||
<div class="caption-1-gray">{{ $t('room_info.message_history_info') }}</div>
|
||||
</div>
|
||||
<v-switch class="ma-0" v-model="publicRoom"></v-switch>
|
||||
</v-card-text>
|
||||
<div class="option-warning" v-if="publicRoom"><v-icon size="18">$vuetify.icons.ic_warning</v-icon>{{
|
||||
$t("room_info.message_history_warning") }}</div>
|
||||
</v-card>
|
||||
|
||||
<!-- Check if we have any options enabled in config -->
|
||||
<template v-if="$config.experimental_voice_mode || $config.experimental_read_only_room || $config.experimental_public_room || $config.experimental_file_mode">
|
||||
<div @click.stop="showOptions = !showOptions" v-show="roomName.length > 0" class="options clickable">
|
||||
<div>{{ $t("new_room.options") }}</div>
|
||||
<v-icon v-if="!showOptions">expand_more</v-icon>
|
||||
<v-icon v-else>expand_less</v-icon>
|
||||
<hr color="#ededed" />
|
||||
|
||||
<!-- Limit History (message retention) -->
|
||||
<v-card class="ma-0 mt-2" flat>
|
||||
<v-card-text class="with-right-label">
|
||||
<div>
|
||||
<div class="paragraph-bold">{{ $t('room_info.message_retention') }}</div>
|
||||
<div class="caption-1-gray">{{ limitHistory ? $t('room_info.limit_history_info', {period: roomMessageRetentionDisplayString(limitHistoryMilliseconds)}) : $t('room_info.message_retention_info') }}</div>
|
||||
<div v-show="limitHistory" @click="showRetentionDialog" class="paragraph paragraph-button mt-4 clickable">{{ $t('menu.edit') }}</div>
|
||||
</div>
|
||||
<v-switch class="ma-0" v-model="limitHistory"></v-switch>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
|
||||
<div class="error--text" v-if="errorMessage != null">{{ this.errorMessage }}</div>
|
||||
|
||||
<!-- Create button -->
|
||||
<v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" depressed @click.stop="onCreate"
|
||||
class="filled-button mt-4">
|
||||
<div v-if="creatingRoom && !enterRoomDialog" class="text-center">
|
||||
{{ creatingRoomStatus }}
|
||||
<v-progress-circular v-if="creatingRoom" :indeterminate="creatingRoomProgress == null"
|
||||
:value="creatingRoomProgress" color="primary" width="2" size="20"></v-progress-circular>
|
||||
</div>
|
||||
<v-card v-if="$config.experimental_public_room" v-show="showOptions" class="room-option account ma-0" flat>
|
||||
<v-card-text class="with-right-label">
|
||||
<div>
|
||||
<div class="option-title">{{ $t('room_info.make_public') }}</div>
|
||||
<!-- <div class="option-text">{{ $t('room_info.read_only_room_info') }}</div> -->
|
||||
</div>
|
||||
<v-switch v-model="unencryptedRoom"></v-switch>
|
||||
</v-card-text>
|
||||
<div class="option-warning" v-if="unencryptedRoom"><v-icon size="18">$vuetify.icons.ic_warning</v-icon>{{ $t("room_info.make_public_warning")}}</div>
|
||||
</v-card>
|
||||
|
||||
<v-card v-if="availableRoomTypes.length > 1" v-show="showOptions" class="room-option account ma-0" flat>
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-wrap text-left">
|
||||
<div class="col-12 col-md-6 mr-auto pa-0">
|
||||
<div class="option-title">{{ $t('room_info.room_type') }}</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 pa-0">
|
||||
<RoomTypeSelector v-model="roomType" />
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card v-if="$config.experimental_read_only_room" v-show="showOptions" class="room-option account ma-0" flat>
|
||||
<v-card-text class="with-right-label">
|
||||
<div>
|
||||
<div class="option-title">{{ $t('room_info.read_only_room') }}</div>
|
||||
<div class="option-text">{{ $t('room_info.read_only_room_info') }}</div>
|
||||
</div>
|
||||
<v-switch v-model="readOnlyRoom"></v-switch>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<div class="error--text" v-if="roomCreationErrorMsg"> {{ roomCreationErrorMsg }}</div>
|
||||
<v-btn id="btn-room-create" color="black" depressed class="filled-button" @click.stop="onCreate"
|
||||
:disabled="isDisabled" ref="create">
|
||||
<div v-if="status && !enterRoomDialog" class="text-center">
|
||||
{{ status }}
|
||||
<v-progress-circular v-if="step == steps.CREATING" indeterminate color="primary"
|
||||
size="20"></v-progress-circular>
|
||||
</div>
|
||||
<span v-else>{{ $t("new_room.create") }}</span>
|
||||
<span v-else>{{ $t("getlink.next") }}</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</div>
|
||||
|
||||
</v-container>
|
||||
|
||||
<interactive-auth ref="interactiveAuth" />
|
||||
|
||||
<input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
|
||||
accept="image/*" class="d-none" />
|
||||
|
||||
<input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar" @change="handlePickedUserAvatar($event)" accept="image/*" class="d-none" />
|
||||
<input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar"
|
||||
@change="handlePickedUserAvatar($event)" accept="image/*" class="d-none" />
|
||||
|
||||
<v-dialog v-model="enterRoomDialog" :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'">
|
||||
<v-card>
|
||||
|
|
@ -117,9 +76,8 @@
|
|||
<v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
|
||||
:value="selectedProfile">
|
||||
<template v-slot:selection>
|
||||
<v-text-field background-color="transparent" solo flat hide-details
|
||||
@click.native.stop="(event) => event.target.focus()"
|
||||
@focus="$event.target.select()"
|
||||
<v-text-field background-color="transparent" solo flat hide-details
|
||||
@click.native.stop="(event) => event.target.focus()" @focus="$event.target.select()"
|
||||
v-model="selectedProfile.name"></v-text-field>
|
||||
</template>
|
||||
<template v-slot:item="data">
|
||||
|
|
@ -149,54 +107,28 @@
|
|||
</v-container>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<MessageRetentionDialog :initialValue="limitHistoryMilliseconds" :show="selectRetentionDialog" v-on:close="selectRetentionDialog = false"
|
||||
v-on:message-retention-update="onUpdateHistoryLimit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import util, { ROOM_TYPE_DEFAULT } from "../plugins/utils";
|
||||
import util from "../plugins/utils";
|
||||
import InteractiveAuth from './InteractiveAuth.vue';
|
||||
import rememberMeMixin from "./rememberMeMixin";
|
||||
import roomTypeMixin from "./roomTypeMixin";
|
||||
import RoomTypeSelector from './RoomTypeSelector.vue';
|
||||
|
||||
const steps = Object.freeze({
|
||||
INITIAL: 0,
|
||||
//NAME_SET: 1,
|
||||
CREATING: 2,
|
||||
CREATED: 3,
|
||||
});
|
||||
import YouAre from "../components/YouAre.vue";
|
||||
import createRoomMixin from "./createRoomMixin";
|
||||
import roomRetentionMixin from "./roomRetentionMixin";
|
||||
import CreateRoomAvatar from "./create/CreateRoomAvatar.vue";
|
||||
import MessageRetentionDialog from "./MessageRetentionDialog.vue";
|
||||
|
||||
export default {
|
||||
name: "CreateRoom",
|
||||
components: { InteractiveAuth, RoomTypeSelector },
|
||||
mixins: [rememberMeMixin, roomTypeMixin],
|
||||
components: { InteractiveAuth, YouAre, CreateRoomAvatar, MessageRetentionDialog },
|
||||
mixins: [rememberMeMixin, createRoomMixin, roomRetentionMixin],
|
||||
data() {
|
||||
return {
|
||||
steps,
|
||||
step: steps.INITIAL,
|
||||
roomId: null,
|
||||
roomName: "",
|
||||
roomTopic: "",
|
||||
roomAvatar: null,
|
||||
roomAvatarFile: null,
|
||||
status: "",
|
||||
joinRule: 0,
|
||||
joinRules: [
|
||||
{
|
||||
id: "public",
|
||||
text: this.$t("new_room.public_info"),
|
||||
icon: "link",
|
||||
descr: this.$t("new_room.public_description"),
|
||||
},
|
||||
{
|
||||
id: "invite",
|
||||
text: this.$t("new_room.invite_info"),
|
||||
icon: "person_add",
|
||||
descr: this.$t("new_room.invite_description"),
|
||||
},
|
||||
],
|
||||
publicRoomLink: null,
|
||||
publicRoomLinkCopied: false,
|
||||
availableAvatars: [],
|
||||
selectedProfile: {
|
||||
id: "",
|
||||
|
|
@ -204,21 +136,15 @@ export default {
|
|||
name: ""
|
||||
},
|
||||
enterRoomDialog: false,
|
||||
roomNamerules: [
|
||||
v => v.length <= 50 || this.$t("new_room.room_name_limit_error_msg"),
|
||||
v => !v.includes(':') || this.$t("new_room.colon_not_allowed")
|
||||
],
|
||||
roomNameHasError: false,
|
||||
roomCreationErrorMsg: "",
|
||||
showOptions: false,
|
||||
unencryptedRoom: false,
|
||||
readOnlyRoom: false,
|
||||
roomType: ROOM_TYPE_DEFAULT,
|
||||
selectRetentionDialog: false,
|
||||
publicRoom: false,
|
||||
limitHistory: false,
|
||||
limitHistoryMilliseconds: 2 * 7 * 24 * 3600 * 1000, // 2 weeks default
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.joinRule = this.joinRules[0].id; // Set default
|
||||
this.$store.commit("setCurrentRoomId", null);
|
||||
this.availableAvatars = util.getDefaultAvatars();
|
||||
this.selectAvatar(
|
||||
this.availableAvatars[
|
||||
|
|
@ -227,21 +153,7 @@ export default {
|
|||
);
|
||||
},
|
||||
|
||||
watch: {
|
||||
joinRule() {
|
||||
console.log("Join rule changed to", this.joinRule);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isDisabled() {
|
||||
return this.status ? true : this.roomName.length === 0 || this.roomName.length > 50 || this.roomNameHasError
|
||||
},
|
||||
roomAvatarLetter() {
|
||||
if (!this.roomName) {
|
||||
return null;
|
||||
}
|
||||
return this.roomName.substring(0, 1).toUpperCase();
|
||||
},
|
||||
currentUser() {
|
||||
return this.$store.state.auth.user;
|
||||
},
|
||||
|
|
@ -255,17 +167,6 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
updateErrorState(errorState) {
|
||||
this.roomNameHasError = errorState
|
||||
},
|
||||
goBack() {
|
||||
if (this.step == steps.NAME_SET) {
|
||||
this.step = steps.INITIAL;
|
||||
} else {
|
||||
this.$navigation.pop();
|
||||
}
|
||||
},
|
||||
|
||||
onCreate() {
|
||||
if (this.currentUser) {
|
||||
this.onEnterRoom();
|
||||
|
|
@ -276,105 +177,87 @@ export default {
|
|||
|
||||
onEnterRoom() {
|
||||
this.enterRoomDialog = false;
|
||||
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!)
|
||||
});
|
||||
}
|
||||
this.createRoom(this.$t("new_room.status_creating"), undefined);
|
||||
},
|
||||
|
||||
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, room.name
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
addPeople() {
|
||||
// For now, jump straight to create
|
||||
this.createRoom().then((roomId) => {
|
||||
this.roomId = roomId;
|
||||
this.$matrix.setCurrentRoomId(roomId);
|
||||
this.$navigation.push(
|
||||
{
|
||||
name: "Invite",
|
||||
},
|
||||
1
|
||||
);
|
||||
});
|
||||
},
|
||||
createRoom() {
|
||||
this.step = steps.CREATING;
|
||||
|
||||
preCreateRoom() {
|
||||
const hasUser = this.currentUser ? true : false;
|
||||
var setProfileData = false;
|
||||
|
||||
var roomId;
|
||||
this.status = this.$t("new_room.status_creating");
|
||||
return this.$matrix
|
||||
.getLoginPromise(this.$refs.interactiveAuth.registrationFlowHandler)
|
||||
.then((user) => {
|
||||
if (user.is_guest && !hasUser) {
|
||||
// Newly created account, joining first room.
|
||||
// Set avatar and display name to either the randomly chosen ones, or the
|
||||
// ones the users has changed to.
|
||||
setProfileData = true;
|
||||
|
||||
// Set display name and avatar directly on the matrix object.
|
||||
if (
|
||||
this.selectedProfile.name &&
|
||||
this.selectedProfile.name.length > 0
|
||||
) {
|
||||
this.$matrix.userDisplayName = this.selectedProfile.name;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
!setProfileData ||
|
||||
!this.selectedProfile.name ||
|
||||
this.selectedProfile.name.length == 0
|
||||
) {
|
||||
return Promise.resolve(user);
|
||||
} else {
|
||||
console.log(
|
||||
"CreateRoom: Set display name to: " + this.selectedProfile.name
|
||||
);
|
||||
return this.$matrix.setUserDisplayName(this.selectedProfile.name);
|
||||
}
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
if (!setProfileData || !this.selectedProfile.image) {
|
||||
console.log("CreateRoom: No avatar change");
|
||||
return Promise.resolve("no avatar");
|
||||
} else {
|
||||
console.log("CreateRoom: Updating avatar");
|
||||
return util.setAvatar(
|
||||
this.$matrix,
|
||||
this.selectedProfile.image,
|
||||
function (progress) {
|
||||
console.log("Progress: " + JSON.stringify(progress));
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
generateAliasForRoom() {
|
||||
return this.publicRoom;
|
||||
},
|
||||
getRoomCreationOptions() {
|
||||
var createRoomOptions = {};
|
||||
if (this.joinRule == "public") {
|
||||
if (this.publicRoom) {
|
||||
createRoomOptions = {
|
||||
visibility: "private", // Not listed!
|
||||
name: this.roomName,
|
||||
preset: "public_chat",
|
||||
initial_state:
|
||||
this.unencryptedRoom ? [
|
||||
{
|
||||
type: "m.room.history_visibility",
|
||||
state_key: "",
|
||||
content: {
|
||||
history_visibility: "shared"
|
||||
initial_state: [
|
||||
{
|
||||
type: "m.room.history_visibility",
|
||||
state_key: "",
|
||||
content: {
|
||||
history_visibility: "shared"
|
||||
}
|
||||
}
|
||||
}
|
||||
] :
|
||||
[
|
||||
{
|
||||
type: "m.room.encryption",
|
||||
state_key: "",
|
||||
content: {
|
||||
algorithm: "m.megolm.v1.aes-sha2",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "m.room.history_visibility",
|
||||
state_key: "",
|
||||
content: {
|
||||
history_visibility: "joined"
|
||||
}
|
||||
},
|
||||
],
|
||||
]
|
||||
};
|
||||
} else {
|
||||
//if (this.joinRule == "invite") {
|
||||
createRoomOptions = {
|
||||
visibility: "private", // Not listed!
|
||||
name: this.roomName,
|
||||
preset: "private_chat",
|
||||
preset: "public_chat",
|
||||
initial_state: [
|
||||
{
|
||||
type: "m.room.encryption",
|
||||
|
|
@ -404,184 +287,32 @@ export default {
|
|||
// Add topic
|
||||
createRoomOptions.topic = this.roomTopic;
|
||||
}
|
||||
if (this.roomType != ROOM_TYPE_DEFAULT) {
|
||||
createRoomOptions.creation_content = {
|
||||
type: this.roomType
|
||||
}
|
||||
}
|
||||
|
||||
return this.$matrix
|
||||
.getLoginPromise(this.$refs.interactiveAuth.registrationFlowHandler)
|
||||
.then(
|
||||
function (user) {
|
||||
if (user.is_guest && !hasUser) {
|
||||
// Newly created account, joining first room.
|
||||
// Set avatar and display name to either the randomly chosen ones, or the
|
||||
// ones the users has changed to.
|
||||
setProfileData = true;
|
||||
|
||||
// Set display name and avatar directly on the matrix object.
|
||||
if (
|
||||
this.selectedProfile.name &&
|
||||
this.selectedProfile.name.length > 0
|
||||
) {
|
||||
this.$matrix.userDisplayName = this.selectedProfile.name;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
!setProfileData ||
|
||||
!this.selectedProfile.name ||
|
||||
this.selectedProfile.name.length == 0
|
||||
) {
|
||||
return Promise.resolve(user);
|
||||
} else {
|
||||
console.log(
|
||||
"CreateRoom: Set display name to: " + this.selectedProfile.name
|
||||
);
|
||||
return this.$matrix.setUserDisplayName(this.selectedProfile.name);
|
||||
}
|
||||
}.bind(this)
|
||||
)
|
||||
.then(
|
||||
function () {
|
||||
if (!setProfileData || !this.selectedProfile.image) {
|
||||
console.log("CreateRoom: No avatar change");
|
||||
return Promise.resolve("no avatar");
|
||||
} else {
|
||||
console.log("CreateRoom: Updating avatar");
|
||||
return util.setAvatar(
|
||||
this.$matrix,
|
||||
this.selectedProfile.image,
|
||||
function (progress) {
|
||||
console.log("Progress: " + JSON.stringify(progress));
|
||||
}
|
||||
);
|
||||
}
|
||||
}.bind(this)
|
||||
)
|
||||
.then(() => {
|
||||
if (this.joinRule == "public") {
|
||||
// Promise to get a unique alias and use it in room creation options.
|
||||
//
|
||||
return util
|
||||
.getUniqueAliasForRoomName(
|
||||
this.$matrix.matrixClient,
|
||||
this.roomName,
|
||||
this.$matrix.currentUserMXDomain
|
||||
)
|
||||
.then((alias) => {
|
||||
createRoomOptions.room_alias_name = alias;
|
||||
});
|
||||
} else {
|
||||
return Promise.resolve(true);
|
||||
// Limit history?
|
||||
if (this.limitHistory && this.limitHistoryMilliseconds > 0) {
|
||||
createRoomOptions.initial_state.push({
|
||||
type: "m.room.retention",
|
||||
state_key: "",
|
||||
content: {
|
||||
max_lifetime: this.limitHistoryMilliseconds
|
||||
}
|
||||
})
|
||||
.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: this.readOnlyRoom ? 50 : 0
|
||||
}
|
||||
if (this.readOnlyRoom) {
|
||||
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.status = "";
|
||||
this.step = steps.CREATED;
|
||||
return roomId;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.status = ""
|
||||
this.roomCreationErrorMsg = (error.data && error.data.error) || error.message || error.toString();
|
||||
this.step = steps.INITIAL; // revert
|
||||
return null;
|
||||
// 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: 0
|
||||
}
|
||||
createRoomOptions.initial_state.push(
|
||||
{
|
||||
type: "m.room.power_levels",
|
||||
state_key: "",
|
||||
content: powerLevelContent
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Show picker to select room avatar file
|
||||
*/
|
||||
showAvatarPicker() {
|
||||
if (this.step == steps.INITIAL) {
|
||||
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]);
|
||||
}
|
||||
},
|
||||
|
||||
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);
|
||||
}
|
||||
);
|
||||
return createRoomOptions;
|
||||
},
|
||||
|
||||
selectAvatar(value) {
|
||||
|
|
@ -595,10 +326,8 @@ export default {
|
|||
/**
|
||||
* Show picker to select user avatar file
|
||||
*/
|
||||
showUserAvatarPicker() {
|
||||
if (this.step == steps.INITIAL) {
|
||||
this.$refs.useravatar.click();
|
||||
}
|
||||
showUserAvatarPicker() {
|
||||
this.$refs.useravatar.click();
|
||||
},
|
||||
|
||||
handlePickedUserAvatar(event) {
|
||||
|
|
@ -606,10 +335,22 @@ export default {
|
|||
this.selectedProfile.image = image;
|
||||
});
|
||||
},
|
||||
|
||||
showRetentionDialog() {
|
||||
this.selectRetentionDialog = true;
|
||||
},
|
||||
|
||||
onUpdateHistoryLimit(retention) {
|
||||
this.limitHistoryMilliseconds = retention;
|
||||
if (retention == 0) {
|
||||
this.limitHistory = false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
@import "@/assets/css/create.scss";
|
||||
</style>
|
||||
|
|
@ -2,13 +2,14 @@
|
|||
<div class="pa-4 create-root fill-height">
|
||||
<div v-if="!loggedIn" class="text-center">
|
||||
<v-icon class="create-image">$vuetify.icons.getlink</v-icon>
|
||||
<div class="create-title">{{ $t("getlink.title") }}</div>
|
||||
<div class="create-title h3-bold">{{ $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
|
||||
:rules="[(v) => !!v || $t('login.username_required')]" :error="userErrorMessage != null"
|
||||
:error-messages="userErrorMessage" required v-on:keyup.enter="onUsernameEnter" v-on:keydown="hasError = false"></v-text-field>
|
||||
<v-text-field v-model="user.user_id" :label="$t('getlink.username')" color="black" background-color="white"
|
||||
solo :rules="[(v) => !!v || $t('login.username_required')]" :error="userErrorMessage != null"
|
||||
:error-messages="userErrorMessage" required v-on:keyup.enter="onUsernameEnter"
|
||||
v-on:keydown="hasError = false"></v-text-field>
|
||||
|
||||
<!-- <div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div> -->
|
||||
|
||||
|
|
@ -16,16 +17,19 @@
|
|||
|
||||
<interactive-auth ref="interactiveAuth" />
|
||||
|
||||
<v-btn id="btn-login" :disabled="!isValid || loading" color="primary" depressed block @click.stop="handleLogin"
|
||||
:loading="loading" class="filled-button mt-4">{{ $t("getlink.next") }}</v-btn>
|
||||
<v-btn color="black" depressed text block @click.stop="goToLoginPage" class="text-button">{{ $t("menu.login")
|
||||
}}</v-btn>
|
||||
<div class="create-buttons">
|
||||
<v-btn id="btn-login" :disabled="!isValid || loading" color="primary" depressed block
|
||||
@click.stop="handleLogin" :loading="loading" class="filled-button mt-4">{{ $t("getlink.next") }}</v-btn>
|
||||
<v-btn color="black" depressed text block @click.stop="goToLoginPage" class="text-button">{{
|
||||
$t("menu.login")
|
||||
}}</v-btn>
|
||||
</div>
|
||||
</v-form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else style="position:relative" class="create-loggedin">
|
||||
<!-- Logged in/account created -->
|
||||
<div class="create-title">{{ $t("getlink.hello", { user: $matrix.currentUserDisplayName }) }}</div>
|
||||
<div class="create-title h3-bold">{{ $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">
|
||||
|
|
@ -37,7 +41,8 @@
|
|||
</template>
|
||||
</copy-link>
|
||||
<div class="create-buttons">
|
||||
<v-btn color="black" depressed @click.stop="goHome" class="outlined-button">{{ $t("getlink.continue") }}</v-btn>
|
||||
<v-btn color="black" style="color:black;background-color:white !important;" 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>
|
||||
</div>
|
||||
|
|
@ -243,5 +248,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/typography.scss";
|
||||
@import "@/assets/css/create.scss";
|
||||
</style>
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<YouAre class="mt-4" />
|
||||
<div class="mt-4 d-flex flex-row align-center">
|
||||
<YouAre class="flex-grow-1 text-end" />
|
||||
</div>
|
||||
|
||||
<v-container fluid class="text-center mt-8">
|
||||
<v-row align="center" justify="center">
|
||||
<v-col class="text-center" cols="auto">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0"
|
||||
:width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
|
||||
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
|
||||
<div class="dialog-content text-center">
|
||||
<template>
|
||||
<h2>{{ $t("room_info.message_retention") }}</h2>
|
||||
|
|
@ -10,8 +9,8 @@
|
|||
<v-col cols="12">
|
||||
<v-form v-model="isValid">
|
||||
<v-radio-group v-model="retention" class="my-0 py-0">
|
||||
<v-radio active-class="radio-active" class="flex-row-reverse mb-0" v-for="p in retentionPeriods" :key="p.text" :label="p.text"
|
||||
:value="p.value" />
|
||||
<v-radio active-class="radio-active" class="flex-row-reverse mb-0" v-for="p in retentionPeriods"
|
||||
:key="p.text" :label="p.text" :value="p.value" />
|
||||
</v-radio-group>
|
||||
</v-form>
|
||||
</v-col>
|
||||
|
|
@ -40,6 +39,12 @@ export default {
|
|||
return false;
|
||||
},
|
||||
},
|
||||
initialValue: {
|
||||
type: Number,
|
||||
default: function () {
|
||||
return 0;
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -71,23 +76,29 @@ export default {
|
|||
methods: {
|
||||
setInitialValue() {
|
||||
this.isValid = true;
|
||||
this.retention = this.roomMessageRetention();
|
||||
if (this.room) {
|
||||
this.retention = this.roomMessageRetention();
|
||||
} else {
|
||||
this.retention = this.initialValue;
|
||||
}
|
||||
},
|
||||
setRetention() {
|
||||
let ms = this.retention;
|
||||
if (ms === 0 || !ms) {
|
||||
// No expiry
|
||||
this.$matrix.matrixClient.sendStateEvent(
|
||||
this.room.roomId,
|
||||
"m.room.retention",
|
||||
{ max_lifetime: 0 }
|
||||
);
|
||||
} else if (ms >= 1000 * this.retentionMinValue && ms <= 1000 * this.retentionMaxValue) {
|
||||
this.$matrix.matrixClient.sendStateEvent(
|
||||
this.room.roomId,
|
||||
"m.room.retention",
|
||||
{ max_lifetime: ms }
|
||||
);
|
||||
if (this.room) {
|
||||
if (ms === 0 || !ms) {
|
||||
// No expiry
|
||||
this.$matrix.matrixClient.sendStateEvent(
|
||||
this.room.roomId,
|
||||
"m.room.retention",
|
||||
{ max_lifetime: 0 }
|
||||
);
|
||||
} else if (ms >= 1000 * this.retentionMinValue && ms <= 1000 * this.retentionMaxValue) {
|
||||
this.$matrix.matrixClient.sendStateEvent(
|
||||
this.room.roomId,
|
||||
"m.room.retention",
|
||||
{ max_lifetime: ms }
|
||||
);
|
||||
}
|
||||
}
|
||||
this.$emit('message-retention-update', ms)
|
||||
this.showDialog = false;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="d-flex flex-row-reverse">
|
||||
<div>
|
||||
<v-chip
|
||||
@click="viewProfile"
|
||||
class="ma-2 white-space-pre"
|
||||
|
|
|
|||
78
src/components/create/CreateRoomAvatar.vue
Normal file
78
src/components/create/CreateRoomAvatar.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<div class="create-room-avatar" color="#ededed">
|
||||
<v-img class="create-room-avatar__icon clickable" @click.stop="showRoomAvatarPicker" v-if="modelValue && modelValue.image" :src="modelValue.image" />
|
||||
<v-icon class="create-room-avatar__icon default" v-else>$vuetify.icons.room_avatar_placeholder</v-icon>
|
||||
<v-icon class="create-room-avatar__camera clickable" v-if="!modelValue || !modelValue.image" @click.stop="showRoomAvatarPicker">$vuetify.icons.ic_camera</v-icon>
|
||||
<input id="room-avatar-picker" ref="roomAvatar" type="file" name="roomAvatar"
|
||||
@change="handlePickedRoomAvatar($event)" accept="image/*" class="d-none" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CreateRoomAvatar",
|
||||
model: {
|
||||
prop: "modelValue",
|
||||
event: "update:modelValue",
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Show picker to select room avatar file
|
||||
*/
|
||||
showRoomAvatarPicker() {
|
||||
this.$refs.roomAvatar.click();
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle picked avatar
|
||||
*/
|
||||
handlePickedRoomAvatar(event) {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.$emit('update:modelValue', {
|
||||
image: e.target.result,
|
||||
file: event.target.files[0]
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/create.scss";
|
||||
|
||||
.create-room-avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.create-room-avatar__icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 14px;
|
||||
&.default {
|
||||
background: $light-purple;
|
||||
}
|
||||
}
|
||||
|
||||
.create-room-avatar__camera {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
src/components/createRoomMixin.js
Normal file
155
src/components/createRoomMixin.js
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import util from "../plugins/utils";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
creatingRoom: false,
|
||||
creatingRoomStatus: null,
|
||||
creatingRoomProgress: null,
|
||||
formIsValid: false,
|
||||
roomName: "",
|
||||
roomTopic: "",
|
||||
roomAvatar: null,
|
||||
roomNameRules: [
|
||||
(v) => !!v || this.$t("create.field_required"),
|
||||
(v) => !v || v.length <= 50 || this.$t("new_room.room_name_limit_error_msg"),
|
||||
(v) => !v || !v.includes(":") || this.$t("new_room.colon_not_allowed"),
|
||||
],
|
||||
roomTopicRules: [(v) => !v || v.length <= 500 || this.$t("create.topic_too_long")],
|
||||
errorMessage: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
roomNameInputFields() {
|
||||
return {
|
||||
color: "black",
|
||||
rules: this.roomNameRules,
|
||||
counter: "50",
|
||||
maxLength: "50",
|
||||
"background-color": "white",
|
||||
disabled: this.creatingRoom,
|
||||
//autofocus: true,
|
||||
solo: true,
|
||||
required: true,
|
||||
};
|
||||
},
|
||||
roomNameInputListeners() {
|
||||
return {
|
||||
keydown: () => (this.errorMessage = null),
|
||||
keyup: (e) => {
|
||||
if (e.keyCode === 13 && this.$refs.topic) {
|
||||
this.$refs.topic.focus();
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
roomTopicInputFields() {
|
||||
return {
|
||||
ref: "topic",
|
||||
color: "black",
|
||||
rules: this.roomTopicRules,
|
||||
maxLength: "500",
|
||||
disabled: this.creatingRoom,
|
||||
filled: true,
|
||||
rounded: true,
|
||||
"hide-details": true,
|
||||
};
|
||||
},
|
||||
roomTopicInputListeners() {
|
||||
return {
|
||||
keydown: () => (this.errorMessage = null),
|
||||
keyup: (e) => {
|
||||
if (e.keyCode === 13 && this.$refs.create) {
|
||||
this.$refs.create.focus();
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
loggedIn() {
|
||||
return this.$store.state.auth.status.loggedIn;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
if (!this.creatingRoom) {
|
||||
this.$navigation.pop();
|
||||
}
|
||||
},
|
||||
createRoom(creatingMessageString, errorMessageString) {
|
||||
// Reset errors
|
||||
this.errorMessage = null;
|
||||
this.creatingRoom = true;
|
||||
this.creatingRoomStatus = creatingMessageString;
|
||||
this.creatingRoomProgress = null;
|
||||
|
||||
let roomId = "";
|
||||
|
||||
this.preCreateRoom()
|
||||
.then(() => {
|
||||
let createRoomOptions = this.getRoomCreationOptions();
|
||||
if (this.generateAliasForRoom()) {
|
||||
// Promise to get a unique alias and use it in room creation options.
|
||||
//
|
||||
return util
|
||||
.getUniqueAliasForRoomName(
|
||||
this.$matrix.matrixClient,
|
||||
this.roomName,
|
||||
this.$matrix.currentUserMXDomain
|
||||
)
|
||||
.then((alias) => {
|
||||
createRoomOptions.room_alias_name = alias;
|
||||
return createRoomOptions;
|
||||
});
|
||||
} else {
|
||||
return Promise.resolve(createRoomOptions);
|
||||
}
|
||||
})
|
||||
.then((createRoomOptions) => {
|
||||
return this.$matrix.matrixClient
|
||||
.createRoom(createRoomOptions)
|
||||
.then(({ room_id }) => {
|
||||
roomId = util.sanitizeRoomId(room_id);
|
||||
if (createRoomOptions.room_alias_name) {
|
||||
const parts = roomId.split(":");
|
||||
if (parts && parts.length == 2) {
|
||||
roomId = "#" + createRoomOptions.room_alias_name + ":" + parts[1];
|
||||
}
|
||||
}
|
||||
if (!this.roomAvatar || !this.roomAvatar.file) {
|
||||
return true;
|
||||
}
|
||||
return util.setRoomAvatar(
|
||||
this.$matrix.matrixClient,
|
||||
room_id,
|
||||
this.roomAvatar.file,
|
||||
(p) => {
|
||||
this.creatingRoomStatus = this.$t("new_room.status_avatar");
|
||||
if (p.total) {
|
||||
this.creatingRoomProgress = (100 * p.loaded) / p.total;
|
||||
} else {
|
||||
this.creatingRoomProgress = null;
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
this.creatingRoomProgress = null;
|
||||
this.$navigation.push(
|
||||
{
|
||||
name: "Chat",
|
||||
params: { roomId: roomId },
|
||||
},
|
||||
-1
|
||||
);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.errorMessage = errorMessageString || (error.data && error.data.error) || error.message || error.toString();
|
||||
})
|
||||
.finally(() => {
|
||||
this.creatingRoom = false;
|
||||
this.creatingRoomStatus = null;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -192,10 +192,7 @@ export default {
|
|||
this.currentItemIndex = 0;
|
||||
},
|
||||
close() {
|
||||
this.$matrix.leaveRoomAndNavigate(this.room.roomId)
|
||||
.catch((err) => {
|
||||
console.log("Error leaving", err);
|
||||
});
|
||||
this.$emit('close');
|
||||
},
|
||||
sendAll() {
|
||||
this.status = this.mainStatuses.SENDING;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<script>
|
||||
import MessageIncoming from "./MessageIncoming.vue";
|
||||
import messageMixin from "./messageMixin";
|
||||
import util, { ROOM_TYPE_CHANNEL } from "../../plugins/utils";
|
||||
import util, { ROOM_TYPE_CHANNEL, ROOM_TYPE_FILE_MODE } from "../../plugins/utils";
|
||||
import GalleryItemsView from '../file_mode/GalleryItemsView.vue';
|
||||
import ThumbnailView from '../file_mode/ThumbnailView.vue';
|
||||
import SwipeableThumbnailsView from "./channel/SwipeableThumbnailsView.vue";
|
||||
|
|
@ -66,7 +66,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
forceMultiview() {
|
||||
return this.room.displayType == ROOM_TYPE_CHANNEL && this.items.length == 1 && util.isFileTypePDF(this.items[0].event);
|
||||
return this.room.displayType == ROOM_TYPE_FILE_MODE || (this.room.displayType == ROOM_TYPE_CHANNEL && this.items.length == 1 && util.isFileTypePDF(this.items[0].event));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import utils, { ROOM_TYPE_CHANNEL } from "../plugins/utils";
|
||||
import roomTypeMixin from "./roomTypeMixin";
|
||||
import roomRetentionMixin from "./roomRetentionMixin";
|
||||
|
||||
export default {
|
||||
mixins: [roomTypeMixin],
|
||||
mixins: [roomTypeMixin, roomRetentionMixin],
|
||||
data() {
|
||||
return {
|
||||
roomJoinRule: null,
|
||||
|
|
@ -15,36 +16,6 @@ export default {
|
|||
isRoomTopicEditMode: false,
|
||||
roomTopicErrorMessage: null,
|
||||
messageRetentionDisplay: "",
|
||||
retentionPeriods: [
|
||||
{
|
||||
text: this.$t("room_info.message_retention_none"),
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_4_week"),
|
||||
value: 3600 * 24 * 28 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_2_week"),
|
||||
value: 3600 * 24 * 14 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_1_week"),
|
||||
value: 3600 * 24 * 7 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_1_day"),
|
||||
value: 3600 * 24 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_8_hours"),
|
||||
value: 3600 * 8 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_1_hour"),
|
||||
value: 3600 * 1000
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
48
src/components/roomRetentionMixin.js
Normal file
48
src/components/roomRetentionMixin.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
retentionPeriods: [
|
||||
{
|
||||
text: this.$t("room_info.message_retention_none"),
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_4_week"),
|
||||
value: 3600 * 24 * 28 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_2_week"),
|
||||
value: 3600 * 24 * 14 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_1_week"),
|
||||
value: 3600 * 24 * 7 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_1_day"),
|
||||
value: 3600 * 24 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_8_hours"),
|
||||
value: 3600 * 8 * 1000
|
||||
},
|
||||
{
|
||||
text: this.$t("room_info.message_retention_1_hour"),
|
||||
value: 3600 * 1000
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Get a string describing current room retention setting.
|
||||
* Can be "None", "1 week", "1 hour" etc...
|
||||
*/
|
||||
roomMessageRetentionDisplayString(milliseconds) {
|
||||
const retentionPeriodFound = this.retentionPeriods.find(rp=>rp.value===milliseconds)
|
||||
if(retentionPeriodFound) {
|
||||
return retentionPeriodFound.text
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -123,7 +123,6 @@ export default {
|
|||
})
|
||||
.then(() => {
|
||||
this.sendingStatus = this.sendStatuses.SENT;
|
||||
this.sendingAttachments = [];
|
||||
this.sendingRootEventId = null;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue