drop.chapril.org-firefoxsend/app/ui/account.js

64 lines
1.6 KiB
JavaScript
Raw Normal View History

2018-10-25 04:07:10 +02:00
const html = require('choo/html');
const itemClass =
'block p-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer';
module.exports = function(state, emit) {
if (!state.capabilities.account) {
return null;
}
const user = state.user;
const menuItems = [];
if (user.loggedIn) {
menuItems.push(html`<li class="p-2 text-grey-dark">${user.email}</li>`);
menuItems.push(
html`<li><a class="${itemClass}" onclick=${logout}>${state.translate(
'logOut'
)}</a></li>`
);
} else {
menuItems.push(
html`<li class=""><a class="${itemClass}" onclick=${login}>${state.translate(
'signInMenuOption'
)}</a></li>`
);
}
return html`<div class="relative">
<input
type="image"
alt="${user.email}"
class="w-8 h-8 rounded-full text-white"
src="${user.avatar}"
onclick=${avatarClick}/>
<ul
id="accountMenu"
class="invisible list-reset absolute pin-t pin-r mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
onblur="${hideMenu}"
tabindex="-1">
${menuItems}
</ul>
</div>`;
function avatarClick(event) {
event.preventDefault();
const menu = document.getElementById('accountMenu');
menu.classList.toggle('invisible');
menu.focus();
}
function hideMenu(event) {
event.stopPropagation();
const menu = document.getElementById('accountMenu');
menu.classList.add('invisible');
}
function login(event) {
event.preventDefault();
emit('login');
}
function logout(event) {
event.preventDefault();
emit('logout');
}
};