Guest avatars
BIN
src/assets/avatars/avatar-0.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
src/assets/avatars/avatar-1.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/avatars/avatar-10.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/avatars/avatar-11.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/avatars/avatar-2.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/avatars/avatar-3.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/avatars/avatar-4.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/avatars/avatar-5.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/avatars/avatar-6.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/avatars/avatar-7.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/avatars/avatar-8.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/avatars/avatar-9.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -38,6 +38,12 @@
|
|||
right: 0;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.join-user-info {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
max-width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.join-avatar {
|
||||
|
|
|
|||
|
|
@ -650,10 +650,10 @@ export default {
|
|||
showAttachmentPicker() {
|
||||
// Guests not currently allowed to send attachments (=actually upload them)
|
||||
// See https://matrix.org/docs/spec/client_server/r0.2.0#guest-access
|
||||
if (this.$matrix.currentUser && this.$matrix.currentUser.is_guest) {
|
||||
this.showNotAllowedForGuests = true;
|
||||
return;
|
||||
}
|
||||
// if (this.$matrix.currentUser && this.$matrix.currentUser.is_guest) {
|
||||
// this.showNotAllowedForGuests = true;
|
||||
// return;
|
||||
// }
|
||||
this.$refs.attachment.click()
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -21,15 +21,26 @@
|
|||
<div class="join-message">
|
||||
<!-- Join the group chat in a web browser or with the Keanu app. -->
|
||||
</div>
|
||||
<v-combobox
|
||||
v-if="!currentUser || currentUser"
|
||||
@update:search-input="updateDisplayName"
|
||||
:items="defaultDisplayNames"
|
||||
:value="displayName"
|
||||
label="User name"
|
||||
outlined
|
||||
dense
|
||||
></v-combobox>
|
||||
<v-container class="join-user-info">
|
||||
<v-row>
|
||||
<v-col class="flex-grow-0 flex-shrink-0">
|
||||
<v-avatar @click="showAvatarPicker = true">
|
||||
<v-img v-if="userAvatar" :src="userAvatar.image" />
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
<v-col class="flex-shrink-1 flex-grow-1">
|
||||
<v-combobox
|
||||
v-if="!currentUser || currentUser"
|
||||
@update:search-input="updateDisplayName"
|
||||
:items="defaultDisplayNames"
|
||||
:value="displayName"
|
||||
label="User name"
|
||||
outlined
|
||||
dense
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!--<v-btn
|
||||
class="btn-light"
|
||||
|
|
@ -67,6 +78,48 @@
|
|||
|
||||
<div v-if="loadingMessage">{{ loadingMessage }}</div>
|
||||
</div>
|
||||
|
||||
<v-dialog
|
||||
scrollable
|
||||
:fullscreen="$vuetify.breakpoint.xs"
|
||||
width="500"
|
||||
transition="dialog-bottom-transition"
|
||||
v-model="showAvatarPicker"
|
||||
>
|
||||
<v-card>
|
||||
<v-toolbar dark flat color="primary">
|
||||
<v-btn icon dark @click="showAvatarPicker = false">
|
||||
<v-icon>close</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-title>Select an Avatar</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-container row wrap>
|
||||
<v-col
|
||||
v-for="avatar in availableAvatars"
|
||||
:key="avatar.id"
|
||||
xs4
|
||||
sm3
|
||||
d-flex
|
||||
>
|
||||
<v-card tile flat class="d-flex">
|
||||
<v-card-text class="d-flex">
|
||||
<v-avatar
|
||||
size="48"
|
||||
@click="selectAvatar(avatar)"
|
||||
class="avatar-picker-avatar"
|
||||
:class="{ current: avatar === userAvatar }"
|
||||
>
|
||||
<img :src="avatar.image" />
|
||||
</v-avatar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -86,12 +139,17 @@ export default {
|
|||
loadingMessage: null,
|
||||
waitingForInfo: true,
|
||||
waitingForMembership: false,
|
||||
userAvatar: null,
|
||||
displayName: null,
|
||||
defaultDisplayNames: ["Guest Pandolin", "Guest Iguana", "Guest Horse"],
|
||||
defaultDisplayNames: [],
|
||||
availableAvatars: [],
|
||||
showAvatarPicker: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$matrix.on("Room.myMembership", this.onMyMembership);
|
||||
this.availableAvatars = util.getDefaultAvatars();
|
||||
this.userAvatar = this.availableAvatars[0];
|
||||
|
||||
this.roomId = this.$matrix.currentRoomId;
|
||||
this.roomName = this.roomId;
|
||||
|
|
@ -124,11 +182,13 @@ export default {
|
|||
.catch((ignoredErr) => {
|
||||
this.waitingForMembership = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!this.currentUser || this.currentUser.is_guest) {
|
||||
var values = require("!!raw-loader!../assets/usernames.txt").default.split('\n').filter((item) => {
|
||||
return item.length > 0;
|
||||
})
|
||||
var values = require("!!raw-loader!../assets/usernames.txt")
|
||||
.default.split("\n")
|
||||
.filter((item) => {
|
||||
return item.length > 0;
|
||||
});
|
||||
this.displayName = values[Math.floor(Math.random() * values.length)];
|
||||
this.defaultDisplayNames = values;
|
||||
}
|
||||
|
|
@ -188,20 +248,48 @@ export default {
|
|||
if (this.currentUser) {
|
||||
clientPromise = this.$matrix.getMatrixClient(this.currentUser);
|
||||
} else {
|
||||
clientPromise = this.$store.dispatch("auth/login", this.guestUser)
|
||||
clientPromise = this.$store.dispatch("auth/login", this.guestUser);
|
||||
}
|
||||
return clientPromise
|
||||
.then(function(user) {
|
||||
if ((this.currentUser && !this.currentUser.is_guest) || !this.displayName) {
|
||||
return Promise.resolve(user);
|
||||
} else {
|
||||
return this.$matrix.matrixClient.setDisplayName(this.displayName, undefined);
|
||||
}
|
||||
}.bind(this))
|
||||
.then(function(ignoreduser) {
|
||||
this.loadingMessage = "Joining room...";
|
||||
return this.$matrix.matrixClient.joinRoom(this.roomId);
|
||||
}.bind(this))
|
||||
.then(
|
||||
function (user) {
|
||||
if (
|
||||
(this.currentUser && !this.currentUser.is_guest) ||
|
||||
!this.displayName
|
||||
) {
|
||||
return Promise.resolve(user);
|
||||
} else {
|
||||
return this.$matrix.matrixClient.setDisplayName(
|
||||
this.displayName,
|
||||
undefined
|
||||
);
|
||||
}
|
||||
}.bind(this)
|
||||
)
|
||||
.then(
|
||||
function () {
|
||||
if (
|
||||
(this.currentUser && !this.currentUser.is_guest) ||
|
||||
!this.userAvatar
|
||||
) {
|
||||
return Promise.resolve("no avatar");
|
||||
} else {
|
||||
return util.setAvatar(
|
||||
this.$matrix.matrixClient,
|
||||
this.userAvatar.image,
|
||||
function (progress) {
|
||||
console.log("Progress: " + JSON.stringify(progress));
|
||||
}
|
||||
);
|
||||
}
|
||||
}.bind(this)
|
||||
)
|
||||
.then(
|
||||
function (ignoreduser) {
|
||||
this.loadingMessage = "Joining room...";
|
||||
return this.$matrix.matrixClient.joinRoom(this.roomId);
|
||||
}.bind(this)
|
||||
)
|
||||
.then((room) => {
|
||||
this.loading = false;
|
||||
this.loadingMessage = null;
|
||||
|
|
@ -222,7 +310,12 @@ export default {
|
|||
|
||||
updateDisplayName(value) {
|
||||
this.displayName = value;
|
||||
}
|
||||
},
|
||||
|
||||
selectAvatar(avatar) {
|
||||
this.userAvatar = avatar;
|
||||
this.showAvatarPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,65 @@
|
|||
<template>
|
||||
<div v-if="room">
|
||||
<v-container fluid>
|
||||
<v-row class="chat-header-row align-center">
|
||||
<div class="chat-header">
|
||||
<v-container fluid>
|
||||
<v-row class="chat-header-row align-center">
|
||||
<v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-btn
|
||||
v-show="$navigation && $navigation.canPop()"
|
||||
icon
|
||||
@click.stop="$navigation.pop"
|
||||
>
|
||||
<v-icon>arrow_back</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-btn v-show="$navigation && $navigation.canPop()" icon @click.stop="$navigation.pop">
|
||||
<v-icon>arrow_back</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<!-- <v-col class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<!-- <v-col class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-btn icon class="members-icon" @click.stop="showRoomInfo">
|
||||
<v-icon>people</v-icon>
|
||||
</v-btn>
|
||||
<div class="num-members">{{ memberCount }}</div>
|
||||
</v-col> -->
|
||||
|
||||
<v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
|
||||
<div class="room-name" v-if="room">{{ room.summary.info.title }}</div>
|
||||
</v-col>
|
||||
<!-- <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
|
||||
<div class="room-name" v-if="room">
|
||||
{{ room.summary.info.title }}
|
||||
</div>
|
||||
</v-col>
|
||||
<!-- <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-btn class="leave-button">Leave</v-btn>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<v-card class="members ma-3">
|
||||
<v-card-title>Members<v-spacer></v-spacer><div>{{ room.getJoinedMemberCount() }}</div></v-card-title>
|
||||
<v-card-title
|
||||
>Members<v-spacer></v-spacer>
|
||||
<div>{{ room.getJoinedMemberCount() }}</div></v-card-title
|
||||
>
|
||||
<v-card-text>
|
||||
<div class="member ma-2" v-for="member in room.getJoinedMembers()" :key="member.userId">
|
||||
<v-avatar class="avatar" size="40" color="grey">
|
||||
<img
|
||||
v-if="memberAvatar(member)"
|
||||
:src="memberAvatar(member)"
|
||||
/>
|
||||
<span v-else class="white--text headline">{{
|
||||
member.name.substring(0, 1).toUpperCase()
|
||||
}}</span>
|
||||
</v-avatar>
|
||||
{{ member.user ? member.user.displayName : member.name }}{{ (member.userId == $matrix.currentUserId) ? " (you)" : "" }}
|
||||
<v-btn color="black" v-if="member.userId == $matrix.currentUserId" text absolute right @click.stop="showEditDialog = true">edit</v-btn>
|
||||
<div
|
||||
class="member ma-2"
|
||||
v-for="member in room.getJoinedMembers()"
|
||||
:key="member.userId"
|
||||
>
|
||||
<v-avatar class="avatar" size="40" color="grey">
|
||||
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
|
||||
<span v-else class="white--text headline">{{
|
||||
member.name.substring(0, 1).toUpperCase()
|
||||
}}</span>
|
||||
</v-avatar>
|
||||
{{ member.user ? member.user.displayName : member.name
|
||||
}}{{ member.userId == $matrix.currentUserId ? " (you)" : "" }}
|
||||
<v-btn
|
||||
color="black"
|
||||
v-if="member.userId == $matrix.currentUserId"
|
||||
text
|
||||
absolute
|
||||
right
|
||||
@click.stop="showEditDialog = true"
|
||||
>edit</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -54,22 +74,29 @@
|
|||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- EDIT dialog -->
|
||||
<v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
|
||||
<v-card>
|
||||
<v-card-title>Display name</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="displayName" />
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="showEditDialog = false">Cancel</v-btn>
|
||||
<v-btn color="primary" text @click="$matrix.matrixClient.setDisplayName(displayName);showEditDialog = false">Ok</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- EDIT dialog -->
|
||||
<v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
|
||||
<v-card>
|
||||
<v-card-title>Display name</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="displayName" />
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="showEditDialog = false">Cancel</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
text
|
||||
@click="
|
||||
$matrix.matrixClient.setDisplayName(displayName);
|
||||
showEditDialog = false;
|
||||
"
|
||||
>Ok</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -82,7 +109,7 @@ export default {
|
|||
showEditDialog: false,
|
||||
user: null,
|
||||
displayName: "",
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$matrix.on("Room.timeline", this.onEvent);
|
||||
|
|
@ -106,8 +133,8 @@ export default {
|
|||
handler(newVal, ignoredOldVal) {
|
||||
console.log("RoomInfo: Current room changed");
|
||||
this.memberCount = newVal.getJoinedMemberCount();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -124,9 +151,7 @@ export default {
|
|||
this.memberCount = this.room.getJoinedMemberCount();
|
||||
},
|
||||
|
||||
showRoomInfo() {
|
||||
|
||||
},
|
||||
showRoomInfo() {},
|
||||
|
||||
memberAvatar(member) {
|
||||
if (member) {
|
||||
|
|
@ -142,14 +167,20 @@ export default {
|
|||
},
|
||||
|
||||
upgradeAccount() {
|
||||
this.$matrix.upgradeGuestAccount()
|
||||
.then(() => {
|
||||
console.log("Done");
|
||||
})
|
||||
.catch(err => {
|
||||
console.log("ERROR", err);
|
||||
})
|
||||
}
|
||||
this.$matrix
|
||||
.upgradeGuestAccount()
|
||||
.then(user => {
|
||||
// Done, login with the "new" account to get a real token instead of our guest token.
|
||||
this.user = user;
|
||||
return this.$store.dispatch("auth/login", this.user);
|
||||
})
|
||||
.then(() => {
|
||||
console.log("Upgrade done!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("ERROR", err);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -365,6 +365,56 @@ class Util {
|
|||
// key wasn't found
|
||||
return null;
|
||||
}
|
||||
|
||||
_importAll(r) {
|
||||
var images = [];
|
||||
r.keys().forEach(res => {
|
||||
console.log("Avatar", res);
|
||||
// // Remove"./"
|
||||
// const parts = res.split("/");
|
||||
// const pack = parts[1];
|
||||
// const sticker = parts[2].split(".")[0];
|
||||
const image = r(res);
|
||||
images.push({ id: res, image: image });
|
||||
// if (stickerPacks[pack] !== undefined) {
|
||||
// stickerPacks[pack].push({ image: image, name: sticker });
|
||||
// }
|
||||
});
|
||||
return images;
|
||||
}
|
||||
|
||||
getDefaultAvatars() {
|
||||
return this._importAll(require.context('../assets/avatars/', true, /\.(jpeg|jpg|png)$/));
|
||||
}
|
||||
|
||||
setAvatar(matrixClient, file, onUploadProgress) {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(file, { responseType: 'arraybuffer' })
|
||||
.then(response => {
|
||||
const opts = {
|
||||
type: response.headers['content-type'].split(';')[0],
|
||||
name: "Avatar",
|
||||
progressHandler: onUploadProgress,
|
||||
onlyContentUri: false
|
||||
};
|
||||
matrixClient.uploadContent(response.data, opts)
|
||||
.then((response) => {
|
||||
const uri = response.content_uri;
|
||||
return matrixClient.setProfileInfo('avatar_url', { avatar_url: uri });
|
||||
})
|
||||
.then(result => {
|
||||
resolve(result);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
export default new Util();
|
||||
|
||||
|
|
|
|||
|
|
@ -65,10 +65,20 @@ export default {
|
|||
var promiseLogin;
|
||||
|
||||
if (user.is_guest) {
|
||||
// Generate random username and password. We don't user REAL matrix
|
||||
// guest accounts because 1. They are not allowed to post media, 2. They
|
||||
// can not use avatars and 3. They can not seamlessly be upgraded to real accounts.
|
||||
//
|
||||
// Instead, we use an ILAG approach, Improved Landing as Guest.
|
||||
const user = util.randomUser();
|
||||
const pass = util.randomPass();
|
||||
promiseLogin = tempMatrixClient
|
||||
.registerGuest({}, undefined)
|
||||
.register(user, pass, null, {
|
||||
type: "m.login.dummy",
|
||||
})
|
||||
.then((response) => {
|
||||
console.log("Response", response);
|
||||
response.password = pass;
|
||||
response.is_guest = true;
|
||||
localStorage.setItem('user', JSON.stringify(response));
|
||||
return response;
|
||||
|
|
@ -106,19 +116,19 @@ export default {
|
|||
if (!this.matrixClient || !this.currentUser || !this.currentUser.is_guest) {
|
||||
return Promise.reject("Invalid params");
|
||||
}
|
||||
const randomUsername = util.randomUser();
|
||||
const randomPassword = util.randomPass();
|
||||
const data = {
|
||||
username:randomUsername,
|
||||
password:randomPassword,
|
||||
guest_access_token:this.currentUser.access_token
|
||||
};
|
||||
return this.matrixClient.registerRequest(data, undefined, undefined)
|
||||
const self = this;
|
||||
return this.matrixClient.register(this.matrixClient.getUserIdLocalpart(), randomPassword, null, {
|
||||
type: "m.login.dummy",
|
||||
}, undefined, this.currentUser.access_token)
|
||||
.then((response) => {
|
||||
console.log("Response", response);
|
||||
response.is_guest = false;
|
||||
localStorage.setItem('user', JSON.stringify(response));
|
||||
return response;
|
||||
response.password = randomPassword;
|
||||
self.currentUser = response;
|
||||
localStorage.setItem('user', JSON.stringify(response)); // Update local storage as well.
|
||||
self.logout();
|
||||
return self.currentUser;
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -163,12 +173,13 @@ export default {
|
|||
deviceId: user.device_id,
|
||||
accessToken: user.access_token,
|
||||
timelineSupport: true,
|
||||
unstableClientRelationAggregation: true
|
||||
unstableClientRelationAggregation: true,
|
||||
//useAuthorizationHeader: true
|
||||
}
|
||||
this.matrixClient = sdk.createClient(opts);
|
||||
if (user.is_guest) {
|
||||
this.matrixClient.setGuest(true);
|
||||
}
|
||||
// if (user.is_guest) {
|
||||
// this.matrixClient.setGuest(true);
|
||||
// }
|
||||
return this.matrixClient
|
||||
.initCrypto()
|
||||
.then(() => {
|
||||
|
|
@ -210,6 +221,7 @@ export default {
|
|||
if (client) {
|
||||
client.on("event", this.onEvent);
|
||||
client.on("Room", this.onRoom);
|
||||
client.on("Session.logged_out", this.onSessionLoggedOut);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -217,6 +229,7 @@ export default {
|
|||
if (client) {
|
||||
client.off("event", this.onEvent);
|
||||
client.off("Room", this.onRoom);
|
||||
client.off("Session.logged_out", this.onSessionLoggedOut);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -244,6 +257,11 @@ export default {
|
|||
this.reloadRooms();
|
||||
},
|
||||
|
||||
onSessionLoggedOut() {
|
||||
console.log("Logged out!");
|
||||
this.logout();
|
||||
},
|
||||
|
||||
reloadRooms() {
|
||||
this.rooms = this.matrixClient.getVisibleRooms();
|
||||
this.rooms.forEach(room => {
|
||||
|
|
|
|||