ctucx.git: smartie-pwa

login

diff --git a/src/departures.js b/src/departures.js
@@ -57,9 +57,9 @@ class Departures extends LitElement {
 									<div class="table-column">${Number(departure.departure_in) ? departure.departure_in + " min" : "sofort"}</div>
 								`)}
 							</div>
-						  ${d.length ? "" : html`
-						  	<div class="table-empty table-column">--- Momentan keine Abfahrten ---</div>
-						  `}
+							${d.length ? "" : html`
+								<div class="table-empty table-column">--- Momentan keine Abfahrten ---</div>
+							`}
 						</div>
 					</smarthome-card>
 				`)}

@@ -109,7 +109,7 @@ class Departures extends LitElement {
 				width: 20%;
 			}
 			.table {
-			  flex-wrap: wrap;
+				flex-wrap: wrap;
 				padding: 20px;
 				padding-top: 10px;
 				background: #444;

@@ -138,7 +138,7 @@ class Departures extends LitElement {
 			}
 
 			.table-empty {
-			  flex-basis: 100%;
+				flex-basis: 100%;
 				text-align: center;
 			}
 		`;

diff --git a/src/layout.js b/src/layout.js
@@ -16,6 +16,7 @@ import "./departures.js";
 import "./settings.js";
 import "./spinner.js";
 import "./row.js";
+import "./prompt.js";
 
 const createRedirect = (id) => {
 	const config = state.config.views.filter(view => view.url == id)[0] || state.config.views[0];

@@ -47,7 +48,7 @@ class SmartHomeLayout extends LitElement {
 		this.activeView = state.config.views.filter(view => `#/${view.url}` == window.location.hash)[0] || state.config.views[0];
 		await this.requestUpdate();
 		const drawer = this.shadowRoot.querySelector("mwc-drawer");
-		drawer.open = false;
+		if (drawer) drawer.open = false;
 	}
 
 	_handleNavEvent(evt) {

@@ -57,10 +58,10 @@ class SmartHomeLayout extends LitElement {
 	}
 
 	render() {
-    		if (this.activeView.type === "noconfig") {
-        		window.location.hash = `#/${state.config.views[0].url}`;
-    		}
-		return html`
+		if (this.activeView.type === "noconfig") {
+			window.location.hash = `#/${state.config.views[0].url}`;
+		}
+		return state.accessToken ? html`
 			<mwc-drawer type="modal">
 				<div id="drawer-content">
 					${state.config.views.map(view => html`

@@ -80,6 +81,15 @@ class SmartHomeLayout extends LitElement {
 			</mwc-top-app-bar>
 			<div class="top-app-bar-adjust"></div>
 			${viewTypes[this.activeView.type](this.activeView.url)}
+		` : html`
+			<mwc-top-app-bar type="fixed" @MDCTopAppBar:nav="${this._handleNavEvent}">
+				<div id="title-container" slot="title">
+					<span>Authorization</span>
+				</div>
+				<mwc-icon id="menu-button" slot="navigationIcon">lock</mwc-icon>
+			</mwc-top-app-bar>
+			<div class="top-app-bar-adjust"></div>
+			<smarthome-prompt></smarthome-prompt>
 		`;
 	}
 

@@ -111,7 +121,7 @@ class SmartHomeLayout extends LitElement {
 					width: 100vw;
 					padding-left: calc((100% - 450px) / 2 + 20px);
 				}
-				mwc-icon-button {
+				#menu-button {
 					position: absolute;
 					padding-left: calc(((100% - 450px) / 2) - 75px);
 					z-index: 10;

diff --git a/src/power-meter/history.js b/src/power-meter/history.js
@@ -118,7 +118,7 @@ class PowerMeterHistory extends LitElement {
 					</div>
 				</smarthome-card>
 			` : html`
-			  <smarthome-spinner>Loading...</smarthome-spinner>
+				<smarthome-spinner>Loading...</smarthome-spinner>
 			`}
 		`;
 	}

diff --git a/src/prompt.js b/src/prompt.js
@@ -0,0 +1,52 @@
+"use strict";
+
+import { LitElement, html, css } from "lit-element";
+import { state } from "./state.js";
+import "./card.js";
+
+class Prompt extends LitElement {
+	render() {
+		return html`
+			<h4>Enter the passphrase:</h4>
+			<form @submit=${this.handleSubmit}>
+				<smarthome-card>
+					<input type="password" id="accessToken">
+				</smarthome-card>
+				<mwc-icon-button icon="arrow_forward" @click=${this.handleSubmit}></mwc-icon-button>
+			</form>
+		`;
+	}
+
+	handleSubmit(evt) {
+		evt.preventDefault();
+		state.setAccessToken(this.shadowRoot.getElementById("accessToken").value);
+		return true;
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+			}
+			input {
+    		padding: 0;
+    		border: none;
+    		height: 3em;
+				color: black;
+			}
+			smarthome-card {
+    		display: flex;
+				margin: 0;
+				margin-right: 20px;
+			}
+			form {
+				display: flex;
+				flex-direction: row;
+			}
+		`;
+	}
+}
+
+customElements.define("smarthome-prompt", Prompt);

