import $ from 'jquery';
import Notification from 'vj/components/notification';
import { NamedPage } from 'vj/misc/Page';
import {
delay, i18n, request, tpl,
} from 'vj/utils';
export default new NamedPage('home_account', () => {
document.getElementsByName('avatar')[0].parentNode.parentNode.parentElement.remove();
const $type = $(tpl`
`);
const $text = $(tpl``);
const $layout = $(`
${[['type', 3], ['text', 6], ['btn', 3]].map(([i, w]) => `
`).join(' ')}
`);
const $file: JQuery = $('');
const $confirm = $(tpl``);
$('button.change-avatar').on('click', () => {
$('.changeAvatar').append($layout);
$('[name="form_item_type"]').append($type);
$('[name="form_item_text"]').append($text);
$('[name="form_item_text"]').append($file);
$('[name="form_item_btn"]').append($confirm);
$('button.change-avatar').hide();
$type.trigger('change');
});
$type.on('change', () => {
if ($type.val() === 'upload') {
$text.hide();
$file.show();
} else {
$text.show();
$file.hide();
const placeholder = $type.val() === 'gravatar'
? 'Email address'
: $type.val() === 'github'
? 'Github username'
: 'QQ ID';
$text.attr('placeholder', i18n(placeholder));
}
});
$confirm.on('click', async () => {
if ($type.val() === 'upload') {
const formData = new FormData();
formData.append('file', $file[0].files[0]);
await request.postFile('/home/avatar', formData);
Notification.success(i18n('Upload success.'));
} else {
await request.post('/home/avatar', {
avatar: `${$type.val()}:${$text.val()}`,
});
Notification.success(i18n('Updated.'));
}
await delay(800);
window.location.reload();
});
});