Merge pull request #998 from mozilla/i989

Changed sign in area
This commit is contained in:
Danny Coates 2018-11-06 21:34:04 -08:00 committed by GitHub
commit ffac4ae5b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 17 deletions

View File

@ -1,26 +1,16 @@
const html = require('choo/html'); const html = require('choo/html');
const itemClass =
'block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer';
module.exports = function(state, emit) { module.exports = function(state, emit) {
if (!state.capabilities.account) { if (!state.capabilities.account) {
return null; return null;
} }
const user = state.user; const user = state.user;
const menuItems = []; if (!user.loggedIn) {
if (user.loggedIn) { return html`<button
menuItems.push(html`<li class="p-2 text-grey-dark">${user.email}</li>`); class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue"
menuItems.push( onclick=${login}>
html`<li><a class="${itemClass}" onclick=${logout}>${state.translate( ${state.translate('signInMenuOption')}
'logOut' </button>`;
)}</a></li>`
);
} else {
menuItems.push(
html`<li class=""><a class="${itemClass}" onclick=${login}>${state.translate(
'signInMenuOption'
)}</a></li>`
);
} }
return html`<div class="relative h-8"> return html`<div class="relative h-8">
<input <input
@ -34,7 +24,12 @@ module.exports = function(state, emit) {
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" 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}" onblur="${hideMenu}"
tabindex="-1"> tabindex="-1">
${menuItems} <li class="p-2 text-grey-dark">${user.email}</li>
<li>
<a class="block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer" onclick=${logout}>
${state.translate('logOut')}
</a>
</li>
</ul> </ul>
</div>`; </div>`;