Change again
This commit is contained in:
Bram Kragten
Paul Bottein
parent
52d6fc492d
commit
bdb38373d7
|
|
@ -1,13 +1,29 @@
|
|||
import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
|
||||
import { styles } from "@material/mwc-formfield/mwc-formfield.css";
|
||||
import { css } from "lit";
|
||||
import { css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
|
||||
@customElement("ha-formfield")
|
||||
export class HaFormfield extends FormfieldBase {
|
||||
@property({ type: Boolean, reflect: true }) public disabled = false;
|
||||
|
||||
protected override render() {
|
||||
const classes = {
|
||||
"mdc-form-field--align-end": this.alignEnd,
|
||||
"mdc-form-field--space-between": this.spaceBetween,
|
||||
"mdc-form-field--nowrap": this.nowrap,
|
||||
};
|
||||
|
||||
return html` <div class="mdc-form-field ${classMap(classes)}">
|
||||
<slot></slot>
|
||||
<label class="mdc-label" @click=${this._labelClick}
|
||||
><slot name="label">${this.label}</slot></label
|
||||
>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
protected _labelClick() {
|
||||
const input = this.input as HTMLInputElement | undefined;
|
||||
if (!input) return;
|
||||
|
|
@ -39,6 +55,9 @@ export class HaFormfield extends FormfieldBase {
|
|||
margin-inline-end: 10px;
|
||||
margin-inline-start: inline;
|
||||
}
|
||||
.mdc-form-field {
|
||||
align-items: var(--ha-formfield-align-items, center);
|
||||
}
|
||||
.mdc-form-field > label {
|
||||
direction: var(--direction);
|
||||
margin-inline-start: 0;
|
||||
|
|
|
|||
|
|
@ -7,10 +7,13 @@ import "../../../../components/ha-alert";
|
|||
import "../../../../components/ha-button";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-expansion-panel";
|
||||
import "../../../../components/ha-formfield";
|
||||
import "../../../../components/ha-radio";
|
||||
import "../../../../components/ha-settings-row";
|
||||
import "../../../../components/ha-switch";
|
||||
// eslint-disable-next-line
|
||||
import { formatDate } from "../../../../common/datetime/format_date";
|
||||
import type { HaRadio } from "../../../../components/ha-radio";
|
||||
import type { HaSwitch } from "../../../../components/ha-switch";
|
||||
import {
|
||||
CloudStatusLoggedIn,
|
||||
|
|
@ -20,8 +23,8 @@ import {
|
|||
} from "../../../../data/cloud";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import { showToast } from "../../../../util/toast";
|
||||
import { showCloudCertificateDialog } from "../dialog-cloud-certificate/show-dialog-cloud-certificate";
|
||||
import { showAlertDialog } from "../../../lovelace/custom-card-helpers";
|
||||
import { showCloudCertificateDialog } from "../dialog-cloud-certificate/show-dialog-cloud-certificate";
|
||||
|
||||
@customElement("cloud-remote-pref")
|
||||
export class CloudRemotePref extends LitElement {
|
||||
|
|
@ -75,6 +78,27 @@ export class CloudRemotePref extends LitElement {
|
|||
`;
|
||||
}
|
||||
|
||||
const createLoginLink =
|
||||
strict_connection !== "disabled"
|
||||
? html`<ha-settings-row class="login-link">
|
||||
<span slot="heading"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.strict_connection_link"
|
||||
)}</span
|
||||
>
|
||||
<span slot="description"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.strict_connection_link_secondary"
|
||||
)}</span
|
||||
>
|
||||
<ha-button @click=${this._createLoginUrl}
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.strict_connection_create_link"
|
||||
)}</ha-button
|
||||
>
|
||||
</ha-settings-row>`
|
||||
: nothing;
|
||||
|
||||
return html`
|
||||
<ha-card
|
||||
outlined
|
||||
|
|
@ -169,68 +193,85 @@ export class CloudRemotePref extends LitElement {
|
|||
</ha-button>
|
||||
</div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.strict_connection"
|
||||
)}</span
|
||||
>
|
||||
<span slot="description"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.strict_connection_secondary"
|
||||
)}</span
|
||||
>
|
||||
|
||||
<ha-switch
|
||||
.checked=${strict_connection === "disabled"}
|
||||
@change=${this._strictConnectionToggleChanged}
|
||||
></ha-switch>
|
||||
</ha-settings-row>
|
||||
|
||||
${strict_connection !== "disabled"
|
||||
? html`<ha-settings-row>
|
||||
<span slot="heading"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.strict_connection_link"
|
||||
)}</span
|
||||
>
|
||||
<span slot="description"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.strict_connection_link_secondary"
|
||||
)}</span
|
||||
>
|
||||
<ha-button @click=${this._createLoginUrl}
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.strict_connection_create_link"
|
||||
)}</ha-button
|
||||
>
|
||||
</ha-settings-row>`
|
||||
: nothing}
|
||||
|
||||
<ha-expansion-panel
|
||||
outlined
|
||||
.header=${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.advanced_options"
|
||||
"ui.panel.config.cloud.account.remote.security_options"
|
||||
)}
|
||||
>
|
||||
${strict_connection !== "disabled"
|
||||
? html` <ha-settings-row>
|
||||
<span slot="heading"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.guard_page"
|
||||
)}</span
|
||||
>
|
||||
<span slot="description"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.guard_page_secondary"
|
||||
)}</span
|
||||
>
|
||||
<ha-switch
|
||||
.checked=${strict_connection === "guard_page"}
|
||||
@change=${this._dropConnectionToggleChanged}
|
||||
></ha-switch>
|
||||
</ha-settings-row>`
|
||||
: nothing}
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Remote login access</span>
|
||||
<span slot="description"
|
||||
>Choose what happens when new devices visit your remote access
|
||||
link.</span
|
||||
>
|
||||
</ha-settings-row>
|
||||
|
||||
<div class="strict-connection-container">
|
||||
<ha-formfield>
|
||||
<ha-radio
|
||||
name="strict-connection-mode"
|
||||
value="disabled"
|
||||
.checked=${strict_connection === "disabled"}
|
||||
@change=${this._strictConnectionModeChanged}
|
||||
></ha-radio>
|
||||
<div slot="label">
|
||||
Show login page
|
||||
<div class="secondary">
|
||||
Any new device visiting your remote access link are
|
||||
presented with a login page.
|
||||
</div>
|
||||
</div>
|
||||
</ha-formfield>
|
||||
|
||||
<ha-formfield>
|
||||
<ha-radio
|
||||
name="strict-connection-mode"
|
||||
value="guard_page"
|
||||
.checked=${strict_connection === "guard_page"}
|
||||
@change=${this._strictConnectionModeChanged}
|
||||
></ha-radio>
|
||||
<div slot="label">
|
||||
Block remote logins
|
||||
<div class="secondary">
|
||||
New devices must log in with a temporary access link.
|
||||
Devices accessing the link that are not logged in will be
|
||||
presented with a page explaining the restrictions.
|
||||
<br /><br />
|
||||
⚠️ This prevents outsiders from trying to log in to your
|
||||
system but also your own devices if they have not logged in
|
||||
previously.
|
||||
</div>
|
||||
</div>
|
||||
</ha-formfield>
|
||||
|
||||
${strict_connection === "guard_page" ? createLoginLink : nothing}
|
||||
|
||||
<ha-formfield>
|
||||
<ha-radio
|
||||
name="strict-connection-mode"
|
||||
value="drop_connection"
|
||||
.checked=${strict_connection === "drop_connection"}
|
||||
@change=${this._strictConnectionModeChanged}
|
||||
></ha-radio>
|
||||
<div slot="label">
|
||||
Block remote logins and show nothing
|
||||
<div class="secondary">
|
||||
This is the same as the above setting but instead provides a
|
||||
blank page for additional security.
|
||||
<br /><br />
|
||||
⚠️ This prevents outsiders from snooping the remote web
|
||||
address and trying to log in, but it may appear as if there
|
||||
is no system running when users try to access it.
|
||||
</div>
|
||||
</div>
|
||||
</ha-formfield>
|
||||
|
||||
${strict_connection === "drop_connection"
|
||||
? createLoginLink
|
||||
: nothing}
|
||||
</div>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading"
|
||||
>${this.hass.localize(
|
||||
|
|
@ -321,26 +362,16 @@ export class CloudRemotePref extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
private async _strictConnectionToggleChanged(ev) {
|
||||
const toggle = ev.target as HaSwitch;
|
||||
private async _strictConnectionModeChanged(ev) {
|
||||
const toggle = ev.target as HaRadio;
|
||||
|
||||
try {
|
||||
await updateCloudPref(this.hass, {
|
||||
strict_connection: toggle.checked ? "disabled" : "guard_page",
|
||||
});
|
||||
fireEvent(this, "ha-refresh-cloud-status");
|
||||
} catch (err: any) {
|
||||
alert(err.message);
|
||||
toggle.checked = !toggle.checked;
|
||||
if (ev.target.value === this.cloudStatus?.prefs.strict_connection) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
private async _dropConnectionToggleChanged(ev) {
|
||||
const toggle = ev.target as HaSwitch;
|
||||
|
||||
try {
|
||||
await updateCloudPref(this.hass, {
|
||||
strict_connection: toggle.checked ? "guard_page" : "drop_connection",
|
||||
strict_connection: ev.target.value,
|
||||
});
|
||||
fireEvent(this, "ha-refresh-cloud-status");
|
||||
} catch (err: any) {
|
||||
|
|
@ -479,6 +510,23 @@ export class CloudRemotePref extends LitElement {
|
|||
color: var(--secondary-text-color);
|
||||
direction: var(--direction);
|
||||
}
|
||||
ha-formfield {
|
||||
margin-left: -12px;
|
||||
margin-inline-start: -12px;
|
||||
--ha-formfield-align-items: start;
|
||||
}
|
||||
.secondary {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.login-link {
|
||||
padding-left: 42px;
|
||||
--paper-item-body-two-line-min-height: 0;
|
||||
}
|
||||
.strict-connection-container {
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3837,17 +3837,13 @@
|
|||
"show_url": "Show full URL",
|
||||
"hide_url": "Hide URL",
|
||||
"copy_link": "Copy link",
|
||||
"advanced_options": "Advanced options",
|
||||
"security_options": "Security options",
|
||||
"external_activation": "Allow external activation of remote control",
|
||||
"external_activation_secondary": "Allows you to turn on remote control from your Nabu Casa account page, even if you're outside your local network",
|
||||
"strict_connection": "Allow logging in remotely",
|
||||
"strict_connection_secondary": "The login page will be accessible outside your local network.",
|
||||
"guard_page": "Show guard page",
|
||||
"guard_page_secondary": "This page will be shown for devices that aren't logged in. When disabled it will look like there is no system running.",
|
||||
"drop_connection_warning_title": "Guard page is not activated",
|
||||
"drop_connection_warning": "There will be no response from your instance when someone tries to access the login page. This will look like your instance is offline.",
|
||||
"strict_connection_link": "Create login link",
|
||||
"strict_connection_link_secondary": "You can create a link that will give temporary access to the login page.",
|
||||
"drop_connection_warning_title": "You have blocked remote logins",
|
||||
"drop_connection_warning": "There will be no response from your instance when a new device visits remote URL. This will look like your instance is not working.",
|
||||
"strict_connection_link": "Provide temporary login access",
|
||||
"strict_connection_link_secondary": "This provides a link for new devices to login for the next hour.",
|
||||
"strict_connection_create_link": "Create link",
|
||||
"strict_connection_link_created_message": "Give this link to the person you want to give remote access to the login page of your Home Assistant instance.",
|
||||
"certificate_info": "Certificate info",
|
||||
|
|
|
|||
Loading…
Reference in New Issue