Update cloud remote settings (#20619)

* Update cloud remote settings

* Change again

* Update cloud-remote-pref.ts

* Update UI

* Add missing translations

* use hr and simplify condition

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

src/components/ha-formfield.ts

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

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -1,16 +1,19 @@
-import { mdiContentCopy, mdiHelpCircle } from "@mdi/js";
+import { mdiContentCopy, mdiEye, mdiEyeOff, mdiHelpCircle } from "@mdi/js";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 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 {
@@ -29,6 +32,8 @@ export class CloudRemotePref extends LitElement {
 
   @property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn;
 
+  @state() private _unmaskedUrl = false;
+
   protected render() {
     if (!this.cloudStatus) {
       return nothing;
@@ -109,35 +114,180 @@ export class CloudRemotePref extends LitElement {
                   )}
                 ></ha-alert>
               `
-            : ""}
+            : strict_connection === "drop_connection"
-          ${this.hass.localize("ui.panel.config.cloud.account.remote.info")}
+              ? html`<ha-alert
-          ${this.hass.localize(
+                  alert-type="warning"
-            `ui.panel.config.cloud.account.remote.${
+                  .title=${this.hass.localize(
-              remote_connected
+                    `ui.panel.config.cloud.account.remote.drop_connection_warning_title`
-                ? "instance_is_available"
-                : "instance_will_be_available"
-            }`
                   )}
-          <a
-            href="https://${remote_domain}"
-            target="_blank"
-            class="break-word"
-            rel="noreferrer"
                   >${this.hass.localize(
-              "ui.panel.config.cloud.account.remote.nabu_casa_url"
+                    `ui.panel.config.cloud.account.remote.drop_connection_warning`
-            )}</a
+                  )}</ha-alert
-          >.
+                >`
-          <ha-svg-icon
+              : nothing}
+          <p>
+            ${this.hass.localize("ui.panel.config.cloud.account.remote.info")}
+          </p>
+          ${remote_connected
+            ? nothing
+            : html`
+                <p>
+                  ${this.hass.localize(
+                    "ui.panel.config.cloud.account.remote.info_instance_will_be_available"
+                  )}
+                </p>
+              `}
+          <div class="url-container">
+            <div class="textfield-container">
+              <ha-textfield
+                .value=${this._unmaskedUrl
+                  ? `https://${remote_domain}`
+                  : "https://•••••••••••••••••.ui.nabu.casa"}
+                readonly
+                .suffix=${
+                  // reserve some space for the icon.
+                  html`<div style="width: 24px"></div>`
+                }
+              ></ha-textfield>
+              <ha-icon-button
+                class="toggle-unmasked-url"
+                toggles
+                .label=${this.hass.localize(
+                  `ui.panel.config.cloud.account.remote.${this._unmaskedUrl ? "hide" : "show"}_url`
+                )}
+                @click=${this._toggleUnmaskedUrl}
+                .path=${this._unmaskedUrl ? mdiEyeOff : mdiEye}
+              ></ha-icon-button>
+            </div>
+            <ha-button
               .url=${`https://${remote_domain}`}
               @click=${this._copyURL}
-            .path=${mdiContentCopy}
+              unelevated
-          ></ha-svg-icon>
+            >
+              <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
+              ${this.hass.localize(
+                "ui.panel.config.cloud.account.remote.copy_link"
+              )}
+            </ha-button>
+          </div>
+
           <ha-expansion-panel
             outlined
             .header=${this.hass.localize(
-              "ui.panel.config.cloud.account.remote.advanced_options"
+              "ui.panel.config.cloud.account.remote.security_options"
             )}
           >
+            <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-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">
+                  <div class="primary">
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.strict_connection_option_disabled"
+                    )}
+                  </div>
+                  <div class="secondary">
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.strict_connection_option_disabled_secondary"
+                    )}
+                  </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">
+                  <div class="primary">
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.strict_connection_option_guard_page"
+                    )}
+                  </div>
+                  <div class="secondary">
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.strict_connection_option_guard_page_secondary"
+                    )}
+                    <br /><br />
+                    ⚠️
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.strict_connection_option_guard_page_warning"
+                    )}
+                  </div>
+                </div>
+              </ha-formfield>
+
+              <ha-formfield>
+                <ha-radio
+                  name="strict-connection-mode"
+                  value="drop_connection"
+                  .checked=${strict_connection === "drop_connection"}
+                  @change=${this._strictConnectionModeChanged}
+                ></ha-radio>
+                <div slot="label">
+                  <div class="primary">
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.strict_connection_option_drop_connection"
+                    )}
+                  </div>
+                  <div class="secondary">
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.strict_connection_option_drop_connection_secondary"
+                    )}
+                    <br /><br />
+                    ⚠️
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.strict_connection_option_drop_connection_warning"
+                    )}
+                  </div>
+                </div>
+              </ha-formfield>
+            </div>
+
+            ${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}
+
+            <hr />
             <ha-settings-row>
               <span slot="heading"
                 >${this.hass.localize(
@@ -154,61 +304,7 @@ export class CloudRemotePref extends LitElement {
                 @change=${this._toggleAllowRemoteEnabledChanged}
               ></ha-switch>
             </ha-settings-row>
-            <ha-settings-row>
+            <hr />
-              <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-select
-                .label=${this.hass.localize(
-                  "ui.panel.config.cloud.account.remote.strict_connection_mode"
-                )}
-                @selected=${this._setStrictConnectionMode}
-                naturalMenuWidth
-                .value=${strict_connection}
-              >
-                <ha-list-item value="disabled">
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.account.remote.strict_connection_modes.disabled"
-                  )}
-                </ha-list-item>
-                <ha-list-item value="guard_page">
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.account.remote.strict_connection_modes.guard_page"
-                  )}
-                </ha-list-item>
-                <ha-list-item value="drop_connection">
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.account.remote.strict_connection_modes.drop_connection"
-                  )}
-                </ha-list-item>
-              </ha-select>
-            </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-settings-row>
               <span slot="heading"
                 >${this.hass.localize(
@@ -249,6 +345,10 @@ export class CloudRemotePref extends LitElement {
     });
   }
 
