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;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|