fox-send/app/ui/account.js

107 lines
2.8 KiB
JavaScript
Raw Permalink Normal View History

2018-10-25 02:07:10 +00:00
const html = require('choo/html');
const Component = require('choo/component');
2018-10-25 02:07:10 +00:00
class Account extends Component {
constructor(name, state, emit) {
super(name);
this.state = state;
this.emit = emit;
this.enabled = state.capabilities.account;
this.local = state.components[name] = {};
this.buttonClass = '';
this.setLocal();
}
avatarClick(event) {
2018-10-25 02:07:10 +00:00
event.preventDefault();
const menu = document.getElementById('accountMenu');
menu.classList.toggle('invisible');
menu.focus();
}
hideMenu(event) {
2018-10-25 02:07:10 +00:00
event.stopPropagation();
const menu = document.getElementById('accountMenu');
menu.classList.add('invisible');
}
login(event) {
2018-10-25 02:07:10 +00:00
event.preventDefault();
2019-02-12 19:50:06 +00:00
this.emit('signup-cta', 'button');
2018-10-25 02:07:10 +00:00
}
logout(event) {
2018-10-25 02:07:10 +00:00
event.preventDefault();
this.emit('logout');
}
changed() {
return this.local.loggedIn !== this.state.user.loggedIn;
}
setLocal() {
const changed = this.changed();
if (changed) {
this.local.loggedIn = this.state.user.loggedIn;
}
return changed;
2018-10-25 02:07:10 +00:00
}
update() {
return this.setLocal();
}
createElement() {
if (!this.enabled) {
2018-11-16 18:01:53 +00:00
return html`
<div></div>
`;
}
const user = this.state.user;
const translate = this.state.translate;
this.setLocal();
if (!this.local.loggedIn) {
return html`
<send-account>
2018-11-16 18:01:53 +00:00
<button
2019-09-09 17:34:55 +00:00
class="px-4 py-2 md:px-8 md:py-4 focus:outline signin border-2 link-blue border-blue-60 hover:border-blue-70 dark:border-blue-40 dark:hover:border-blue-50"
2018-11-16 18:01:53 +00:00
onclick="${e => this.login(e)}"
title="${translate('signInOnlyButton')}"
2018-11-16 18:01:53 +00:00
>
${translate('signInOnlyButton')}
2018-11-16 18:01:53 +00:00
</button>
</send-account>
`;
}
return html`
<send-account class="relative h-8">
<input
type="image"
alt="${user.email}"
2019-09-09 17:34:55 +00:00
class="w-8 h-8 rounded-full border text-blue-50 md:text-white focus:outline"
src="${user.avatar}"
onclick="${e => this.avatarClick(e)}"
/>
<ul
id="accountMenu"
2019-09-09 17:34:55 +00:00
class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50 dark:bg-grey-80"
onblur="${e => this.hideMenu(e)}"
>
2019-09-09 17:34:55 +00:00
<li class="p-2 text-grey-60 dark:text-grey-50">${user.email}</li>
<li>
2019-02-21 00:11:54 +00:00
<button
2019-09-09 17:34:55 +00:00
class="block w-full text-left px-4 py-2 text-grey-80 dark:text-grey-30 hover:bg-blue-50 hover:text-white cursor-pointer focus:outline"
onclick="${e => this.logout(e)}"
title="${translate('signOut')}"
>
${translate('signOut')}
2019-02-21 00:11:54 +00:00
</button>
</li>
</ul>
</send-account>
`;
}
}
module.exports = Account;