diff --git a/src/state.js b/src/state.js
@@ -5,18 +5,19 @@ class State {
 		this.connected = false;
 		this.data = JSON.parse(localStorage.getItem("data") || "{}");
 		this.config = JSON.parse(localStorage.getItem("config") || JSON.stringify({
-    			views: [
-        			{
-            				type: "noconfig",
-            				url: "noconfig",
-            				name: "Start",
-            				icon: "settings"
-        			}
-    			]
-    		}));
+			views: [
+				{
+					type: "noconfig",
+					url: "noconfig",
+					name: "Start",
+					icon: "settings"
+				}
+			]
+		}));
+		this.accessToken = localStorage.getItem("accessToken");
 		this.data.lastUpdated = new Date(this.data.lastUpdated);
 		this._subscribers = [];
-		this._initWS();
+		if (this.accessToken) this._initWS();
 	}
 
 	subscribe(callback) {

@@ -34,6 +35,9 @@ class State {
 			this.data.lastUpdated = new Date();
 			localStorage.setItem("data", JSON.stringify(this.data));
 		} else {
+			if (newData.data && newData.data.startsWith("invalid accessToken")) {
+				this.accessToken = null;
+			}
 			console.log("received response: ", newData);
 			return;
 		}

@@ -58,7 +62,13 @@ class State {
 			this._updateSubscribers();
 			this.ws.send(JSON.stringify({
 				type: "GetClientConfigAction",
-				configName: "smarthome-pwa"
+				configName: "smarthome-pwa",
+				accessToken: this.accessToken
+			}));
+			this.ws.send(JSON.stringify({
+				type: "SetSubscriptionStateAction",
+				subscribed: true,
+				accessToken: this.accessToken
 			}));
 		};
 		this.ws.onmessage = (msg) => {

@@ -71,6 +81,13 @@ class State {
 			this._setData(JSON.parse(msg.data));
 		};
 	}
+
+	setAccessToken(newToken) {
+		this.accessToken = newToken;
+		localStorage.setItem("accessToken", this.accessToken);
+		this._updateSubscribers();
+		this._initWS();
+	}
 }
 
 export const state = new State();

diff --git a/src/switches.js b/src/switches.js
@@ -26,7 +26,8 @@ class Switches extends LitElement {
 			type: "SetRelayAction",
 			setRelayBoard: sw.relayboard,
 			setRelay: sw.relay,
-			setValue: sw.checked
+			setValue: sw.checked,
+			accessToken: state.accessToken
 		}));
 		if (evt.clientX !== 0 || evt.clientY !== 0) sw.blur();
 		return true;

@@ -36,11 +37,11 @@ class Switches extends LitElement {
 		const config = state.config.views.filter(view => view.url == this.viewid)[0];
 		return html`
 			<smarthome-card>
-			  ${config.switches.map(sw => html`
+				${config.switches.map(sw => html`
 					<smarthome-row @click="${this._clickHandler}" ?disabled="${!state.connected}">
 						<span slot="left">${sw.name}</span>
 						<mwc-ripple slot="center"></mwc-ripple>
-					  <mwc-switch slot="right" .relayboard="${sw.device}" .relay="${sw.relay}" ?disabled="${!state.connected}" ?checked="${state.data[sw.device].relays[sw.relay]}"></mwc-switch>
+						<mwc-switch slot="right" .relayboard="${sw.device}" .relay="${sw.relay}" ?disabled="${!state.connected}" ?checked="${state.data[sw.device].relays[sw.relay]}"></mwc-switch>
 					</smarthome-row>
 				`)}
 			</smarthome-card>

diff --git a/src/temperature/history.js b/src/temperature/history.js
@@ -118,7 +118,7 @@ class TemperatureHistory extends LitElement {
 					</div>
 				</smarthome-card>
 			` : html`
-			  <smarthome-spinner>Loading...</smarthome-spinner>
+				<smarthome-spinner>Loading...</smarthome-spinner>
 			`}
 		`;
 	}