+  private _toggleUnmaskedUrl(): void {
+    this._unmaskedUrl = !this._unmaskedUrl;
+  }
+
   private async _toggleChanged(ev) {
     const toggle = ev.target as HaSwitch;
 
@@ -279,15 +379,21 @@ export class CloudRemotePref extends LitElement {
     }
   }
 
-  private async _setStrictConnectionMode(ev) {
+  private async _strictConnectionModeChanged(ev) {
-    const mode = ev.target.value;
+    const toggle = ev.target as HaRadio;
+
+    if (ev.target.value === this.cloudStatus?.prefs.strict_connection) {
+      return;
+    }
+
     try {
       await updateCloudPref(this.hass, {
-        strict_connection: mode,
+        strict_connection: ev.target.value,
       });
       fireEvent(this, "ha-refresh-cloud-status");
     } catch (err: any) {
       alert(err.message);
+      toggle.checked = !toggle.checked;
     }
   }
 
@@ -316,17 +422,22 @@ export class CloudRemotePref extends LitElement {
         text: html`${this.hass.localize(
             "ui.panel.config.cloud.account.remote.strict_connection_link_created_message"
           )}
-          <pre>${result.response.url}</pre>
+          <div
+            style="display: flex; align-items: center; gap: 8px; margin-top: 8px;"
+          >
+            <ha-textfield .value=${result.response.url} readonly></ha-textfield>
             <ha-button
+              style="flex-basis: 180px;"
               .url=${result.response.url}
               @click=${this._copyURL}
               unelevated
             >
               <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
               ${this.hass.localize(
-              "ui.panel.config.cloud.account.remote.strict_connection_copy_link"
+                "ui.panel.config.cloud.account.remote.copy_link"
               )}
-          </ha-button>`,
+            </ha-button>
+          </div>`,
       });
     } catch (err: any) {
       showAlertDialog(this, { text: err.message });
@@ -343,8 +454,8 @@ export class CloudRemotePref extends LitElement {
       }
       .header-actions {
         position: absolute;
-        right: 24px;
+        right: 16px;
-        inset-inline-end: 24px;
+        inset-inline-end: 16px;
         inset-inline-start: initial;
         top: 24px;
         display: flex;
@@ -378,17 +489,71 @@ export class CloudRemotePref extends LitElement {
       .card-actions a {
         text-decoration: none;
       }
-      ha-svg-icon {
+      ha-expansion-panel {
-        --mdc-icon-size: 18px;
+        margin-top: 16px;
-        color: var(--secondary-text-color);
-        cursor: pointer;
       }
-      ha-formfield {
+      ha-settings-row {
-        margin-top: 8px;
+        padding: 0;
       }
       ha-expansion-panel {
+        --expansion-panel-content-padding: 0 16px;
+        --expansion-panel-summary-padding: 0 16px;
+      }
+      ha-alert {
+        display: block;
+        margin-bottom: 16px;
+      }
+      .url-container {
+        display: flex;
+        align-items: center;
+        gap: 8px;
         margin-top: 8px;
       }
+      .textfield-container {
+        position: relative;
+        flex: 1;
+      }
+      .textfield-container ha-textfield {
+        display: block;
+      }
+      .toggle-unmasked-url {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        inset-inline-start: initial;
+        inset-inline-end: 8px;
+        --mdc-icon-button-size: 40px;
+        --mdc-icon-size: 20px;
+        color: var(--secondary-text-color);
+        direction: var(--direction);
+      }
+      ha-formfield {
+        margin-left: -12px;
+        margin-inline-start: -12px;
+        --ha-formfield-align-items: start;
+      }
+      .strict-connection-container {
+        gap: 16px;
+        display: flex;
+        flex-direction: column;
+      }
+      .strict-connection-container ha-formfield {
+        --ha-formfield-align-items: start;
+      }
+      .strict-connection-container .primary {
+        font-size: 14px;
+        margin-top: 12px;
+      }
+      .strict-connection-container .secondary {
+        color: var(--secondary-text-color);
+        font-size: 12px;
+      }
+      hr {
+        border: none;
+        height: 1px;
+        background-color: var(--divider-color);
+        margin: 8px 0;
+      }
     `;
   }
 }

