510 lines
18 KiB
Vue
510 lines
18 KiB
Vue
<template>
|
|
<div class="join-room" v-if="!waitingForInfo && !waitingForMembership">
|
|
<div class="join-enter-room">
|
|
<div>
|
|
<div class="text-center">
|
|
<v-avatar class="join-avatar">
|
|
<AuthedImage v-if="roomAvatar" :src="roomAvatar" />
|
|
<span v-else class="text-white headline">
|
|
{{ roomName.substring(0, 1).toUpperCase() }}
|
|
</span>
|
|
</v-avatar>
|
|
<div class="join-welcome font-weight-bold">
|
|
{{ roomId && roomId.startsWith("@") ? $t("join.title_user") : $t("join.title") }}
|
|
</div>
|
|
<div class="join-title">
|
|
{{ roomDisplayName || roomName }}
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-10 join-line" />
|
|
<div class="font-weight-black mb-4" v-if="!currentUser">{{ $t("join.choose_name") }}</div>
|
|
|
|
<v-row v-if="canEditProfile">
|
|
<v-col cols="10" sm="7" class="py-0">
|
|
<v-select ref="avatar"
|
|
:items="availableAvatars"
|
|
variant="outlined"
|
|
density="compact"
|
|
@update:modelValue="selectAvatar"
|
|
:modelValue="selectedProfile"
|
|
item-props
|
|
item-value="id"
|
|
return-object
|
|
single-line
|
|
class="avatar-select-control"
|
|
>
|
|
<template v-slot:selection>
|
|
<v-text-field
|
|
background-color="transparent"
|
|
variant="solo"
|
|
flat
|
|
density="compact"
|
|
hide-details
|
|
@keydown="$event.stopPropagation()"
|
|
@keypress="$event.stopPropagation()"
|
|
@keyup="$event.stopPropagation()"
|
|
@click.stop="(event) => event.target.focus()" @focus="$event.target.select()"
|
|
v-model="selectedProfile.name"></v-text-field>
|
|
</template>
|
|
<template v-slot:item="{ props }">
|
|
<v-list-item v-bind="props">
|
|
<template v-slot:prepend>
|
|
<v-avatar size="32">
|
|
<v-img :src="props.image" />
|
|
</v-avatar>
|
|
</template>
|
|
</v-list-item>
|
|
</template>
|
|
</v-select>
|
|
<v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')" />
|
|
</v-col>
|
|
<v-col cols="2" sm="5" class="py-0">
|
|
<v-avatar @click="showAvatarPicker">
|
|
<v-img v-if="selectedProfile" :src="selectedProfile.image" />
|
|
</v-avatar>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-else class="text-center">
|
|
<v-col>
|
|
{{ $t("join.joining_as") }}
|
|
<div class="d-inline-block">
|
|
<v-avatar color="#e0e0e0">
|
|
<AuthedImage v-if="userAvatar" :src="userAvatar" />
|
|
<span v-else class="text-white headline">{{ userAvatarLetter }}</span>
|
|
</v-avatar>
|
|
</div>
|
|
{{ userDisplayName }}
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA" v-if="!$store.state.uaAccepted">
|
|
<template v-slot:label>
|
|
<i18n-t keypath="join.accept_ua" tag="span">
|
|
<template v-slot:agreement>
|
|
<a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
|
|
</template>
|
|
</i18n-t>
|
|
</template>
|
|
</v-checkbox>
|
|
|
|
<interactive-auth ref="interactiveAuth" />
|
|
|
|
<v-text-field
|
|
v-if="roomNeedsKnock"
|
|
variant="solo"
|
|
density="compact"
|
|
:label="$t('join.knock_reason')"
|
|
counter="100"
|
|
maxlength="100"
|
|
v-model="knockReason" />
|
|
|
|
<v-btn id="btn-join" class="btn-dark" :disabled="!acceptUA || (room && room.getMyMembership() == 'ban')" size="large"
|
|
@click.stop="handleJoin" :loading="loading" v-if="!currentUser">{{
|
|
roomId && roomId.startsWith("@") ? $t("join.enter_room_user") : this.roomNeedsKnock ? $t("join.enter_knock") : $t("join.enter_room")
|
|
}}</v-btn>
|
|
<v-btn id="btn-join" class="btn-dark" :disabled="!acceptUA || (room && room.getMyMembership() == 'ban')" size="large"
|
|
block @click.stop="handleJoin" :loading="loading" v-else>{{
|
|
roomId && roomId.startsWith("@") ? $t("join.join_user") : this.roomNeedsKnock ? $t("join.knock") : $t("join.join")
|
|
}}</v-btn>
|
|
|
|
<div v-if="loadingMessage" class="text-center">{{ loadingMessage }}</div>
|
|
<div v-if="room && room.getMyMembership() == 'ban'" class="text-center">{{ $t("join.you_have_been_banned") }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
|
|
:accept="supportedAvatarImageTypes" class="d-none" />
|
|
|
|
<div class="join-lang">
|
|
<h3 class="mb-2">{{ $t("profile.select_language") }}</h3>
|
|
<v-row class="align-center">
|
|
<v-col v-for="lang in activeLanguage" :key="lang.value">
|
|
<span class="active">{{ lang.text }}</span>
|
|
</v-col>
|
|
<v-col v-for="(lang, key) in getDisplayLanguage.slice(0, 3)" :key="key">
|
|
<button class="inactive" @click="updateLanguage(lang.value)">{{ lang.text }}</button>
|
|
</v-col>
|
|
<v-col>
|
|
<v-btn id="btn-select-language" class="language-more" @click="showSelectLanguageDialog = true">
|
|
<v-icon>language</v-icon><v-icon>more_horiz</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
<SelectLanguageDialog v-model="showSelectLanguageDialog" />
|
|
</v-row>
|
|
</div>
|
|
|
|
<div class="d-flex justify-center align-center mt-9">
|
|
<div class="mr-2">
|
|
<img :src="logotype" width="32" height="32" contain class="d-inline" />
|
|
</div>
|
|
<div>
|
|
<strong>{{ $t("project.name") }}</strong>
|
|
{{ $t("project.tag_line") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading indicator -->
|
|
<v-container v-else fluid class="loading-indicator transparent fill-height">
|
|
<v-row align="center" justify="center">
|
|
<v-col class="text-center">
|
|
<interactive-auth ref="interactiveAuth" v-if="waitingForRoomCreation" />
|
|
<v-progress-circular v-else indeterminate color="primary"></v-progress-circular>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import util from "../plugins/utils";
|
|
import InteractiveAuth from './InteractiveAuth.vue';
|
|
import LanguageMixin from "./languageMixin";
|
|
import rememberMeMixin from "./rememberMeMixin";
|
|
import logoMixin from "./logoMixin";
|
|
import SelectLanguageDialog from "./SelectLanguageDialog.vue";
|
|
import AuthedImage from "./AuthedImage.vue";
|
|
|
|
export default {
|
|
name: "Join",
|
|
mixins: [LanguageMixin, rememberMeMixin, logoMixin],
|
|
components: {
|
|
SelectLanguageDialog,
|
|
InteractiveAuth,
|
|
AuthedImage
|
|
},
|
|
props: {
|
|
roomDisplayName: {
|
|
type: String,
|
|
default: function () {
|
|
return null;
|
|
}
|
|
},
|
|
roomNeedsKnock: {
|
|
type: Boolean,
|
|
default: function () {
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
roomName: null,
|
|
roomAvatar: null,
|
|
loading: false,
|
|
loadingMessage: null,
|
|
waitingForInfo: true,
|
|
waitingForMembership: false,
|
|
waitingForRoomCreation: false,
|
|
availableAvatars: [],
|
|
selectedProfile: null,
|
|
showEditDisplaynameDialog: false,
|
|
showSelectLanguageDialog: false,
|
|
acceptUA: false,
|
|
knockReason: "",
|
|
};
|
|
},
|
|
computed: {
|
|
currentUser() {
|
|
return this.$store.state.auth.user;
|
|
},
|
|
room() {
|
|
return this.$matrix.currentRoom;
|
|
},
|
|
roomId() {
|
|
if (this.room) {
|
|
return this.room.roomId;
|
|
}
|
|
return this.$matrix.currentRoomId;
|
|
},
|
|
roomAliasOrId() {
|
|
if (this.room) {
|
|
return this.room.getCanonicalAlias() || this.room.roomId;
|
|
}
|
|
return this.$matrix.currentRoomId;
|
|
},
|
|
|
|
canEditProfile() {
|
|
// If we have an account already, we can't edit profile here (need to go into profile view)
|
|
if (this.currentUser) {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
userDisplayName() {
|
|
return this.$matrix.currentUserDisplayName;
|
|
},
|
|
|
|
userAvatar() {
|
|
if (!this.$matrix.userAvatar) {
|
|
return null;
|
|
}
|
|
return this.$matrix.matrixClient.mxcUrlToHttp(this.$matrix.userAvatar, 80, 80, "scale", true, undefined, this.$matrix.useAuthedMedia);
|
|
},
|
|
|
|
userAvatarLetter() {
|
|
if (!this.currentUser || !this.currentUser.userId) {
|
|
return null;
|
|
}
|
|
return (this.currentUserDisplayName || this.currentUser.userId.substring(1)).substring(0, 1).toUpperCase();
|
|
},
|
|
getDisplayLanguage() {
|
|
let displayLanguages = [...this.getLanguages()];
|
|
return displayLanguages.filter((lang) => lang.display && lang.value !== this.$i18n.locale);
|
|
},
|
|
activeLanguage() {
|
|
let activeLanguages = [...this.getLanguages()];
|
|
return activeLanguages.filter((lang) => lang.value === this.$i18n.locale);
|
|
},
|
|
},
|
|
watch: {
|
|
roomId: {
|
|
immediate: true,
|
|
handler(value, oldVal) {
|
|
if (!value || (value && value == oldVal)) {
|
|
return; // No change.
|
|
}
|
|
this.acceptUA = this.$store.state.uaAccepted;
|
|
console.log("Join: Current room changed to " + (value ? value : "null"));
|
|
this.roomName = this.removeHomeServer(this.roomId);
|
|
|
|
this.waitingForInfo = true;
|
|
this.waitingForRoomCreation = false;
|
|
const self = this;
|
|
this.waitingForMembership = true;
|
|
if (this.currentUser) {
|
|
this.$matrix
|
|
.getLoginPromise()
|
|
.then(() => {
|
|
self.$matrix.setCurrentRoomId(self.roomAliasOrId); // Go to this room, now or when joined.
|
|
const room = self.$matrix.getRoom(self.roomAliasOrId);
|
|
|
|
// Already joined?
|
|
if (room && room.hasMembershipState(self.currentUser.user_id, "join")) {
|
|
// Yes, go to room
|
|
self.$navigation.push(
|
|
{
|
|
name: "Chat",
|
|
params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
|
|
},
|
|
-1
|
|
);
|
|
return;
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log("Error logging in: ", err);
|
|
})
|
|
.finally(() => {
|
|
this.waitingForMembership = false;
|
|
this.getRoomInfo();
|
|
});
|
|
} else {
|
|
this.waitingForMembership = false;
|
|
this.getRoomInfo();
|
|
}
|
|
},
|
|
},
|
|
activeLanguage() {
|
|
// Null status on language change, we don't know what status we are in so we can't get the right string.
|
|
this.loadingMessage = null;
|
|
},
|
|
},
|
|
methods: {
|
|
removeHomeServer(roomName) {
|
|
let lastIndex = roomName.lastIndexOf(":");
|
|
if (roomName && roomName.startsWith("@")) {
|
|
return roomName.substring(roomName.indexOf("@") + 1, lastIndex);
|
|
}
|
|
if (roomName && roomName.startsWith("#")) {
|
|
return roomName.substring(roomName.indexOf("#") + 1, lastIndex);
|
|
}
|
|
return roomName ? roomName : "";
|
|
},
|
|
getRoomInfo() {
|
|
if (this.$route.params.join) {
|
|
// Auto-join room
|
|
this.waitingForRoomCreation = true;
|
|
this.$nextTick(() => {
|
|
this.handleJoin();
|
|
});
|
|
} else if (this.roomId.startsWith("@")) {
|
|
// Direct chat with user
|
|
this.waitingForRoomCreation = true;
|
|
this.$nextTick(() => {
|
|
this.handleJoin();
|
|
});
|
|
} else {
|
|
this.$matrix
|
|
.getPublicRoomInfo(this.roomId)
|
|
.then((room) => {
|
|
console.log("Found room:", room);
|
|
this.roomName = this.removeHomeServer(room.name);
|
|
this.roomAvatar = room.avatar;
|
|
})
|
|
.catch((err) => {
|
|
console.log("Could not find room info", err);
|
|
|
|
// Private room, try to get name
|
|
const room = this.$matrix.getRoom(this.roomId);
|
|
if (room) {
|
|
this.roomName = this.removeHomeServer(room.name || this.roomName);
|
|
} else {
|
|
this.roomName = this.removeHomeServer(this.roomAliasOrId);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.waitingForInfo = false;
|
|
});
|
|
}
|
|
},
|
|
|
|
onMyMembership(room, membership, ignoredprevMembership) {
|
|
if (room && room.roomId == this.roomId && membership == "join") {
|
|
this.$nextTick(() => {
|
|
this.$navigation.push(
|
|
{
|
|
name: "Chat",
|
|
params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
|
|
},
|
|
-1
|
|
);
|
|
});
|
|
}
|
|
},
|
|
|
|
handleJoin() {
|
|
this.loading = true;
|
|
this.loadingMessage = this.$t("join.status_logging_in");
|
|
const hasUser = this.currentUser ? true : false;
|
|
var setProfileData = false;
|
|
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("Join: 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("Join: No avatar change");
|
|
return Promise.resolve("no avatar");
|
|
} else {
|
|
console.log("Join: Updating avatar");
|
|
return util.setAvatar(this.$matrix, this.selectedProfile.image, function (progress) {
|
|
console.log("Progress: " + JSON.stringify(progress));
|
|
}, !this.selectedProfile.imageSelectedByUser);
|
|
}
|
|
}.bind(this)
|
|
)
|
|
.then((ignoreduser) => {
|
|
if (this.roomId.startsWith("@")) {
|
|
// start direct chat with user
|
|
return this.$matrix.getOrCreatePrivateChat(this.roomId).then((room) => {
|
|
this.$matrix.setCurrentRoomId(room.roomId);
|
|
return room;
|
|
});
|
|
} else if (this.roomNeedsKnock) {
|
|
console.log("Join: knocking room");
|
|
this.$analytics.event("Invitations", "Room Knocked");
|
|
this.loadingMessage = this.$t("join.status_knocking");
|
|
return this.$matrix.matrixClient.knockRoom(this.roomId, this.knockReason.length > 0 ? { reason: this.knockReason} : undefined);
|
|
} else {
|
|
console.log("Join: joining room");
|
|
this.$analytics.event("Invitations", "Room Joined");
|
|
this.loadingMessage = this.$t("join.status_joining");
|
|
return this.$matrix.matrixClient.joinRoom(this.roomId);
|
|
}
|
|
})
|
|
.then((room) => {
|
|
this.loading = false;
|
|
this.loadingMessage = null;
|
|
this.$store.commit("acceptUA", true);
|
|
this.$nextTick(() => {
|
|
if (this.roomNeedsKnock) {
|
|
// For knocks, send to room list
|
|
this.$navigation.push(
|
|
{
|
|
name: "Home",
|
|
},
|
|
-1
|
|
);
|
|
} else {
|
|
this.$navigation.push(
|
|
{
|
|
name: "Chat",
|
|
params: { roomId: util.sanitizeRoomId(room.roomId) },
|
|
},
|
|
-1
|
|
);
|
|
}
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
// TODO - handle error
|
|
console.log("Failed to join room", err);
|
|
this.loading = false;
|
|
this.loadingMessage = this.$t("join.join_failed");
|
|
this.waitingForInfo = false;
|
|
this.waitingForMembership = false;
|
|
});
|
|
},
|
|
|
|
selectAvatar(value) {
|
|
this.selectedProfile = Object.assign({}, value); // Make a copy, so editing does not destroy data
|
|
},
|
|
|
|
showAvatarPicker() {
|
|
this.$refs.avatar.click();
|
|
},
|
|
|
|
handlePickedAvatar(event) {
|
|
util.loadAvatarFromFile(event, (image) => {
|
|
this.selectedProfile.image = image;
|
|
this.selectedProfile.imageSelectedByUser = true;
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$matrix.on("Room.myMembership", this.onMyMembership);
|
|
this.availableAvatars = util.getDefaultAvatars();
|
|
this.selectAvatar(this.availableAvatars[Math.floor(Math.random() * this.availableAvatars.length)]);
|
|
// mounted() is called more than once, so multiple instances of this event
|
|
// do not necessarily indicate a user was shown the join page more than once.
|
|
// To analyze this data, segment users into those who have an "Invitations"
|
|
// action and set up conversion tracking triggered by Room Joined (once per visit).
|
|
this.$analytics.event("Invitations", "Join Page Shown");
|
|
},
|
|
unmounted() {
|
|
this.$matrix.off("Room.myMembership", this.onMyMembership);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use "@/assets/css/join.scss";
|
|
|
|
.avatar-select-control .v-select__selection {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
</style>
|