zulip-desktop/app/renderer/js/pages/preference/find-accounts.ts

import type {HTML} from "../../../../common/html";
import {html} from "../../../../common/html";
import * as t from "../../../../common/translation-util";
import BaseComponent from "../../components/base";
import * as LinkUtil from "../../utils/link-util";

interface FindAccountsProps {
  $root: Element;
}

export default class FindAccounts extends BaseComponent {
  props: FindAccountsProps;
  $findAccounts: Element | null;
  $findAccountsButton: Element | null;
  $serverUrlField: HTMLInputElement | null;
  constructor(props: FindAccountsProps) {
    super();
    this.props = props;
  }

  templateHTML(): HTML {
    return html`
      <div class="settings-card certificate-card">
        <div class="certificate-input">
          <div>${t.__("Organization URL")}</div>
          <input class="setting-input-value" value="zulipchat.com" />
        </div>
        <div class="certificate-input">
          <button class="green w-150" id="find-accounts-button">
            ${t.__("Find accounts")}
          </button>
        </div>
      </div>
    `;
  }

  init(): void {
    this.$findAccounts = this.generateNodeFromHTML(this.templateHTML());
    this.props.$root.append(this.$findAccounts);
    this.$findAccountsButton = this.$findAccounts.querySelector(
      "#find-accounts-button",
    );
    this.$serverUrlField = this.$findAccounts.querySelectorAll(
      "input.setting-input-value",
    )[0] as HTMLInputElement;
    this.initListeners();
  }

  async findAccounts(url: string): Promise<void> {
    if (!url) {
      return;
    }

    if (!url.startsWith("http")) {
      url = "https://" + url;
    }

    await LinkUtil.openBrowser(new URL("/accounts/find", url));
  }

  initListeners(): void {
    this.$findAccountsButton.addEventListener("click", async () => {
      await this.findAccounts(this.$serverUrlField.value);
    });

    this.$serverUrlField.addEventListener("click", () => {
      if (this.$serverUrlField.value === "zulipchat.com") {
        this.$serverUrlField.setSelectionRange(0, 0);
      }
    });

    this.$serverUrlField.addEventListener("keypress", async (event) => {
      if (event.key === "Enter") {
        await this.findAccounts(this.$serverUrlField.value);
      }
    });

    this.$serverUrlField.addEventListener("input", () => {
      if (this.$serverUrlField.value) {
        this.$serverUrlField.classList.remove("invalid-input-value");
      } else {
        this.$serverUrlField.classList.add("invalid-input-value");
      }
    });
  }
}