Always show QR code, and with white bg (#11434)

package.json

@@ -168,6 +168,7 @@
     "@types/leaflet-draw": "^1",
     "@types/marked": "^2",
     "@types/mocha": "^8",
+    "@types/qrcode": "^1.4.2",
     "@types/sortablejs": "^1",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.32.0",

src/panels/config/tags/dialog-tag-detail.ts

@@ -1,6 +1,13 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../components/ha-dialog";
@@ -121,16 +128,9 @@ class DialogTagDetail
                     )}
                   </p>
                 </div>
-
-                <div id="qr">
-                  ${this._qrCode
-                    ? this._qrCode
-                    : html`
-                        <mwc-button @click=${this._generateQR}
-                          >Generate QR code
-                        </mwc-button>
-                      `}
-                </div>
+                ${this._qrCode
+                  ? html` <div id="qr">${this._qrCode}</div> `
+                  : ""}
               `
             : ``}
         </div>
@@ -170,6 +170,11 @@ class DialogTagDetail
     `;
   }
 
+  protected override firstUpdated(changedProps: PropertyValues): void {
+    super.firstUpdated(changedProps);
+    this._generateQR();
+  }
+
   private _valueChanged(ev: CustomEvent) {
     const configValue = (ev.target as any).configValue;
 
@@ -225,6 +230,9 @@ class DialogTagDetail
       {
         width: 180,
         errorCorrectionLevel: "Q",
+        color: {
+          light: "#fff",
+        },
       }
     );
     const context = canvas.getContext("2d");

src/panels/profile/ha-long-lived-access-token-dialog.ts

@@ -65,7 +65,7 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
 
   private async _generateQR() {
     const qrcode = await import("qrcode");
-    const canvas = await qrcode.toCanvas(this._params?.token, {
+    const canvas = await qrcode.toCanvas(this._params!.token, {
       width: 180,
       errorCorrectionLevel: "Q",
     });

yarn.lock

@@ -4016,6 +4016,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/qrcode@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "@types/qrcode@npm:1.4.2"
+  dependencies:
+    "@types/node": "*"
+  checksum: 7ac58687aacc688b83dde43dc349dc42106c6c382b62eb1256e35c6cb7de45e79ef8e917e05b02a81272cd0c1ff21147307244fd57401ba19314851f30636283
+  languageName: node
+  linkType: hard
+
 "@types/qs@npm:*":
   version: 6.9.5
   resolution: "@types/qs@npm:6.9.5"
@@ -9121,6 +9130,7 @@ fsevents@^1.2.7:
     "@types/leaflet-draw": ^1
     "@types/marked": ^2
     "@types/mocha": ^8
+    "@types/qrcode": ^1.4.2
     "@types/sortablejs": ^1
     "@types/webspeechapi": ^0.0.29
     "@typescript-eslint/eslint-plugin": ^4.32.0