Updated New Room Page
This commit is contained in:
N Pex
parent
5294069b20
commit
a700e19990
30 changed files with 1263 additions and 763 deletions
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue