From 63c7c55843736ed5f8a23a3e30d24d9702ea472d Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 13 Aug 2018 15:48:54 +0200 Subject: [PATCH] Cleanups (#1566) * Cleanup core.js * Add ha-toast * Lint * Remove unused import --- src/components/ha-toast.js | 23 ++++++++ src/entrypoints/core.js | 85 +++++++++++++++++----------- src/managers/notification-manager.js | 38 +++++-------- 3 files changed, 89 insertions(+), 57 deletions(-) create mode 100644 src/components/ha-toast.js diff --git a/src/components/ha-toast.js b/src/components/ha-toast.js new file mode 100644 index 0000000000..2c8cb3bcb2 --- /dev/null +++ b/src/components/ha-toast.js @@ -0,0 +1,23 @@ +import '@polymer/paper-toast/paper-toast.js'; + +const PaperToast = customElements.get('paper-toast'); + +class HaToast extends PaperToast { + connectedCallback() { + super.connectedCallback(); + + if (!this._resizeListener) { + this._resizeListener = ev => this.classList.toggle('fit-bottom', ev.matches); + this._mediaq = window.matchMedia('(max-width: 599px'); + } + this._mediaq.addListener(this._resizeListener); + this._resizeListener(this._mediaq); + } + + disconnectedCallback() { + super.disconnectedCallback(); + this._mediaq.removeListener(this._resizeListener); + } +} + +customElements.define('ha-toast', HaToast); diff --git a/src/entrypoints/core.js b/src/entrypoints/core.js index 32f963b90b..b0739a3ddc 100644 --- a/src/entrypoints/core.js +++ b/src/entrypoints/core.js @@ -34,24 +34,50 @@ function clientId() { } function redirectLogin() { - document.location = `${__PUBLIC_PATH__}authorize.html?response_type=code&client_id=${encodeURIComponent(clientId())}&redirect_uri=${encodeURIComponent(location.toString())}`; + document.location.href = `/auth/authorize?response_type=code&client_id=${encodeURIComponent(clientId())}&redirect_uri=${encodeURIComponent(location.toString())}`; + return new Promise(); } -window.refreshToken = () => (window.tokens ? - refreshToken_(clientId(), window.tokens.refresh_token).then((accessTokenResp) => { - window.tokens = Object.assign({}, window.tokens, accessTokenResp); - localStorage.tokens = JSON.stringify(window.tokens); - return { - access_token: accessTokenResp.access_token, - expires: window.tokens.expires - }; - }, () => redirectLogin()) : redirectLogin()); +let tokenCache; + +function storeTokens(tokens) { + tokenCache = tokens; + try { + localStorage.tokens = JSON.stringify(tokens); + } catch (err) {} // eslint-disable-line +} + +function loadTokens() { + if (tokenCache === undefined) { + try { + const tokens = localStorage.tokens; + tokenCache = tokens ? JSON.parse(tokens) : null; + } catch (err) { + tokenCache = null; + } + } + return tokenCache; +} + +window.refreshToken = () => { + const tokens = loadTokens(); + + if (tokens === null) { + return redirectLogin(); + } + + return refreshToken_(clientId(), tokens.refresh_token).then((accessTokenResp) => { + const newTokens = Object.assign({}, tokens, accessTokenResp); + storeTokens(newTokens); + return newTokens; + }, () => redirectLogin()); +}; function resolveCode(code) { fetchToken(clientId(), code).then((tokens) => { - localStorage.tokens = JSON.stringify(tokens); + storeTokens(tokens); // Refresh the page and have tokens in place. - document.location = location.pathname; + document.location.href = location.pathname; }, (err) => { // eslint-disable-next-line console.error('Resolve token failed', err); @@ -68,29 +94,24 @@ function main() { return; } } - if (localStorage.tokens) { - window.tokens = JSON.parse(localStorage.tokens); - if (window.tokens.expires === undefined) { - // for those tokens got from previous version - window.tokens.expires = Date.now() - 1; - } - if (Date.now() + 30000 > window.tokens.expires) { - // refresh access token if it will expire in 30 seconds to avoid invalid auth event - window.hassConnection = window.refreshToken().then(accessToken => init(null, accessToken)); - } else { - const accessTokenObject = { - access_token: window.tokens.access_token, - expires: window.tokens.expires - }; - window.hassConnection = init(null, accessTokenObject).catch((err) => { - if (err !== ERR_INVALID_AUTH) throw err; + const tokens = loadTokens(); - return window.refreshToken().then(accessToken => init(null, accessToken)); - }); - } + if (tokens == null) { + redirectLogin(); return; } - redirectLogin(); + + if (Date.now() + 30000 > tokens.expires) { + // refresh access token if it will expire in 30 seconds to avoid invalid auth event + window.hassConnection = window.refreshToken().then(newTokens => init(null, newTokens)); + return; + } + + window.hassConnection = init(null, tokens).catch((err) => { + if (err !== ERR_INVALID_AUTH) throw err; + + return window.refreshToken().then(newTokens => init(null, newTokens)); + }); } function mainLegacy() { diff --git a/src/managers/notification-manager.js b/src/managers/notification-manager.js index 99b754a959..98cf7747e9 100644 --- a/src/managers/notification-manager.js +++ b/src/managers/notification-manager.js @@ -1,9 +1,10 @@ -import '@polymer/paper-toast/paper-toast.js'; import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import LocalizeMixin from '../mixins/localize-mixin.js'; +import '../components/ha-toast.js'; + class NotificationManager extends LocalizeMixin(PolymerElement) { static get template() { return html` @@ -13,8 +14,17 @@ class NotificationManager extends LocalizeMixin(PolymerElement) { } - - + + + `; } @@ -62,28 +72,6 @@ class NotificationManager extends LocalizeMixin(PolymerElement) { return wasConnected && hass && !hass.connected; } - constructor() { - super(); - this.handleWindowChange = this.handleWindowChange.bind(this); - this._mediaq = window.matchMedia('(max-width: 599px)'); - this._mediaq.addListener(this.handleWindowChange); - } - - connectedCallback() { - super.connectedCallback(); - this.handleWindowChange(this._mediaq); - } - - disconnectedCallback() { - super.disconnectedCallback(); - this._mediaq.removeListener(this.handleWindowChange); - } - - handleWindowChange(ev) { - this.$.toast.classList.toggle('fit-bottom', ev.matches); - this.$.connToast.classList.toggle('fit-bottom', ev.matches); - } - showDialog({ message }) { this.$.toast.show(message); }