From 7aa296e774fc314b55d2e4ba95f8275ff8e35b95 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Fri, 15 Mar 2019 22:43:19 -0700 Subject: [PATCH] move cert info to a dialog (#2940) --- src/data/cloud.ts | 2 +- src/panels/config/cloud/cloud-remote-pref.ts | 63 +++++-------- .../config/cloud/dialog-cloud-certificate.ts | 89 +++++++++++++++++++ .../cloud/show-dialog-cloud-certificate.ts | 18 ++++ 4 files changed, 128 insertions(+), 44 deletions(-) create mode 100644 src/panels/config/cloud/dialog-cloud-certificate.ts create mode 100644 src/panels/config/cloud/show-dialog-cloud-certificate.ts diff --git a/src/data/cloud.ts b/src/data/cloud.ts index b15f8b3066..674d07b2af 100644 --- a/src/data/cloud.ts +++ b/src/data/cloud.ts @@ -11,7 +11,7 @@ interface CloudStatusBase { cloud: "disconnected" | "connecting" | "connected"; } -interface CertificateInformation { +export interface CertificateInformation { common_name: string; expire_date: string; fingerprint: string; diff --git a/src/panels/config/cloud/cloud-remote-pref.ts b/src/panels/config/cloud/cloud-remote-pref.ts index ee79d3f7db..07a747cdb1 100644 --- a/src/panels/config/cloud/cloud-remote-pref.ts +++ b/src/panels/config/cloud/cloud-remote-pref.ts @@ -13,7 +13,6 @@ import "@polymer/paper-toggle-button/paper-toggle-button"; import "@polymer/paper-item/paper-item-body"; // tslint:disable-next-line import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button"; -import "../../../components/buttons/ha-call-api-button"; import { fireEvent } from "../../../common/dom/fire_event"; import { HomeAssistant } from "../../../types"; @@ -22,7 +21,7 @@ import { disconnectCloudRemote, CloudStatusLoggedIn, } from "../../../data/cloud"; -import format_date_time from "../../../common/datetime/format_date_time"; +import { showCloudCertificateDialog } from "./show-dialog-cloud-certificate"; @customElement("cloud-remote-pref") export class CloudRemotePref extends LitElement { @@ -64,46 +63,36 @@ export class CloudRemotePref extends LitElement { @change="${this._toggleChanged}" >
- Home Assistant Cloud provides you with a secure remote connection to - your instance while away from home. Your instance + Home Assistant Cloud provides a secure remote connection to your + instance while away from home. Your instance ${remote_connected ? "is" : "will be"} available at https://${remote_domain}. - ${!remote_certificate - ? "" - : html` -
- - Certificate expiration date -
Will be automatically renewed
- -
- ${format_date_time( - new Date(remote_certificate.expire_date), - this.hass!.language - )} -
-
-
- - Certificate fingerprint - -
- ${remote_certificate.fingerprint} -
-
- `}
Learn how it works + ${remote_certificate + ? html` +
+ + Certificate Info + + ` + : ""}
`; } + private _openCertInfo() { + showCloudCertificateDialog(this, { + certificateInfo: this.cloudStatus!.remote_certificate!, + }); + } + private async _toggleChanged(ev) { const toggle = ev.target as PaperToggleButtonElement; @@ -127,12 +116,6 @@ export class CloudRemotePref extends LitElement { .preparing { padding: 0 16px 16px; } - .data-row { - display: flex; - } - .data-value { - padding: 16px 0; - } a { color: var(--primary-color); } @@ -141,17 +124,11 @@ export class CloudRemotePref extends LitElement { right: 8px; top: 16px; } - ha-call-api-button { - color: var(--primary-color); - font-weight: 500; - } - .unlock { + .card-actions { display: flex; - flex-direction: row; - padding-top: 16px; } - .unlock > div { - flex: 1; + .spacer { + flex-grow: 1; } `; } diff --git a/src/panels/config/cloud/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate.ts new file mode 100644 index 0000000000..a5d86e81e0 --- /dev/null +++ b/src/panels/config/cloud/dialog-cloud-certificate.ts @@ -0,0 +1,89 @@ +import { + html, + LitElement, + css, + CSSResult, + customElement, + property, +} from "lit-element"; + +import "@material/mwc-button"; +import "@polymer/paper-dialog/paper-dialog"; +// This is not a duplicate import, one is for types, one is for element. +// tslint:disable-next-line +import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; + +import { HomeAssistant } from "../../../types"; +import { haStyle } from "../../../resources/styles"; +import { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate"; +import format_date_time from "../../../common/datetime/format_date_time"; + +@customElement("dialog-cloud-certificate") +class DialogCloudCertificate extends LitElement { + public hass!: HomeAssistant; + + @property() + private _params?: CloudCertificateDialogParams; + + public async showDialog(params: CloudCertificateDialogParams) { + this._params = params; + // Wait till dialog is rendered. + await this.updateComplete; + this._dialog.open(); + } + + protected render() { + if (!this._params) { + return html``; + } + const { certificateInfo } = this._params; + + return html` + +

Certificate Information

+
+

+ Certificate expiration date: + ${format_date_time( + new Date(certificateInfo.expire_date), + this.hass!.language + )}
+ (Will be automatically renewed) +

+

+ Certificate fingerprint: ${certificateInfo.fingerprint} +

+
+ +
+ CLOSE +
+ + `; + } + + private get _dialog(): PaperDialogElement { + return this.shadowRoot!.querySelector("paper-dialog")!; + } + + private _closeDialog() { + this._dialog.close(); + } + + static get styles(): CSSResult[] { + return [ + haStyle, + css` + paper-dialog { + width: 535px; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "dialog-cloud-certificate": DialogCloudCertificate; + } +} diff --git a/src/panels/config/cloud/show-dialog-cloud-certificate.ts b/src/panels/config/cloud/show-dialog-cloud-certificate.ts new file mode 100644 index 0000000000..d1d085c4ca --- /dev/null +++ b/src/panels/config/cloud/show-dialog-cloud-certificate.ts @@ -0,0 +1,18 @@ +import { fireEvent } from "../../../common/dom/fire_event"; +import { CertificateInformation } from "../../../data/cloud"; + +export interface CloudCertificateParams { + certificateInfo: CertificateInformation; +} + +export const showCloudCertificateDialog = ( + element: HTMLElement, + webhookDialogParams: CloudCertificateParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "dialog-cloud-certificate", + dialogImport: () => + import(/* webpackChunkName: "dialog-cloud-certificate" */ "./dialog-cloud-certificate"), + dialogParams: webhookDialogParams, + }); +};