Guest access work

This commit is contained in:
N-Pex 2020-11-25 10:02:24 +01:00
parent a164571218
commit 5589131c86
5 changed files with 138 additions and 35 deletions

View file

@ -66,8 +66,7 @@ export default {
openDrawer: false,
}),
mounted() {
this.$router.replace("/");
//this.$router.replace("/");
const version = require("!!raw-loader!./assets/version.txt").default;
console.log("Version", version);
this.buildVersion = version;
@ -90,11 +89,10 @@ export default {
currentUser: {
immediate: true,
handler(ignorednewVal, ignoredoldVal) {
if (this.loggedIn) {
const self = this;
if (this.loggedIn()) {
this.$matrix.getMatrixClient(this.currentUser)
.then(() => {
self.$matrix.initClient();
console.log("Matrix client ready");
})
.catch((error) => {
console.log("Error creating client", error);

80
src/components/Join.vue Normal file
View file

@ -0,0 +1,80 @@
<template>
<div class="d-flex justify-center login-root">
<div color="rgba(255,255,255,0.1)">
<h4>Join room</h4>
<div>You have been invited to the room {{ roomId }}</div>
<v-btn primary large block @click.stop="handleJoin" :loading="loading"
>Join as guest</v-btn
>
<div v-if="loadingMessage">{{ loadingMessage }}</div>
</div>
</div>
</template>
<script>
import User from "../models/user";
export default {
name: "Join",
data() {
return {
roomId: null,
guestUser: new User("https://neo.keanu.im", "", "", true),
loading: false,
loadingMessage: null,
};
},
mounted() {
this.roomId = this.$route.hash;
},
computed: {
currentUser() {
return this.$store.state.auth.user;
},
},
methods: {
handleJoin() {
this.loading = true;
this.loadingMessage = "Logging in...";
if (this.currentUser) {
this.$matrix
.getMatrixClient(this.currentUser)
.then((ignoreduser) => {
this.loadingMessage = "Joining room...";
return this.$matrix.matrixClient.joinRoom(this.roomId);
})
.then((room) => {
this.$matrix.setCurrentRoomId(room.roomId);
this.loading = false;
this.loadingMessage = null;
this.$router.replace({ name: "Chat" });
})
.catch((err) => {
// TODO - handle error
console.log("Failed to join room", err);
this.loading = false;
this.loadingMessage = err.toString();
});
} else {
this.$store.dispatch("auth/login", this.guestUser).then(
() => {
this.loading = false;
this.loadingMessage = null;
this.$router.replace({ name: "Chat" });
},
(error) => {
this.loading = false;
this.loadingMessage = error.toString();
}
);
}
},
},
};
</script>
<style lang="scss">
@import "@/assets/css/login.scss";
</style>

View file

@ -1,7 +1,8 @@
export default class User {
constructor(server, username, password) {
constructor(server, username, password, is_guest) {
this.server = server;
this.username = username;
this.password = password;
this.is_guest = is_guest || false
}
}

View file

@ -16,14 +16,9 @@ const routes = [
component: Login
},
{
path: '/join/:room?',
redirect: from => {
const room = from.hash;
if (room) {
return { name: 'Chat', params: { joinRoom: room }};
}
return '/';
}
path: '/join/',
component: () => import('../components/Join.vue'),
props: true
},
]
@ -33,7 +28,7 @@ const router = new VueRouter({
router.beforeEach((to, from, next) => {
const publicPages = ['/login'];
const authRequired = !publicPages.includes(to.path);
const authRequired = !publicPages.includes(to.path) && !to.path.startsWith('/join/');
const loggedIn = localStorage.getItem('user');
// trying to access a restricted page + not logged in

View file

@ -31,7 +31,7 @@ export default {
computed: {
ready() {
return this.matrixClient != null;
return this.matrixClient != null && this.matrixClientReady;
},
currentUser() {
@ -41,32 +41,40 @@ export default {
currentRoomId() {
return this.$store.state.currentRoomId;
},
currentRoom() {
return this.getRoom(this.currentRoomId);
},
},
methods: {
login(user) {
const tempMatrixClient = sdk.createClient(user.server);
var retUser;
return tempMatrixClient
.login("m.login.password", { user: user.username, password: user.password, type: "m.login.password" })
.then((response) => {
localStorage.setItem('user', JSON.stringify(response));
return response;
})
var promiseLogin;
if (user.is_guest) {
promiseLogin = tempMatrixClient
.registerGuest({}, undefined)
.then((response) => {
console.log("Response", response);
response.is_guest = true;
localStorage.setItem('user', JSON.stringify(response));
return response;
})
} else {
promiseLogin = tempMatrixClient
.login("m.login.password", { user: user.username, password: user.password, type: "m.login.password" })
.then((response) => {
localStorage.setItem('user', JSON.stringify(response));
return response;
})
}
return promiseLogin
.then(user => {
retUser = user;
return this.getMatrixClient(user);
})
.then(() => {
// Ready to use! Start by loading rooms.
this.initClient();
return retUser;
})
},
logout() {
@ -87,6 +95,18 @@ export default {
},
async getMatrixClient(user) {
if (this.matrixClientReady) {
return new Promise((resolve,ignoredreject) => {
resolve(user);
})
} else if (this.matrixClient) {
return new Promise((resolve,ignoredreject) => {
this.matrixClient.once('Matrix.initialized', (ignoredclient) => {
resolve(user);
});
})
}
const matrixStore = new sdk.MemoryStore(window.localStorage);
const webStorageSessionStore = new sdk.WebStorageSessionStore(
window.localStorage
@ -104,9 +124,13 @@ export default {
sessionStore: webStorageSessionStore,
deviceId: user.device_id,
accessToken: user.access_token,
timelineSupport: true
timelineSupport: true,
unstableClientRelationAggregation: true
}
this.matrixClient = sdk.createClient(opts);
if (user.is_guest) {
this.matrixClient.setGuest(true);
}
return this.matrixClient
.initCrypto()
.then(() => {
@ -136,7 +160,12 @@ export default {
)
});
}
});
})
.then(() => {
// Ready to use! Start by loading rooms.
this.initClient();
return user;
})
},
addMatrixClientListeners(client) {
@ -159,7 +188,7 @@ export default {
Vue.set(room, "topic", event.getContent().topic);
}
}
break;
break;
case "m.room.avatar": {
const room = this.matrixClient.getRoom(event.getRoomId());
@ -167,7 +196,7 @@ export default {
Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true));
}
}
break;
break;
}
},