Sybren A. Stüvel
47474ac936
Avatars are now obtained from Blender ID. They are downloaded from Blender ID and stored in the users' home project storage. Avatars can be synced via Celery and triggered from a webhook. The avatar can be obtained from the current user object in Python, or via pillar.api.users.avatar.url(user_dict). Avatars can be shown in the web frontend by: - an explicit image (like before but with a non-Gravatar URL) - a Vue.js component `user-avatar` - a Vue.js component `current-user-avatar` The latter is the most efficient for the current user, as it uses user info that's already injected into the webpage (so requires no extra queries).
40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
// The <i> is given a fixed width so that the button doesn't resize when we change the icon.
|
|
const TEMPLATE = `
|
|
<button class="btn btn-outline-primary" type="button" @click="syncAvatar"
|
|
:disabled="isSyncing">
|
|
<i style="width: 2em; display: inline-block"
|
|
:class="{'pi-refresh': !isSyncing, 'pi-spin': isSyncing, spin: isSyncing}"></i>
|
|
Fetch Avatar from Blender ID
|
|
</button>
|
|
`
|
|
|
|
Vue.component("avatar-sync-button", {
|
|
template: TEMPLATE,
|
|
data() { return {
|
|
isSyncing: false,
|
|
}},
|
|
methods: {
|
|
syncAvatar() {
|
|
this.isSyncing = true;
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: `/settings/profile/sync-avatar`,
|
|
})
|
|
.then(response => {
|
|
toastr.info("sync was OK");
|
|
|
|
let user = pillar.utils.getCurrentUser();
|
|
user.avatar_url = response;
|
|
pillar.utils.updateCurrentUser(user);
|
|
})
|
|
.catch(err => {
|
|
toastr.error(xhrErrorResponseMessage(err), "There was an error syncing your avatar");
|
|
})
|
|
.then(() => {
|
|
this.isSyncing = false;
|
|
})
|
|
},
|
|
},
|
|
});
|