Starts adding Firebase support

package.json

@@ -18,6 +18,7 @@
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\""
   },
   "dependencies": {
+    "firebase": "^9.8.1",
     "lit": "^2.2.3"
   },
   "devDependencies": {

src/FirebaseController.ts

@@ -0,0 +1,54 @@
+import {ReactiveController, ReactiveControllerHost} from 'lit';
+
+import { FirebaseApp, initializeApp } from "firebase/app";
+import {FIREBASE_CONFIG} from "./constants.js";
+
+export class FirebaseController implements ReactiveController {
+    host: ReactiveControllerHost;
+  
+    value = [];
+    
+    private firebaseApp: FirebaseApp;
+
+    constructor(host: ReactiveControllerHost) {
+      (this.host = host).addController(this);
+      this.firebaseApp = initializeApp(FIREBASE_CONFIG);
+    }
+  
+    hostConnected() {
+      // TODO
+    }
+  
+    hostDisconnected() {
+      // TODO
+    }
+  }
+
+// export class ClockController implements ReactiveController {
+//   host: ReactiveControllerHost;
+
+//   value = new Date();
+  
+//   timeout: number;
+
+//   private _timerID?: number;
+
+//   constructor(host: ReactiveControllerHost) {
+//     (this.host = host).addController(this);
+//   }
+
+//   hostConnected() {
+//     // Start a timer when the host is connected
+//     this._timerID = window.setInterval(() => {
+//       this.value = new Date();
+//       // Update the host with new value
+//       this.host.requestUpdate();
+//     }, this.timeout);
+//   }
+
+//   hostDisconnected() {
+//     // Clear the timer when the host is disconnected
+//     clearInterval(this._timerID);
+//     this._timerID = undefined;
+//   }
+// }

src/WebBrain.ts

@@ -1,32 +1,98 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
+import { FirebaseApp, initializeApp } from 'firebase/app';
+import {
+  getAuth,
+  signInWithPopup,
+  signOut,
+  GoogleAuthProvider,
+  Auth,
+  AuthProvider,
+  User,
+} from 'firebase/auth';
+
+import { FIREBASE_CONFIG } from './constants.js';
+
 @customElement('web-brain')
 export class WebBrain extends LitElement {
   @property({ type: String }) title = 'Web brain';
 
   @property({ type: String }) search = '';
 
-  static styles = css`
-    :host {
-    }
+  @property({ type: Object }) user: User | null = null;
 
-  `;
+  public firebaseApp: FirebaseApp;
+
+  private auth: Auth;
+
+  private provider: AuthProvider = new GoogleAuthProvider();
+
+  constructor() {
+    super();
+    this.firebaseApp = initializeApp(FIREBASE_CONFIG);
+
+    this.auth = getAuth();
+  }
+
+  static styles = css``;
+
+  async logIn() {
+    console.log('Logging in');
+
+    try {
+      const result = await signInWithPopup(this.auth, this.provider);
+      console.log('logged in');
+      this.user = result.user;
+    } catch (error) {
+      console.log('Error when logging in', error);
+    }
+  }
+
+  async logout() {
+    console.log('Logging out');
+    try {
+      await signOut(this.auth);
+      console.log('logged out');
+      this.user = null;
+    } catch (error) {
+      console.log('Error while logging out', error);
+    }
+  }
 
   render() {
     return html`
       <h1>${this.title}</h1>
 
+      <!-- Login -->
+      <div class="login-button">
+        ${this.user
+          ? html`
+              <p>Logged in as ${this.user.email}</p>
+              <button
+                label="Logout"
+                @click="${this.logout}"
+              >Logout</button>
+            `
+          : html`<button
+              label="LogIn with Google"
+              @click="${this.logIn}"
+            >LogIn with Google!</button>`}
+      </div>
+
       <!-- Form -->
       <div>
         Here comes the search bar
-        <input type="text" @input="${ (e:any) => {this.search = e.target.value} }" />
-      </div>  
+        <input
+          type="text"
+          @input="${(e: any) => {
+            this.search = e.target.value;
+          }}"
+        />
+      </div>
 
       <!-- Content -->
-      <main>
-        The content will come here  
-      </main> 
+      <main>The content will come here</main>
 
       <footer>Web brain, because you forget everything</footer>
     `;

src/constants.ts

@@ -0,0 +1,9 @@
+export const FIREBASE_CONFIG = {
+    apiKey: "AIzaSyD8TxM93wf_nytjGAj3iLkWQ2PKI0k_lKY",
+    authDomain: "webbrain-abae7.firebaseapp.com",
+    projectId: "webbrain-abae7",
+    storageBucket: "webbrain-abae7.appspot.com",
+    messagingSenderId: "228309073815",
+    appId: "1:228309073815:web:19e26360abcbc9d23aced2",
+    measurementId: "G-R1NYCL4BPM"
+  };

src/models/people.ts

@@ -0,0 +1,6 @@
+export interface IPerson {
+    id?: string | null,
+    name: string,
+    createdAt?: Date | null,
+    updatedAt?: Date | null,
+  }

test/web-brain.test.ts

@@ -1,22 +0,0 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-
-import { WebBrain } from '../src/WebBrain.js';
-import '../src/web-brain.js';
-
-describe('WebBrain', () => {
-  let element: WebBrain;
-  beforeEach(async () => {
-    element = await fixture(html`<web-brain></web-brain>`);
-  });
-
-  it('renders a h1', () => {
-    const h1 = element.shadowRoot!.querySelector('h1')!;
-    expect(h1).to.exist;
-    expect(h1.textContent).to.equal('My app');
-  });
-
-  it('passes the a11y audit', async () => {
-    await expect(element).shadowDom.to.be.accessible();
-  });
-});