Cleanups (#1566)

* Cleanup core.js

* Add ha-toast

* Lint

* Remove unused import

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);

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() {

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) {
       }
     </style>
 
-    <paper-toast id="toast" no-cancel-on-outside-click="[[_cancelOnOutsideClick]]"></paper-toast>
-    <paper-toast id="connToast" duration="0" text="[[localize('ui.notification_toast.connection_lost')]]" opened="[[connectionLost]]"></paper-toast>
+    <ha-toast
+      id="toast"
+      no-cancel-on-outside-click="[[_cancelOnOutsideClick]]"
+    ></ha-toast>
+
+    <ha-toast
+      id="connToast"
+      duration="0"
+      text="[[localize('ui.notification_toast.connection_lost')]]"
+      opened="[[connectionLost]]"
+    ></ha-toast>
 `;
   }
 
@@ -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);
   }