Login routine working

package-lock.json

@@ -13,7 +13,6 @@
         "lit": "*"
       },
       "devDependencies": {
-        "@azure/functions": "^1.2.3",
         "@open-wc/building-rollup": "^1.10.0",
         "@open-wc/eslint-config": "^4.3.0",
         "@open-wc/testing": "^2.5.33",
@@ -35,12 +34,6 @@
         "typescript": "^4.2.4"
       }
     },
-    "node_modules/@azure/functions": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@azure/functions/-/functions-1.2.3.tgz",
-      "integrity": "sha512-dZITbYPNg6ay6ngcCOjRUh1wDhlFITS0zIkqplyH5KfKEAVPooaoaye5mUFnR+WP9WdGRjlNXyl/y2tgWKHcRg==",
-      "dev": true
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
@@ -11596,12 +11589,6 @@
     }
   },
   "dependencies": {
-    "@azure/functions": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@azure/functions/-/functions-1.2.3.tgz",
-      "integrity": "sha512-dZITbYPNg6ay6ngcCOjRUh1wDhlFITS0zIkqplyH5KfKEAVPooaoaye5mUFnR+WP9WdGRjlNXyl/y2tgWKHcRg==",
-      "dev": true
-    },
     "@babel/code-frame": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",

package.json

@@ -28,7 +28,9 @@
     "build": "rimraf dist && tsc && rollup -c rollup.config.js",
     "start:build": "npm run build && web-dev-server --root-dir dist --app-index index.html --open --compatibility none",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "azure-local": "swa start http://localhost:8000/ --api api",
+    "full-start": "npm start && concurrently npm run azure-local"
   },
   "name": "simple-food-diary",
   "version": "0.0.0",

src/food-log-form.ts

@@ -56,7 +56,6 @@ class FoodLogForm extends LitElement{
 
     render(){
         return html`
-
             <h2>Portion size</h2>
 
             <div class="portion-sizes">

src/login-screen.ts

@@ -0,0 +1,13 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("login-screen")
+export class LoginScreen extends LitElement {
+    static styles = css``;
+
+    render(){
+        return html`
+        <a href="/.auth/login/github">Login</a>
+        `;
+    }
+}

src/simple-food-diary.ts

@@ -1,12 +1,49 @@
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import {until} from 'lit/directives/until.js';
 
 import "./food-log-form";
+import "./login-screen";
 
 @customElement('simple-food-diary')
 export class SimpleFoodDiary extends LitElement {
   @property({ type: String }) title = 'My app';
 
+  @state()
+  me?: Object;
+
+  connectedCallback(){
+    super.connectedCallback();
+
+    if(!this.me){
+      this.fetchMe();
+    }
+  }
+
+  async fetchMe(){
+    const response = await fetch("/.auth/me");
+    const jsonResponse = await response.json();
+    console.log(jsonResponse);
+    this.me = jsonResponse.clientPrincipal;
+  }
+
+  render() {
+    return html`
+      <header>
+        <pre>${JSON.stringify(this.me, null, 2)}</pre>
+
+        ${this.me ? html`<a href="/.auth/logout">Logout</a>` : html`<a href="/.auth/login/twitter">Login</a>`}
+      </header>
+      <main>
+
+        <food-log-form></food-log-form>
+
+      </main>
+
+      <footer></footer>
+    `;
+  }
+
   static styles = css`
     :host {
       min-height: 100vh;
@@ -51,17 +88,4 @@ export class SimpleFoodDiary extends LitElement {
   //   const zeTypes = Array.from(document.querySelectorAll('input:checked')).map(e => e.nodeValue);
   //   console.log(zeTypes);
   // }
-
-  render() {
-    return html`
-      <header></header>
-      <main>
-
-        <food-log-form></food-log-form>
-
-      </main>
-
-      <footer></footer>
-    `;
-  }
 }