Guest avatars

This commit is contained in:
N-Pex 2021-01-20 09:42:13 +01:00
parent 7b2b8df829
commit dbd7c28660
18 changed files with 301 additions and 103 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -38,6 +38,12 @@
right: 0;
margin: 20px;
}
.join-user-info {
display: flex;
flex-wrap: nowrap;
max-width: 40%;
}
}
.join-avatar {

View file

@ -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()
},

View file

@ -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>

View file

@ -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>

View file

@ -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();

View file

@ -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 => {