Add invite page

rollup.config.js

@@ -1,4 +1,4 @@
-import { parse } from 'path';
+import { parse } from "path";
 import typescript from "@rollup/plugin-typescript";
 import commonjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
@@ -27,6 +27,7 @@ const plugins = (latestBuild) =>
 // Each entrypoint a different build to avoid code reuse across builds
 export default [
   "./src/entrypoints/my-index.ts",
+  "./src/entrypoints/my-invite.ts",
   "./src/entrypoints/my-redirect.ts",
   "./src/entrypoints/my-change-url.ts",
   "./src/entrypoints/my-create-link.ts",

src-11ty/invite.html

@@ -0,0 +1,53 @@
+---
+layout: base_card_with_hero
+javascript_source: my-invite.js
+permalink: "invite/"
+description: Invited to join my Home Assistant instance.
+---
+
+<style>
+  .download-badges {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  @media (max-width: 450px) {
+    .download-badges {
+      flex-direction: column;
+    }
+  }
+</style>
+
+<h1 class="card-header">Welcome to Home Assistant</h1>
+
+<div class="card-content placeholder">
+  <p>
+    You have been invited to join a Home Assistant instance. To accept the
+    invitation, download the Home Assistant application to continue.
+  </p>
+  <p class="download-badges">
+    <a
+      href="https://play.google.com/store/apps/details?id=io.homeassistant.companion.android"
+      ><img
+        class="download-badge"
+        width="200"
+        src="/images/badge-google-play.png"
+        alt="Get it on Google Play"
+    /></a>
+    <a href="https://apps.apple.com/app/home-assistant/id1099568401"
+      ><img
+        class="download-badge"
+        width="175"
+        src="/images/badge-apple-app-store.svg"
+        alt="Download on the App Store"
+    /></a>
+  </p>
+  <p>When the application is installed, click below to accept the invite.</p>
+  <p>
+    <my-invite>Loading...</my-invite>
+  </p>
+  <p>
+    <i>Invitations are currently only supported on the Home Assistant apps.</i>
+  </p>
+</div>

src/components/my-url-input.ts

@@ -1,5 +1,5 @@
-import "@material/web/button/filled-button"
-import "@material/web/textfield/filled-text-field"
+import "@material/web/button/filled-button";
+import "@material/web/textfield/filled-text-field";
 import type { MdFilledTextField } from "@material/web/textfield/filled-text-field";
 import { css, CSSResult, html, LitElement, TemplateResult } from "lit";
 import { customElement, state, query, property } from "lit/decorators.js";
@@ -29,9 +29,9 @@ export class MyUrlInputMain extends LitElement {
           .value=${this.value || DEFAULT_HASS_URL}
           @keydown=${this._handleInputKeyDown}
         ></md-filled-text-field>
-        <md-filled-button
-          @click=${this._handleSave}
-        >${this.value ? "Update" : "Save"}</md-filled-button>
+        <md-filled-button @click=${this._handleSave}
+          >${this.value ? "Update" : "Save"}</md-filled-button
+        >
       </div>
     `;
   }
@@ -54,7 +54,7 @@ export class MyUrlInputMain extends LitElement {
 
     if (value.indexOf("://") === -1) {
       this._textfield.setCustomValidity(
-        "Please enter your full URL, including the protocol part (https://)."
+        "Please enter your full URL, including the protocol part (https://).",
       );
       this._textfield.reportValidity();
       return;

src/entrypoints/my-invite.ts

@@ -0,0 +1,36 @@
+import "@material/web/button/filled-button";
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+const SUPPORTED_PARAMS = ["url"];
+
+const INVITE_URL = new URL("homeassistant://invite");
+// We read params from location.hash instead of location.search, as they
+// won't be sent to the server when the user visits the link.
+const hashParams = new URLSearchParams(location.hash.substring(1));
+const inviteHashParams = new URLSearchParams();
+for (const [key, value] of hashParams.entries()) {
+  if (SUPPORTED_PARAMS.includes(key)) {
+    inviteHashParams.append(key, value);
+  }
+}
+if (inviteHashParams.size > 0) {
+  INVITE_URL.hash = inviteHashParams.toString();
+}
+
+@customElement("my-invite")
+export class MyUrlInputMain extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <a href="${INVITE_URL.toString()}">
+        <md-filled-button>Accept Invite</md-filled-button>
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "my-invite": MyUrlInputMain;
+  }
+}