Convert AuthRequired to LitElement

package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@google-web-components/google-youtube": "^3.0.1",
+    "@material/mwc-button": "^0.17.2",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/app-route": "^3.0.2",
     "@polymer/google-map": "github:pranavpandey/google-map#3.0",

src/components/auth-required.test.ts

@@ -0,0 +1,71 @@
+import { fireEvent } from '@testing-library/dom';
+import { html } from 'lit-html';
+import { mocked } from 'ts-jest/utils';
+import { fixture } from '../../__tests__/helpers/fixtures';
+import { dialogsActions } from '../redux/actions';
+import { SIGN_IN } from '../redux/constants';
+import { store } from '../redux/store';
+import './auth-required';
+
+jest.mock('../redux/actions');
+
+type AuthRequired = import('./auth-required').AuthRequired;
+const openDialog = mocked(dialogsActions.openDialog);
+
+describe('auth-required', () => {
+  let element!: AuthRequired;
+  let shadowRoot!: ShadowRoot;
+
+  beforeAll(async () => {
+    const render = await fixture<AuthRequired>(
+      html`
+        <auth-required>
+          <p slot="prompt">Please sign in</p>
+          <div>Welcome</div>
+        </auth-required>
+      `
+    );
+
+    element = render.element;
+    shadowRoot = render.shadowRoot;
+  });
+
+  beforeEach(() => {
+    openDialog.mockClear();
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get('auth-required')).toBeDefined();
+  });
+
+  it('shows unauthenticated prompt', () => {
+    expect(shadowRoot.querySelector<HTMLDivElement>('mwc-button')).not.toHaveAttribute('hidden');
+    const slots = shadowRoot.querySelectorAll('slot');
+    expect(slots).toHaveLength(2);
+    expect(slots[0]).not.toHaveAttribute('hidden');
+    expect(slots[0]).toHaveAttribute('name', 'prompt');
+    expect(slots[0].assignedElements()[0]).toHaveTextContent('Please sign in');
+    expect(slots[1]).toHaveAttribute('hidden');
+    expect(slots[1]).not.toHaveAttribute('name');
+    expect(slots[1].assignedElements()[0]).toHaveTextContent('Welcome');
+  });
+
+  it('opens dialog on tap', () => {
+    fireEvent.click(shadowRoot.querySelector('mwc-button')!);
+    expect(openDialog).toHaveBeenCalledTimes(1);
+    expect(openDialog).toHaveBeenCalledWith('signin');
+  });
+
+  it('shows authenticated content', async () => {
+    store.dispatch({
+      type: SIGN_IN,
+      user: { uid: '1', signedIn: true },
+    });
+    await element.updateComplete;
+    expect(shadowRoot.querySelector<HTMLDivElement>('mwc-button')).toHaveAttribute('hidden');
+    const slots = shadowRoot.querySelectorAll('slot');
+    expect(slots).toHaveLength(2);
+    expect(slots[0]).toHaveAttribute('hidden');
+    expect(slots[1]).not.toHaveAttribute('hidden');
+  });
+});

src/components/auth-required.ts

@@ -0,0 +1,41 @@
+import '@material/mwc-button';
+import { customElement, html, internalProperty } from 'lit-element';
+import { ReduxMixin } from '../mixins/redux-mixin';
+import { dialogsActions } from '../redux/actions';
+import { DIALOGS } from '../redux/constants';
+import { ThemedElement } from './themed-element';
+
+@customElement('auth-required')
+export class AuthRequired extends ReduxMixin(ThemedElement) {
+  @internalProperty()
+  private signedIn = false;
+
+  render() {
+    return html`
+      <div class="container">
+        <mwc-button
+          label="{$ signIn $}"
+          @click="${() => this.signIn()}"
+          ?hidden="${this.signedIn}"
+          dense
+        ></mwc-button>
+        <slot name="prompt" ?hidden="${this.signedIn}"></slot>
+        <slot ?hidden="${!this.signedIn}"></slot>
+      </div>
+    `;
+  }
+
+  stateChanged(state: import('../redux/store').State) {
+    this.signedIn = state.user.signedIn;
+  }
+
+  private signIn() {
+    dialogsActions.openDialog(DIALOGS.SIGNIN);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'auth-required': AuthRequired;
+  }
+}

src/elements/dialogs/session-details.ts

@@ -7,13 +7,13 @@ import '@polymer/paper-fab';
 import { html, PolymerElement } from '@polymer/polymer';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class';
 import 'plastic-image';
+import '../../components/auth-required';
 import { ReduxMixin } from '../../mixins/redux-mixin';
 import { SpeakersHoC } from '../../mixins/speakers-hoc';
 import { dialogsActions, sessionsActions, toastActions, uiActions } from '../../redux/actions';
 import { DIALOGS } from '../../redux/constants';
 import { store } from '../../redux/store';
 import { getVariableColor } from '../../utils/functions';
-import '../auth-required';
 import '../feedback-block';
 import '../shared-styles';
 import '../text-truncate';

src/styles/theme.ts

@@ -94,6 +94,11 @@ export const theme = css`
     transition: border-color var(--animation);
   }
 
+  mwc-button {
+    --mdc-theme-primary: var(--default-primary-color);
+    --mdc-theme-on-primary: var(--default-background-color);
+  }
+
   paper-button {
     padding: 0.7em;
     border-radius: 2px;