Fix join UI when logged in
This commit is contained in:
parent
3067fcbfc7
commit
6de1e40765
1 changed files with 47 additions and 21 deletions
|
|
@ -1,27 +1,48 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="join-root">
|
<div class="join-root">
|
||||||
<div v-if="!waiting" class="text-center">
|
<div v-if="!waiting" class="text-center">
|
||||||
<v-btn class="btn-login" text small @click.stop="handleLogin" :loading="loading">Login</v-btn>
|
<v-btn
|
||||||
|
class="btn-login"
|
||||||
|
text
|
||||||
|
small
|
||||||
|
@click.stop="handleLogin"
|
||||||
|
:loading="loading"
|
||||||
|
>Login</v-btn
|
||||||
|
>
|
||||||
|
|
||||||
<v-avatar class="join-avatar">
|
<v-avatar class="join-avatar">
|
||||||
<v-img v-if="roomAvatar" :src="roomAvatar" />
|
<v-img v-if="roomAvatar" :src="roomAvatar" />
|
||||||
<span v-else class="white--text headline">{{
|
<span v-else class="white--text headline">{{
|
||||||
roomName.substring(0, 1).toUpperCase()
|
roomName.substring(0, 1).toUpperCase()
|
||||||
}}</span>
|
}}</span>
|
||||||
</v-avatar>
|
</v-avatar>
|
||||||
<div class="join-title">Welcome to {{ roomName }}</div>
|
<div class="join-title">Welcome to {{ roomName }}</div>
|
||||||
<div class="join-message">Join the group chat in a web browser or with the Keanu app.</div>
|
<div class="join-message">
|
||||||
<v-btn class="btn-light" large block @click.stop="handleOpenApp" :loading="loading"
|
Join the group chat in a web browser or with the Keanu app.
|
||||||
|
</div>
|
||||||
|
<v-btn
|
||||||
|
class="btn-light"
|
||||||
|
large
|
||||||
|
block
|
||||||
|
@click.stop="handleOpenApp"
|
||||||
|
:loading="loading"
|
||||||
>Open Keanu app</v-btn
|
>Open Keanu app</v-btn
|
||||||
>
|
>
|
||||||
|
|
||||||
<div class="join-or-divider">OR</div>
|
<div class="join-or-divider">OR</div>
|
||||||
|
|
||||||
<v-btn class="btn-dark" large block @click.stop="handleJoin" :loading="loading"
|
<v-btn
|
||||||
|
class="btn-dark"
|
||||||
|
large
|
||||||
|
block
|
||||||
|
@click.stop="handleJoin"
|
||||||
|
:loading="loading"
|
||||||
>Join as guest</v-btn
|
>Join as guest</v-btn
|
||||||
>
|
>
|
||||||
|
|
||||||
<div class="join-privacy">Enhance your physical privacy. <a href="#">Learn how</a></div>
|
<div class="join-privacy">
|
||||||
|
Enhance your physical privacy. <a href="#">Learn how</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="loadingMessage">{{ loadingMessage }}</div>
|
<div v-if="loadingMessage">{{ loadingMessage }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -41,20 +62,24 @@ export default {
|
||||||
guestUser: new User("https://neo.keanu.im", "", "", true),
|
guestUser: new User("https://neo.keanu.im", "", "", true),
|
||||||
loading: false,
|
loading: false,
|
||||||
loadingMessage: null,
|
loadingMessage: null,
|
||||||
waiting: true
|
waiting: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.roomId = this.$route.hash;
|
this.roomId = this.$route.hash;
|
||||||
this.roomName = this.roomId;
|
this.roomName = this.roomId;
|
||||||
if (this.currentUser) {
|
if (this.currentUser) {
|
||||||
this.waiting = true;
|
this.waiting = true;
|
||||||
const self = this;
|
const self = this;
|
||||||
this.$matrix.getMatrixClient(this.currentUser)
|
this.$matrix
|
||||||
|
.getMatrixClient(this.currentUser)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// Already joined?
|
// Already joined?
|
||||||
const room = self.$matrix.getRoom(self.roomId);
|
const room = self.$matrix.getRoom(self.roomId);
|
||||||
if (room && room.hasMembershipState(self.currentUser.user_id, "join")) {
|
if (
|
||||||
|
room &&
|
||||||
|
room.hasMembershipState(self.currentUser.user_id, "join")
|
||||||
|
) {
|
||||||
// Yes, go to room
|
// Yes, go to room
|
||||||
self.$matrix.setCurrentRoom(room);
|
self.$matrix.setCurrentRoom(room);
|
||||||
self.$router.replace({ name: "Chat" });
|
self.$router.replace({ name: "Chat" });
|
||||||
|
|
@ -63,22 +88,23 @@ export default {
|
||||||
|
|
||||||
this.waiting = false;
|
this.waiting = false;
|
||||||
})
|
})
|
||||||
.catch(ignoredErr => {
|
.catch((ignoredErr) => {
|
||||||
this.waiting = false;
|
this.waiting = false;
|
||||||
});
|
});
|
||||||
} else {
|
}
|
||||||
this.$matrix.getPublicRoomInfo(this.roomId)
|
|
||||||
.then(room => {
|
this.$matrix
|
||||||
|
.getPublicRoomInfo(this.roomId)
|
||||||
|
.then((room) => {
|
||||||
console.log("Found room:", room);
|
console.log("Found room:", room);
|
||||||
this.roomName = room.name;
|
this.roomName = room.name;
|
||||||
this.roomAvatar = room.avatar;
|
this.roomAvatar = room.avatar;
|
||||||
this.waiting = false;
|
this.waiting = false;
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch((err) => {
|
||||||
console.log("Could not find room info", err);
|
console.log("Could not find room info", err);
|
||||||
this.waiting = false;
|
this.waiting = false;
|
||||||
})
|
});
|
||||||
}
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
currentUser() {
|
currentUser() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue