Revert "Remove strict connections" (#20685)

Revert "Remove strict connections (#20662)"

This reverts commit 1df92fa.

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

@@ -7,11 +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,
@@ -21,6 +23,7 @@ import {
 } from "../../../../data/cloud";
 import type { HomeAssistant } from "../../../../types";
 import { showToast } from "../../../../util/toast";
+import { showAlertDialog } from "../../../lovelace/custom-card-helpers";
 import { showCloudCertificateDialog } from "../dialog-cloud-certificate/show-dialog-cloud-certificate";
 
 @customElement("cloud-remote-pref")
@@ -176,6 +179,125 @@ export class CloudRemotePref extends LitElement {
               "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"
+                    )}
+                    ${strict_connection === "guard_page"
+                      ? html`
+                          <br /><br />
+                          ⚠️
+                          ${this.hass.localize(
+                            "ui.panel.config.cloud.account.remote.strict_connection_option_guard_page_warning"
+                          )}
+                        `
+                      : nothing}
+                  </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"
+                    )}
+                    ${strict_connection === "drop_connection"
+                      ? html`
+                          <br /><br />
+                          ⚠️
+                          ${this.hass.localize(
+                            "ui.panel.config.cloud.account.remote.strict_connection_option_drop_connection_warning"
+                          )}
+                        `
+                      : nothing}
+                  </div>
+                </div>
+              </ha-formfield>
+            </div>
+
+            ${strict_connection !== "disabled"
+              ? html`
+                  <ha-settings-row .narrow=${this.narrow}>
+                    <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 wrap-heading>
               <span slot="heading"
                 >${this.hass.localize(
@@ -267,6 +389,24 @@ export class CloudRemotePref extends LitElement {
     }
   }
 
+  private async _strictConnectionModeChanged(ev) {
+    const toggle = ev.target as HaRadio;
+
+    if (ev.target.value === this.cloudStatus?.prefs.strict_connection) {
+      return;
+    }
+
+    try {
+      await updateCloudPref(this.hass, {
+        strict_connection: ev.target.value,
+      });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err: any) {
+      alert(err.message);
+      toggle.checked = !toggle.checked;
+    }
+  }
+
   private async _copyURL(ev): Promise<void> {
     const url = ev.currentTarget.url;
     await copyToClipboard(url);
@@ -275,6 +415,45 @@ export class CloudRemotePref extends LitElement {
     });
   }
 
+  private async _createLoginUrl() {
+    try {
+      const result = await this.hass.callService(
+        "cloud",
+        "create_temporary_strict_connection_url",
+        undefined,
+        undefined,
+        false,
+        true
+      );
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.cloud.account.remote.strict_connection_link"
+        ),
+        text: html`${this.hass.localize(
+            "ui.panel.config.cloud.account.remote.strict_connection_link_created_message"
+          )}
+          <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.copy_link"
+              )}
+            </ha-button>
+          </div>`,
+      });
+    } catch (err: any) {
+      showAlertDialog(this, { text: err.message });
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .preparing {
@@ -359,6 +538,28 @@ 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;
+      }
+      .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;
+        margin-bottom: 4px;
+      }
+      .strict-connection-container .secondary {
+        color: var(--secondary-text-color);
+        font-size: 12px;
+      }
       hr {
         border: none;
         height: 1px;