Still have manual input if camera is not supported (#10849)

* Still have manual input if camera is not supported

* Adjust & fix

src/components/ha-qr-scanner.ts

@@ -1,5 +1,7 @@
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-select/mwc-select";
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
 import { mdiCamera } from "@mdi/js";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -9,6 +11,7 @@ import { stopPropagation } from "../common/dom/stop_propagation";
 import { LocalizeFunc } from "../common/translations/localize";
 import "./ha-alert";
 import "./ha-button-menu";
+import "@material/mwc-button/mwc-button";
 
 @customElement("ha-qr-scanner")
 class HaQrScanner extends LitElement {
@@ -26,6 +29,8 @@ class HaQrScanner extends LitElement {
 
   @query("#canvas-container", true) private _canvasContainer!: HTMLDivElement;
 
+  @query("mwc-textfield") private _manualInput?: TextField;
+
   public disconnectedCallback(): void {
     super.disconnectedCallback();
     this._qrNotFoundCount = 0;
@@ -74,7 +79,7 @@ class HaQrScanner extends LitElement {
                   <ha-icon-button
                     slot="trigger"
                     .label=${this.localize(
-                      "ui.panel.config.zwave_js.add_node.select_camera"
+                      "ui.components.qr-scanner.select_camera"
                     )}
                     .path=${mdiCamera}
                   ></ha-icon-button>
@@ -90,11 +95,22 @@ class HaQrScanner extends LitElement {
                 </ha-button-menu>`
               : ""}
           </div>`
-      : html`<ha-alert alert-type="warning"
+      : html`<ha-alert alert-type="warning">
-          >${!window.isSecureContext
+            ${!window.isSecureContext
-            ? "You can only use your camera to scan a QR core when using HTTPS."
+              ? this.localize("ui.components.qr-scanner.only_https_supported")
-            : "Your browser doesn't support QR scanning."}</ha-alert
+              : this.localize("ui.components.qr-scanner.not_supported")}
-        >`}`;
+          </ha-alert>
+          <p>${this.localize("ui.components.qr-scanner.manual_input")}</p>
+          <div class="row">
+            <mwc-textfield
+              .label=${this.localize("ui.components.qr-scanner.enter_qr_code")}
+              @keyup=${this._manualKeyup}
+              @paste=${this._manualPaste}
+            ></mwc-textfield>
+            <mwc-button @click=${this._manualSubmit}
+              >${this.localize("ui.common.submit")}</mwc-button
+            >
+          </div>`}`;
   }
 
   private async _loadQrScanner() {
@@ -143,6 +159,23 @@ class HaQrScanner extends LitElement {
     fireEvent(this, "qr-code-scanned", { value: qrCodeString });
   };
 
+  private _manualKeyup(ev: KeyboardEvent) {
+    if (ev.key === "Enter") {
+      this._qrCodeScanned((ev.target as TextField).value);
+    }
+  }
+
+  private _manualPaste(ev: ClipboardEvent) {
+    this._qrCodeScanned(
+      // @ts-ignore
+      (ev.clipboardData || window.clipboardData).getData("text")
+    );
+  }
+
+  private _manualSubmit() {
+    this._qrCodeScanned(this._manualInput!.value);
+  }
+
   private _cameraChanged(ev: CustomEvent): void {
     this._qrScanner?.setCamera((ev.target as any).value);
   }
@@ -162,6 +195,14 @@ class HaQrScanner extends LitElement {
       color: white;
       border-radius: 50%;
     }
+    .row {
+      display: flex;
+      align-items: center;
+    }
+    mwc-textfield {
+      flex: 1;
+      margin-right: 8px;
+    }
   `;
 }
 

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts

@@ -178,7 +178,10 @@ class DialogZWaveJSAddNode extends LitElement {
                 Search device
               </mwc-button>`
           : this._status === "qr_scan"
-          ? html`<ha-qr-scanner
+          ? html`${this._error
+                ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+                : ""}
+              <ha-qr-scanner
                 .localize=${this.hass.localize}
                 @qr-code-scanned=${this._qrCodeScanned}
               ></ha-qr-scanner>
@@ -194,9 +197,9 @@ class DialogZWaveJSAddNode extends LitElement {
                 </p>
                 ${
                   this._error
-                    ? html`<ha-alert alert-type="error"
+                    ? html`<ha-alert alert-type="error">
-                        >${this._error}</ha-alert
+                        ${this._error}
-                      >`
+                      </ha-alert>`
                     : ""
                 }
                 <div class="flex-container">
@@ -614,7 +617,6 @@ class DialogZWaveJSAddNode extends LitElement {
         ZWaveFeature.SmartStart
       )
     ).supported;
-    this._supportsSmartStart = true;
   }
 
   private _startOver(_ev: Event) {

src/translations/en.json

@@ -291,6 +291,7 @@
       "undo": "Undo",
       "move": "Move",
       "save": "Save",
+      "submit": "Submit",
       "rename": "Rename",
       "yes": "Yes",
       "no": "No",
@@ -538,6 +539,13 @@
       },
       "attributes": {
         "expansion_header": "Attributes"
+      },
+      "qr-scanner": {
+        "select_camera": "Select camera",
+        "only_https_supported": "You can only use your camera to scan a QR code when using HTTPS.",
+        "not_supported": "Your browser doesn't support QR scanning.",
+        "manual_input": "You can scan the QR code with another QR scanner and paste the code in the input below",
+        "enter_qr_code": "Enter QR code value"
       }
     },
     "dialogs": {
@@ -2920,8 +2928,6 @@
             "qr_code": "QR Code",
             "qr_code_paragraph": "If your device supports SmartStart you can scan the QR code for easy pairing.",
             "scan_qr_code": "Scan QR code",
-            "enter_qr_code": "Enter QR code value",
-            "select_camera": "Select camera",
             "inclusion_failed": "The device could not be added.",
             "check_logs": "Please check the logs for more information.",
             "inclusion_finished": "The device has been added.",