src/translations/en.json

@@ -3821,38 +3821,42 @@
               }
             },
             "remote": {
-              "title": "Remote control",
+              "title": "Remote access",
               "connected": "Connected",
               "not_connected": "Not connected",
               "reconnecting": "Not connected. Trying to reconnect.",
-              "access_is_being_prepared": "Remote control is being prepared. We will notify you when it's ready.",
+              "access_is_being_prepared": "Remote access is being prepared. We will notify you when it's ready.",
               "cerificate_loading": "Your certificate is loading.",
               "cerificate_loaded": "Your certificate is loaded, waiting for validation.",
               "cerificate_error": "There was an error generating the certificate, check your logs.",
-              "info": "Home Assistant Cloud provides a secure remote connection to your instance while away from home.",
+              "info": "Home Assistant Cloud provides a secure remote access to your instance while away from home. For more information on remote access and these settings visit our security documentation.",
-              "instance_is_available": "Your instance is available at your",
+              "info_instance_will_be_available": "Your instance will be available at your Nabu Casa URL.",
-              "instance_will_be_available": "Your instance will be available at your",
               "link_learn_how_it_works": "Learn how it works",
-              "nabu_casa_url": "Nabu Casa URL",
+              "show_url": "Show full URL",
-              "advanced_options": "Advanced options",
+              "hide_url": "Hide URL",
-              "external_activation": "Allow external activation of remote control",
+              "copy_link": "Copy link",
-              "external_activation_secondary": "Allows you to turn on remote control from your Nabu Casa account page, even if you're outside your local network",
+              "security_options": "Security options",
-              "strict_connection": "Restrict access to logged in users",
+              "strict_connection": "Remote login access",
-              "strict_connection_secondary": "When a user is not logged in to your Home Assistant instance, they will not be able to access your instance remotely",
+              "strict_connection_secondary": "Choose what happens when new devices visit your remote access link.",
-              "strict_connection_mode": "Mode",
+              "strict_connection_option_disabled": "Show login page",
-              "strict_connection_modes": {
+              "strict_connection_option_disabled_secondary": "Any new device visiting your remote access link are presented with a login page.",
-                "disabled": "Disabled",
+              "strict_connection_option_guard_page": "Block remote logins",
-                "guard_page": "Guard page",
+              "strict_connection_option_guard_page_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.",
-                "drop_connection": "Drop connection"
+              "strict_connection_option_guard_page_warning": "This prevents outsiders from trying to log in to your system but also your own devices if they have not logged in previously.",
-              },
+              "strict_connection_option_drop_connection": "Block remote logins and show nothing",
-              "strict_connection_link": "Create login link",
+              "strict_connection_option_drop_connection_secondary": "This is the same as the above setting but instead provides a blank page for additional security.",
-              "strict_connection_link_secondary": "You can create a link that will give temporary access to the login page.",
+              "strict_connection_option_drop_connection_warning": "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.",
+              "external_activation": "Allow external activation of remote access",
+              "external_activation_secondary": "If you disable remote access on this page, having this setting enabled allows you to reactivate it remotely via your Nabu Casa account.",
+              "drop_connection_warning_title": "Remote log in has been deactivated",
+              "drop_connection_warning": "The below security options may make it appear the system is not running.",
+              "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.",
-              "strict_connection_copy_link": "Copy link",
+              "certificate_info": "Certificate information",
-              "certificate_info": "Certificate info",
+              "certificate_expire": "Certificate renewal at {date}",
-              "certificate_expire": "Will be renewed at {date}",
+              "more_info": "More details"
-              "more_info": "More info"
             },
             "alexa": {
               "title": "Alexa",